@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-bold text-gray-900">Create Beach Reservation</h1>
            <a href="{{ route('beach-reservations.my-reservations') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                Back to My Reservations
            </a>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6">
            <form method="POST" action="{{ route('beach-reservations.store') }}" enctype="multipart/form-data">
                @csrf

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Reservation Date -->
                    <div class="md:col-span-2">
                        <label for="reservation_date" class="block text-sm font-medium text-gray-700 mb-2">
                            Reservation Date *
                        </label>
                        <input type="date" 
                               name="reservation_date" 
                               id="reservation_date" 
                               value="{{ old('reservation_date') }}"
                               min="{{ date('Y-m-d', strtotime('+1 day')) }}"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('reservation_date') border-red-500 @enderror"
                               required>
                        @error('reservation_date')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Full Name -->
                    <div class="md:col-span-2">
                        <label for="full_name" class="block text-sm font-medium text-gray-700 mb-2">
                            Full Name *
                        </label>
                        <input type="text" 
                               name="full_name" 
                               id="full_name" 
                               value="{{ old('full_name') }}"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('full_name') border-red-500 @enderror"
                               required>
                        @error('full_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Number of Persons -->
                    <div>
                        <label for="number_of_persons" class="block text-sm font-medium text-gray-700 mb-2">
                            Number of Persons *
                        </label>
                        <input type="number" 
                               name="number_of_persons" 
                               id="number_of_persons" 
                               value="{{ old('number_of_persons') }}"
                               min="1" 
                               max="50"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('number_of_persons') border-red-500 @enderror"
                               required>
                        @error('number_of_persons')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Instagram Link -->
                    <div>
                        <label for="instagram_link" class="block text-sm font-medium text-gray-700 mb-2">
                            Instagram Link *
                        </label>
                        <input type="url" 
                               name="instagram_link" 
                               id="instagram_link" 
                               value="{{ old('instagram_link') }}"
                               placeholder="https://instagram.com/username"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('instagram_link') border-red-500 @enderror"
                               required>
                        @error('instagram_link')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- ID Head Image -->
                    <div>
                        <label for="id_head_image" class="block text-sm font-medium text-gray-700 mb-2">
                            ID Head Image *
                        </label>
                        <input type="file" 
                               name="id_head_image" 
                               id="id_head_image" 
                               accept="image/jpeg,image/png,image/jpg"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('id_head_image') border-red-500 @enderror"
                               required>
                        <p class="mt-1 text-sm text-gray-500">Max size: 2MB. Formats: JPEG, PNG, JPG</p>
                        @error('id_head_image')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- ID Tail Image -->
                    <div>
                        <label for="id_tail_image" class="block text-sm font-medium text-gray-700 mb-2">
                            ID Tail Image *
                        </label>
                        <input type="file" 
                               name="id_tail_image" 
                               id="id_tail_image" 
                               accept="image/jpeg,image/png,image/jpg"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('id_tail_image') border-red-500 @enderror"
                               required>
                        <p class="mt-1 text-sm text-gray-500">Max size: 2MB. Formats: JPEG, PNG, JPG</p>
                        @error('id_tail_image')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="mt-8 flex justify-end space-x-4">
                    <a href="{{ route('beach-reservations.my-reservations') }}" 
                       class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                        Create Reservation
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set minimum date to tomorrow
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    const tomorrowStr = tomorrow.toISOString().split('T')[0];
    
    const dateInput = document.getElementById('reservation_date');
    if (dateInput && !dateInput.value) {
        dateInput.value = tomorrowStr;
    }
});
</script>
@endsection