{% extends "base.html" %}

{% block title %}Gestión de Comercializadoras{% endblock %}

{% block content %}
<div id="admin-content" class="container-fluid" data-has-filters="{{ 1 if filter_id or filter_name or filter_status else 0 }}">
        <div class="row">
            <div class="col-12 mb-4 admin-header">
                <h1>Gestión de Comercializadoras</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <p class="mb-0">Administre las comercializadoras disponibles para asociar con las tarifas.</p>
            </div>
            <div class="col-md-6 text-md-end" style="line-height: 55px !important;">
                <button id="toggleFiltersBtn" class="btn btn-outline-secondary me-2" type="button"
                        data-bs-toggle="collapse" data-bs-target="#filtersCollapse" aria-expanded="false"
                        aria-controls="filtersCollapse">
                    <i class="fas fa-filter me-1"></i>
                    <span class="toggle-text">Mostrar filtros</span>
                </button>
                {% if not is_comercial %}
                <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#createSupplierModal">
                    <i class="fas fa-plus me-2"></i> Nueva Comercializadora
                </button>
                {% endif %}
            </div>
        </div>
        
        <!-- Filtros y controles avanzados -->
        <div class="row mb-3">
            <div class="col-12">
                <div class="collapse" id="filtersCollapse">
                <div class="card shadow-sm filters-card">
                    <div class="card-body py-3">
                        <form method="get" id="filtersForm">
                            <div class="row g-3">
                                <!-- Columna izquierda: ID -->
                                <div class="col-md-4">
                                    <div class="mb-2">
                                        <label for="filter_id" class="form-label fw-bold small text-muted mb-1">ID</label>
                                        <input type="text" class="form-control" id="filter_id" name="id" placeholder="ID" value="{{ filter_id or '' }}">
                                    </div>
                                </div>

                                <!-- Columna central: Nombre -->
                                <div class="col-md-4">
                                    <div class="mb-2">
                                        <label for="filterName" class="form-label fw-bold small text-muted mb-1">Nombre</label>
                                        <input type="text" class="form-control" id="filterName" name="name" placeholder="Nombre de comercializadora" value="{{ filter_name or '' }}">
                                    </div>
                                </div>

                                <!-- Columna derecha: Estado -->
                                <div class="col-md-4">
                                    <div class="mb-2">
                                        <label for="filter_status" class="form-label fw-bold small text-muted mb-1">Estado</label>
                                        <select class="form-select" id="filter_status" name="status">
                                            <option value="">Todos</option>
                                            <option value="active" {% if filter_status == 'active' %}selected{% endif %}>Activo</option>
                                            <option value="inactive" {% if filter_status == 'inactive' %}selected{% endif %}>Inactivo</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Botones de acción -->
                            <div class="row mt-3">
                                <div class="col-12 d-flex flex-wrap align-items-center justify-content-between">
                                    <div class="d-flex align-items-center mb-2 mb-md-0">
                                        <label for="per_page" class="form-label fw-bold small text-muted mb-0 me-2">Resultados por página</label>
                                        <select name="per_page" id="per_page" class="form-select form-select-sm" style="width: auto;">
                                            <option value="10" {% if per_page == 10 %}selected{% endif %}>10</option>
                                            <option value="25" {% if per_page == 25 %}selected{% endif %}>25</option>
                                            <option value="50" {% if per_page == 50 %}selected{% endif %}>50</option>
                                            <option value="100" {% if per_page == 100 %}selected{% endif %}>100</option>
                                        </select>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <a href="{{ url_for('admin.admin_suppliers') }}" class="btn btn-sm btn-outline-secondary me-2">
                                            <i class="fas fa-sync-alt me-1"></i> Limpiar
                                        </a>
                                        <button type="submit" class="btn btn-sm btn-primary">
                                            <i class="fas fa-search me-1"></i> Buscar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                </div>
            </div>
        </div>
        
        <!-- Estadísticas y conteo -->
        <div class="row mb-3">
            <div class="col-12 text-end">
                <span class="text-muted small">Mostrando {{ pagination.items|length }} de {{ pagination.total if pagination else 0 }} comercializadoras</span>
            </div>
        </div>
        
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body p-0">
                        {% if pagination and pagination.items|length > 0 %}
                            <div class="table-responsive">
                                <table class="table table-hover table-striped table-bordered suppliers-table align-middle">
                                    <thead class="table-light">
                                    <tr>
                                        <th>ID</th>
                                        <th>Nombre</th>
                                        <th>Estado</th>
                                        <th>Fecha de creación</th>
                                        <th>Última actualización</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for supplier in pagination.items %}
                                    <tr>
                                        <td>{{ supplier.id }}</td>
                                        <td>{{ supplier.name }}</td>
                                        <td>
                                            {% if supplier.is_active %}
                                            <span class="badge bg-success">Activo</span>
                                            {% else %}
                                            <span class="badge bg-danger">Inactivo</span>
                                            {% endif %}
                                        </td>
                                        <td class="text-nowrap">{{ supplier.created_at.strftime('%d/%m/%Y %H:%M') }}</td>
                                        <td class="text-nowrap">{{ supplier.updated_at.strftime('%d/%m/%Y %H:%M') }}</td>
                                        <td class="text-nowrap">
                                            <div class="btn-group flex-nowrap">
                                                {% if not is_comercial %}
                                                <button type="button" class="btn btn-sm btn-outline-primary btn-edit" 
                                                        data-supplier-id="{{ supplier.id }}"
                                                        data-supplier-name="{{ supplier.name }}"
                                                        data-supplier-active="{{ supplier.is_active|int }}"
                                                        title="Editar Comercializadora"
                                                        onclick="prepareEdit(this)">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-outline-danger" 
                                                        data-supplier-id="{{ supplier.id }}" 
                                                        data-supplier-name="{{ supplier.name }}" 
                                                        onclick="confirmDelete(this.getAttribute('data-supplier-id'), this.getAttribute('data-supplier-name'))" 
                                                        title="Eliminar Comercializadora">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm {% if supplier.is_active %}btn-outline-warning{% else %}btn-outline-success{% endif %}" 
                                                        data-supplier-id="{{ supplier.id }}" 
                                                        data-supplier-name="{{ supplier.name }}" 
                                                        data-supplier-active="{{ supplier.is_active|int }}"
                                                        onclick="toggleStatus(this.getAttribute('data-supplier-id'), this.getAttribute('data-supplier-name'), this.getAttribute('data-supplier-active'))" 
                                                        title="{% if supplier.is_active %}Desactivar{% else %}Activar{% endif %} Comercializadora">
                                                    <i class="fas {% if supplier.is_active %}fa-toggle-off{% else %}fa-toggle-on{% endif %}"></i>
                                                </button>
                                                {% endif %}
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                                </table>
                            </div>
                            {% else %}
                            <div class="text-center py-4">
                                <div class="d-flex flex-column align-items-center">
                                    <i class="fas fa-building fa-3x text-muted mb-3"></i>
                                    <h5 class="text-muted">No hay comercializadoras disponibles</h5>
                                    <p class="text-muted">No se encontraron comercializadoras con los filtros actuales o no hay ninguna registrada. Pruebe a limpiar los filtros o añada una nueva comercializadora.</p>
                                    <button class="btn btn-primary mt-2" type="button" data-bs-toggle="modal" data-bs-target="#createSupplierModal">
                                        <i class="fas fa-plus-circle me-2"></i>Añadir primera comercializadora
                                    </button>
                                </div>
                            </div>
                            {% endif %}

                            {# Pagination controls #}
                            {% if pagination.total > 0 %}
                            <nav aria-label="Page navigation">
                                <ul class="pagination pagination-sm flex-wrap justify-content-center mt-4">{% if pagination.has_prev %}<li class="page-item">
                                    <a class="page-link" href="{{ url_for('admin.admin_suppliers', page=pagination.prev_num, per_page=per_page, id=filter_id, name=filter_name, status=filter_status) }}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                {% endif %}
                                {% for p in pagination.iter_pages() %}
                                {% if p %}
                                    {% if p == pagination.page %}
                                    <li class="page-item active" aria-current="page"><a class="page-link" href="#">{{ p }}</a></li>
                                    {% else %}
                                    <li class="page-item"><a class="page-link" href="{{ url_for('admin.admin_suppliers', page=p, per_page=per_page, id=filter_id, name=filter_name, status=filter_status) }}">{{ p }}</a></li>
                                    {% endif %}
                                {% else %}
                                <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
                                {% endif %}
                                {% endfor %}
                                {% if pagination.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('admin.admin_suppliers', page=pagination.next_num, per_page=per_page, id=filter_id, name=filter_name, status=filter_status) }}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
