@extends('layouts.frontend.master')

@section('title', $event->name . ' - Event Details')
@push('css')
    <link rel="stylesheet" href="{{ asset('frontend/css/event.css') }}">
@endpush
@section('content')
    <!-- Hero Section with Banner Image -->
    <main class="container mx-auto px-4 py-2">
        <form action="{{ route('event.confirm-reservation',encrypt($event->id)) }}" method="post">
            @csrf
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Main Content Column -->
                <div class="lg:col-span-2">
                    <!-- Alumni Login/Info Section -->
                    <div>
                        <div class="section-card p-8 mb-8">
                            <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-3">Event Details</h2>

                            {{-- Event Name (full width) --}}
                            <div class="mb-6">
                                <span class="text-lg font-semibold text-gray-700 mb-2 block">
                                    <i class="fas fa-info-circle mr-2 text-blue-500"></i> Event Name
                                </span>
                                <p class="text-lg text-gray-800">
                                    {{ $event->name ?? '' }}
                                </p>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                {{-- Venue (left side) --}}
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-700 mb-2">
                                        <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> Venue
                                    </h3>
                                    <p class="text-gray-600">
                                        {{ $event->venue ?? '' }}
                                    </p>
                                </div>

                                {{-- Category (right side) --}}
                                @if($event->category)
                                    <div>
                                        <h3 class="text-lg font-semibold text-gray-700 mb-2">
                                            <i class="fas fa-tags mr-2 text-blue-500"></i> Category
                                        </h3>
                                        <p class="text-gray-600">{{ $event->category ?? '' }}</p>
                                    </div>
                                @endif

                                {{-- Date & Time (left side) --}}
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-700 mb-2">
                                        <i class="fas fa-calendar-alt mr-2 text-blue-500"></i> Date & Time
                                    </h3>
                                    @php
                                        $futureDates = $event->dates->filter(function($e) {
                                            return isset($e->end_date_time) && \Carbon\Carbon::parse($e->end_date_time)->isFuture();
                                        });

                                        if($futureDates->count() > 0){
                                            $firstStart = \Carbon\Carbon::parse($futureDates->first()->start_date_time);
                                            $lastEnd = \Carbon\Carbon::parse($futureDates->last()->end_date_time);
                                        }
                                    @endphp

                                    @if(isset($firstStart) && isset($lastEnd))
                                        <p class="text-sm text-gray-600">
                                            @if($firstStart->isSameDay($lastEnd))
                                                {{ $firstStart->format('M j, Y') }}
                                                ({{ $firstStart->format('g:i A') }} - {{ $lastEnd->format('g:i A') }})
                                            @else
                                                {{ $firstStart->format('M j, Y g:i A') }} - {{ $lastEnd->format('M j, Y g:i A') }}
                                            @endif
                                        </p>
                                    @endif
                                </div>

                                {{--last_payment_date (right side)--}}
                                @if($event->last_payment_date)
                                    <div>
                                        <h3 class="text-lg font-semibold text-gray-700 mb-2">
                                            <i class="fas fa-calendar-alt mr-2 text-blue-500"></i> Last Payment Date
                                        </h3>
                                        <p class="text-gray-600">
                                            <span class="badge-warning px-2">
                                                {{ $event->last_payment_date? \Carbon\Carbon::parse($event->last_payment_date)->format('M j, Y g:i A') : 'Not specified' }}
                                            </span>
                                        </p>
                                    </div>
                                @endif

                                {{-- Highlights (right side) --}}
                                @if(!empty($event->highlights))
                                    <div>
                                        <h3 class="text-lg font-semibold text-gray-700 mb-2">
                                            <i class="fas fa-star mr-2 text-blue-500"></i> Highlights
                                        </h3>
                                        <ul class="list-disc list-inside text-gray-600">

                                            @foreach($event->highlights as $highlight)
                                                <li>{{ $highlight ?? '' }}</li>
                                            @endforeach

                                        </ul>
                                    </div>
                                @endif
                            </div>

                            {{-- Expected Attendees (full width) --}}
                            @if(!empty($event->expected_attendees))
                                <div class="mb-6">
                                    <h3 class="text-lg font-semibold text-gray-700 mb-2">
                                        <i class="fas fa-users mr-2 text-blue-500"></i> Expected Attendees
                                    </h3>
                                    <p class="text-gray-600">
                                        {{ $event->expected_attendees ?: 'Not specified' }}
                                    </p>
                                </div>
                            @endif

                            {{-- Description (full width) --}}
                            @if(!empty($event->description))
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-700 mb-2">
                                        <i class="fas fa-info-circle mr-2 text-blue-500"></i> Description
                                    </h3>
                                    <p class="text-gray-600">
                                        {!! $event->description ?: 'Not specified' !!}
                                    </p>
                                </div>
                            @endif
                        </div>




                        @if($event->last_payment_date && $event->last_payment_date > now())

                            <!-- Registration Form -->
                            <div class="section-card p-4 mb-8">
                                <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b">Event Registration Options</h2>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                                    {{-- Alumni --}}
                                    @auth
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-700 mb-2">
                                                <i class="fas fa-user-graduate mr-2 text-blue-500"></i> Alumni Registration
                                            </h3>
                                            <p class="text-gray-600">For BAU 2001-2002 Alumni already registered</p>
                                            <div class="mt-4">
                                                <label class="inline-flex items-center">
                                                    <input type="radio" name="registrationType" value="alumni" class="h-4 w-4 text-blue-600" checked>
                                                    <span class="ml-2 text-gray-700">Select this option</span>
                                                </label>
                                            </div>

                                            {{-- Alumni Section (only show Sign in if not logged in) --}}

                                        </div>
                                    @else
                                        <div id="alumniLoginSection" class="mt-4">
                                            <a href="{{ route('login') }}" class="btn-primary text-white font-bold py-2 px-4 rounded-lg text-center" style="display: unset">
                                                As Alumni You Need to Sign in
                                            </a>
                                        </div>
                                    @endauth

                                    {{-- Guest --}}
                                    @if ($event->is_guest_allowed)
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-700 mb-2">
                                                <i class="fas fa-user-friends mr-2 text-blue-500"></i> Guest Registration
                                            </h3>
                                            <p class="text-gray-600">For guests invited by organizer and have the Guest ID</p>
                                            <div class="mt-4">
                                                <label class="inline-flex items-center">
                                                    <input type="radio" name="registrationType" value="guest" class="h-4 w-4 text-blue-600" />
                                                    <span class="ml-2 text-gray-700">Select this option</span>
                                                </label>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                {{-- Guest Info --}}
                                @if ($event->is_guest_allowed)
                                    <div id="guestInfoSection" class="hidden">
                                        <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-3">Guest Information</h2>
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                            {{-- Guest fields as before --}}
                                            <div>
                                                <label for="guestName" class="block text-gray-700 font-medium mb-2">
                                                    Guest Name <x-required/>
                                                </label>
                                                <input type="text" id="guestName" name="guest_name"
                                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                />
                                            </div>
                                            <div>
                                                <label for="guestPhone" class="block text-gray-700 font-medium mb-2">
                                                    Cell Number <x-required/>
                                                </label>
                                                <input type="tel" id="guestPhone" name="guest_phone"
                                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                />
                                            </div>
                                            <div>
                                                <label for="guestEmail" class="block text-gray-700 font-medium mb-2">
                                                    Email Address <x-required/>
                                                </label>
                                                <input type="email" id="guestEmail" name="guest_email"
                                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                />
                                            </div>
                                            <div>
                                                <label for="guest_invitation_otp" class="block text-gray-700 font-medium mb-2">Invitation OTP</label>
                                                <input type="text" id="guest_invitation_otp" name="guest_invitation_otp"
                                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                />
                                            </div>
                                            <div>
                                                <label for="guestJobTitle" class="block text-gray-700 font-medium mb-2">
                                                    Job Title/Designation <x-required/>
                                                </label>
                                                <input type="text" id="guestJobTitle" name="guest_job_title"
                                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                />
                                            </div>
                                            <div>
                                                <label for="guestOrganization" class="block text-gray-700 font-medium mb-2">
                                                    Organization <x-required/>
                                                </label>
                                                <input type="text" id="guestOrganization" name="guest_organization"
                                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                />
                                            </div>
                                            <div>
                                                <label for="guest_purpose_for_attending" class="block text-gray-700 font-medium mb-2">
                                                    Purpose for Attending
                                                </label>
                                                <textarea id="guest_purpose_for_attending" rows="2" name="guest_purpose_for_attending"
                                                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                          placeholder="Why are you attending this event?"></textarea>
                                            </div>
                                            <div>
                                                <label for="guestComments" class="block text-gray-700 font-medium mb-2">
                                                    Comments
                                                </label>
                                                <textarea id="guestComments" rows="2" name="guest_comments"
                                                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                          placeholder="Any additional comments"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>


                            <div class="section-card p-8">
                                <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-3">Registration Form</h2>

                                <div class="mt-8">
                                    <div class="mb-8">
                                        <h3 class="text-xl font-semibold text-gray-800">Day-Based Participation</h3>
                                        <p class="text-gray-600 mb-4">Select your preferred participation duration:</p>

                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                                            @php
                                                $full_reservation_offers = [];
                                                $total_fee_member = 0;
                                                $total_fee_guest = 0;
                                                foreach ($event->dates as $day) {
                                                    if (!empty($day->day_offer)) {
                                                        $full_reservation_offers = array_merge($full_reservation_offers,
                                                            array_map('trim',
                                                                explode(',', $day->day_offer)
                                                            )
                                                        );
                                                    }
                                                    $total_fee_member += (int)$day->fee;
                                                    $total_fee_guest += (int)$day->other_guest_fee;
                                                }
                                                $full_reservation_offers = array_unique($full_reservation_offers);
                                            @endphp

                                            {{--<label class="ticket-card p-4 border rounded-lg cursor-pointer day" data-id="all"
                                                data-alumni-fee="{{ $total_fee_member }}"
                                                data-guest-fee="{{ $total_fee_guest }}"
                                            >
                                                <h4 class="font-bold text-lg text-gray-800">Full Reservation</h4>

                                                <p class="text-gray-600 mt-2">
                                                    @if($firstStart->isSameDay($lastEnd))
                                                        {{ $firstStart->format('M j, Y') }}
                                                        ({{ $firstStart->format('g:i A') }} - {{ $lastEnd->format('g:i A') }})
                                                    @else
                                                        {{ $firstStart->format('M j, Y g:i A') }} - {{ $lastEnd->format('M j, Y g:i A') }}
                                                    @endif
                                                </p>

                                                @if (!empty($full_reservation_offers))
                                                    <ul class="offers">
                                                        @foreach ($full_reservation_offers as $full_reservation_offer)
                                                            <li>{{ $full_reservation_offer }}</li>
                                                        @endforeach
                                                    </ul>
                                                @endif

                                                <p class="text-blue-600 font-bold mt-3">
                                                    ৳{{ number_format($total_fee_member ?? 0, 2) }} (Alumni)/
                                                    ৳{{ number_format($total_fee_guest ?? 0, 2) }} (Guest)
                                                </p>

                                                <input type="radio" name="reservation" value="all" class="d-none">

                                            </label>--}}

                                            @foreach ($event->dates as $item)
                                                <label class="ticket-card p-4 mb-3 border rounded-lg cursor-pointer day" data-id="{{ encrypt($item->id) }}"
                                                       data-alumni-fee="{{ $item->fee }}"
                                                       data-guest-fee="{{ $item->other_guest_fee }}"
                                                >
                                                    <h4 class="font-bold text-lg text-gray-800">{{ $item->event_segment_name }}</h4>

                                                    @php
                                                        $single_day_start_date = \Carbon\Carbon::parse($item->start_date_time);
                                                        $single_day_end_date = \Carbon\Carbon::parse($item->end_date_time);
                                                    @endphp

                                                    <p class="text-gray-600 mt-2">
                                                        @if($single_day_start_date->isSameDay($single_day_end_date))
                                                            {{ $single_day_start_date->format('M j, Y') }}
                                                            ({{ $single_day_start_date->format('g:i A') }} - {{ $single_day_end_date->format('g:i A') }})
                                                        @else
                                                            {{ $single_day_start_date->format('M j, Y g:i A') }} - {{ $single_day_end_date->format('M j, Y g:i A') }}
                                                        @endif
                                                    </p>

                                                    @if (!empty($item->day_offer))
                                                        <ul class="offers">
                                                            @foreach (explode(',', $item->day_offer) as $single_day_offer)
                                                                <li>{{ $single_day_offer }}</li>
                                                            @endforeach
                                                        </ul>
                                                    @endif

                                                    <p class="text-blue-600 font-bold mt-3">
                                                        ৳{{ number_format($item->fee ?? 0, 2) }} (Alumni)/
                                                        ৳{{ number_format($item->other_guest_fee ?? 0, 2) }} (Guest)
                                                    </p>

                                                    {{--<input type="radio" name="reservation" value="{{ encrypt($item->id) }}" class="d-none">--}}

                                                    <label
                                                        class="mt-5 inline-flex items-center justify-between gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 w-full"
                                                    >
                                                        <span>Select Package</span>
                                                        <input
                                                            type="radio"
                                                            name="reservation"
                                                            value="{{ encrypt($item->id) }}"
                                                            class="form-radio h-4 w-4 text-primary focus:ring-primary"
                                                        />
                                                    </label>

                                                </label>
                                            @endforeach
                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class="mt-8">
                            <h3 class="text-xl font-semibold text-gray-800 mb-4">Attendee Categories</h3>
                            <div class="space-y-4">
                                {{-- <div class="flex items-center justify-between">
                                    <div>
                                        <label class="block text-gray-700 font-medium" id="primaryAttendeeLabel">
                                            Alumni (Self)
                                        </label>
                                        <p class="text-gray-500 text-sm">Primary attendee</p>
                                    </div>
                                    <input type="hidden" id="alumniCount" name="alumniCount" min="1" max="1" value="1"
                                        class="w-16 text-center px-2 py-2 border border-gray-300 rounded-lg" readonly>
                                </div> --}}
                                <input type="hidden" id="alumniCount" name="alumniCount" min="1" max="1" value="1"
                                        class="w-16 text-center px-2 py-2 border border-gray-300 rounded-lg"
                                />

                                <div class="flex items-center justify-between">
                                    <div>
                                        <label class="block text-gray-700 font-medium">Spouse</label>
                                        <p class="text-gray-500 text-sm" id="spouse_fee" data-fee="0"></p>
                                    </div>
                                    <input type="number" id="spouseCount" name="spouseCount" min="0" max="5" value="0"
                                        class="w-16 text-center px-2 py-2 border border-gray-300 rounded-lg"
                                    />
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <label class="block text-gray-700 font-medium">Children (Below 5 Years)</label>
                                        <p class="text-gray-500 text-sm" id="children_below_5_fee" data-fee="0"></p>
                                    </div>
                                    <input type="number" id="childrenBelow5Count" name="childrenBelow5Count" min="0" max="5" value="0"
                                        class="w-16 text-center px-2 py-2 border border-gray-300 rounded-lg"
                                    />
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <label class="block text-gray-700 font-medium">Children (5 to 12 Years)</label>
                                        <p class="text-gray-500 text-sm" id="children_5_to_12_fee" data-fee="0"></p>
                                    </div>
                                    <input type="number" id="children5To12Count" name="children5To12Count" min="0" max="5" value="0"
                                        class="w-16 text-center px-2 py-2 border border-gray-300 rounded-lg"
                                    />
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <label class="block text-gray-700 font-medium">Children (Above 12 Years)</label>
                                        <p class="text-gray-500 text-sm" id="children_above_12_fee" data-fee="0"></p>
                                    </div>
                                    <input type="number" id="childrenAbove12Count" name="childrenAbove12Count" min="0" max="5" value="0"
                                        class="w-16 text-center px-2 py-2 border border-gray-300 rounded-lg"
                                    />
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <label class="block text-gray-700 font-medium">Driver</label>
                                        <p class="text-gray-500 text-sm" id="driver_fee" data-fee="0"></p>
                                    </div>
                                    <input type="number" id="driverCount" name="driverCount" min="0" max="2" value="0"
                                        class="w-16 text-center px-2 py-2 border border-gray-300 rounded-lg"
                                    />
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <label class="block text-gray-700 font-medium">Maid</label>
                                        <p class="text-gray-500 text-sm" id="maid_fee" data-fee="0"></p>
                                    </div>
                                    <input type="number" id="maidCount" name="maidCount" min="0" max="2" value="0"
                                        class="w-16 text-center px-2 py-2 border border-gray-300 rounded-lg"
                                    />
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <label class="block text-gray-700 font-medium">Other Guest</label>
                                        <p class="text-gray-500 text-sm" id="other_guest_fee" data-fee="0"></p>
                                    </div>
                                    <input type="number" id="otherGuestCount" name="otherGuestCount" min="0" max="5" value="0"
                                        class="w-16 text-center px-2 py-2 border border-gray-300 rounded-lg"
                                    />
                                </div>
                            </div>
                        </div>

                            @if($event->is_accommodation_available)
                                <div class="mt-8">
                                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Special Requirements</h3>
                                    <textarea id="specialRequirements" name="special_requirements" rows="3"
                                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                              placeholder="Dietary restrictions, accessibility needs, etc."></textarea>
                                </div>
                            @endif

                            <div class="mt-8">
                                <label class="flex items-center">
                                    <input type="checkbox" id="agreeTerms" name="agreeTerms" required class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    <span class="ml-2 text-gray-700">
                                    I agree to the
                                <a href="#" class="text-blue-600 hover:underline">Terms and Conditions</a> and
                                <a href="#" class="text-blue-600 hover:underline">Privacy Policy</a></span>
                                </label>
                            </div>

                        @endif


                    </div>
                </div>

                <!-- Payment Summary Section -->

                @if($event->last_payment_date && $event->last_payment_date > now())
                    <div>
                        <div class="section-card p-4 mb-8 sticky top-60">
                            <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-3">Payment Summary</h2>

                            <div id="orderSummary" class="mb-6">
                                <p class="text-gray-600">Select Day Participation and number of attendees to see your payment
                                    summary.</p>
                            </div>

                            <div class="border-t border-gray-200 pt-4">
                                <div class="flex justify-between mb-2">
                                    <span class="text-gray-600">Subtotal:</span>
                                    <span id="subtotal_text" class="font-medium">৳0.00</span>
                                </div>
                                {{--                            <div class="flex justify-between mb-2">--}}
                                {{--                                <span class="text-gray-600">Payment Gateway Processing Fee:</span>--}}
                                {{--                                <span id="processing_fee_text" class="font-medium">৳0.00</span>--}}
                                {{--                            </div>--}}
                                <div class="flex justify-between mb-2">
                                    <span class="text-gray-600">Software Maintenance Fee:</span>
                                    <span id="maintenance_fee_text" class="font-medium">5%</span>
                                </div>
                                <div class="border-t border-gray-200 my-4"></div>
                                <div class="bg-gray-200 p-4 rounded-lg border border-gray-300">
                                    <div class="flex justify-between text-lg font-bold">
                                        <span>Total:</span>
                                        <span id="total_amount_text" class="text-blue-600">৳0.00</span>
                                    </div>
                                    <div class="text-xs text-gray-500 text-right mt-1">
                                        (Subtotal + Maintenance Fee)
                                    </div>
                                </div>
                            </div>

                            @auth
                                <div class="btn-group w-100" role="group">
                                    <input type="submit" class="btn btn-primary text-white font-bold py-2 mt-5 shadow-md w-full"
                                           name="pay_now" id="pay_now" value="Pay Now"  />
                                    <input type="submit" class="btn btn-warning text-white font-bold py-2 mt-5 shadow-md w-full"
                                           name="draft" id="draft" value="Pay Later"  />
                                </div>

                            @else
                                {{--                            <a href="{{ route('login') }}" class="btn btn-warning text-white font-bold py-2 mt-5 rounded-lg shadow-md w-full">--}}
                                {{--                               Please login--}}
                                {{--                            </a>--}}
                                <input type="submit" class="btn btn-primary text-white font-bold py-2 mt-5 rounded-lg shadow-md w-full"
                                       name="pay_now" value="Confirm Reservation (Pay Now)"  />
                            @endauth

                        </div>

                        <!-- Payment Section (initially hidden) -->
                        <div id="paymentSection" class="mt-8 hidden">
                            <h3 class="text-xl font-semibold text-gray-800 mb-4">Payment Method</h3>

                            <div class="grid grid-cols-2 gap-4 mb-6">
                                <div class="payment-method p-4 border rounded-lg cursor-pointer text-center"
                                     onclick="selectPayment('credit')" id="creditCardPayment">
                                    <i class="fas fa-credit-card text-3xl text-blue-500 mb-2"></i>
                                    <p>Credit Card</p>
                                </div>
                                <div class="payment-method p-4 border rounded-lg cursor-pointer text-center"
                                     onclick="selectPayment('paypal')" id="paypalPayment">
                                    <i class="fab fa-paypal text-3xl text-blue-500 mb-2"></i>
                                    <p>PayPal</p>
                                </div>
                                <input type="hidden" id="selectedPayment" name="selectedPayment" value="">
                            </div>

                            <!-- Credit Card Form (initially hidden) -->
                            <div id="creditCardForm" class="hidden">
                                <div class="mb-4">
                                    <label for="cardNumber" class="block text-gray-700 font-medium mb-2">Card Number</label>
                                    <input type="text" id="cardNumber" name="cardNumber" placeholder="1234 5678 9012 3456"
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                </div>
                                <div class="grid grid-cols-2 gap-4 mb-4">
                                    <div>
                                        <label for="expiryDate" class="block text-gray-700 font-medium mb-2">Expiry Date</label>
                                        <input type="text" id="expiryDate" name="expiryDate" placeholder="MM/YY"
                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    </div>
                                    <div>
                                        <label for="cvv" class="block text-gray-700 font-medium mb-2">CVV</label>
                                        <input type="text" id="cvv" name="cvv" placeholder="123"
                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="cardName" class="block text-gray-700 font-medium mb-2">Name on Card</label>
                                    <input type="text" id="cardName" name="cardName" placeholder="John Doe"
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                </div>
                            </div>

                            <!-- PayPal Button (initially hidden) -->
                            <div id="paypalButton" class="hidden">
                                <div class="bg-yellow-100 border border-yellow-300 rounded-lg p-4 text-center">
                                    <p class="text-yellow-800 mb-4">You will be redirected to PayPal to complete your
                                        payment</p>
                                    <button type="button"
                                            class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
                                        <i class="fab fa-paypal mr-2"></i> Pay with PayPal
                                    </button>
                                </div>
                            </div>

                            <div class="mt-6">
                                <button type="button" onclick="completePayment()"
                                        class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
                                    Complete Payment
                                </button>
                            </div>
                        </div>

                        <!-- Confirmation Message (initially hidden) -->
                        <div id="confirmationMessage"
                             class="hidden mt-6 p-4 bg-green-100 border border-green-300 rounded-lg text-green-800 text-center">
                            <i class="fas fa-check-circle text-4xl mb-3 text-green-500"></i>
                            <h3 class="text-xl font-bold mb-2">Payment Successful!</h3>
                            <p>Thank you for registering for the BAU 2001-2002 alumni reunion 2026. A confirmation email with
                                event details has been sent to your registered email address.</p>
                            <p class="mt-4 font-medium">Your registration ID: <span id="registrationId" class="font-bold">AL2023-0000</span>
                            </p>
                        </div>
                    </div>
                @else
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-3">Payment Summary</h2>
                        <p class="text-gray-600">Payment date expired</p>
                    </div>
                @endif


            </div>
        </form>
    </main>

