@extends('layouts.frontend.master')

@section('title', 'Register for ' . $event->name)

@push('styles')
<style>
    .event-date-card {
        transition: all 0.3s ease;
        border: 2px solid #e5e7eb;
    }
    .event-date-card:hover {
        border-color: #3b82f6;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    }
    .event-date-card.selected {
        border-color: #3b82f6;
        background-color: #eff6ff;
    }
    .guest-category {
        transition: all 0.3s ease;
        border: 1px solid #e5e7eb;
    }
    .guest-category:hover {
        border-color: #10b981;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
    }
    .price-display {
        background: linear-gradient(135deg, #10b981, #059669);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 600;
    }
    .total-section {
        background: linear-gradient(135deg, #1f2937, #111827);
        color: white;
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="container mx-auto px-4">
        <!-- Header -->
        <div class="text-center mb-8">
            <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                Register for {{ $event->name }}
            </h1>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                Complete your registration and select your participation options
            </p>
        </div>

        <div class="max-w-7xl mx-auto">
            <!-- Event Information Section - Full Width -->
            <div class="mb-8">
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-6 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        Event Information
                    </h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        <div class="flex items-start">
                            <svg class="w-5 h-5 mr-3 mt-0.5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                            <div>
                                <h3 class="font-medium text-gray-900">Event Dates</h3>
                                <p class="text-sm text-gray-600">
                                    @if($event->dates->isNotEmpty())
                                        @foreach($event->dates as $date)
                                            {{ $date->date->format('l, F j, Y') }}
                                            @if($date->start_time)
                                                at {{ $date->start_time->format('g:i A') }}
                                            @endif
                                            @if(!$loop->last)<br>@endif
                                        @endforeach
                                    @else
                                        Date TBD
                                    @endif
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <svg class="w-5 h-5 mr-3 mt-0.5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            <div>
                                <h3 class="font-medium text-gray-900">Venue</h3>
                                <p class="text-sm text-gray-600">{{ $event->venue }}</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <svg class="w-5 h-5 mr-3 mt-0.5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                            </svg>
                            <div>
                                <h3 class="font-medium text-gray-900">Expected Attendees</h3>
                                <p class="text-sm text-gray-600">{{ $event->expected_attendees ?? 'TBD' }} participants</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <svg class="w-5 h-5 mr-3 mt-0.5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                            </svg>
                            <div>
                                <h3 class="font-medium text-gray-900">Category</h3>
                                <p class="text-sm text-gray-600">{{ $event->category_name }}</p>
                            </div>
                        </div>
                    </div>
                    
                    @if($event->description)
                    <div class="mt-6 pt-6 border-t border-gray-200">
                        <h3 class="font-medium text-gray-900 mb-2">Event Description</h3>
                        <p class="text-sm text-gray-600 leading-relaxed">{{ $event->description }}</p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Two Column Layout for Registration Options and Payment Summary -->
            <div class="grid grid-cols-1 gap-8">
                <!-- Left Column - Registration Options -->
                <div class="space-y-6">

                    <!-- Registration Form -->
                    <form action="{{ route('events.register.store', $event->id) }}" method="POST" id="registrationForm" class="bg-white rounded-xl shadow-lg p-6">
                        @csrf
                        
                        <!-- Registration Options -->
                        <h2 class="text-xl font-semibold text-gray-900 mb-6 flex items-center">
                            <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                            </svg>
                            Registration Options
                        </h2>

                        <!-- Registration Options split into 1) Dates, 2) Guests -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <!-- 1) Select Event Dates -->
                                <div class="mb-8">
                            <h3 class="text-lg font-medium text-gray-900 mb-4">Select Event Dates</h3>
                            <p class="text-sm text-gray-600 mb-4">Choose which days you want to attend. Each date has its own pricing.</p>
                            
                            <div class="space-y-3">
                                <!-- Select All Option -->
                                <div class="event-date-card bg-gray-50 rounded-lg p-4 cursor-pointer">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="select_all_dates" class="mr-3 text-blue-600 focus:ring-blue-500">
                                        <div class="flex-1">
                                            <label for="select_all_dates" class="text-lg font-medium text-gray-900 cursor-pointer">Select All Days</label>
                                            <p class="text-sm text-gray-600">Attend all {{ $eventDates->count() }} event dates</p>
                                        </div>
                                        <span class="text-sm font-semibold price-display" id="all_dates_price">${{ $eventDates->sum('fee') }}.00</span>
                                    </div>
                                </div>
                                
                                <!-- Individual Date Options -->
                                @foreach($eventDates as $index => $date)
                                <div class="event-date-card bg-gray-50 rounded-lg p-4 cursor-pointer">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="date_{{ $date->id }}" name="selected_dates[]" value="{{ $date->id }}" 
                                               class="date-checkbox mr-3 text-blue-600 focus:ring-blue-500" 
                                               data-price="{{ $date->fee }}"
                                               data-spouse-price="{{ $date->spouse_fee ?? 0 }}"
                                               data-children-below-5-price="{{ $date->children_below_5_fee ?? 0 }}"
                                               data-children-5-12-price="{{ $date->children_5_to_12_fee ?? 0 }}"
                                               data-children-above-12-price="{{ $date->children_above_12_fee ?? 0 }}"
                                               data-driver-price="{{ $date->driver_fee ?? 0 }}"
                                               data-maid-price="{{ $date->maid_fee ?? 0 }}"
                                               data-other-guest-price="{{ $date->other_guest_fee ?? 0 }}">
                                        <div class="flex-1">
                                            <label for="date_{{ $date->id }}" class="text-lg font-medium text-gray-900 cursor-pointer">
                                                {{ $date->date->format('l, F j, Y') }}
                                            </label>
                                            <p class="text-sm text-gray-600">
                                                @if($date->start_time)
                                                    {{ $date->start_time->format('g:i A') }}
                                                    @if($date->end_time)
                                                        - {{ $date->end_time->format('g:i A') }}
                                                    @endif
                                                @else
                                                    Time TBD
                                                @endif
                                            </p>
                                        </div>
                                        <span class="text-sm font-semibold price-display">${{ number_format($date->fee, 2) }}</span>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            
                            @error('selected_dates')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                                </div>
                            </div>

                            </div>
                            <div>
                        <!-- 2) Guest Registration (if allowed) -->
                        @if($event->is_guest_allowed)
                        <div class="mb-8">
                            <h3 class="text-lg font-medium text-gray-900 mb-4">Guest Registration</h3>
                            <p class="text-sm text-gray-600 mb-4">You can register guests to attend with you. Prices vary by date.</p>
                            
                            <div class="space-y-4">
                                <!-- Spouse -->
                                <div class="guest-category bg-gray-50 rounded-lg p-4">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h4 class="font-medium text-gray-900">Spouse</h4>
                                            <p class="text-sm text-gray-600" id="spouse-price-text">Select dates to see pricing</p>
                                        </div>
                                        <input type="number" name="spouse_count" value="0" min="0" max="2" 
                                               class="w-16 px-2 py-1 border border-gray-300 rounded text-center guest-input" 
                                               data-category="spouse">
                                    </div>
                                </div>

                                <!-- Children (Below 5 Years) -->
                                <div class="guest-category bg-gray-50 rounded-lg p-4">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h4 class="font-medium text-gray-900">Children (Below 5 Years)</h4>
                                            <p class="text-sm text-gray-600" id="children-below-5-price-text">Select dates to see pricing</p>
                                        </div>
                                        <input type="number" name="children_below_5" value="0" min="0" max="5" 
                                               class="w-16 px-2 py-1 border border-gray-300 rounded text-center guest-input" 
                                               data-category="children_below_5">
                                    </div>
                                </div>

                                <!-- Children (5 to 12 Years) -->
                                <div class="guest-category bg-gray-50 rounded-lg p-4">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h4 class="font-medium text-gray-900">Children (5 to 12 Years)</h4>
                                            <p class="text-sm text-gray-600" id="children-5-12-price-text">Select dates to see pricing</p>
                                        </div>
                                        <input type="number" name="children_5_12" value="0" min="0" max="5" 
                                               class="w-16 px-2 py-1 border border-gray-300 rounded text-center guest-input" 
                                               data-category="children_5_12">
                                    </div>
                                </div>

                                <!-- Children (Above 12 Years) -->
                                <div class="guest-category bg-gray-50 rounded-lg p-4">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h4 class="font-medium text-gray-900">Children (Above 12 Years)</h4>
                                            <p class="text-sm text-gray-600" id="children-above-12-price-text">Select dates to see pricing</p>
                                        </div>
                                        <input type="number" name="children_above_12" value="0" min="0" max="5" 
                                               class="w-16 px-2 py-1 border border-gray-300 rounded text-center guest-input" 
                                               data-category="children_above_12">
                                    </div>
                                </div>

                                <!-- Driver -->
                                <div class="guest-category bg-gray-50 rounded-lg p-4">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h4 class="font-medium text-gray-900">Driver</h4>
                                            <p class="text-sm text-gray-600" id="driver-price-text">Select dates to see pricing</p>
                                        </div>
                                        <input type="number" name="driver_count" value="0" min="0" max="5" 
                                               class="w-16 px-2 py-1 border border-gray-300 rounded text-center guest-input" 
                                               data-category="driver">
                                    </div>
                                </div>

                                <!-- Maid -->
                                <div class="guest-category bg-gray-50 rounded-lg p-4">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h4 class="font-medium text-gray-900">Maid</h4>
                                            <p class="text-sm text-gray-600" id="maid-price-text">Select dates to see pricing</p>
                                        </div>
                                        <input type="number" name="maid_count" value="0" min="0" max="5" 
                                               class="w-16 px-2 py-1 border border-gray-300 rounded text-center guest-input" 
                                               data-category="maid">
                                    </div>
                                </div>

                                <!-- Other Guest -->
                                <div class="guest-category bg-gray-50 rounded-lg p-4">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h4 class="font-medium text-gray-900">Other Guest</h4>
                                            <p class="text-sm text-gray-600" id="other-guest-price-text">Select dates to see pricing</p>
                                        </div>
                                        <input type="number" name="other_guest_count" value="0" min="0" max="3" 
                                               class="w-16 px-2 py-1 border border-gray-300 rounded text-center guest-input" 
                                               data-category="other_guest">
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                            </div>
                        </div>

                        <!-- 3) Special Requirements and rest -->
                        <div class="mb-6 mt-2">
                            <label for="special_requirements" class="block text-sm font-medium text-gray-700 mb-2">
                                Special Requirements
                            </label>
                            <textarea name="special_requirements" id="special_requirements" rows="3"
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('special_requirements') border-red-500 @enderror"
                                      placeholder="Dietary restrictions, accessibility needs, etc.">{{ old('special_requirements') }}</textarea>
                            @error('special_requirements')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Terms and Conditions -->
                        <div class="mb-6">
                            <div class="flex items-start">
                                <input type="checkbox" id="terms_agreement" name="terms_agreement" 
                                       class="mt-1 mr-3 text-blue-600 focus:ring-blue-500" required>
                                <label for="terms_agreement" class="text-sm 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>
                                </label>
                            </div>
                        </div>

                        <!-- Payment Summary -->
                        <div class="block bg-white rounded-xl shadow-lg p-6 mt-6">
                            <h2 class="text-xl font-semibold text-gray-900 mb-4">Payment Summary</h2>
                            <div class="space-y-3 mb-6">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-700">Alumni Registration:</span>
                                    <span class="font-semibold text-gray-900" id="alumni_total_sm">$0.00</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-700">Guest Registration:</span>
                                    <span class="font-semibold text-gray-900" id="guest_total_sm">$0.00</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-700">Subtotal:</span>
                                    <span class="font-semibold text-gray-900" id="subtotal_sm">$0.00</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-700">Processing Fee (3%):</span>
                                    <span class="font-semibold text-gray-900" id="processing_fee_sm">$0.00</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-700">Service Fee:</span>
                                    <span class="font-semibold text-gray-900">$2.50</span>
                                </div>
                            </div>
                            <div class="total-section rounded-lg p-4 mb-2">
                                <div class="flex justify-between items-center">
                                    <span class="text-lg font-bold">Total:</span>
                                    <span class="text-2xl font-bold" id="total_amount_sm">$0.00</span>
                                </div>
                                <p class="text-sm text-gray-300 mt-2">(Subtotal + Processing Fee + Service Fee)</p>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <button type="submit" 
                                class="w-full bg-blue-600 hover:bg-blue-700 text-white py-4 px-6 rounded-lg font-semibold text-lg transition-all duration-300 flex items-center justify-center gap-2 shadow-lg">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                            </svg>
                            Calculate Total & Proceed to Payment
                        </button>
                    </form>
                </div>

                
            </div>
        </div>
    </div>
