haikal/templates/csv_upload.html

{% 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>
    <div class="d-flex justify-content-end">
        <a href="{% static 'sample/cars_sample.csv' %}" class="btn btn-outline-success 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-primary">Upload</button>
        <a href="{{ request.META.HTTP_REFERER }}" class="btn btn-secondary">Cancel</a>
    </form>
</div>
{% endblock %}