{% extends "base.html" %}
{% load static i18n %}
{% block title %}
    {% trans "Car Bulk Upload"|capfirst %}
{% endblock %}

{% 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 <i class="fa-solid fa-file-csv text-primary"></i></h2>
        <div class="d-flex justify-content-end">
            <a href="{% static 'sample/cars_sample.csv' %}" class="btn btn-phoenix-primary mt-4">
                <i class="fa-solid fa-file-csv me-2"></i>Download Sample CSV
            </a>
        </div>

        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-outline-warning }} mt-4" role="alert">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}

        <form method="post" enctype="multipart/form-data" class="mt-4">
            {% csrf_token %}
            {% if not item %}
                <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">
                        <div class="col">
                            <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>
                        </div>
                        <div class="col">
                            <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>
            {% endif %}
            {% if item %}
                <h3 class="mt-4">List of Items</h3>
                <ul class="list-group">
                    <li class="list-group-item">
                        <span class="badge bg-primary">{{ item.item_model }}</span>
                    </li>
                </ul>
            {% endif %}
            <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")}}
                </div>
            </div>
            <button type="submit" class="btn btn-phoenix-primary mb-2">Upload</button>
            <a href="{% url 'car_list' request.dealer.slug %}" class="btn btn-phoenix-secondary mb-2">Cancel</a>
        </form>
    </div>
{% endblock %}