</div>

<!-- Modal de confirmación para eliminar -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirmar eliminación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>¿Está seguro de que desea eliminar la comercializadora <strong id="deleteSupplierName"></strong>?</p>
                <p class="text-danger">Esta acción no se puede deshacer.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <form id="deleteForm" method="POST" action="">
                    {% if csrf_form %}{{ csrf_form.csrf_token }}{% endif %}
                    <button type="submit" class="btn btn-danger">Eliminar</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal para crear nueva comercializadora -->
<div class="modal fade" id="createSupplierModal" tabindex="-1" aria-labelledby="createSupplierModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createSupplierModalLabel"><i class="fas fa-plus-circle me-2"></i> Nueva Comercializadora</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="createSupplierForm" method="POST" action="{{ url_for('admin.create_supplier') }}">
                <div class="modal-body">
                    {% if csrf_form %}{{ csrf_form.csrf_token }}{% endif %}
                    <div class="mb-3">
                        <label for="supplierName" class="form-label">Nombre de la comercializadora</label>
                        <input type="text" class="form-control" id="supplierName" name="name" required>
                    </div>
                    <div class="form-switch" style="padding-left: 2.5rem !important;">
                        <input class="form-check-input" type="checkbox" id="supplierActive" name="is_active" checked>
                        <label class="form-check-label" for="supplierActive">Comercializadora activa</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i> Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para editar comercializadora -->
