@extends('frontend.template-frontend')
{{-- di atas @section('content') --}}
@section('title', $data->judul . ' | Amal Prihatin Sabah')
@section('meta_description', Str::limit(strip_tags($data->deskripsi), 160))
@section('meta_keywords', $data->category->name . ', donasi, kempen, amal, masjid')
@section('og_title', $data->judul)
@section('og_description', Str::limit(strip_tags($data->deskripsi), 160))
@section('og_image', asset($data->cover))
@section('twitter_title', $data->judul)
@section('twitter_description', Str::limit(strip_tags($data->deskripsi), 160))
@section('twitter_image', asset($data->cover))

@section('content')
    <section class="justify-center flex mt-24 p-3">
        <div class="flex gap-10 sm:max-w-6xl flex-wrap sm:flex-nowrap md:flex-nowrap sm:ms-28 ms-0">
            <div class="w-full">
                <img class="sm:h-72 w-screen object-cover rounded-lg" src="{{ asset($data->cover) }}" alt="image description">
                <h4 class="sm:text-2xl mt-3 text-base font-medium">{{ $data->judul }}</h4>
                <div class="flex mt-3 gap-3">
                    <span
                        class="bg-orange-100 sm:px-7 px-5 rounded-md py-1 text-orange-400 text-xs">{{ $data->category->name }}</span>
                </div>
                <div class="mt-6">
                    <h1 class="sm:text-xl mb-3 text-base font-medium">Pengumpul Dana</h1>
                    <div class="border bg-white p-4 rounded-[8px]">
                        <div class="grid">
                            <div class="flex gap-4">
                                <div class="block">
                                    <div class="rounded-full overflow-hidden h-14 w-14">
                                        @if ($data->pengumpul_dana->photo)
                                            <img src="{{ $data->pengumpul_dana->photo }}" alt=""
                                                class="w-full h-full object-contain">
                                        @else
                                            image not found
                                        @endif
                                    </div>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-600 ">{{ $data->pengumpul_dana->name }} </h4>
                                    <span class="text-light text-xs mt-2">
                                        <span id="alamat-short">{{ Str::limit($data->pengumpul_dana->alamat, 50) }}</span>
                                        <span id="alamat-full" class="hidden">{{ $data->pengumpul_dana->alamat }}</span>
                                        <span id="lihat-selengkapnya"
                                            class="text-orange-400 font-semibold underline cursor-pointer"
                                            onclick="toggleAlamat()">Lihat Selengkapnya</span>
                                    </span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            {{--  --}}
            <div class="w-full max-w-xl">
                <div class="max-w-sm bg-white border-2 border-gray-200 rounded-md dark:bg-gray-800 dark:border-gray-700">
                    <div class="py-2 px-4 mt-2">
                        <h5 class="mb-2 text-md tracking-tight text-gray-900 dark:text-white">
                            Masukkan Jumlah</h5>
                        <div class="grid gap-4">
                            <button onclick="setCharity(10)"
                                class="bg-white border-2 border-gray-300 px-4 py-2 rounded-md hover:bg-gray-50">
                                <div class="flex">
                                    😊
                                    RM 10
                                </div>
                            </button>
                            <button onclick="setCharity(35)"
                                class="bg-white border-2 border-gray-300 px-4 py-2 rounded-md hover:bg-gray-50">
                                <div class="flex">
                                    🤗
                                    RM 35
                                </div>
                            </button>
                            <button onclick="setCharity(45)"
                                class="bg-white border-2 border-gray-300 px-4 py-2 rounded-md hover:bg-gray-50">
                                <div class="flex">
                                    🥰
                                    RM 45
                                </div>
                            </button>
                            <button onclick="setCharity(50)"
                                class="bg-white border-2 border-gray-300 px-4 py-2 rounded-md hover:bg-gray-50">
                                <div class="flex">
                                    😍
                                    RM 50
                                </div>
                            </button>
                        </div>
                        <div class="text-center mt-5">
                            <div class="border-t rounded-full border-gray-400 w-2/5 inline-block mb-1"></div>
                            <span class="mx-2 text-gray-500">Atau</span>
                            <div class="border-t rounded-full border-gray-400 w-2/5 inline-block mb-1"></div>
                        </div>
                        @php
                            $enId = $data->id;
                        @endphp
                        <div class="mt-5">
                            <form method="post"
                                action="/detail-kempen/detail-donasi/detail-pembayaran/{{ $enId }}">
                                @csrf
                                <h4 class="text-sm">Tentukan Jumlah Anda</h4>
                                <div class="relative w-full mt-2">
                                    <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                                        <span class="text-gray-400">RM</span>
                                    </div>
                                    <input name="valueCharity" type="text" id="valueCharity"
                                        class="bg-gray-50 border-2 border-gray-300 text-gray-900 text-sm rounded-md focus:ring-orange-500 focus:border-orange-500 block w-full ps-10 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">
                                </div>
                        </div>
                        <div class="mt-3 mb-4 grid">
                            <button class="bg-orange-400 text-white py-2 rounded-md hover:bg-orange-300 transition">Pilih
                                kaedah
                                pembayaran</button>
                        </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <script>
        function setCharity(value) {
            // Update the valueCharity input field
            document.getElementById('valueCharity').value = value;
        }

        function toggleAlamat() {
            const alamatShort = document.getElementById('alamat-short');
            const alamatFull = document.getElementById('alamat-full');
            const toggleBtn = document.getElementById('lihat-selengkapnya');

            if (alamatFull.classList.contains('hidden')) {
                // Show full address
                alamatShort.classList.add('hidden');
                alamatFull.classList.remove('hidden');
                toggleBtn.textContent = 'Sembunyikan';
            } else {
                // Show short address
                alamatFull.classList.add('hidden');
                alamatShort.classList.remove('hidden');
                toggleBtn.textContent = 'Lihat Selengkapnya';
            }
        }
    </script>

    <script>
        // Clear localStorage if user successfully reached donation page after login redirect
        document.addEventListener('DOMContentLoaded', function() {
            @if (session('clear_intended_url'))
                console.log('Login redirect successful, clearing intended_url from localStorage');
                localStorage.removeItem('intended_url');
                console.log('LocalStorage cleared');
            @endif

            // Also clear if localStorage still contains intended_url (fallback)
            if (localStorage.getItem('intended_url')) {
                console.log('Fallback: Clearing intended_url from localStorage');
                localStorage.removeItem('intended_url');
            }
        });
    </script>
@endsection