</div>

<!-- Guest Template (Hidden) -->
@if($event->is_guest_allowed)
<template id="guestTemplate">
    <div class="guest-item bg-gray-50 p-4 rounded-lg border">
        <div class="flex items-center justify-between mb-4">
            <h4 class="font-medium text-gray-900">Guest <span class="guest-number"></span></h4>
            <button type="button" class="remove-guest text-red-600 hover:text-red-800">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Name <span class="text-red-500">*</span></label>
                <input type="text" name="guests[INDEX][name]" 
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Relationship <span class="text-red-500">*</span></label>
                <select name="guests[INDEX][relationship]" 
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                    <option value="">Select relationship...</option>
                    <option value="spouse">Spouse</option>
                    <option value="child">Child</option>
                    <option value="parent">Parent</option>
                    <option value="sibling">Sibling</option>
                    <option value="friend">Friend</option>
                    <option value="colleague">Colleague</option>
                    <option value="other">Other</option>
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                <input type="email" name="guests[INDEX][email]" 
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                <input type="tel" name="guests[INDEX][phone]" 
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
            </div>
            
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Dietary Requirements</label>
                <textarea name="guests[INDEX][dietary_requirements]" rows="2"
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                          placeholder="Any dietary restrictions or preferences..."></textarea>
            </div>
            
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Special Requirements</label>
                <textarea name="guests[INDEX][special_requirements]" rows="2"
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                          placeholder="Any special accommodations needed..."></textarea>
            </div>
        </div>
    </div>
