@extends('layouts.landingPage.master')

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

@section('content')
    <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="flex">
                {{-- <div class="w-1/3">
                    <div class="w-full">
                        <div class="tabs-nav">
                            <a href="#tab1"
                                class="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="#tab2"
                                class="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> --}}
                <div class="w-full">
                    <div class="px-0 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="">
                            {{-- <p class="font-display text-accent text-2xl text-center">Silahkan Isi Identitas Anda !</p> --}}
                                                        <div class="">
                                <div class="bg-white shadow-2xl px-5 lg:px-10 py-10 rounded-2xl">
                                    <p class="text-base font-display text-accent text-left">
                                        {{ __('message.Silahkan Isi Identitas Anda!') }}</p>

                                    <form action="{{ route('landing.donation.payment') }}" enctype="multipart/form-data"
                                        method="POST">
                                        @csrf
                                        <div class="w-full py-2 px-2">
                                            <select name="rutinitas" class="w-full rounded-xl" id="rutinitas" required>
                                                <option value="1">
                                                    {{ __('message.Donasi Sekali dalam Transaksi') }}
                                                </option>
                                                <option value="2">
                                                    {{ __('message.Donasi dengan Rutinitas Bulanan') }}
                                                </option>
                                                <option value="3">
                                                    {{ __('message.Donasi dengan Rutinitas Tahunan') }}
                                                </option>
                                            </select>
                                            <div style="padding: 5px;">
                                                <strong id="selectedOption">
                                                    {{ __('message.* Rutinitas donasi dilakukan hanya sekali dalam setiap transaksi, dan jika ingin donasi kembali silahkan buka menu donasi kembali.') }}
                                                </strong>
                                            </div>
                                        </div>

                                        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
                                        <script>
                                            $(document).ready(function() {
                                                $("#rutinitas").change(function() {
                                                    var selectedValue = $(this).val();
                                                    if (selectedValue === "1") {
                                                        $("#selectedOption").text(
                                                            "{{ __('message.* Rutinitas donasi dilakukan hanya sekali dalam setiap transaksi, dan jika ingin donasi kembali silahkan buka menu donasi kembali.') }}"
                                                        );
                                                    } else if (selectedValue === "2") {
                                                        $("#selectedOption").text(
                                                            "{{ __('message.* Tiap bulannya anda akan memberikan donasi secara langsung. anda akan menerima notifikasi email untuk donasi bulanan ini.') }}"
                                                        );
                                                    } else if (selectedValue === "3") {
                                                        $("#selectedOption").text(
                                                            "{{ __('message.* Tiap tahunnya anda akan memberikan donasi secara langsung. anda akan menerima notifikasi email untuk donasi tahunan ini.') }}"
                                                        );
                                                    }
                                                });
                                            });
                                        </script>

                                        <div class="flex flex-wrap">
                                            <div class="w-full lg:w-1/2 py-2 px-2">
                                                <label for="" style="font-weight: bold">{{ __('message.Nama Lengkap / Nama Perusahaan') }}</label>
                                                <input type="text" name="name" class="w-full rounded-xl"
                                                    placeholder="{{ __('message.Nama Lengkap / Nama Perusahaan') }}"
                                                    value="{{ Auth::user() ? Auth::user()->name : '' }}" required>
                                            </div>
                                            <div class="w-full lg:w-1/2 py-2 px-2">
                                                <label for="" style="font-weight: bold">Email</label>
                                                <input type="email" name="payer_email" class=" w-full rounded-xl"
                                                    placeholder="Email"
                                                    value="{{ Auth::user() ? Auth::user()->email : '' }}" required>
                                            </div>
                                        </div>

                                        <div class="w-full py-2 px-2">
                                            <label for="" style="font-weight: bold">{{ __('message.No Handphone') }}</label>
                                            <input type="number" name="contact" class=" w-full rounded-xl"
                                                placeholder="{{ __('message.No Handphone') }}"
                                                value="{{ Auth::user() ? Auth::user()->phone_number : '' }}" required>
                                        </div>
                                        <div class="w-full py-2 px-2">
                                            <label for="" style="font-weight: bold">{{ __('message.Alamat Lengkap') }}</label>
                                            <textarea type="text" name="address" class=" w-full rounded-xl" rows="3" placeholder="{{ __('message.Alamat Lengkap') }}" required></textarea>
                                        </div>

                                        <p class="font-display text-accent text-left">
                                            {{ __('message.Silahkan Isi Jumlah Donasi Anda!') }}</p>

                                        <div class="flex flex-wrap">
                                            <div class="w-full lg:w-1/3 px-2 py-2">
                                                <button type="button" onclick="changeButtonStyle(this)"
                                                    class="w-full text-accent font-display text-center border rounded-lg mx- py-2"
                                                    value="50000">Rp.50.000</button>
                                            </div>
                                            <div class="w-full lg:w-1/3 px-2 py-2">
                                                <button type="button" onclick="changeButtonStyle(this)"
                                                    class="w-full text-accent font-display text-center border rounded-lg mx- py-2"
                                                    value="100000">Rp.100.000</button>
                                            </div>
                                            <div class="w-full lg:w-1/3 px-2 py-2">
                                                <button type="button" onclick="changeButtonStyle(this)"
                                                    class="w-full text-accent font-display text-center border rounded-lg mx- py-2"
                                                    value="200000">Rp.200.000</button>
                                            </div>
                                            <div class="w-full lg:w-1/3 px-2 py-2">
                                                <button type="button" onclick="changeButtonStyle(this)"
                                                    class="w-full text-accent font-display text-center border rounded-lg mx- py-2"
                                                    value="300000">Rp.300.000</button>
                                            </div>
                                            <div class="w-full lg:w-1/3 px-2 py-2">
                                                <button type="button" onclick="changeButtonStyle(this)"
                                                    class="w-full text-accent font-display text-center border rounded-lg mx- py-2"
                                                    value="400000">Rp.400.000</button>
                                            </div>
                                            <div class="w-full lg:w-1/3 px-2 py-2">
                                                <button type="button" onclick="changeButtonStyle(this)"
                                                    class="w-full text-accent font-display text-center border rounded-lg mx- py-2"
                                                    value="500000">Rp.500.000</button>
                                            </div>

                                            <script>
                                                function changeButtonStyle(clickedButton) {

                                                    $('input[name="amount"]').val(clickedButton.value);

                                                    clickedButton.classList.remove('text-accent', 'bg-accent', 'text-white');
                                                    clickedButton.classList.toggle('bg-accent');
                                                    clickedButton.classList.toggle('text-white');

                                                    var buttons = document.querySelectorAll('.flex-wrap button');
                                                    buttons.forEach(function(button) {
                                                        if (button !== clickedButton) {
                                                            button.classList.remove('text-accent', 'bg-accent', 'text-white');
                                                        }
                                                    });
                                                }
                                            </script>
                                        </div>

                                        <div class="w-full py-2 px-2">
                                            <p class="text-jacarta-700 font-display py-2">
                                                {{ __('message.Atau Isi Nominal') }}</p>
                                            <input type="number" name="amount" class="w-full rounded-xl " placeholder="0"
                                                required>
                                        </div>

                                        <div class="w-full py-2 px-2">
                                            <p class="text-jacarta-700 font-display py-2">
                                                {{ __('message.Pilih Jenis Donasi Anda!') }}</p>
                                            <select name="jenis_donasi" class="w-full rounded-xl" id="jenis_donasi" required>
                                                <option value="Donasi untuk penguatan Organisasi Pertapindo">
                                                    {{ __('message.Donasi untuk penguatan Organisasi Pertapindo') }}
                                                </option>
                                                <option value="Donasi untuk Keberlangsungan Event">
                                                    {{ __('message.Donasi untuk Keberlangsungan Event') }}
                                                </option>
                                                <option value="Donasi untuk Layanan Masyarakat">
                                                    {{ __('message.Donasi untuk Layanan Masyarakat') }}
                                                </option>
                                            </select>
                                            <div style="padding: 5px;">
                                                <strong id="selectedOptionJenisDonasi">
                                                    {{ __('message.* Khusus biaya untuk penguatan organisasi Pertapindo.') }}
                                                </strong>
                                            </div>
                                        </div>

                                        <script>
                                            $(document).ready(function() {
                                                $("#jenis_donasi").change(function() {
                                                    var selectedValue = $(this).val();
                                                    if (selectedValue === "1") {
                                                        $("#selectedOptionJenisDonasi").text(
                                                            "{{ __('message.* Khusus biaya untuk penguatan organisasi Pertapindo.') }}"
                                                        );
                                                    } else if (selectedValue === "2") {
                                                        $("#selectedOptionJenisDonasi").text(
                                                            "{{ __('message.* Khusus biaya untuk kelancaran event yang akan diadakan.') }}"
                                                        );
                                                    } else if (selectedValue === "3") {
                                                        $("#selectedOptionJenisDonasi").text(
                                                            "{{ __('message.* Khusus biaya untuk membantu masyarakat yang terkena musibah.') }}"
                                                        );
                                                    }
                                                });
                                            });
                                        </script>

                                        <div class="w-full py-2 px-2">
                                            <textarea type="text" name="description" class=" w-full rounded-xl" rows="3"
                                                placeholder="Pesan dan Harapan anda" required></textarea>
                                        </div>

                                        <div class="w-full py-2">
                                            <div class="form-floating px-3">
                                                <div class="g-recaptcha" data-sitekey="{{ Helper::getGoogleKey() }}">
                                                </div>
                                            </div>
                                        </div>
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror

                                        <div class="py-2">
                                            <div class="flex w-full text-center">
                                                <button type="submit"
                                                    class="w-full bg-accent text-white px-10 py-3 rounded-xl">
                                                    {{ __('message.Pilih Metode Pembayaran') }}
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            {{-- <div class="py-5">
                                <p class="font-display text-accent text-xl">Kembali</p>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection