@extends('layouts.app')

@section('content')

<section class="inner_page_breadcrumb">
    <div class="container">
        <div class="row">
            <div class="col-xl-6">
                <div class="breadcrumb_content style2">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item active text-thm" aria-current="page">Book a Visit</li>
                    </ol>
                    <h2 class="breadcrumb_title">Book a Visit</h2>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="our-contact pt40 pb40 bgc-f7">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-xl-8 mx-auto">
                <div class="form_grid">
                    <h4 class="mb5">Request a Property Viewing</h4>
                    <p>Fill in the form below to schedule a visit. We will get back to you to confirm your appointment.</p>

                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <form class="contact_form" id="book_visit_form" action="{{ route('book-visit.store') }}" method="post">
                        @csrf
                        <div class="row">
                            {{-- Property Information --}}
                            <div class="col-sm-12">
                                <h5 class="mb-3">Property Information</h5>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="property_ref_id">Property Reference Number</label>
                                    <input id="property_ref_id" name="property_ref_id" class="form-control @error('property_ref_id') is-invalid @enderror" type="text" placeholder="e.g. REF-12345" value="{{ old('property_ref_id', $refId ?? '') }}">
                                    @error('property_ref_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Visitor Details --}}
                            <div class="col-sm-12 mt-4">
                                <h5 class="mb-3">Your Details</h5>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="name">Full Name <span class="text-danger">*</span></label>
                                    <input id="name" name="name" class="form-control @error('name') is-invalid @enderror" required type="text" placeholder="Your full name" value="{{ old('name') }}">
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email">Email Address <span class="text-danger">*</span></label>
                                    <input id="email" name="email" class="form-control @error('email') is-invalid @enderror" required type="email" placeholder="your@email.com" value="{{ old('email') }}">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="phone">Phone Number <span class="text-danger">*</span></label>
                                    <input id="phone" name="phone" class="form-control @error('phone') is-invalid @enderror" required type="tel" placeholder="+34 600 000 000" value="{{ old('phone') }}">
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="contact_method">Preferred Contact Method</label>
                                    <select id="contact_method" name="contact_method" class="form-control @error('contact_method') is-invalid @enderror">
                                        <option value="email" {{ old('contact_method', 'email') === 'email' ? 'selected' : '' }}>Email</option>
                                        <option value="phone" {{ old('contact_method') === 'phone' ? 'selected' : '' }}>Phone</option>
                                        <option value="whatsapp" {{ old('contact_method') === 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
                                    </select>
                                    @error('contact_method')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Visit Preferences --}}
                            <div class="col-sm-12 mt-4">
                                <h5 class="mb-3">Visit Preferences</h5>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="visit_purpose">Purpose of Visit</label>
                                    <select id="visit_purpose" name="visit_purpose" class="form-control @error('visit_purpose') is-invalid @enderror">
                                        <option value="buy" {{ old('visit_purpose') === 'buy' ? 'selected' : '' }}>Buy</option>
                                        <option value="rent_lt" {{ old('visit_purpose') === 'rent_lt' ? 'selected' : '' }}>Rent (Long Term)</option>
                                        <option value="rent_st" {{ old('visit_purpose') === 'rent_st' ? 'selected' : '' }}>Rent (Short Term)</option>
                                        <option value="general" {{ old('visit_purpose', 'general') === 'general' ? 'selected' : '' }}>General Inquiry</option>
                                    </select>
                                    @error('visit_purpose')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="preferred_date">Preferred Visit Date</label>
                                    <input id="preferred_date" name="preferred_date" class="form-control @error('preferred_date') is-invalid @enderror" type="date" value="{{ old('preferred_date') }}" min="{{ date('Y-m-d') }}">
                                    @error('preferred_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="preferred_time">Preferred Time Slot</label>
                                    <select id="preferred_time" name="preferred_time" class="form-control @error('preferred_time') is-invalid @enderror">
                                        <option value="">Select time</option>
                                        <option value="morning" {{ old('preferred_time') === 'morning' ? 'selected' : '' }}>Morning</option>
                                        <option value="afternoon" {{ old('preferred_time') === 'afternoon' ? 'selected' : '' }}>Afternoon</option>
                                        <option value="evening" {{ old('preferred_time') === 'evening' ? 'selected' : '' }}>Evening</option>
                                    </select>
                                    @error('preferred_time')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="number_of_visitors">Number of Visitors</label>
                                    <input id="number_of_visitors" name="number_of_visitors" class="form-control @error('number_of_visitors') is-invalid @enderror" type="number" min="1" max="255" value="{{ old('number_of_visitors', 1) }}">
                                    @error('number_of_visitors')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Additional Information --}}
                            <div class="col-sm-12 mt-4">
                                <h5 class="mb-3">Additional Information</h5>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="message">Message / Notes</label>
                                    <textarea id="message" name="message" class="form-control @error('message') is-invalid @enderror" rows="5" placeholder="Any additional details or questions">{{ old('message') }}</textarea>
                                    @error('message')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group mb0">
                                    <button type="submit" class="btn btn-lg btn-thm" id="book_visit_submit">Submit Request</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

@push('scripts')
<script>
document.getElementById('book_visit_form').addEventListener('submit', function() {
    var btn = document.getElementById('book_visit_submit');
    if (btn) {
        btn.disabled = true;
        btn.textContent = 'Submitting...';
    }
});
</script>
@endpush

@endsection