{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f8ff; /* Light blue color */
        text-align: center;
        padding-top: 10px; /* Adjust as needed */
    }

    .container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        max-width: 1200px;
        background-color: white;
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .search-section {
        width: 50%;
    }

    .promotion-section {
        padding-top: 10%;
        width: 45%;
        text-align: center;
    }

    h1 {
        color: #007bff;
        font-size: 2rem;
        margin-bottom: 30px;
        font-family: fangsong;
        font-weight: bold;
    }

    .search-form {
        width: 100%;
    }

    .form-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
        color: #333;
        font-weight: bold;
    }

    label {
        color: #333;
        display: block;
        text-align: left;
        margin-bottom: 5px;
        font-weight: bold;
    }

    input[type="text"],
    input[type="date"],
    input[type="number"] {
        width: 100%;
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1rem;
        color: #333;
    }

    button {
        background-color: #007bff;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s ease;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 1.2rem;
        font-weight: bold;
        font-family: fangsong;
        width: 100%;
    }

    button:hover {
        background-color: #0056b3;
    }

    .form-group {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .form-group i {
        margin-right: 10px;
        color: #007bff;
        font-size: 1.2rem;
    }

    .form-group label {
        flex: 1;
    }

    .form-group input {
        flex: 2;
    }

    .promotion-section h2 {
        color: #007bff;
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .promotion-section p {
        color: #333;
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .promotion-section img {
        width: 100px;
        margin-bottom: 20px;
    }

    .promotion-section button {
        width: auto;
        padding: 10px 20px;
    }
</style>
<div class="container">
    <div class="search-section">
        
        <div class="search-form">
            <div class="form-title"><h1>Welcome Times Travel</h1></div>
            <form action="{{ url_for('booking.search_hotels') }}" method="GET">
                <div class="form-group">
                    <i class="fas fa-map-marker-alt"></i>
                    <label for="location">Destination</label>
                    <select name="location" id="location" style="margin-left: 15%;" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                        <option value="">Select destination</option>
                        <option value="Makkah, Saudi Arabia">Makkah, Saudi Arabia</option>
                        <option value="Madinah, Saudi Arabia">Madinah, Saudi Arabia</option>
                    </select>
                </div>

                <div class="form-group">
                    <i class="fas fa-calendar-alt"></i>
                    <label for="check_in">Check-in</label>
                    <input type="date" name="check_in" id="check_in" required>
                </div>

                <div class="form-group">
                    <i class="fas fa-calendar-alt"></i>
                    <label for="check_out">Check-out</label>
                    <input type="date" name="check_out" id="check_out" required>
                </div>

                <div class="form-group">
                    <i class="fas fa-moon"></i>
                    <label for="total_nights">Total Nights</label>
                    <input type="text" name="total_nights" id="total_nights" placeholder="Total Nights" readonly>
                </div>
                
                <button type="submit"><i class="fas fa-search mx-2"></i>Search</button>
            </form>
        </div>
    </div>
    <div class="promotion-section">
        <div class="flex items-center mb-12">
            <img src="{{ url_for('static', filename='images/hotel.png') }}" alt="Hotel Icon" class="mr-4">
            <h2 class="text-lg font-bold">Experience luxury, receive more! Book now for added value.</h2>
        </div>        
        <p>This May, we're giving away 5x £200 vouchers towards your holiday wardrobe. All you have to do for your chance to win is book with Times Travel between now and 31 May '24.</p>
        <button>Know more</button>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const checkInInput = document.getElementById('check_in');
        const checkOutInput = document.getElementById('check_out');
        const totalNightsInput = document.getElementById('total_nights');

        checkInInput.addEventListener('input', updateTotalNights);
        checkOutInput.addEventListener('input', updateTotalNights);

        function updateTotalNights() {
            const checkInDate = new Date(checkInInput.value);
            const checkOutDate = new Date(checkOutInput.value);

            if (isNaN(checkInDate.getTime()) || isNaN(checkOutDate.getTime())) {
                totalNightsInput.value = '';
            } else {
                const diffTime = Math.abs(checkOutDate - checkInDate);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                totalNightsInput.value = diffDays + ' nights';
            }
        }
    });
</script>
{% endblock %}