@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Donasi') }}
@endsection

@section('content')
    <style>
        .dropdown-content {
            display: none;
            padding: 12px;
            border-radius: 5px;
        }
    </style>
    <section class="relative pb-10 pt-20 lg:pt-48">
        <picture class="pointer-events-none absolute inset-x-0 top-0 -z-10 dark:hidden h-full">
            <img src="{{ asset('uploads/landing-page/home/images/' . Helper::homeSetting('heroBg')) }}" alt="gradient"
                class="w-full h-full object-cover" />
        </picture>
        <div class="container py-20">
            <div class="lg:flex tabs-content">
                <div class="lg:w-1/3">
                    <div class="w-full">
                        <div class="tabs-nav">
                            <a href="{{ route('landing.donation', ['tab' => '1']) }}" data-id="1"
                                class="tabs tabs-1 text-xs font-bold uppercase px-5 py-3 shadow-2xl mt-2 rounded-lg block leading-normal text-white bg-accent">
                                <i class="fas fa-space-shuttle text-base mr-1"></i> {{ __('message.Transaksi Donasi') }}
                            </a>
                            <a href="{{ route('landing.donation', ['tab' => '2']) }}" data-id="2"
                                class="tabs tabs-2 text-xs font-bold uppercase px-5 py-3 shadow-2xl mt-2 rounded-lg  block leading-normal text-black bg-light-base">
                                <i class="fas fa-cog text-base mr-1"></i> {{ __('message.FAQ') }}
                            </a>
                        </div>
                    </div>
                </div>
                <section class="w-full sm:pt-2 tab-1 block">
                    <div class="lg:px-10">
                        <h2
                            class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                            {{ __('message.Donasi') }}
                        </h2>
                        <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
                        {{-- <div class="py-10 px-5"> --}}
                        {{-- <p class="font-display text-accent text-2xl text-center">Pilih Bentuk Donasi Anda !</p> --}}
                        {{-- <div class="py-10">
                            <div class="bg-white shadow-2xl py-20 rounded-xl">
                                <div class="flex justify-between  items-center">
                                    <div class="w-1/2">
                                        <div class="flex items-center justify-center">
                                            <img src="{{ asset('landing/img/icdonation.png') }}" class="text-center"
                                                width="" alt="">
                                        </div>
                                    </div>
                                    <div class="w-full text-start px-10">
                                        <p class="text-accent text-xl font-display" style="padding-right: 20px;">
                                            {{ __('message.Donasi dalam bentuk barang') }}
                                        </p>
                                        <p class="py-5" style="padding-right: 20px;">
                                            {{ __('message.Khusus untuk donasi Benda berguna dengan tujuan tertentu.') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                        <div class="py-5">
                            <a href="{{ route('landing.donation.form') }}">
                                <div class="bg-white shadow-2xl py-20 rounded-xl">
                                    <div class="lg:flex justify-between  items-center">
                                        <div class="lg:w-1/2">
                                            <div class="flex items-center justify-center">
                                                <img src="{{ asset('landing/img/icmoney.png') }}" class="text-center"
                                                    width="" alt="">
                                            </div>
                                        </div>
                                        <div class="w-full text-start lg:px-10 px-6">
                                            <p class="text-accent text-xl font-display">
                                                {{ __('message.Donasi dalam bentuk uang') }}
                                            </p>
                                            <p class="py-5">
                                                {{ __('message.Khusus untuk donasi Benda berguna dengan tujuan tertentu.') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        {{-- </div> --}}
                    </div>
                </section>

                <section class="w-full sm:pt-2 tab-2 hidden">
                    <div class="lg:px-10">
                        <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"
                            style="text-align: justify">
                            {{ __('message.FAQ') }}
                        </h2>
                        <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
                        @foreach ($faq as $item)
                            <div class="py-2" style="cursor: pointer;">
                                <div class="bg-white shadow-2xl py-3 rounded-xl">
                                    <div class="w-full text-start px-3">
                                        <!-- Menambahkan class dropdown pada judul -->
                                        <p class="text-accent text-xl font-display dropdown-title">
                                            {{ $item->title }}
                                        </p>
                                        <!-- Menampilkan deskripsi dalam dropdown saat di-klik -->
                                        <div class="dropdown-content">
                                            <p>{{ $item->description }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        {{-- </div> --}}
                    </div>
                </section>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(function() {
            const urlRoute = window.location;
            const urlParams = new URLSearchParams(urlRoute.search);
            const tabValue = (urlParams.get('tab') == null) ? 1 : urlParams.get('tab');
            $('.tabs-nav a').removeClass('text-white bg-accent').addClass('text-black bg-light-base');
            $('.tabs-nav .tabs-' + tabValue).addClass('text-white bg-accent');
            $('.tabs-content section').removeClass('block').addClass('hidden');
            $('.tabs-content .tab-' + tabValue).addClass('block').removeClass('hidden');
        });
        $(".dropdown-title").click(function() {
            $(".dropdown-content").not($(this).next()).slideUp();
            $(this).next().slideToggle();
        });
    </script>
@endsection