{% extends "admin_base.html" %}
{% block title %}Manage Cars{% endblock %}
{% block content %}

<h1 class="mb-4">Manage Cars</h1>

<div class="row">
    <div class="col-md-6">
        <h2>Add New Car</h2>
        <form method="POST" enctype="multipart/form-data">
            {{ form.csrf_token }}
            <div class="mb-3">
                {{ form.name.label(class="form-label") }}
                {{ form.name(class="form-control") }}
            </div>
            <div class="mb-3">
                {{ form.capacity.label(class="form-label") }}
                {{ form.capacity(class="form-control", type="number") }}
            </div>
            <div class="mb-3">
                {{ form.price_per_day.label(class="form-label") }}
                {{ form.price_per_day(class="form-control", type="number") }}
            </div>
            <div class="mb-3">
                {{ form.image.label(class="form-label") }}
                {{ form.image(class="form-control") }}
            </div>
            <div class="mb-3">
                {{ form.category.label(class="form-label") }}
                {{ form.category(class="form-select") }}
            </div>
            <div class="mb-3 form-check">
                {{ form.has_ac(class="form-check-input") }}
                {{ form.has_ac.label(class="form-check-label") }}
            </div>
            <div class="mb-3 form-check">
                {{ form.has_usb(class="form-check-input") }}
                {{ form.has_usb.label(class="form-check-label") }}
            </div>
            <div class="mb-3 form-check">
                {{ form.has_player(class="form-check-input") }}
                {{ form.has_player.label(class="form-check-label") }}
            </div>
            <div class="mb-3 form-check">
                {{ form.has_bluetooth(class="form-check-input") }}
                {{ form.has_bluetooth.label(class="form-check-label") }}
            </div>
            <div class="mb-3">
                {{ form.luggage_space.label(class="form-label") }}
                {{ form.luggage_space(class="form-control") }}
            </div>
            {{ form.submit(class="btn btn-primary") }}
        </form>
    </div>

    <div class="col-md-6">
        <h2>Existing Cars</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Capacity</th>
                    <th>Price per Day</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for car in cars %}
                <tr>
                    <td>{{ car.name }}</td>
                    <td>{{ car.category.value }}</td>
                    <td>{{ car.capacity }}</td>
                    <td>{{ car.price_per_day }}</td>
                    <td>
                        <a href="{{ url_for('admin_blueprint.edit_car', id=car.id) }}" class="btn btn-sm btn-primary">Edit</a>
                        <form action="{{ url_for('admin_blueprint.delete_car', id=car.id) }}" method="POST" style="display:inline;">
                            {{ form.csrf_token }}
                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this car?')">Delete</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% endblock %}