{% extends "base.html" %}

{% block title %}Book {{ package.name }}{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h3 class="mb-0">Confirm Your Booking</h3>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <img src="{{ package.image_url or 'https://via.placeholder.com/200' }}" 
                                 class="img-fluid rounded" alt="{{ package.name }}">
                        </div>
                        <div class="col-md-8">
                            <h4>{{ package.name }}</h4>
                            <p class="text-muted"><i class="fas fa-map-marker-alt"></i> {{ package.location }}</p>
                            <p><strong>Duration:</strong> {{ package.duration_days }} Days</p>
                            <p><strong>Price:</strong> ${{ package.price }}</p>
                        </div>
                    </div>

                    <hr>

                    <form action="/book/{{ package.package_id }}" method="POST">
                        <div class="mb-3">
                            <label for="travel_date" class="form-label">When would you like to travel?</label>
                            <input type="date" class="form-control" id="travel_date" name="travel_date" required>
                            <div class="form-text">Please select a date at least 7 days from today.</div>
                        </div>

                        <div class="alert alert-info">
                            <h5>Booking Terms:</h5>
                            <ul>
                                <li>Cancellation is free up to 48 hours before the travel date.</li>
                                <li>Payment will be processed upon confirmation.</li>
                            </ul>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <a href="/package/{{ package.package_id }}" class="btn btn-secondary me-md-2">Back to Details</a>
                            <button type="submit" class="btn btn-success px-5">Confirm Booking</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}