{% extends "base.html" %}
{% load static i18n %}

{% block customCSS %}
<style>
    .color-card {
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        width: 80px;  /* Increased from 3rem for better visibility */
        height: 80px; /* Increased from 3rem for better visibility */
        margin-right: 10px;
    }

    .color-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .color-option {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        height: 100%;
    }

    .color-radio {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .color-radio:checked + .color-display {
        border: 2px solid #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
    }

    .color-radio:focus + .color-display {
        border-color: #86b7fe;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
    }

    .color-display {
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 10px;
        border-radius: 0.25rem;
        transition: all 0.2s ease;
    }

    .color-name {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 2px 5px;
        border-radius: 3px;
        text-align: center;
        width: 100%;
        font-size: 0.8rem;
    }

    /* Added for better layout of color options */
    .color-options-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
    }
</style>
{% endblock customCSS %}

{% block content %}
<div class="container mt-4">
    <h2>Upload Cars CSV</h2>

    {% if messages %}
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">
            {{ message }}
        </div>
        {% endfor %}
    {% endif %}

    <form method="post" enctype="multipart/form-data" class="mt-4">
        {% csrf_token %}

        <div class="row g-4">
            <div class="col">
                {% include "purchase_orders/partials/po-select.html" with name="make" target="model" data=make_data pk=po_model.pk %}
            </div>
            <div class="col">
                {% include "purchase_orders/partials/po-select.html" with name="model" target="serie" data=model_data pk=po_model.pk %}
            </div>
            <div class="col">
                {% include "purchase_orders/partials/po-select.html" with name="serie" target="trim" data=serie_data pk=po_model.pk %}
            </div>
            <div class="col">
                {% include "purchase_orders/partials/po-select.html" with name="trim" target="none" data=trim_data pk=po_model.pk %}
            </div>
        </div>
        <div class="row g-4">
          <div class="col">
            {{form.vendor.label}}
            {{form.vendor}}
          </div>
          <div class="col">
            {{form.year.label}}
            {{form.year}}
          </div>
          <div class="col">
            {{form.receiving_date.label}}
            {{form.receiving_date}}
          </div>
          </div>

        <div class="mb-3">
    <div class="row g-4">
        <p class="fs-5 mb-2">{% trans 'Exterior Colors' %}</p>
        <div class="color-options-container">
            {% for color in form.fields.exterior.queryset %}
            <div class="color-card">
                <label class="color-option">
                    <input class="color-radio" type="radio" name="exterior" value="{{ color.id }}" {% if color.id == form.instance.exterior.id %}checked{% endif %}>
                    <div class="color-display" style="background-color: rgb({{ color.rgb }})">
                        <span class="color-name">{{ color.get_local_name }}</span>
                    </div>
                </label>
            </div>
            {% endfor %}
        </div>

        <p class="fs-5 mb-2">{% trans 'Interior Colors' %}</p>
        <div class="color-options-container">
            {% for color in form.fields.interior.queryset %}
            <div class="color-card">
                <label class="color-option">
                    <input class="color-radio" type="radio" name="interior" value="{{ color.id }}" {% if color.id == form.instance.interior.id %}checked{% endif %}>
                    <div class="color-display" style="background-color: rgb({{ color.rgb }})">
                        <span class="color-name">{{ color.get_local_name }}</span>
                    </div>
                </label>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
        <div class="mb-3">
            <label for="csv_file" class="form-label">CSV File</label>
            <input type="file" class="form-control" id="csv_file" name="csv_file" accept=".csv" required>
            <div class="form-text">
                CSV should include columns: vin, make, model, year (required)
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Upload</button>
        <a href="{% url 'car_list' %}" class="btn btn-secondary">Cancel</a>
    </form>

    <div class="mt-4">
        <h4>CSV Format Example</h4>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>vin</th>
                    <th>make</th>
                    <th>model</th>
                    <th>year</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1HGCM82633A123456</td>
                    <td>Honda</td>
                    <td>Accord</td>
                    <td>2023</td>
                </tr>
            </tbody>
        </table>
        <a href="{% static 'sample/cars_sample.csv' %}" class="btn btn-outline-primary">
            Download Sample CSV
        </a>
    </div>
</div>
{% endblock %}