@extends('frontend.template-frontend')
{{-- Meta Tags --}}
@section('title', 'Pembayaran Derma | Amal Prihatin Sabah')
@section('meta_description', 'Selesaikan pembayaran derma anda dengan selamat menggunakan ToyyibPay. Jumlah derma: RM '
    . number_format($valueCharity, 2))
@section('meta_keywords', 'derma, pembayaran, toyyibpay, amal, masjid, sumbangan')

{{-- Open Graph --}}
@section('og_title', 'Pembayaran Derma')
@section('og_description',
    'Derma anda sebanyak RM ' .
    number_format($valueCharity, 2) .
    ' untuk kempen Amal Prihatin Sabah.')
@section('og_image', asset($data->cover ?? 'assets/default-cover.jpg'))

{{-- Twitter Card --}}
@section('twitter_title', 'Pembayaran Derma')
@section('twitter_description',
    'Derma anda sebanyak RM ' .
    number_format($valueCharity, 2) .
    ' untuk kempen Amal Prihatin Sabah.')
@section('twitter_image', asset($data->cover ?? 'assets/default-cover.jpg'))

@section('content')
    <section class="sm:pt-20 pt-20">
        <div class="max-w-xl w-full mx-auto">
            <div class="mt-4">
                <div class="border-2 bg-white w-full p-7 rounded-md">
                    <div class="">
                        <h1 class="text-lg font-semibold">Pembayaran</h1>
                        <span class="text-base">Pilih kaedah pembayaran yang anda inginkan</span>
                    </div>
                    <hr class="mb-5 mt-5">
                    <div class="mt-2">
                        <h4 class="text-base font-semibold">Jumlah Derma</h4>
                    </div>
                    <div class="relative w-full mt-3">
                        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                            <h4 class="font-bold text-gray-400">RM</h4>
                        </div>
                        <div class="flex gap-4">
                            <input type="text" id="simple-search"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-orange-500 focus:border-orange-500 block w-full ps-11 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500"
                                value="{{ number_format($valueCharity, 2) }}">
                            <button
                                class="bg-orange-400 text-white hover:bg-orange-500 transition duration-300 px-8 py-2 rounded-md">Ubah</button>
                        </div>
                    </div>
                    <div class="mt-3">
                        <h4 class="font-semibold">
                            Samarkan nama saya
                        </h4>
                        <span class="text-gray-400">*Ini adalah untuk mencegah nama anda disenaraikan di senarai penderma
                            masa
                            <input type="hidden" name="hiddenName" id="hiddenName">
                            ini. Pilihan anda tidak
                            megubah apa-apa di profil akaun anda.</span>

                        <div class="grid grid-cols-1 mt-4 gap-4">
                            <button id="btnYes" onclick="setName(1)"
                                class="bg-transparent border-2 sm:text-base text-xs sm:px-5 py-2 rounded-md hover:bg-gray-50 transition-colors duration-200">Ya,
                                samarkan nama
                                saya</button>
                            <button id="btnNo" onclick="setName(0)"
                                class="bg-transparent border-2 sm:text-base text-xs sm:px-5 py-2 rounded-md hover:bg-gray-50 transition-colors duration-200">Tidak,
                                jangan samarkan
                                nama saya</button>
                        </div>

                        <div class="mt-5">
                            <label for="prayerMessage" class="font-semibold">Doa & Harapan (Jika ada)</label>
                            <textarea id="prayerMessage" name="pesan" rows="4" placeholder="Type here..."
                                class="block mt-2 p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500"></textarea>
                        </div>

                        <div class="mt-5">
                            <div class="border-2 p-4 rounded-md">
                                <div class="flex justify-between">
                                    <h4>Kredit semasa Anda</h4>
                                    <h4 class="text-xl">RM.{{ number_format($uang_user / 100, 2) }}</h4>
                                </div>
                                <div class="flex justify-between mt-2">
                                    <h4>Jumlah Derma</h4>
                                    <h4 class="text-xl">RM.{{ number_format($valueCharity, 2) }}</h4>
                                </div>
                                <hr class="mt-3 mb-3  rounded-full">
                            </div>
                        </div>
                        @php
                            $enId = $kempenId;
                        @endphp
                        <div class="grid mt-4">
                            <button onclick="storePrayerMessage(); createToyyibPayBill();"
                                class="border-2 p-4 rounded-md border-orange-400 text-md font-semibold text-orange-500 hover:bg-orange-200 transition">
                                Derma dengan ToyyibPay
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        var hiddenNameValue = null;
        var prayerMessageValue = null;
        var enId = "{{ $enId }}";
        var valueCharity = "{{ $valueCharity }}";

        function setName(value) {
            document.getElementById('hiddenName').value = value;
            hiddenNameValue = value;

            var btnYes = document.getElementById('btnYes');
            var btnNo = document.getElementById('btnNo');

            // Reset state
            btnYes.className =
                'bg-transparent border-2 sm:text-base text-xs sm:px-5 py-2 rounded-md hover:bg-gray-50 transition-colors duration-200';
            btnNo.className =
                'bg-transparent border-2 sm:text-base text-xs sm:px-5 py-2 rounded-md hover:bg-gray-50 transition-colors duration-200';

            // Active state
            if (value == 1) {
                btnYes.className =
                    'bg-orange-500 text-white border-2 border-orange-500 sm:text-base text-xs sm:px-5 py-2 rounded-md hover:bg-orange-600 transition-colors duration-200';
            } else {
                btnNo.className =
                    'bg-orange-500 text-white border-2 border-orange-500 sm:text-base text-xs sm:px-5 py-2 rounded-md hover:bg-orange-600 transition-colors duration-200';
            }
        }

        function storePrayerMessage() {
            prayerMessageValue = document.getElementById('prayerMessage').value;
        }

        function createToyyibPayBill() {
            // pastikan value terbaru disimpan
            storePrayerMessage();

            var customerName = "{{ auth()->user()->name ?? 'Anonymous' }}";
            var customerEmail = "{{ auth()->user()->email ?? 'anonymous@example.com' }}";
            var customerPhone = "{{ auth()->user()->phone ?? '0123456789' }}";

            var billData = {
                bill_name: "Derma untuk {{ $data->title ?? 'Kempen' }}",
                bill_description: prayerMessageValue || "Derma untuk kempen",
                amount: parseFloat(valueCharity.replace(/,/g, '')),
                kempenId: enId,
                hidden_name: hiddenNameValue, // ✅ masukkan pilihan samarkan nama
                prayer_message: prayerMessageValue, // ✅ masukkan doa & harapan
                customer_name: customerName,
                customer_email: customerEmail,
                customer_phone: customerPhone,
                _token: "{{ csrf_token() }}"
            };

            var button = event.target;
            var originalText = button.innerHTML;
            button.innerHTML = 'Memproses...';
            button.disabled = true;

            fetch('/toyyibpay/create-bill', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(billData)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.location.href = data.payment_url;
                    } else {
                        alert('Error: ' + data.message);
                        button.innerHTML = originalText;
                        button.disabled = false;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Terjadi kesalahan. Sila cuba lagi.');
                    button.innerHTML = originalText;
                    button.disabled = false;
                });
        }
    </script>

@endsection