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

{% block title%}
 Order drinks
{% endblock title %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'CSS/request_take.css' %}">
{% endblock %}

{% block head %}
    Order Drinks
{% endblock head %}

{% block header %}
    Drinks Order - Place your order
{% endblock header %}

{% block extra%}{% endblock extra %}

{% block content %}
<!-- Styled using Uiverse.io form classes -->

<h1 style="text-align:center; margin-bottom:15px; color:#0d6efd; font-size:small;">
    📝 Request Soda/Water
</h1>

<form method="post" class="form">
    {% csrf_token %}

    <p class="title">Register</p>
    <p class="message">Signup now and get full access to our app.</p>

    <label>
        <input required type="text" list="car_list" name="car_id" class="input">
        <span>Plate Number</span>
    </label>

    <datalist id="car_list">
        {% for car in cars_datalist %}
            <option value="{{ car.plate_number }}"></option>
        {% endfor %}
    </datalist>

    <datalist id="regions">
        {% for region in regions_datalist %}
            <option value="{{ region.name }}"></option>
        {% endfor %}
    </datalist>

    <h3 style="margin-top:20px; color:#198754;">⏩ Going Route</h3>

    <label>
        <input required type="date" name="trip_date" class="input">
        <span>Going Route Date</span>
    </label>

    <label>
        <input required type="text" list="regions" name="start" class="input">
        <span>Start</span>
    </label>

    <label>
        <input required type="text" list="regions" name="destination" class="input">
        <span>Destination</span>
    </label>

    <label>
        <input required type="number" name="passenger_number" min="0" class="input">
        <span>Passenger No</span>
    </label>

    <h3 style="margin-top:20px; color:#198754;">🔁 Return Route</h3>

    <label>
        <input required type="date" name="return_trip_date" class="input">
        <span>Return Route Date</span>
    </label>

    <label>
        <input required type="text" list="regions" name="return_start" class="input">
        <span>Return Start</span>
    </label>

    <label>
        <input required type="text" list="regions" name="return_destination" class="input">
        <span>Return Destination</span>
    </label>

    <label>
        <input required type="number" name="return_passenger_number" min="0" class="input">
        <span>Return Passenger No</span>
    </label>

    <h3 style="margin-top:20px; color:#0d6efd;">🥤 Drinks</h3>

    <div class="flex">
        <label>
            <span>Soda</span>
            <input type="number" name="soda_amount" min="0" class="input">
        </label>

        <label>
            <span>Water</span>
            <input type="number" name="water_amount" min="0" class="input">
        </label>
    </div>

    <div style="display: flex; justify-content: center;"><button class="submit" type="submit">Request</button></div>
</form>

{% endblock content %}