</template>
@endif

@endsection

@push('js')
<script>
// Helpers
function syncSelectAllState() {
    var $dateCheckboxes = $('.date-checkbox');
    var $selectAllCheckbox = $('#select_all_dates');
    var checkedCount = $dateCheckboxes.filter(':checked').length;
    var totalCount = $dateCheckboxes.length;
    if (checkedCount === 0) {
        $selectAllCheckbox.prop('checked', false).prop('indeterminate', false);
    } else if (checkedCount === totalCount) {
        $selectAllCheckbox.prop('checked', true).prop('indeterminate', false);
    } else {
        $selectAllCheckbox.prop('checked', false).prop('indeterminate', true);
    }
}

function setCardSelectionFromCheckbox($checkbox) {
    var $card = $checkbox.closest('.event-date-card');
    if ($checkbox.is(':checked')) {
        $card.addClass('selected');
    } else {
        $card.removeClass('selected');
    }
}

// Public API
window.toggleAllDates = function() {
    var $dateCheckboxes = $('.date-checkbox');
    if ($dateCheckboxes.length === 0) return;
    var allChecked = $dateCheckboxes.length === $dateCheckboxes.filter(':checked').length;
    var newState = !allChecked;
    $dateCheckboxes.each(function() {
        $(this).prop('checked', newState);
        setCardSelectionFromCheckbox($(this));
    });
    syncSelectAllState();
    if (typeof calculateTotal === 'function') calculateTotal();
};

