@php 
    $donation_projects = [
        [
            'title' => 'Beam - Power Pledge',
            'purpose' => 'SURGERY',
            'description-zh' => '資助一名患兒一個唇顎裂手術費用',
            'description-en' => 'To sponsor 1 child for cleft lip/palate surgery.',
            'price' => 8000
        ],
        [
            'title' => 'Beam - Power Pledge',
            'purpose' => 'MEDICINE',
            'description-zh' => '資助六名患兒醫療藥物及麻醉藥物費用',
            'description-en' => 'To sponsor 6 children for their operation related medicine and anesthesia cost.',
            'price' => 4800
        ],
        [
            'title' => 'Beam - Power Pledge',
            'purpose' => 'THERAPY',
            'description-zh' => '資助兩名患兒語言治療療程費用',
            'description-en' => 'To sponsor 2 children for aftercare speech therapy sessions.',
            'price' => 2000
        ],
        [
            'title' => 'Beam - Power Pledge',
            'purpose' => 'TRANSPORT',
            'description-zh' => '資助兩名患兒及家人在醫院周邊地方住宿及來往醫院交通費用',
            'description-en' => 'To sponsor 2 children and their families’ accommodation near the mission site and transportation fee from hometown to and from the mission site.',
            'price' => 1000
        ],
    ];

    $preset_amounts = [500, 1000, 3000, 5000];
@endphp

<style>
    * {
        user-select: none;
    }

    div[data-flux-main]{
        max-height: calc(100vh - var(--spacing) * 14);
    }

    @media (width >= 64rem) {
        div[data-flux-main]{
            max-height: 100vh;

        }
    }
</style>

<x-layouts::app :title="__('Donation')">
    <div x-data="{ tab : 1 }" class="relative flex max-h-full h-full w-full flex-1 flex-col gap-4 rounded-xl">
        <div><span class='text-2xl'>Power Pledge / 捐款</span></div>
        <div>Donations for Beam International Foundation have raised a total of<span class='text-2xl'> {{ $total_donation }} HKD</span></div>

        {{-- <div class="grid auto-rows-min gap-2 grid-cols-3 *:text-center">
            <button @click="tab = 1" 
                    x-bind:class="tab == 1 ? 'bg-black text-white dark:bg-white dark:text-black' : ''"
                    class="flex flex-col relative rounded-xl border border-neutral-200 dark:border-neutral-700 p-4">
                按金額捐款
            </button>
            <button @click="tab = 0" 
                    x-bind:class="tab == 0 ? 'bg-black text-white dark:bg-white dark:text-black' : ''"
                    class="flex flex-col relative rounded-xl border border-neutral-200 dark:border-neutral-700 p-4">
                按項目捐款
            </button>
        </div> --}}

        <div class="relative h-full max-h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 bg-gray-100 dark:bg-transparent">
            <div class="h-full overflow-auto">
                <div class="flex flex-col gap-4 p-4 h-fit gap-5">
                    <div id='amount-based' 
                         {{-- x-show="tab==1"  --}}
                         class="grid auto-rows-min gap-4 grid-cols-2" x-data="{ my_donate: 1000 }">
                        <flux:card class="col-span-full relative flex flex-col rounded-xl border border-neutral-200 dark:border-neutral-700 px-10 py-6 gap-4 justify-center items-center">
                            <form class='flex flex-col gap-4' action="{{ route('donation.create') }}" method="POST">
                                @csrf
                                <input class='hidden' type='text' name='name' value='Beam - Power Pledge'/>
                                <input class='hidden' type='text' name='description' value='Donation in Beam Gala Dinner 2026'/>
                                <flux:heading size="lg" class='text-center'>請輸入捐贈金額</flux:heading>
                                <div>
                                    <input class='max-w-[190px] text-right mt-3 text-left text-3xl px-2 py-0 border-b border-solid border-b-zinc-500' type="number" name='price' min="0" x-model.number="my_donate"/> HKD
                                </div>
                                <flux:button type='submit' x-bind:disabled="my_donate <= 0" variant="primary">Donate</flux:button>
                            </form>
                        </flux:card>

                        @foreach ($preset_amounts as $amt)
                            <form class='flex flex-col' action="{{ route('donation.create') }}" method="POST">
                                @csrf
                                <input class='hidden' type='number' name='price' value='{{ $amt }}'/>
                                <input class='hidden' type='text' name='name' value='Beam - Power Pledge'/>
                                <input class='hidden' type='text' name='description' value='Donation in Beam Gala Dinner 2026'/>
                                <flux:button type='submit' class="relative overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 p-4 py-8">
                                    <span class='count text-xl font-bold'>{{ $amt }} HKD</span>
                                </flux:button >
                            </form>
                        @endforeach

                    </div>

                    <div id='project-based' 
                         {{-- x-show="tab==0"  --}}
                         class="grid auto-rows-min gap-4 grid-cols-1 xl:grid-cols-2">
                        <flux:heading size='lg' class='text-center xl:col-span-full'>按項目捐款</flux:heading>
                        @foreach ($donation_projects as $k => $p)
                        <flux:card class="relative overflow-hidden flex flex-col text-center items-center justify-center sm:text-left sm:justify-start sm:grid sm:grid-cols-[200px_auto] gap-5 rounded-xl border border-neutral-200 dark:border-neutral-700 p-4 py-6">
                            <div class='aspect-[1/1] max-w-[220px]'>
                                <img class='rounded-xl' src="{{ URL::asset('assets/donation/'.($k + 1).'.jpeg') }}"/>
                            </div>
                            <form class='flex flex-col' action="{{ route('donation.create') }}" method="POST">
                                @csrf
                                <input class='hidden' type='number' name='price' value='{{ $p['price'] }}'/>
                                <input class='hidden' type='text' name='name' value='{{ $p['title'] }}'/>
                                <input class='hidden' type='text' name='purpose' value='{{ $p['purpose'] }}'/>
                                <input class='hidden' type='text' name='description' value='{{ $p['description-en'] }}'/>
                                <flux:text size="lg">{{ $p['description-zh'] }}</flux:text>
                                <flux:text size="lg" class='mb-3'>{{ $p['description-en'] }}</flux:text>
                                <flux:text variant="strong" class='grow count text-2xl font-bold'>{{ $p['price'] }} HKD</flux:text>
                                <flux:button variant="primary" color='amber' class='mt-4 w-fit mx-auto sm:mx-0' type='submit'>Donate</flux:button>
                            </form>
                        </flux:card >
                        @endforeach
                    </div>

                </div>
            </div>
        </div>
    </div>
</x-layouts::app>