@php use App\Enums\AvailabilityType;use App\Enums\TimeSlotType; @endphp
@extends('layouts.app')

@section('title', "Seva - $seva->name")

@section('content')
    <div class="bg-[#FFF9E6] py-12">
        <div class="container mx-auto px-4">
            <div class="max-w-6xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
                <!-- Top Section - Image and Form -->
                <div class="grid grid-cols-1 lg:grid-cols-3">
                    <!-- Left Section - Seva Image -->
                    <div class="bg-white shadow-sm overflow-hidden">
                        @if(!empty($seva->image_url))
                            <img src="{{ asset('uploads/sevas/'. $seva->image_url) }}" alt="{{ $seva->name ?? 'Seva' }}"
                                 class="w-96 object-cover">
                        @else
                            <div class="w-full h-66 bg-gray-200 flex items-center justify-center">
                                <svg class="w-full h-full text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none"
                                     viewBox="0 0 120 120">
                                    <rect width="120" height="120" fill="#e5e7eb"/>
                                    <circle cx="40" cy="40" r="12" fill="#d1d5db"/>
                                    <rect x="24" y="70" width="72" height="28" rx="4" fill="#d1d5db"/>
                                    <path d="M24 98l24-28a4 4 0 016 0l20 24 8-10a4 4 0 016 0l12 14" stroke="#b0b6be"
                                          stroke-width="3" fill="none"/>
                                </svg>
                            </div>
                        @endif
                        <div class="p-6">
                            <h1 class="text-2xl font-bold text-gray-800 mb-4">{{ $seva->name ?? 'Seva' }}</h1>
                            <div class="flex items-center justify-between mb-6">
                                <div>
                                    <span class="price">₹<span>{{ number_format($seva->price ?? 0, 2) }}</span></span>
                                    <span class="text-gray-500 ml-2">per slot</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Section - Booking Form -->
                    <div class="col-span-2 shadow-sm p-6">
                        <h2 class="text-2xl font-bold text-gray-800 mb-6">Book Your Seva</h2>

                        @if ($errors->any())
                            <div class="bg-red-50 text-red-700 p-4 rounded-lg mb-6">
                                <ul class="list-disc list-inside">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form action="{{ route('sevas.store', $seva->slug) }}" method="POST" class="space-y-6"
                              id="bookingForm">
                            @csrf

                            @if($seva->availability_type === AvailabilityType::DONATION)
                                <input type="hidden" value="{{ date('Y-m-d') }}" name="date">
                            @endif
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                @if($seva->availability_type !== AvailabilityType::DONATION)
                                    <!-- Date Selection -->
                                    <div>
                                        <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Preferred
                                            Date</label>
                                        @if($seva->availability_type === AvailabilityType::DAILY)
                                            <input type="date"
                                                   name="date"
                                                   id="date"
                                                   required
                                                   min="{{ date('Y-m-d') }}"
                                                   value="{{ old('date') }}"
                                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                                        @else
                                            <select name="date"
                                                    id="date"
                                                    required
                                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                                                <option value="">Select a date</option>
                                                @foreach($seva->availableDates as $availableDate)
                                                    @if($availableDate->date->isToday() || $availableDate->date->isFuture())
                                                        <option value="{{ $availableDate->date->format('Y-m-d') }}"
                                                            {{ old('date') == $availableDate->date->format('Y-m-d') ? 'selected' : '' }}>
                                                            {{ $availableDate->date->format('d M Y') }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        @endif
                                    </div>

                                    <!-- Time Slot -->
                                    @if($seva->time_slot_type === TimeSlotType::TIME_SLOTS)
                                        <div>
                                            <label for="time_slot" class="block text-sm font-medium text-gray-700 mb-1">Time
                                                Slot</label>
                                            <select name="time_slot"
                                                    id="time_slot"
                                                    required
                                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                                                <option value="">Select a time slot</option>
                                                <!-- Time slots will be populated dynamically via JavaScript -->
                                            </select>
                                        </div>
                                    @endif

                                    <!-- Attendance -->
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Will you attend in
                                            person?</label>
                                        <div class="flex items-center space-x-6">
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="attendance" value="yes" checked
                                                       class="form-radio h-4 w-4 text-yellow-600">
                                                <span class="ml-2">Yes</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="attendance" value="no"
                                                       class="form-radio h-4 w-4 text-yellow-600">
                                                <span class="ml-2">No</span>
                                            </label>
                                        </div>
                                    </div>
                                @endif

                                <!-- Number of Slots -->
                                <div class="md:col-span-2">
                                    <label for="slots" class="block text-sm font-medium text-gray-700 mb-1">Number of
                                        Slots</label>
                                    <div class="flex items-center space-x-4">
                                        <button type="button"
                                                onclick="decrementSlots()"
                                                class="w-10 h-10 rounded-full border-2 border-yellow-500 text-yellow-500 hover:bg-yellow-50 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2">
                                            <span class="text-xl">-</span>
                                        </button>
                                        <input type="number"
                                               name="slots"
                                               id="slots"
                                               required
                                               min="1"
                                               value="{{ old('slots', 1) }}"
                                               class="w-20 text-center px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                                        <button type="button"
                                                onclick="incrementSlots()"
                                                class="w-10 h-10 rounded-full border-2 border-yellow-500 text-yellow-500 hover:bg-yellow-50 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2">
                                            <span class="text-xl">+</span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <div class="flex justify-left">
                                <button type="submit" class="btn-primary px-6 py-3 rounded-md font-medium">
                                    Add to Booking List
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Bottom Section - Full Width Description -->
                <div class="">
                    <div class="bg-gray-100 p-6">
                        <div class="prose max-w-none text-gray-600 mb-6">
                            <p class="text-medium">{{ $seva->description ?? 'Seva description' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const dateInput = document.getElementById('date');
                const timeSlotSelect = document.getElementById('time_slot');
                const bookingForm = document.getElementById('bookingForm');
                const sevaType = '{{ $seva->availability_type }}';
                const timeSlotType = '{{ $seva->time_slot_type }}';

                if (dateInput && timeSlotSelect && timeSlotType === 'time_slots') {
                    dateInput.addEventListener('change', function () {
                        const selectedDate = this.value;
                        if (!selectedDate) return;

                        // Clear existing options
                        timeSlotSelect.innerHTML = '<option value="">Select a time slot</option>';

                        // Fetch available time slots for the selected date
                        fetch(`/api/sevas/{{ $seva->id }}/time-slots?date=${selectedDate}`)
                            .then(response => response.json())
                            .then(data => {
                                if (data.time_slots && data.time_slots.length > 0) {
                                    data.time_slots.forEach(slot => {
                                        const option = document.createElement('option');
                                        option.value = slot.id;
                                        option.textContent = `${slot.start_time} - (${slot.remaining_slots} slots available)`;
                                        option.disabled = slot.remaining_slots <= 0;
                                        timeSlotSelect.appendChild(option);
                                    });
                                } else {
                                    const option = document.createElement('option');
                                    option.value = '';
                                    option.textContent = 'No time slots available for this date';
                                    option.disabled = true;
                                    timeSlotSelect.appendChild(option);
                                }
                            })
                            .catch(error => {
                                console.error('Error fetching time slots:', error);
                            });
                    });
                }

                // Form validation before submission
                bookingForm.addEventListener('submit', function (e) {
                    e.preventDefault();

                    if (sevaType !== 'donation') {
                        const selectedDate = dateInput.value;
                        const selectedTimeSlot = timeSlotSelect ? timeSlotSelect.value : null;
                        const slots = document.getElementById('slots').value;

                        // Validate date availability
                        fetch(`/api/sevas/{{ $seva->id }}/check-availability?date=${selectedDate}`)
                            .then(response => response.json())
                            .then(data => {
                                if (!data.available) {
                                    alert('Selected date is not available. Please choose another date.');
                                    return;
                                }

                                // If time slots are enabled, validate slot availability
                                if (timeSlotType === 'time_slots' && selectedTimeSlot) {
                                    fetch(`/api/sevas/{{ $seva->id }}/check-slot-availability?date=${selectedDate}&time_slot=${selectedTimeSlot}&slots=${slots}`)
                                        .then(response => response.json())
                                        .then(data => {
                                            if (data.available) {
                                                bookingForm.submit();
                                            } else {
                                                alert('Not enough slots available for the selected time slot. Please choose another time slot or reduce the number of slots.');
                                            }
                                        })
                                        .catch(error => {
                                            console.error('Error checking slot availability:', error);
                                            alert('Error checking slot availability. Please try again.');
                                        });
                                } else {
                                    bookingForm.submit();
                                }
                            })
                            .catch(error => {
                                console.error('Error checking date availability:', error);
                                alert('Error checking date availability. Please try again.');
                            });
                    } else {
                        bookingForm.submit();
                    }
                });
            });

            function incrementSlots() {
                const slotsInput = document.getElementById('slots');
                const currentValue = parseInt(slotsInput.value);
                slotsInput.value = currentValue + 1;
            }

            function decrementSlots() {
                const slotsInput = document.getElementById('slots');
                const currentValue = parseInt(slotsInput.value);
                if (currentValue > 1) {
                    slotsInput.value = currentValue - 1;
                }
            }
        </script>
    @endpush
@endsection