{% extends "home.html" %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'gestion_tq/css/style.css' %}">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
{% endblock %}

{% block content %}
<div class="body-container fade-in">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-12 main-content-wrapper">
                <!-- Controls Container -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <!-- Left Side: View Toggles + Filter Buttons -->
                    <div class="d-flex gap-3">
                        <!-- View Toggles -->
                        <div class="btn-group" role="group" aria-label="Vista">
                            <button type="button" class="btn btn-outline-light active" id="btnViewGrid"
                                title="Vista de Tarjetas">
                                <i class="fas fa-th-large"></i>
                            </button>
                            <button type="button" class="btn btn-outline-light" id="btnViewTable"
                                title="Vista de Tabla">
                                <i class="fas fa-list"></i>
                            </button>
                        </div>

                        <!-- Filter Buttons -->
                        <div class="btn-group" role="group" aria-label="Filtro de usuarios" id="filterGroup">
                            <button type="button" class="btn btn-outline-light active"
                                data-filter="todos">Todos</button>
                            <button type="button" class="btn btn-outline-light"
                                data-filter="generales">Generales</button>
                            <button type="button" class="btn btn-outline-light"
                                data-filter="especiales">Especiales</button>
                            <button type="button" class="btn btn-outline-light"
                                data-filter="comodines">Comodines</button>
                        </div>
                        <a href="{% url 'gestion_tq:export_tiqueteras_csv' %}" class="btn btn-outline-success ms-2" title="Exportar a Excel">
                            <i class="fas fa-file-excel" style="color: #fff;"></i>
                        </a>
                    </div>

                    <!-- Right Side: Search Form -->
                    <form method="get" class="d-flex" style="max-width: 300px;" onsubmit="return false;">
                        <div class="input-group">
                            <span class="input-group-text bg-transparent border-secondary text-white-50">
                                <i class="fas fa-search"></i>
                            </span>
                            <input type="text" id="searchInput"
                                class="form-control bg-transparent border-secondary text-white"
                                placeholder="Buscar tiquet..." value="{{ search_query }}" aria-label="Buscar tiquet">
                        </div>
                    </form>
                </div>

                <!-- Grid View (Cards) - Default -->
                <div id="gridView" class="card glass-card fade-in">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h2><i class="fas fa-users-cog me-2"></i>Gestión de tiquetera</h2>
                        <button class="btn btn-success" onclick="openCreateSidebar()">
                            <i class="fas fa-plus me-2"></i>Crear
                        </button>
                    </div>
                    <div class="card-body p-4"> <!-- Added p-4 for grid padding -->
                        <div class="row g-4">
                            <div id="userGrid" class="row g-4">
                                {% for tiquetera in tiqueteras %}
                                <div class="col-12 col-sm-6 col-md-4 col-lg-3 tiquetera-item js-open-sidebar"
                                    data-type="{{ tiquetera.tipo }}" data-id="{{ tiquetera.id }}"
                                    data-nombre="{{ tiquetera.nombre }}" data-detalle="{{ tiquetera.detalle }}"
                                    data-fecha-limite="{{ tiquetera.fecha_limite|date:'Y-m-d' }}"
                                    data-ruta="{% if tiquetera.ruta %}/media/tq/{{ tiquetera.ruta }}{% endif %}"
                                    data-antiguedad-min="{{ tiquetera.antiguedad_min|default_if_none:'' }}"
                                    data-antiguedad-max="{{ tiquetera.antiguedad_max|default_if_none:'' }}"
                                    data-condiciones="{{ tiquetera.condiciones }}">
                                    <div class="card h-100 glass-card border-0 shadow-sm hover-scale overflow-hidden position-relative"
                                        style="min-height: 160px;">
                                        {% if tiquetera.ruta %}
                                        <img src="/media/tq/{{ tiquetera.ruta }}" class="card-img w-100 h-100"
                                            style="object-fit: cover;" alt="{{ tiquetera.nombre }}">
                                        <!-- Dark Overlay -->
                                        <div class="position-absolute top-0 start-0 w-100 h-100 bg-black"
                                            style="opacity: 0.3;"></div>
                                        {% else %}
                                        <div
                                            class="d-flex align-items-center justify-content-center h-100 bg-secondary bg-opacity-25">
                                            <i class="fas fa-image fa-3x text-white-50"></i>
                                        </div>
                                        {% endif %}

                                        <div class="position-absolute top-0 start-0 p-2" style="z-index: 10;">
                                            <button class="btn btn-sm btn-danger shadow-sm rounded-circle"
                                                style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;"
                                                onclick="event.stopPropagation(); deleteTiquetera({{ tiquetera.id }})"
                                                title="Eliminar">
                                                <i class="fas fa-trash-alt" style="font-size: 0.8rem;"></i>
                                            </button>
                                        </div>

                                        <div class="position-absolute top-0 end-0 p-2">
                                            <span
                                                class="badge {% if tiquetera.tipo == 0 %}bg-primary{% elif tiquetera.tipo == 1 %}bg-warning{% else %}bg-success{% endif %} shadow-sm">
                                                {% if tiquetera.tipo == 0 %}
                                                General
                                                {% elif tiquetera.tipo == 1 %}
                                                Especial
                                                {% else %}
                                                Comodín
                                                {% endif %}
                                            </span>
                                        </div>

                                        <div class="position-absolute bottom-0 start-0 w-100 p-3"
                                            style="background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);">
                                            <h5 class="card-title text-white mb-0 text-shadow">{{ tiquetera.nombre }}
                                            </h5>
                                        </div>
                                    </div>
                                </div>
                                {% empty %}
                                <div class="col-12 text-center text-white-50">
                                    No hay tiqueteras registradas.
                                </div>
                                {% endfor %}
                            </div>
                            <!-- Client-side No Results Message -->
                            <div id="noSearchGrid" class="col-12 d-none">
                                <div
                                    class="alert alert-info bg-transparent text-white border-white border-opacity-25 text-center">
                                    No se encontraron resultados para tu búsqueda.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Table View (Hidden by default) -->
                <div id="tableView" class="card glass-card d-none fade-in">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h2><i class="fas fa-users-cog me-2"></i>Gestión de tiquetera</h2>
                        <button class="btn btn-success" onclick="openCreateSidebar()">
                            <i class="fas fa-plus me-2"></i>Crear
                        </button>
                    </div>
                    <div class="card-body p-0"> <!-- Added p-0 for table view -->
                        <div class="table-responsive">
                            <table class="table-custom">
                                <thead>
                                    <tr>
                                        <th style="width: 25%;">Nombre</th>
                                        <th style="width: 40%;">Detalle</th>
                                        <th style="width: 15%;">Fecha Límite</th>
                                        <th style="width: 20%;">Tipo</th>
                                        <th style="width: 10%;">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="userTableBody">
                                    {% for tiquetera in tiqueteras %}
                                    <tr class="tiquetera-item js-open-sidebar" data-type="{{ tiquetera.tipo }}"
                                        data-id="{{ tiquetera.id }}" data-nombre="{{ tiquetera.nombre }}"
                                        data-detalle="{{ tiquetera.detalle }}"
                                        data-fecha-limite="{{ tiquetera.fecha_limite|date:'Y-m-d' }}"
                                        data-ruta="{% if tiquetera.ruta %}/media/tq/{{ tiquetera.ruta }}{% endif %}"
                                        data-antiguedad-min="{{ tiquetera.antiguedad_min|default_if_none:'' }}"
                                        data-antiguedad-max="{{ tiquetera.antiguedad_max|default_if_none:'' }}"
                                        data-condiciones="{{ tiquetera.condiciones }}">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="ms-2">
                                                    <h6 class="mb-0 text-white">{{ tiquetera.nombre }}</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-white-50">{{ tiquetera.detalle|truncatechars:50 }}</td>
                                        <td class="text-white-50">{{ tiquetera.fecha_limite|date:"d/m/Y"|default:"-" }}
                                        </td>
                                        <td>
                                            <span
                                                class="badge {% if tiquetera.tipo == 0 %}bg-primary{% elif tiquetera.tipo == 1 %}bg-warning{% else %}bg-success{% endif %}">
                                                {% if tiquetera.tipo == 0 %}
                                                General
                                                {% elif tiquetera.tipo == 1 %}
                                                Especial
                                                {% else %}
                                                Comodín
                                                {% endif %}
                                            </span>
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-danger"
                                                onclick="event.stopPropagation(); deleteTiquetera({{ tiquetera.id }})">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="4" class="text-center text-white-50 py-4">
                                            No hay tiqueteras registradas.
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                                <!-- Client-side No Results Row -->
                                <tr id="noSearchTable" class="d-none text-center py-4 text-white">
                                    <td colspan="4" class="text-center py-4 text-white">
                                        No se encontraron resultados para tu búsqueda.
                                    </td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Right Sidebar -->