<div class="modal fade" id="editSupplierModal" tabindex="-1" aria-labelledby="editSupplierModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editSupplierModalLabel"><i class="fas fa-edit me-2"></i> Editar Comercializadora</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editSupplierForm" method="POST" action="">
                <div class="modal-body">
                    {% if csrf_form %}{{ csrf_form.csrf_token }}{% endif %}
                    <div class="mb-3">
                        <label for="editSupplierName" class="form-label">Nombre de la comercializadora</label>
                        <input type="text" class="form-control" id="editSupplierName" name="name" required>
                    </div>
                    <div class="form-check form-switch" style="padding-left: 2.5rem !important;">
                        <input class="form-check-input" type="checkbox" id="editSupplierActive" name="is_active">
                        <label class="form-check-label" for="editSupplierActive">Comercializadora activa</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i> Actualizar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para cambiar estado -->
<div class="modal fade" id="toggleStatusModal" tabindex="-1" aria-labelledby="toggleStatusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="toggleStatusModalLabel">Cambiar estado</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="toggleStatusMessage"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <form id="toggleStatusForm" method="POST" action="">
                    {% if csrf_form %}{{ csrf_form.csrf_token }}{% endif %}
                    <button type="submit" class="btn btn-primary">Confirmar</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Estilos para la tabla y filtros -->
<style>
    /* Hover suave para la card de filtros */
    .filters-card {
        transition: box-shadow .2s ease, transform .2s ease;
    }
    .filters-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(33,37,41,0.12);
    }
    
    /* Estilo para la tabla de comercializadoras */
    .suppliers-table th {
        background-color: #f8f9fa;
        font-weight: 600;
    }
    
    .suppliers-table td {
        vertical-align: middle;
    }
    
    /* Botones de acción */
    .btn-group .btn {
        margin-right: 2px;
    }