window.toggleDate = function(dateId) {
    var $checkbox = $('#date_' + dateId);
    if ($checkbox.length === 0) return;
    $checkbox.prop('checked', !$checkbox.is(':checked'));
    setCardSelectionFromCheckbox($checkbox);
    syncSelectAllState();
    if (typeof calculateTotal === 'function') calculateTotal();
};

// Guest category mapping
var guestCategories = {
    'spouse': 'spouse-price-text',
    'children_below_5': 'children-below-5-price-text',
    'children_5_12': 'children-5-12-price-text',
    'children_above_12': 'children-above-12-price-text',
    'driver': 'driver-price-text',
    'maid': 'maid-price-text',
    'other_guest': 'other-guest-price-text'
};

// Data attribute mapping (HTML uses hyphens, JS needs to convert)
var dataAttributeMapping = {
    'spouse': 'spouse-price',
    'children_below_5': 'children-below-5-price',
    'children_5_12': 'children-5-12-price',
    'children_above_12': 'children-above-12-price',
    'driver': 'driver-price',
    'maid': 'maid-price',
    'other_guest': 'other-guest-price'
};

// Update guest pricing display
function updateGuestPricing() {
    var $selectedDates = $('.date-checkbox:checked');
    
    if ($selectedDates.length === 0) {
        // Reset all guest pricing text
        $.each(guestCategories, function(category, elementId) {
            $('#' + elementId).text('Select dates to see pricing');
        });
        return;
    }

    // Calculate average pricing for each guest category
    $.each(guestCategories, function(category, elementId) {
        var $priceTextElement = $('#' + elementId);
        if ($priceTextElement.length === 0) return;
        
        var totalPrice = 0;
        var validDates = 0;
        var dataAttribute = dataAttributeMapping[category];

        $selectedDates.each(function() {
            var price = parseFloat($(this).data(dataAttribute)) || 0;
            if (price > 0) {
                totalPrice += price;
                validDates++;
            }
        });

        if (validDates > 0) {
            var avgPrice = totalPrice / validDates;
            var totalForAllDates = totalPrice;
            
            if ($selectedDates.length === 1) {
                $priceTextElement.text('$' + avgPrice.toFixed(2) + ' per day');
            } else {
                $priceTextElement.text('$' + avgPrice.toFixed(2) + ' avg/day ($' + totalForAllDates.toFixed(2) + ' total)');
            }
        } else {
            $priceTextElement.text('Not available for selected dates');
        }
    });
}