<div id="userSidebar" class="user-sidebar">
    <div class="sidebar-header d-flex justify-content-between align-items-center">
        <h4 class="mb-0"><i class="fas fa-edit me-2"></i><span id="sidebarTitle">Editar Tiquetera</span></h4>
        <div class="d-flex align-items-center gap-2">
            <button id="btnUpdateTiquetera" class="btn btn-success btn-sm" onclick="saveTiqueteraChanges()">
                <i class="fas fa-save me-1"></i>Actualizar
            </button>
            <button type="button" class="btn-close btn-close-white" onclick="closeUserSidebar()"></button>
        </div>
    </div>
    <div class="sidebar-body">
        <form id="tiqueteraForm" class="d-flex flex-column gap-3">
            {% csrf_token %}
            <input type="hidden" id="tiqueteraId">

            <!-- Basic Info Section -->
            <div class="p-3 rounded" style="background: rgba(255, 255, 255, 0.05);">
                <h6 class="text-info mb-3 border-bottom border-secondary pb-2">
                    <i class="fas fa-info-circle me-2"></i>Información Básica
                </h6>

                <div class="form-group mb-3">
                    <label class="text-white-50 small mb-1">Nombre</label>
                    <input type="text" id="tiqueteraNombre"
                        class="form-control bg-transparent text-white border-secondary">
                </div>

                <div class="form-group mb-3">
                    <label class="text-white-50 small mb-1">Detalle</label>
                    <textarea id="tiqueteraDetalle" rows="3"
                        class="form-control bg-transparent text-white border-secondary"></textarea>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-white-50 small mb-1">Fecha Límite</label>
                            <input type="date" id="tiqueteraFechaLimite"
                                class="form-control bg-transparent text-white border-secondary">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-white-50 small mb-1">Tipo</label>
                            <select id="tiqueteraTipo" class="form-select bg-transparent text-white border-secondary">
                                <option value="0">General</option>
                                <option value="1">Especial</option>
                                <option value="2">Comodín</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label class="text-white-50 small mb-1">Imagen del Ticket</label>
                    <div class="ticket-image-container cursor-pointer"
                        onclick="document.getElementById('tiqueteraImagenInput').click()">
                        <img id="tiqueteraPreview" src="" class="ticket-img w-100 h-100 object-fit-cover rounded"
                            alt="Vista previa">
                        <div
                            class="ticket-overlay rounded d-flex flex-column align-items-center justify-content-center">
                            <i class="fas fa-camera text-white mb-2 fa-2x"></i>
                            <span class="text-white small fw-bold">Cambiar tiquet</span>
                        </div>
                    </div>
                    <input type="file" id="tiqueteraImagenInput" class="d-none" accept="image/*">
                    <input type="hidden" id="tiqueteraRuta">
                </div>
            </div>

            <!-- Conditions Section -->
            <div class="p-3 rounded" style="background: rgba(255, 255, 255, 0.05);">
                <h6 class="text-info mb-3 border-bottom border-secondary pb-2">
                    <i class="fas fa-clipboard-list me-2"></i>Condiciones y Antigüedad
                </h6>

                <div class="row g-2 mb-3" id="antiguedadContainer">
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-white-50 small mb-1">Antigüedad Min (meses)</label>
                            <input type="number" id="tiqueteraAntiguedadMin"
                                class="form-control bg-transparent text-white border-secondary">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-white-50 small mb-1">Antigüedad Max (meses)</label>
                            <input type="number" id="tiqueteraAntiguedadMax"
                                class="form-control bg-transparent text-white border-secondary">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="text-white-50 small mb-1">Condiciones</label>
                    <textarea id="tiqueteraCondiciones" rows="4"
                        class="form-control bg-transparent text-white border-secondary"></textarea>
                </div>
            </div>
        </form>
    </div>
</div>
</div>
</div>
</div>
</div>
<div id="sidebarOverlay" class="sidebar-overlay" onclick="closeUserSidebar()"></div>

{% endblock %}

{% block extra_js %}
<script src="{% static 'gestion_tq/js/main.js' %}" defer></script>
{% endblock %}