@endsection
@push('js')
    <script>
        const spouse_fee = $('#spouse_fee')
        const children_below_5_fee = $('#children_below_5_fee')
        const children_5_to_12_fee = $('#children_5_to_12_fee')
        const children_above_12_fee = $('#children_above_12_fee')
        const driver_fee = $('#driver_fee')
        const maid_fee = $('#maid_fee')
        const other_guest_fee = $('#other_guest_fee')

        const spouseCount = $('#spouseCount')
        const childrenBelow5Count = $('#childrenBelow5Count')
        const children5To12Count = $('#children5To12Count')
        const childrenAbove12Count = $('#childrenAbove12Count')
        const driverCount = $('#driverCount')
        const maidCount = $('#maidCount')
        const otherGuestCount = $('#otherGuestCount')

        const txt_subtotal = $('#subtotal_text')
        const total_amount_text = $('#total_amount_text')

        $(document).ready(function() {

            $(document).on('click', '.day', function() {
                $('.active-day').removeClass('active-day'); // simpler
                $(this).addClass('active-day');

                let id = $(this).data('id');

                let data = {
                    _token: `{{ csrf_token() }}`, // CSRF token key must be `_token`
                    day: id,
                };

                $.post(`{{ route('event.fee',encrypt($event->id)) }}`, data, function (res) {
                    if(res.success){
                        let fee = res.fee
                        let fee_text = res.fee_text
                        spouse_fee.html(`৳${fee_text.spouse_fee}`)
                            .attr('data-fee',parseFloat(fee.spouse_fee).toFixed(2))

                        children_below_5_fee.html(`৳${fee_text.children_below_5_fee}`)
                            .attr('data-fee',parseFloat(fee.children_below_5_fee).toFixed(2))

                        children_5_to_12_fee.html(`৳${fee_text.children_5_to_12_fee}`)
                            .attr('data-fee',parseFloat(fee.children_5_to_12_fee).toFixed(2))

                        children_above_12_fee.html(`৳${fee_text.children_above_12_fee}`)
                            .attr('data-fee',parseFloat(fee.children_above_12_fee).toFixed(2))

                        driver_fee.html(`৳${fee_text.driver_fee}`)
                            .attr('data-fee',parseFloat(fee.driver_fee).toFixed(2))

                        maid_fee.html(`৳${fee_text.maid_fee}`)
                            .attr('data-fee',parseFloat(fee.maid_fee).toFixed(2))

                        other_guest_fee.html(`৳${fee_text.other_guest_fee}`)
                            .attr('data-fee',parseFloat(fee.other_guest_fee).toFixed(2))
                    }
                }).fail(function (xhr) {
                    console.log('error');
                });

                setTimeout(() => {
                    calculateTotal();
                }, 200);
            });

            spouseCount.on('change',fn = () => calculateTotal())
            childrenBelow5Count.on('change',fn = () => calculateTotal())
            children5To12Count.on('change',fn = () => calculateTotal())
            childrenAbove12Count.on('change',fn = () => calculateTotal())
            driverCount.on('change',fn = () => calculateTotal())
            maidCount.on('change',fn = () => calculateTotal())
            otherGuestCount.on('change',fn = () => calculateTotal())

            $('input[name="registrationType"]').on('change',fn = () => {
                if($('input[name="registrationType"]:checked').val() == `guest`){
                    $('#guestInfoSection').show()
                    $('#draft').hide()
                }
                else{
                    $('#guestInfoSection').hide()
                    $('#draft').show()
                }
                calculateTotal()
            })

            function calculateTotal()
            {
                resetData()
                let subtotal = 0
                let participant_type = $('input[name="registrationType"]:checked').val();

                if(participant_type == `alumni`){
                    subtotal += parseFloat($('.active-day').data('alumni-fee') || 0)
                }
                else{
                    subtotal += parseFloat($('.active-day').data('guest-fee') || 0)
                }

                let spouse_fee_amount = parseFloat(spouse_fee.data('fee') || 0);
                let spouse_count = parseInt(spouseCount.val() || 0);
                subtotal += spouse_count * spouse_fee_amount

                let children_below_5_amount = parseFloat(children_below_5_fee.data('fee') || 0);
                let children_below_5_count = parseInt(childrenBelow5Count.val() || 0);
                subtotal += children_below_5_count * children_below_5_amount

                let children_5_to_12_amount = parseFloat(children_5_to_12_fee.data('fee') || 0);
                let children_5_to_12_count = parseInt(children5To12Count.val() || 0);
                subtotal += children_5_to_12_count * children_5_to_12_amount

                let children_above_12_amount = parseFloat(children_above_12_fee.data('fee') || 0);
                let children_above_12_count = parseInt(childrenAbove12Count.val() || 0);
                subtotal += children_above_12_count * children_above_12_amount

                let driver_amount = parseFloat(driver_fee.data('fee') || 0);
                let driver_count = parseInt(driverCount.val() || 0);
                subtotal += driver_count * driver_amount

                let maid_amount = parseFloat(maid_fee.data('fee') || 0);
                let maid_count = parseInt(maidCount.val() || 0);
                subtotal += maid_count * maid_amount

                let other_guest_amount = parseFloat(other_guest_fee.data('fee') || 0);
                let other_guest_count = parseInt(otherGuestCount.val() || 0);
                subtotal += other_guest_count * other_guest_amount

                //for maintenance
                let maintenanceFeePercent = @json($maintenanceFee);
                let maintenanceFeeAmount = (subtotal * maintenanceFeePercent) / 100;
                let total = subtotal + maintenanceFeeAmount;
                //end

                // ✅ Only format for display
                txt_subtotal.text(`৳${subtotal.toFixed(2)}`)
                // total_amount_text.text(`৳${subtotal.toFixed(2)}`)
                total_amount_text.text(`৳${total.toFixed(2)}`)
            }

            function resetData()
            {
                spouse_fee.removeData('fee');
                children_below_5_fee.removeData('fee');
                children_5_to_12_fee.removeData('fee');
                children_above_12_fee.removeData('fee');
                driver_fee.removeData('fee');
                maid_fee.removeData('fee');
                other_guest_fee.removeData('fee');
            }


        });
    </script>

@endpush