{% extends "base.html" %}
{% block title %}Request a Quote - LKgetaways{% endblock %}
{% block description %}Request a personalized quote for your travel needs in Sri Lanka with LKgetaways.{% endblock %}

{% block inner_hero_background %}/static/images/request-quote-inner.avif{% endblock %}
{% block inner_hero_title %}Request a Quote{% endblock %}
{% block inner_hero_subtitle %} {% endblock %}

{% block content %}
<div class="container mt-5">
   

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}
    
    {% if request_type == 'car' %}
        <div class="alert alert-info">You are requesting a quote for the car: {{ car.name }}</div>
    {% elif request_type == 'tour' %}
        <div class="alert alert-info">You are requesting a quote for the tour: {{ tour.title }}</div>
    {% else %}
        <p class="lead">Please fill out the form below for a general quote request.</p>
    {% endif %}

    <form method="POST" id="quoteForm">
        {{ form.hidden_tag() }}
        {{ form.car_id(value=car.id if car else '') }}
        {{ form.tour_id(value=tour.id if tour else '') }}
        {{ form.car_name(value=car.name if car else '') }}
        {{ form.tour_name(value=tour.title if tour else '') }}
        <div class="row g-3">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Personal Information</h5>
                        <div class="row g-2">
                            <div class="col-md-6">
                                {{ form.first_name.label(class="form-label") }}
                                {{ form.first_name(class="form-control", placeholder="Enter your first name") }}
                            </div>
                            <div class="col-md-6">
                                {{ form.last_name.label(class="form-label") }}
                                {{ form.last_name(class="form-control", placeholder="Enter your last name") }}
                            </div>
                        </div>
                        <div class="mb-3">
                            {{ form.country.label(class="form-label") }}
                            {{ form.country(class="form-control", placeholder="Enter your country") }}
                        </div>
                        <div class="mb-3">
                            {{ form.email.label(class="form-label") }}
                            {{ form.email(class="form-control", placeholder="Enter your email") }}
                        </div>
                        <div class="mb-3">
                            {{ form.phone.label(class="form-label") }}
                            {{ form.phone(class="form-control", placeholder="Enter your phone number") }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Trip Details</h5>
                        <div class="row g-2">
                            <div class="col-md-6">
                                {{ form.num_adults.label(class="form-label") }}
                                {{ form.num_adults(class="form-control", type="number", min="1") }}
                            </div>
                            <div class="col-md-6">
                                {{ form.num_children.label(class="form-label") }}
                                {{ form.num_children(class="form-control", type="number", min="0") }}
                            </div>
                        </div>
                        <div class="row g-2 mt-2">
                            <div class="col-md-6">
                                {{ form.date_from.label(class="form-label") }}
                                {{ form.date_from(class="form-control datepicker", type="text", placeholder="Select start date") }}
                            </div>
                            <div class="col-md-6">
                                {{ form.date_to.label(class="form-label") }}
                                {{ form.date_to(class="form-control datepicker", type="text", placeholder="Select end date") }}
                            </div>
                        </div>
                        <div class="mb-3 mt-2">
                            {{ form.message.label(class="form-label") }}
                            {{ form.message(class="form-control", rows="4", placeholder="Enter any additional details or requirements") }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-4">
            {{ form.submit(class="btn btn-primary btn-lg") }}
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script>
    $(document).ready(function(){
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            startDate: new Date()
        });
    });
</script>
{% endblock %}