@extends('layouts.app')

@section('title', 'Online Booking - Golden Era Property')

@section('content')
<!-- Hero Section -->
<section class="bg-gradient-to-br from-primary-600 to-primary-800 text-white py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
            </svg>
            <span class="text-sm font-medium">Secure Booking</span>
        </div>
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Online Booking Form</h1>
        <p class="text-xl md:text-2xl text-gray-100 max-w-3xl mx-auto">Complete the booking form below to reserve your dream property with Golden Era Property</p>
    </div>
</section>

<!-- Booking Form Section -->
<section class="py-20 bg-gradient-to-b from-gray-50 to-white">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Success Alert -->
        @if(session('success'))
            <div class="mb-8 bg-gradient-to-r from-green-50 to-emerald-50 border-l-4 border-green-500 rounded-r-xl p-6 shadow-lg">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0 w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                        <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-semibold text-green-800 mb-1">Booking Submitted Successfully!</h3>
                        <p class="text-green-700">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Error Alert -->
        @if(session('error'))
            <div class="mb-8 bg-gradient-to-r from-red-50 to-rose-50 border-l-4 border-red-500 rounded-r-xl p-6 shadow-lg">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                        <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-semibold text-red-800 mb-1">Something went wrong!</h3>
                        <p class="text-red-700">{{ session('error') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Validation Errors -->
        @if($errors->any())
            <div class="mb-8 bg-gradient-to-r from-amber-50 to-orange-50 border-l-4 border-amber-500 rounded-r-xl p-6 shadow-lg">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
                        <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-semibold text-amber-800 mb-2">Please fix the following errors:</h3>
                        <ul class="list-disc list-inside text-amber-700 space-y-1">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <form id="bookingForm" action="{{ route('booking.store') }}" method="POST" class="bg-white rounded-3xl shadow-xl overflow-hidden">
            @csrf

            <!-- Personal Information -->
            <div class="p-8 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white">
                <div class="flex items-center gap-3 mb-8">
                    <div class="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl flex items-center justify-center shadow-lg">
                        <span class="text-white text-2xl font-bold">👤</span>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900">Personal Information</h2>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Full Name *</label>
                        <input type="text" name="full_name" id="full_name" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('full_name') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter full name" required>
                        @error('full_name')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                        <p id="full_name_error" class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1 hidden" style="color: #dc2626;">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                            Full name must contain only letters
                        </p>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Father/Husband's Name *</label>
                        <input type="text" name="father_husband_name" id="father_husband_name" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('father_husband_name') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter father/husband's name" required>
                        @error('father_husband_name')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                        <p id="father_husband_name_error" class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1 hidden" style="color: #dc2626;">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                            Name must contain only letters
                        </p>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Date of Birth * (YYYY-MM-DD)</label>
                        <input type="date" name="date_of_birth" id="date_of_birth" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('date_of_birth') border-red-400 ring-1 ring-red-200 @enderror" required>
                        @error('date_of_birth')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Occupation *</label>
                        <input type="text" name="occupation" id="occupation" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('occupation') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter occupation" required>
                        @error('occupation')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Name of the Company & Designation *</label>
                        <input type="text" name="company_designation" id="company_designation" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('company_designation') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter company name and designation" required>
                        @error('company_designation')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Contact Number *</label>
                        <input type="tel" name="contact_number" id="contact_number" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('contact_number') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter mobile number" required>
                        @error('contact_number')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                        <p id="contact_number_error" class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1 hidden" style="color: #dc2626;">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                            Contact number must contain only numbers
                        </p>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-gray-700 font-medium mb-3">E-mail Id</label>
                        <input type="email" name="email" id="email" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('email') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter email address">
                        @error('email')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                        <p id="email_error" class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1 hidden" style="color: #dc2626;">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                            Please enter a valid email address
                        </p>
                    </div>
                </div>
            </div>

            <!-- Residing Address -->
            <div class="p-8 border-b border-gray-100">
                <div class="flex items-center gap-3 mb-8">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl flex items-center justify-center shadow-lg">
                        <span class="text-white text-2xl font-bold">📍</span>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900">Residing Address</h2>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label class="block text-gray-700 font-medium mb-3">Address *</label>
                        <textarea name="residing_address" id="residing_address" rows="3" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('residing_address') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter residing address" required></textarea>
                        @error('residing_address')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">State *</label>
                        <input type="text" name="residing_state" id="residing_state" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('residing_state') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Select state" required>
                        @error('residing_state')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">District *</label>
                        <input type="text" name="residing_district" id="residing_district" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('residing_district') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter district" required>
                        @error('residing_district')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Pin code *</label>
                        <input type="text" name="residing_pincode" id="residing_pincode" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('residing_pincode') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter pin code" required>
                        @error('residing_pincode')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                        <p id="residing_pincode_error" class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1 hidden" style="color: #dc2626;">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                            Pin code must contain only numbers
                        </p>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Alternate Number *</label>
                        <input type="tel" name="residing_alternate_number" id="residing_alternate_number" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('residing_alternate_number') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter residing phone number" required>
                        @error('residing_alternate_number')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                        <p id="residing_alternate_number_error" class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1 hidden" style="color: #dc2626;">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                            Alternate number must contain only numbers
                        </p>
                    </div>
                </div>
            </div>

            <!-- Permanent Address -->
            <div class="p-8 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white">
                <div class="flex items-center gap-3 mb-8">
                    <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-indigo-700 rounded-xl flex items-center justify-center shadow-lg">
                        <span class="text-white text-2xl font-bold">🏠</span>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900">Permanent Address</h2>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label class="block text-gray-700 font-medium mb-3">Address *</label>
                        <textarea name="permanent_address" id="permanent_address" rows="3" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('permanent_address') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter permanent address" required></textarea>
                        @error('permanent_address')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">State *</label>
                        <input type="text" name="permanent_state" id="permanent_state" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('permanent_state') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter state" required>
                        @error('permanent_state')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Pin code *</label>
                        <input type="text" name="permanent_pincode" id="permanent_pincode" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('permanent_pincode') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter pin code" required>
                        @error('permanent_pincode')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                        <p id="permanent_pincode_error" class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1 hidden" style="color: #dc2626;">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                            Pin code must contain only numbers
                        </p>
                    </div>
                </div>
            </div>

            <!-- Booking Details -->
            <div class="p-8 border-b border-gray-100">
                <div class="flex items-center gap-3 mb-8">
                    <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-emerald-700 rounded-xl flex items-center justify-center shadow-lg">
                        <span class="text-white text-2xl font-bold">📄</span>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900">Booking Details</h2>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Date Of Booking *</label>
                        <input type="date" name="date_of_booking" id="date_of_booking" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('date_of_booking') border-red-400 ring-1 ring-red-200 @enderror" required>
                        @error('date_of_booking')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Rate per sft</label>
                        <input type="number" step="0.01" name="rate_per_sft" id="rate_per_sft" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('rate_per_sft') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter rate per sft">
                        @error('rate_per_sft')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Project Name</label>
                        <select name="project_name" id="project_name" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('project_name') border-red-400 ring-1 ring-red-200 @enderror" required>
                            <option value="">Select project</option>
                            <option value="Serene County">Serene County</option>
                            <option value="Green Woods">Green Woods</option>
                            <option value="Smilee Nisarga">Smilee Nisarga</option>
                            <option value="Heavenly Woods Phase 2">Heavenly Woods Phase 2</option>
                            <option value="Opera White House">Opera White House</option>
                            <option value="Alta Vista">Alta Vista</option>
                        </select>
                        @error('project_name')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Plot Number *</label>
                        <input type="text" name="plot_number" id="plot_number" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('plot_number') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter plot number" required>
                        @error('plot_number')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Size of the Plot(sq ft)</label>
                        <input type="text" name="plot_size" id="plot_size" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('plot_size') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter plot size">
                        @error('plot_size')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Facing of the Plot</label>
                        <input type="text" name="plot_facing" id="plot_facing" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('plot_facing') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter facing of the plot">
                        @error('plot_facing')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Payment Details -->
            <div class="p-8 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white">
                <div class="flex items-center gap-3 mb-8">
                    <div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-700 rounded-xl flex items-center justify-center shadow-lg">
                        <span class="text-white text-2xl font-bold">💰</span>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900">Payment Details</h2>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Amount Paid *</label>
                        <input type="number" step="0.01" name="amount_paid" id="amount_paid" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('amount_paid') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter amount paid" required>
                        @error('amount_paid')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Payment Made By *</label>
                        <select name="payment_made_by" id="payment_made_by" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('payment_made_by') border-red-400 ring-1 ring-red-200 @enderror" required>
                            <option value="">Select payment method</option>
                            <option value="Cash">Cash</option>
                            <option value="Cheque">Cheque</option>
                            <option value="Bank Transfer">Bank Transfer</option>
                            <option value="UPI">UPI</option>
                        </select>
                        @error('payment_made_by')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Bank Name *</label>
                        <input type="text" name="bank_name" id="bank_name" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('bank_name') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter bank name" required>
                        @error('bank_name')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Next Payment Date</label>
                        <input type="date" name="next_payment_date" id="next_payment_date" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('next_payment_date') border-red-400 ring-1 ring-red-200 @enderror">
                        @error('next_payment_date')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Amount of Next Payment</label>
                        <input type="number" step="0.01" name="next_payment_amount" id="next_payment_amount" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('next_payment_amount') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter amount of next payment">
                        @error('next_payment_amount')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Name of Company Representative *</label>
                        <input type="text" name="company_representative" id="company_representative" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('company_representative') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter name of company representative" required>
                        @error('company_representative')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Other Details -->
            <div class="p-8 border-b border-gray-100">
                <div class="flex items-center gap-3 mb-8">
                    <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-700 rounded-xl flex items-center justify-center shadow-lg">
                        <span class="text-white text-2xl font-bold">ℹ️</span>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900">Other Details</h2>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Are you looking forward for loan?</label>
                        <div class="flex items-center space-x-6 bg-gray-50 p-4 rounded-xl">
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="looking_for_loan" value="1" class="w-5 h-5 text-primary-600 focus:ring-primary-500">
                                <span class="ml-3 text-gray-700 font-medium">Yes</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="looking_for_loan" value="0" class="w-5 h-5 text-primary-600 focus:ring-primary-500" checked>
                                <span class="ml-3 text-gray-700 font-medium">No</span>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-3">Source of information about the project/company *</label>
                        <select name="source_of_information" id="source_of_information" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('source_of_information') border-red-400 ring-1 ring-red-200 @enderror" required>
                            <option value="">Select source</option>
                            <option value="Newspaper ad">Newspaper ad</option>
                            <option value="Social Media">Social Media</option>
                            <option value="Friend/Relative">Friend/Relative</option>
                            <option value="Website">Website</option>
                            <option value="Direct Visit">Direct Visit</option>
                            <option value="Other">Other</option>
                        </select>
                        @error('source_of_information')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-gray-700 font-medium mb-3">Detail of Source *</label>
                        <input type="text" name="source_detail" id="source_detail" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('source_detail') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter detail of source" required>
                        @error('source_detail')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-gray-700 font-medium mb-3">Suggestions for Project</label>
                        <textarea name="suggestions" id="suggestions" rows="3" class="w-full px-5 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-all shadow-sm hover:shadow-md @error('suggestions') border-red-400 ring-1 ring-red-200 @enderror" placeholder="Enter your suggestions"></textarea>
                        @error('suggestions')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div class="md:col-span-2">
                        <label class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl cursor-pointer">
                            <input type="checkbox" name="terms_accepted" id="terms_accepted" class="w-5 h-5 mt-0.5 text-primary-600 focus:ring-primary-500 rounded" required>
                            <div class="flex-1">
                                <span class="text-gray-700 font-medium">I agree to the Terms & Conditions</span>
                                <p class="text-sm text-gray-500 mt-1">By checking this box, you confirm that you have read and agreed to our terms and conditions</p>
                            </div>
                        </label>
                        @error('terms_accepted')
                            <p class="text-red-600 font-semibold text-sm mt-2 flex items-center gap-1" style="color: #dc2626;">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="p-8 bg-gradient-to-r from-gray-50 to-white">
                <div class="max-w-2xl mx-auto">
                    <button type="submit" class="w-full bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white font-bold py-6 px-8 rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-4 border border-primary-500">
                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                        </svg>
                        <span class="text-xl">Submit Booking</span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const bookingForm = document.getElementById('bookingForm');
    const lettersOnlyRegex = /^[a-zA-Z\s]*$/;
    const numbersOnlyRegex = /^[0-9+\-\s()]*$/;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    const validateField = (input, errorElement, regex) => {
        if (!regex.test(input.value) && input.value.length > 0) {
            errorElement.classList.remove('hidden');
            input.classList.add('border-red-400', 'ring-1', 'ring-red-200');
            input.classList.remove('border-gray-200');
        } else {
            errorElement.classList.add('hidden');
            input.classList.remove('border-red-400', 'ring-1', 'ring-red-200');
            input.classList.add('border-gray-200');
        }
    };

    const fullNameInput = document.getElementById('full_name');
    const fullNameError = document.getElementById('full_name_error');
    fullNameInput.addEventListener('input', function() {
        validateField(this, fullNameError, lettersOnlyRegex);
    });

    const fatherHusbandNameInput = document.getElementById('father_husband_name');
    const fatherHusbandNameError = document.getElementById('father_husband_name_error');
    fatherHusbandNameInput.addEventListener('input', function() {
        validateField(this, fatherHusbandNameError, lettersOnlyRegex);
    });

    const contactNumberInput = document.getElementById('contact_number');
    const contactNumberError = document.getElementById('contact_number_error');
    contactNumberInput.addEventListener('input', function() {
        validateField(this, contactNumberError, numbersOnlyRegex);
    });

    const emailInput = document.getElementById('email');
    const emailError = document.getElementById('email_error');
    emailInput.addEventListener('input', function() {
        if (!emailRegex.test(this.value) && this.value.length > 0) {
            emailError.classList.remove('hidden');
            this.classList.add('border-red-400', 'ring-1', 'ring-red-200');
            this.classList.remove('border-gray-200');
        } else {
            emailError.classList.add('hidden');
            this.classList.remove('border-red-400', 'ring-1', 'ring-red-200');
            this.classList.add('border-gray-200');
        }
    });

    const residingPincodeInput = document.getElementById('residing_pincode');
    const residingPincodeError = document.getElementById('residing_pincode_error');
    residingPincodeInput.addEventListener('input', function() {
        validateField(this, residingPincodeError, numbersOnlyRegex);
    });

    const residingAlternateNumberInput = document.getElementById('residing_alternate_number');
    const residingAlternateNumberError = document.getElementById('residing_alternate_number_error');
    residingAlternateNumberInput.addEventListener('input', function() {
        validateField(this, residingAlternateNumberError, numbersOnlyRegex);
    });

    const permanentPincodeInput = document.getElementById('permanent_pincode');
    const permanentPincodeError = document.getElementById('permanent_pincode_error');
    permanentPincodeInput.addEventListener('input', function() {
        validateField(this, permanentPincodeError, numbersOnlyRegex);
    });

    bookingForm.addEventListener('submit', function(e) {
        let isValid = true;

        if (!lettersOnlyRegex.test(fullNameInput.value)) {
            fullNameError.classList.remove('hidden');
            fullNameInput.classList.add('border-red-400', 'ring-1', 'ring-red-200');
            isValid = false;
        }

        if (!lettersOnlyRegex.test(fatherHusbandNameInput.value)) {
            fatherHusbandNameError.classList.remove('hidden');
            fatherHusbandNameInput.classList.add('border-red-400', 'ring-1', 'ring-red-200');
            isValid = false;
        }

        if (!numbersOnlyRegex.test(contactNumberInput.value)) {
            contactNumberError.classList.remove('hidden');
            contactNumberInput.classList.add('border-red-400', 'ring-1', 'ring-red-200');
            isValid = false;
        }

        if (emailInput.value.length > 0 && !emailRegex.test(emailInput.value)) {
            emailError.classList.remove('hidden');
            emailInput.classList.add('border-red-400', 'ring-1', 'ring-red-200');
            isValid = false;
        }

        if (!numbersOnlyRegex.test(residingPincodeInput.value)) {
            residingPincodeError.classList.remove('hidden');
            residingPincodeInput.classList.add('border-red-400', 'ring-1', 'ring-red-200');
            isValid = false;
        }

        if (!numbersOnlyRegex.test(residingAlternateNumberInput.value)) {
            residingAlternateNumberError.classList.remove('hidden');
            residingAlternateNumberInput.classList.add('border-red-400', 'ring-1', 'ring-red-200');
            isValid = false;
        }

        if (!numbersOnlyRegex.test(permanentPincodeInput.value)) {
            permanentPincodeError.classList.remove('hidden');
            permanentPincodeInput.classList.add('border-red-400', 'ring-1', 'ring-red-200');
            isValid = false;
        }

        if (!isValid) {
            e.preventDefault();
        }
    });
});
</script>
@endsection