{% extends 'base.html' %}
{% load static %}

{% block title %}Book a Property Inspection | {{ site.site_name }}{% endblock %}

{% block extra_css %}
<style>
    @media (max-width: 991px) {
        .schedule-grid {
            grid-template-columns: 1fr !important;
            gap: 30px !important;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="page-hero">
    <div class="container">
        <div class="page-hero-content">
            <h1>Book a Property Inspection</h1>
            <p>Share a few details about your visit and our team will confirm your appointment, send directions, and prepare the right information ahead of time.</p>
        </div>
    </div>
</div>

<div class="breadcrumb-bar">
    <div class="container">
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="{% url 'core:home' %}">Home</a>
            <span>&rsaquo;</span>
            <span class="current">Book Inspection</span>
        </nav>
    </div>
</div>

<section class="section" style="background: var(--bg);">
    <div class="container">
        <div class="schedule-grid" style="display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start;">
            
            <!-- Left: Form -->
            <div class="schedule-form-container" style="background: var(--white); border-radius: var(--radius-lg); padding: 40px; border: 1px solid var(--border); box-shadow: var(--shadow);">
                <form method="post" action="{% url 'enquiries:schedule' %}">
                    {% csrf_token %}
                    
                    <div class="form-row-2">
                        <div class="form-group">
                            <label class="form-label" style="text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 700;">Full Name</label>
                            {{ form.full_name }}
                            {{ form.full_name.errors }}
                        </div>
                        <div class="form-group">
                            <label class="form-label" style="text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 700;">Mobile Number</label>
                            {{ form.phone }}
                            {{ form.phone.errors }}
                        </div>
                    </div>

                    <div class="form-group" style="margin-bottom: 20px;">
                        <label class="form-label" style="text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 700;">Email Address</label>
                        {{ form.email }}
                        {{ form.email.errors }}
                    </div>

                    <div class="form-row-3">
                        <div class="form-group">
                            <label class="form-label" style="text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 700;">City for Inspection</label>
                            {{ form.city }}
                            {{ form.city.errors }}
                        </div>
                        <div class="form-group">
                            <label class="form-label" style="text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 700;">Preferred Date</label>
                            {{ form.requested_date }}
                            {{ form.requested_date.errors }}
                        </div>
                        <div class="form-group">
                            <label class="form-label" style="text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 700;">Preferred Time</label>
                            {{ form.preferred_time }}
                            {{ form.preferred_time.errors }}
                        </div>
                    </div>

                    <div class="form-row-custom">
                        <div class="form-group">
                            <label class="form-label" style="text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 700;">Estate / Location</label>
                            <select name="estate_location" id="id_estate_location" class="form-control" required>
                                <option value="">Select estate or location</option>
                                <optgroup label="Properties">
                                    {% for prop in properties %}
                                    <option value="property_{{ prop.id }}" {% if selected_type == 'property' and selected_id == prop.id %}selected{% endif %}>{{ prop.title }}</option>
                                    {% endfor %}
                                </optgroup>
                                <optgroup label="Projects">
                                    {% for proj in projects %}
                                    <option value="project_{{ proj.id }}" {% if selected_type == 'project' and selected_id == proj.id %}selected{% endif %}>{{ proj.title }}</option>
                                    {% endfor %}
                                </optgroup>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label" style="text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 700;">Number of Guests</label>
                            {{ form.guests }}
                            {{ form.guests.errors }}
                        </div>
                    </div>

                    <div class="form-group" style="margin-bottom: 28px;">
                        <label class="form-label" style="text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 700;">Anything we should prepare ahead?</label>
                        {{ form.notes }}
                        {{ form.notes.errors }}
                    </div>

                    <button type="submit" class="btn btn-primary" style="padding: 14px 40px; border-radius: 50px; text-transform: uppercase; font-weight: 700; width: 100%; justify-content: center; letter-spacing: 0.5px;">
                        SCHEDULE APPOINTMENT
                    </button>
                </form>
            </div>

            <!-- Right: Info cards -->
            <div class="schedule-info-container" style="display: flex; flex-direction: column; gap: 24px;">
                
                <!-- Notice Banner -->
                <div style="background: var(--primary); color: var(--white); padding: 24px; border-radius: var(--radius-lg); border-left: 5px solid var(--accent); box-shadow: var(--shadow);">
                    <p style="margin: 0; font-size: 0.92rem; line-height: 1.6;">After you submit the form, a member of the team will call or email to confirm your time slot.</p>
                </div>

                <!-- Handled Safely Card -->
                <div style="background: var(--white); border-radius: var(--radius-lg); padding: 36px 30px; border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 20px;">
                    <h3 class="h-3" style="color: var(--dark); font-weight: 800; border-bottom: 2px solid var(--border); padding-bottom: 12px; margin-bottom: 8px;">Your visit, handled safely.</h3>
                    <p style="color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; margin-top: -10px;">Our team follows a clear on-site protocol so your inspection is smooth, safe, and productive.</p>
                    
                    <div style="display: flex; flex-direction: column; gap: 18px;">
                        <div style="display: flex; gap: 12px; align-items: start;">
                            <div style="width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0;"></div>
                            <div>
                                <h4 style="font-size: 0.9rem; font-weight: 700; color: var(--dark); margin-bottom: 2px;">Verified staff only.</h4>
                                <p style="font-size: 0.82rem; color: var(--text-muted); line-height: 1.5;">You will meet with a {{ site.site_name }} representative whose details are shared with you ahead of time.</p>
                            </div>
                        </div>

                        <div style="display: flex; gap: 12px; align-items: start;">
                            <div style="width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0;"></div>
                            <div>
                                <h4 style="font-size: 0.9rem; font-weight: 700; color: var(--dark); margin-bottom: 2px;">Secure access control.</h4>
                                <p style="font-size: 0.82rem; color: var(--text-muted); line-height: 1.5;">Gated entrances, visitor logs, and coordinated entry with estate security teams.</p>
                            </div>
                        </div>

                        <div style="display: flex; gap: 12px; align-items: start;">
                            <div style="width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0;"></div>
                            <div>
                                <h4 style="font-size: 0.9rem; font-weight: 700; color: var(--dark); margin-bottom: 2px;">Prepared documentation pack.</h4>
                                <p style="font-size: 0.82rem; color: var(--text-muted); line-height: 1.5;">Where applicable, we provide layouts, payment plans, and title status during or immediately after the visit.</p>
                            </div>
                        </div>
                    </div>

                    <div style="margin-top: 14px; border-top: 1px solid var(--border); padding-top: 18px; font-size: 0.85rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center;">
                        <span style="color: var(--text-muted);">Need to talk first?</span>
                        <a href="https://wa.me/{{ site.whatsapp }}" target="_blank" rel="noopener" style="color: var(--primary); display: inline-flex; align-items: center; gap: 4px; transition: var(--transition); text-decoration: none;">
                            Speak with our team <i class="fas fa-arrow-right" style="font-size: 0.75rem;"></i>
                        </a>
                    </div>
                </div>

            </div>

        </div>
    </div>
</section>
{% endblock %}