// Calculate total function
function calculateTotal() {
    var $dateCheckboxes = $('.date-checkbox');
    var $guestInputs = $('.guest-input');
    
    if ($dateCheckboxes.length === 0 || $guestInputs.length === 0) return;
    
    // Calculate selected dates
    var $selectedDates = $dateCheckboxes.filter(':checked');
    
    // Calculate alumni total
    var alumniTotal = 0;
    $selectedDates.each(function() {
        var price = parseFloat($(this).data('price')) || 0;
        alumniTotal += price;
    });
    
    // Calculate guest total
    var guestTotal = 0;
    $guestInputs.each(function() {
        var count = parseInt($(this).val()) || 0;
        var category = $(this).data('category');
        var dataAttribute = dataAttributeMapping[category];
        
        if (count > 0) {
            $selectedDates.each(function() {
                var price = parseFloat($(this).data(dataAttribute)) || 0;
                guestTotal += count * price;
            });
        }
    });
    
    // Calculate subtotal
    var subtotal = alumniTotal + guestTotal;
    
    // Calculate processing fee (3% of subtotal, minimum $0.50)
    var processingFee = Math.max(subtotal * 0.03, 0.50);
    var serviceFee = 2.50;
    var total = subtotal + processingFee + serviceFee;

    // Update display
    $('#alumni_total').text('$' + alumniTotal.toFixed(2));
    $('#guest_total').text('$' + guestTotal.toFixed(2));
    $('#subtotal').text('$' + subtotal.toFixed(2));
    $('#processing_fee').text('$' + processingFee.toFixed(2));
    $('#total_amount').text('$' + total.toFixed(2));
    // Mirror to mobile summary
    $('#alumni_total_sm').text('$' + alumniTotal.toFixed(2));
    $('#guest_total_sm').text('$' + guestTotal.toFixed(2));
    $('#subtotal_sm').text('$' + subtotal.toFixed(2));
    $('#processing_fee_sm').text('$' + processingFee.toFixed(2));
    $('#total_amount_sm').text('$' + total.toFixed(2));
    
    // Update guest pricing display
    updateGuestPricing();
}