</style>
{% endblock %}

{% block scripts %}
<script>
    // Función para confirmar eliminación
    function confirmDelete(supplierId, supplierName) {
        const deleteNameElement = document.getElementById('deleteSupplierName');
        const deleteFormElement = document.getElementById('deleteForm');
        const deleteModalElement = document.getElementById('deleteModal');
        
        if (deleteNameElement && deleteFormElement && deleteModalElement) {
            deleteNameElement.textContent = supplierName;
            deleteFormElement.action = "{{ url_for('admin.delete_supplier', supplier_id=0) }}".replace('0', supplierId);
            
            var deleteModal = new bootstrap.Modal(deleteModalElement);
            deleteModal.show();
        }
    }
    
    // Función para preparar edición
    function prepareEdit(button) {
        const supplierId = button.getAttribute('data-supplier-id');
        const supplierName = button.getAttribute('data-supplier-name');
        const isActive = button.getAttribute('data-supplier-active') === '1';
        
        const nameElement = document.getElementById('editSupplierName');
        const activeElement = document.getElementById('editSupplierActive');
        const formElement = document.getElementById('editSupplierForm');
        const modalElement = document.getElementById('editSupplierModal');
        
        if (nameElement && activeElement && formElement && modalElement) {
            nameElement.value = supplierName;
            activeElement.checked = isActive;
            formElement.action = "{{ url_for('admin.update_supplier', supplier_id=0) }}".replace('0', supplierId);
            
            var editModal = new bootstrap.Modal(modalElement);
            editModal.show();
        }
    }
    
    // Función para cambiar estado
    function toggleStatus(supplierId, supplierName, isActive) {
        const currentStatus = isActive === '1';
        const newStatus = !currentStatus;
        const statusText = newStatus ? 'activar' : 'desactivar';
        
        const messageElement = document.getElementById('toggleStatusMessage');
        const formElement = document.getElementById('toggleStatusForm');
        const modalElement = document.getElementById('toggleStatusModal');
        
        if (messageElement && formElement && modalElement) {
            messageElement.textContent = `¿Está seguro de que desea ${statusText} la comercializadora "${supplierName}"?`;
            formElement.action = "{{ url_for('admin.toggle_supplier_status', supplier_id=0) }}".replace('0', supplierId);
            
            var toggleModal = new bootstrap.Modal(modalElement);
            toggleModal.show();
        }
    }
    
    // Cambiar texto del botón de filtros
    const toggleFiltersBtn = document.getElementById('toggleFiltersBtn');
    if (toggleFiltersBtn) {
        toggleFiltersBtn.addEventListener('click', function() {
            const text = document.querySelector('.toggle-text');
            if (text) {
                if (text.textContent === 'Mostrar filtros') {
                    text.textContent = 'Ocultar filtros';
                } else {
                    text.textContent = 'Mostrar filtros';
                }
            }
        });
    }
    
    // Si hay filtros activos, mostrar el panel de filtros automáticamente
    document.addEventListener('DOMContentLoaded', function() {
        // Obtener el valor del atributo data-has-filters
        const adminContent = document.getElementById('admin-content');
        const hasActiveFilters = adminContent && adminContent.getAttribute('data-has-filters') === '1';
        
        if (hasActiveFilters) {
            const filtersCollapseElement = document.getElementById('filtersCollapse');
            if (filtersCollapseElement) {
                const filtersCollapse = new bootstrap.Collapse(filtersCollapseElement, {
                    toggle: true
                });
                const toggleText = document.querySelector('.toggle-text');
                if (toggleText) {
                    toggleText.textContent = 'Ocultar filtros';
                }
            }
        }
    });
</script>
{% endblock %}