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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'usuarios_gghh/css/style.css' %}">
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
{% 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="activos">Activos</button>
                            <button type="button" class="btn btn-outline-light" data-filter="inactivos">Inactivos</button>
                        </div>
                        <a href="{% url 'usuarios_gghh:export_users' %}" 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 usuarios..." value="{{ search_query }}"
                                aria-label="Buscar usuarios">
                        </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 Usuarios GGHH</h2>
                        <div class="pagination-container">
                            <button type="button" class="pagination-btn" id="prevPageGrid" title="Anterior">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <span class="pagination-info" id="pageNumberGrid">1</span>
                            <button type="button" class="pagination-btn" id="nextPageGrid" title="Siguiente">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </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">
                                <!-- Users will be rendered here by JS -->
                            </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 Usuarios GGHH</h2>
                        <div class="pagination-container">
                            <button type="button" class="pagination-btn" id="prevPageTable" title="Anterior">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <span class="pagination-info" id="pageNumberTable">1</span>
                            <button type="button" class="pagination-btn" id="nextPageTable" title="Siguiente">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-0"> <!-- Added p-0 for table view -->
                        <div class="table-responsive">
                            <table class="table-custom">
                                <thead>
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Correo</th>
                                        <th>Estado</th>
                                        <th>Área</th>
                                        <!-- Removed Actions column -->
                                    </tr>
                                </thead>
                                <tbody id="userTableBody">
                                    <!-- Users will be rendered here by JS -->
                                </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 id="sidebarTitle" class="mb-0">Detalles del Usuario</h4>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-primary btn-sm fw-bold" onclick="saveUserChanges()">
                <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">
        <div class="card glass-card border-0 bg-transparent">
            <div class="card-body">
                <div class="text-center mb-4 position-relative">
                    <div class="profile-image-container">
                        <img id="sidebarUserImage" src="" alt="Profile" class="profile-img shadow-lg">
                        <div class="profile-overlay" onclick="document.getElementById('sidebarUserImageInput').click()">
                            <i class="fas fa-camera"></i>
                            <span>Cambiar Foto</span>
                        </div>
                        <input type="file" id="sidebarUserImageInput" class="d-none" accept="image/*">
                    </div>
                </div>

                <form id="userForm" class="d-flex flex-column gap-3">
                    {% csrf_token %}
                    <input type="hidden" id="sidebarUserId">
                    <!-- Roles 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-user-tag me-2"></i>Roles
                        </h6>
                        <div class="btn-group w-100" role="group" aria-label="Roles de usuario"
                            id="roleButtonsContainer">
                            {% for code, name in role_choices %}
                            <button type="button" class="btn btn-outline-secondary btn-sm role-btn"
                                data-role="{{ code }}" onclick="toggleRole(this)">
                                {{ name }}
                            </button>
                            {% endfor %}
                        </div>
                        <!-- Role Skeleton -->
                        <div id="roleSkeleton" class="d-none w-100">
                            <div class="placeholder-glow d-flex gap-1 w-100">
                                <span class="placeholder col-4 btn btn-sm bg-secondary opacity-25"></span>
                                <span class="placeholder col-4 btn btn-sm bg-secondary opacity-25"></span>
                                <span class="placeholder col-4 btn btn-sm bg-secondary opacity-25"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Personal 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-user me-2"></i>Información Personal</h6>

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

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

                        <div class="row g-2 mb-3">
                            <div class="col-8">
                                <div class="form-group">
                                    <label class="text-white-50 small mb-1">Correo Electrónico</label>
                                    <input type="email" id="sidebarUserEmail"
                                        class="form-control bg-transparent text-white border-secondary">
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label class="text-white-50 small mb-1">Estado</label>
                                    <div class="form-check form-switch d-flex align-items-center gap-2 pt-2">
                                        <input class="form-check-input" type="checkbox" role="switch"
                                            id="sidebarUserStatus">
                                        <label class="form-check-label text-white small" for="sidebarUserStatus"
                                            id="sidebarUserStatusLabel">Activo</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row g-2">
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-white-50 small mb-1">Fecha Cumpleaños</label>
                                    <input type="date" id="sidebarUserBirthday"
                                        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 Contratación</label>
                                    <input type="text" id="sidebarUserContract"
                                        class="form-control bg-transparent text-white border-secondary" readonly>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Job 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-briefcase me-2"></i>Información Laboral</h6>

                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-white-50 small mb-1">Área</label>
                                    <input type="text" id="sidebarUserArea"
                                        class="form-control bg-transparent text-white border-secondary" readonly>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-white-50 small mb-1">Cargo</label>
                                    <input type="text" id="sidebarUserCargo"
                                        class="form-control bg-transparent text-white border-secondary" readonly>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label class="text-white-50 small mb-1">Jefe Inmediato</label>
                            <select id="sidebarUserJefe" class="form-select bg-transparent text-white border-secondary"
                                onchange="updateBossEmail()">
                                <option value="">Seleccionar Jefe...</option>
                            </select>
                        </div>

                        <div class="form-group mb-3">
                            <label class="text-white-50 small mb-1">Correo Jefe</label>
                            <input type="email" id="sidebarUserJefeEmail"
                                class="form-control bg-transparent text-white border-secondary" readonly>
                        </div>

                        <div class="form-group">
                            <label class="text-white-50 small mb-1">Fecha Contratación</label>
                            <input type="date" id="sidebarUserHireDate"
                                class="form-control bg-transparent text-white border-secondary" readonly>
                        </div>
                    </div>

                    <!-- Save Button -->

                </form>
            </div>
        </div>
    </div>
</div>
<div id="sidebarOverlay" class="sidebar-overlay" onclick="closeUserSidebar()"></div>

{% endblock %}

{% block extra_js %}

<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script src="{% static 'usuarios_gghh/js/main.js' %}" defer></script>
{% endblock %}