$(document).ready(function() {
    // Guest inputs
    $('.guest-input').on('input change', function() { calculateTotal(); });

    // Card clicks
    $(document).on('click', '.event-date-card', function(e) {
        // Ignore clicks originating from the checkbox itself; change handler will handle it
        if ($(e.target).is('input[type="checkbox"], label')) return;
        var $checkbox = $(this).find('.date-checkbox');
        if ($checkbox.length) {
            $checkbox.prop('checked', !$checkbox.is(':checked')).trigger('change');
        }
    });

    // Checkbox change handlers (single source of truth)
    $(document).on('change', '.date-checkbox', function() {
        setCardSelectionFromCheckbox($(this));
        syncSelectAllState();
        calculateTotal();
    });

    $(document).on('change', '#select_all_dates', function() {
        var newState = $(this).is(':checked');
        $('.date-checkbox').each(function() {
            $(this).prop('checked', newState);
            setCardSelectionFromCheckbox($(this));
        });
        syncSelectAllState();
        calculateTotal();
    });

    // Form validation
    $('#registrationForm').on('submit', function(e) {
        var $selectedDates = $('.date-checkbox:checked');
        var termsAgreement = $('#terms_agreement').is(':checked');

        if ($selectedDates.length === 0) {
            e.preventDefault();
            alert('Please select at least one event date.');
            return;
        }

        if (!termsAgreement) {
            e.preventDefault();
            alert('Please agree to the Terms and Conditions and Privacy Policy.');
            return;
        }

        // Add calculated values to form data
        var alumniTotal = parseFloat($('#alumni_total').text().replace('$', ''));
        var guestTotal = parseFloat($('#guest_total').text().replace('$', ''));
        var subtotal = parseFloat($('#subtotal').text().replace('$', ''));
        var processingFee = parseFloat($('#processing_fee').text().replace('$', ''));
        var total = parseFloat($('#total_amount').text().replace('$', ''));

        // Create hidden inputs for pricing
        var hiddenInputs = 
            '<input type="hidden" name="alumni_total" value="' + alumniTotal + '">' +
            '<input type="hidden" name="guest_total" value="' + guestTotal + '">' +
            '<input type="hidden" name="subtotal" value="' + subtotal + '">' +
            '<input type="hidden" name="processing_fee" value="' + processingFee + '">' +
            '<input type="hidden" name="total_amount" value="' + total + '">' +
            '<input type="hidden" name="number_of_days" value="' + $selectedDates.length + '">';
        
        $(this).append(hiddenInputs);
    });

    // Initial calculation and state sync
    $('.date-checkbox').each(function() { setCardSelectionFromCheckbox($(this)); });
    syncSelectAllState();
    calculateTotal();
});
</script>
@endpush