{% extends 'layouts/base.html' %}
{% load i18n static %}

{% block title %}{% trans "Import Government Tickets" %} - PX360{% endblock %}

{% block extra_css %}
<style>
    .page-header-gradient {
        background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
        color: white;
        padding: 1.5rem 2rem;
        border-radius: 1rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
    }
    .form-section {
        background: white;
        border-radius: 1rem;
        border: 2px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    .form-section-header {
        padding: 1rem 1.5rem;
        border-bottom: 2px solid #e2e8f0;
        background: linear-gradient(to right, #f8fafc, #f1f5f9);
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .hh-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: #005696;
        color: white;
        border-radius: 0.75rem;
        font-weight: 600;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;
    }
    .hh-btn-primary:hover {
        background: #007bbd;
    }
    .hh-btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: white;
        color: #64748b;
        border: 2px solid #e2e8f0;
        border-radius: 0.75rem;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    .preview-table th {
        background: linear-gradient(to right, #f8fafc, #f1f5f9);
        font-weight: 600;
        color: #005696;
        border-bottom: 2px solid #e2e8f0;
        padding: 0.75rem 1rem;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }
    .preview-table td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.875rem;
    }
    .preview-table tbody tr:hover {
        background-color: #f8fafc;
    }
</style>
{% endblock %}

{% block content %}
<div class="px-6 py-4">
    <!-- Page Header -->
    <div class="page-header-gradient">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold">{% trans "Import Government Tickets" %}</h1>
                <p class="text-blue-100 text-sm">{% trans "Upload Excel file to import tickets from government sources" %}</p>
            </div>
            <div class="flex gap-2">
                <a href="{% url 'complaints:government_ticket_list' %}" class="hh-btn hh-btn-secondary">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i>{% trans "Back to List" %}
                </a>
            </div>
        </div>
    </div>

    <!-- Upload Form -->
    <div class="form-section mb-6">
        <div class="form-section-header">
            <i data-lucide="upload" class="w-5 h-5 text-navy"></i>
            <h5 class="text-lg font-semibold text-gray-800">{% trans "Upload File" %}</h5>
        </div>
        <div class="p-6">
            <form method="post" enctype="multipart/form-data" class="space-y-4">
                {% csrf_token %}
                <input type="hidden" name="action" value="preview">
                
                <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4 rounded-r-lg">
                    <div class="flex items-start">
                        <i data-lucide="info" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i>
                        <div class="ml-3">
                            <h3 class="text-sm font-semibold text-blue-800">{% trans "Instructions" %}</h3>
                            <div class="text-sm text-blue-700 mt-1 space-y-1">
                                <p>{% trans "Upload an Excel file (.xlsx) with the following columns:" %}</p>
                                <ul class="list-disc list-inside space-y-0.5">
                                    <li>{% trans "رقم التذكرة (Ticket Number) - Required" %}</li>
                                    <li>{% trans "اسم المشتكي (Complainant Name) - Required" %}</li>
                                    <li>{% trans "رقم الهوية (National ID)" %}</li>
                                    <li>{% trans "رقم التواصل (Contact Number)" %}</li>
                                    <li>{% trans "الموقع (Location)" %}</li>
                                    <li>{% trans "القسم الرئيسي (Main Section)" %}</li>
                                    <li>{% trans "القسم الفرعي (Subsection)" %}</li>
                                    <li>{% trans "تاريخ إنشاء التذكرة (Creation Date)" %}</li>
                                    <li>{% trans "وقت إنشاء التذكرة (Creation Time)" %}</li>
                                    <li>{% trans "تصنيف الشكوى (Classification)" %}</li>
                                    <li>{% trans "محتوى الشكوى (Content) - Required" %}</li>
                                    <li>{% trans "حالة الشكوى (Status)" %}</li>
                                    <li>{% trans "اسم الموظف (Assigned Staff)" %}</li>
                                </ul>
                                <p class="mt-2">{% trans "Note: The header row should be on the second row (row 2) of the Excel file." %}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Select Excel File" %}</label>
                    <input type="file" name="file" accept=".xlsx,.xls" required
                           class="block w-full text-sm text-gray-900 border border-gray-200 rounded-lg cursor-pointer bg-white focus:outline-none focus:ring-2 focus:ring-navy focus:border-navy p-2">
                </div>

                <div class="flex gap-3">
                    <button type="submit" class="hh-btn hh-btn-primary">
                        <i data-lucide="eye" class="w-4 h-4"></i>{% trans "Preview" %}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Preview Section -->
    {% if preview_data %}
    <div class="form-section mb-6">
        <div class="form-section-header">
            <i data-lucide="eye" class="w-5 h-5 text-navy"></i>
            <h5 class="text-lg font-semibold text-gray-800">{% trans "Preview (First 5 Rows)" %}</h5>
        </div>
        <div class="overflow-x-auto p-4">
            <table class="min-w-full preview-table">
                <thead>
                    <tr>
                        <th>{% trans "Ticket #" %}</th>
                        <th>{% trans "Complainant" %}</th>
                        <th>{% trans "National ID" %}</th>
                        <th>{% trans "Contact" %}</th>
                        <th>{% trans "Department" %}</th>
                        <th>{% trans "Received Date" %}</th>
                        <th>{% trans "Classification" %}</th>
                        <th>{% trans "Content" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in preview_data %}
                    <tr>
                        <td class="font-mono text-navy">{{ row.ticket_number|default:"-" }}</td>
                        <td>{{ row.complainant_name|default:"-" }}</td>
                        <td>{{ row.national_id|default:"-" }}</td>
                        <td>{{ row.contact_number|default:"-" }}</td>
                        <td>{{ row.main_section|default:"-" }}</td>
                        <td>{{ row.received_date|default:"-" }}</td>
                        <td>{{ row.classification|default:"-" }}</td>
                        <td class="max-w-xs truncate">{{ row.content|default:"-" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="p-4 border-t border-gray-200">
            <form method="post" class="flex gap-3">
                {% csrf_token %}
                <input type="hidden" name="action" value="import">
                <button type="submit" class="hh-btn hh-btn-primary">
                    <i data-lucide="check" class="w-4 h-4"></i>{% trans "Confirm Import" %}
                </button>
                <a href="{% url 'complaints:government_ticket_import' %}" class="hh-btn hh-btn-secondary">
                    <i data-lucide="x" class="w-4 h-4"></i>{% trans "Cancel" %}
                </a>
            </form>
        </div>
    </div>
    {% endif %}

    <!-- Errors -->
    {% if errors %}
    <div class="form-section">
        <div class="form-section-header">
            <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600"></i>
            <h5 class="text-lg font-semibold text-red-800">{% trans "Errors" %}</h5>
        </div>
        <div class="p-4">
            <ul class="space-y-2">
                {% for error in errors %}
                <li class="text-sm text-red-600">{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}