@extends('layouts.master')

@push('css')
<style>
body, html {
    background-color: #091435;
    color: white;
}

.main-container {
    background-color: #091435;
    min-height: 100vh;
    padding: 20px;
}

.users-section {
    background-color: #091435;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.section-title {
    font-size: 22px;
    font-weight: 600;
    color: white;
    margin: 0;
}

.create-btn {
    background-color: #FF3600;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.create-btn:hover {
    background-color: #e62f00;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 54, 0, 0.2);
}

.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 20px;
}

.show-entries {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.entries-select {
    background-color: #0c1a43;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 5px 10px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-input {
    background-color: #0c1a43;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 8px 15px;
    width: 250px;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table thead th {
    background-color: #FF3600;
    color: white;
    font-weight: 500;
    text-align: left;
    padding: 15px 20px;
}

.users-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s ease;
}

.users-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.users-table tbody td {
    padding: 15px 20px;
    color: white;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.edit-btn, .delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.edit-btn {
    background-color: transparent;
    color: white;
    border: 1px solid white;
}

.edit-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.delete-btn {
    background-color: transparent;
    color: #FF3600;
    border: 1px solid #FF3600;
}

.delete-btn:hover {
    background-color: rgba(255, 54, 0, 0.1);
}

/* Nuevo estilo para el botón de licencias */
.license-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: 500;
    background-color: #1a2b5d;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
    transition: all 0.3s ease;
}

.license-btn:hover {
    background-color: #FF3600;
    border-color: #FF3600;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 54, 0, 0.2);
    color: white;
}

.license-btn i {
    font-size: 16px;
}

.role-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background-color: #1a2b5d;
    color: white;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #FF3600;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 0 20px 20px;
}

.pagination-info {
    color: white;
}

.pagination-controls {
    display: flex;
    gap: 5px;
}

.page-btn {
    background-color: #0c1a43;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 8px 15px;
    transition: all 0.2s ease;
}

.page-btn:hover:not(.active-page) {
    background-color: rgba(255, 255, 255, 0.1);
}

.active-page {
    background-color: #FF3600;
    border-color: #FF3600;
}

.footer {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.6);
}

/* Estilos para los modales */
.modal-content {
    background-color: #122252;
    color: white;
    border: none;
    border-radius: 10px;
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
}

.modal-title {
    color: white;
    font-weight: 600;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
}

.form-label {
    color: white;
    margin-bottom: 8px;
}

/* Estilos para inputs de formularios en los modales */
.form-control, .form-select {
    background-color: #1a2b5d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 10px 15px;
    border-radius: 6px;
}

.form-control:hover, .form-select:hover {
    background-color: #1a2b5d !important;
    border-color: rgba(255, 255, 255, 0.2);
    color: white !important;
}

.form-control:focus, .form-select:focus {
    background-color: #1e3063 !important;
    border-color: #FF3600;
    box-shadow: 0 0 0 0.25rem rgba(255, 54, 0, 0.25);
    color: white !important;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Prevenir que Bootstrap o el navegador aplique sus propios estilos en hover */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover, 
.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #1a2b5d inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Reglas aún más específicas para sobrescribir Bootstrap */
.modal-content .form-control:hover,
.modal-content .form-select:hover,
#createUserModal .form-control:hover,
#editUserModal .form-control:hover,
#deleteUserModal .form-control:hover {
    background-color: #1a2b5d !important;
    color: white !important;
}

/* Corregir estilos de botones en modales */
.btn-primary {
    background-color: #FF3600;
    border-color: #FF3600;
}

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary:focus-visible,
.btn-primary:focus-within,
.btn-primary.active {
    background-color: #e62f00 !important;
    border-color: #e62f00 !important;
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 54, 0, 0.25) !important;
}

.btn-secondary {
    background-color: #1a2b5d;
    border-color: #1a2b5d;
    color: white;
}

.btn-secondary:hover, 
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:focus-visible,
.btn-secondary:focus-within,
.btn-secondary.active {
    background-color: #1e3063 !important;
    border-color: #1e3063 !important;
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(26, 43, 93, 0.25) !important;
}

.btn-danger {
    background-color: #FF3600;
    border-color: #FF3600;
}

.btn-danger:hover, 
.btn-danger:focus,
.btn-danger:active,
.btn-danger:focus-visible,
.btn-danger:focus-within,
.btn-danger.active {
    background-color: #e62f00 !important;
    border-color: #e62f00 !important;
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 54, 0, 0.25) !important;
}

.btn-close {
    color: white;
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Animaciones para los modales */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
}

.modal.fade .modal-content {
    transition: opacity 0.3s ease;
}

.modal.show .modal-content {
    transform: scale(1);
    opacity: 1;
}

/* Estilos para notificaciones Toast */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1060;
}

.toast {
    
    color: white;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toast-header {
    background-color: rgba(255, 54, 0, 0.8);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.toast-body {
    padding: 15px;
}

/* Responsive Table Styles */
@media screen and (max-width: 1200px) {
    .users-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (max-width: 768px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .table-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .search-box {
        width: 100%;
    }
    
    .search-input {
        width: 100%;
    }
    
    .pagination-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .pagination-controls {
        width: 100%;
        justify-content: space-between;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 5px;
    }
    
    .edit-btn, .delete-btn {
        width: 100%;
        justify-content: center;
    }
}

@media screen and (max-width: 576px) {
    .license-btn {
        width: 100%;
        justify-content: center;
    }
}
</style>
@endpush

@push('title')
Integradores
@endpush

@section('content')
<div class="main-container">
    <div class="users-section">
        <div class="section-header">
            <h2 class="section-title">Integradores del Sistema</h2>
            <button class="create-btn" data-bs-toggle="modal" data-bs-target="#createUserModal">
                <i class="ti ti-plus"></i> Crear Integrador
            </button>
        </div>
        
        <div class="table-controls">
            <div class="show-entries">
                <span>Mostrar</span>
                <select class="entries-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span>registros</span>
            </div>
            
            <div class="search-box">
                <span>Buscar:</span>
                <input type="text" class="search-input" placeholder="Buscar Integradores...">
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="users-table">
                <thead>
                    <tr>
                        <th>Acciones</th>
                        <th>Nombre</th>
                        <th>Email</th>
                        <th>Rol</th>
                        <th>Estado de la cuenta</th>
                        <th>Ver Licencias</th>
                        <th>Fecha de Creación</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($users as $user)
                    <tr>
                        <td>
                            <div class="action-buttons">
                                <button class="edit-btn" data-bs-toggle="modal" data-bs-target="#editUserModal" 
                                data-id="{{ $user->id }}"
                                data-name="{{ $user->name }}"
                                data-email="{{ $user->email }}">
                                    <i class="ti ti-edit"></i> Editar
                                </button>
                                <button class="delete-btn" data-bs-toggle="modal" data-bs-target="#deleteUserModal" data-id="{{ $user->id }}">
                                    <i class="ti ti-trash"></i> Eliminar
                                </button>
                            </div>
                        </td>
                        <td>{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                        <td><span class="role-badge">{{ $user->roles->first()->name ?? 'Sin rol' }}</span></td>
                        <td>
                            <label class="switch">
                                <input type="checkbox" 
                                       class="license-toggle" 
                                       data-user-id="{{ $user->id }}"
                                       {{ $user->es_activo == 1 ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                        </td>
                        <td>
                            <a href="{{ url('customer/licences') }}/{{ $user->id }}" class="license-btn">
                                <i class="ti ti-file-certificate"></i> Ver licencias
                            </a>
                        </td>
                        <td>{{ $user->created_at->format('d/m/Y') }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <div class="pagination-container">
            <div class="pagination-info">
                Mostrando registros del 1 al {{ min(count($users), 10) }} de un total de {{ count($users) }} registros
            </div>
            <div class="pagination-controls">
                <button class="page-btn">Primero</button>
                <button class="page-btn">Anterior</button>
                <button class="page-btn active-page">1</button>
                <button class="page-btn">Siguiente</button>
                <button class="page-btn">Último</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Crear Integrador -->
<div class="modal fade" id="createUserModal" tabindex="-1" aria-labelledby="createUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createUserModalLabel">Crear Nuevo Integrador</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('users.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">Nombre</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Correo Electrónico</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Contraseña</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <div class="mb-3">
                        <label for="password_confirmation" class="form-label">Confirmar Contraseña</label>
                        <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required>
                    </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">Guardar Integrador</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Editar Integrador -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editUserModalLabel">Editar Integrador</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('users.update') }}" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" id="edit-id" name="id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit-name" class="form-label">Nombre</label>
                        <input type="text" class="form-control" id="edit-name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-email" class="form-label">Correo Electrónico</label>
                        <input type="email" class="form-control" id="edit-email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-password" class="form-label">Nueva Contraseña (dejar en blanco para mantener la actual)</label>
                        <input type="password" class="form-control" id="edit-password" name="password">
                    </div>
                    <div class="mb-3">
                        <label for="edit-password_confirmation" class="form-label">Confirmar Contraseña</label>
                        <input type="password" class="form-control" id="edit-password_confirmation" name="password_confirmation">
                    </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">Actualizar Integrador</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Eliminar Integrador -->
<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteUserModalLabel">Confirmar Eliminación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('users.destroy') }}" method="POST">
                @csrf
                @method('DELETE')

                <input type="hidden" id="delete-id" name="id">
                <div class="modal-body">
                    <p>¿Está seguro de que desea eliminar este Integrador? 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>
                    <button type="submit" class="btn btn-danger">Eliminar Integrador</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // Funcionalidad de búsqueda
        $(".search-input").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $(".users-table tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
            updatePaginationInfo();
        });
        
        // Funcionalidad de número de registros por página
        $(".entries-select").change(function() {
            var value = parseInt($(this).val());
            $(".users-table tbody tr").hide();
            $(".users-table tbody tr").slice(0, value).show();
            updatePaginationInfo();
        });
        
        // Actualizar información de paginación
        function updatePaginationInfo() {
            var visibleCount = $(".users-table tbody tr:visible").length;
            var total = $(".users-table tbody tr").length;
            $(".pagination-info").text(
                "Mostrando registros del 1 al " + visibleCount + " de un total de " + total + " registros"
            );
        }
        
        // Inicialización
        $(".entries-select").val("10").change();
        
        // Funcionalidad de edición
        $('.edit-btn').on('click', function() {
            var id = $(this).data('id');
            var name = $(this).data('name');
            var email = $(this).data('email');
            
            $('#edit-id').val(id);
            $('#edit-name').val(name);
            $('#edit-email').val(email);
            
            // Cargar el rol actual si está disponible
            if ($(this).data('role')) {
                $('#edit-role').val($(this).data('role'));
            }
        });
        
        // Funcionalidad de eliminación
        $('.delete-btn').on('click', function() {
            var id = $(this).data('id');
            $('#delete-id').val(id);
        });
        
        // Toggle de estado del usuario
        $('.license-toggle').on('change', function() {
            const userId = $(this).data('user-id');
            const isActive = $(this).prop('checked');
            const toggleSwitch = $(this);
            
            $.ajax({
                url: '{{ route("users.toggle-licenses") }}',
                type: 'POST',
                data: {
                    user_id: userId,
                    status: isActive ? 1 : 0,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if(response.success) {
                        showToast('Éxito', response.message, 'success');
                    } else {
                        toggleSwitch.prop('checked', !isActive);
                        showToast('Error', 'Error al actualizar el estado del usuario', 'error');
                    }
                },
                error: function() {
                    toggleSwitch.prop('checked', !isActive);
                    showToast('Error', 'Error al actualizar el estado del usuario', 'error');
                }
            });
        });
        
        // Función para mostrar toast
        function showToast(title, message, type) {
            // Crear contenedor de toast si no existe
            if ($('.toast-container').length === 0) {
                $('body').append('<div class="toast-container"></div>');
            }
            
            // Crear toast
            const toastId = 'toast-' + Date.now();
            const toast = `
                <div id="${toastId}" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
                    <div class="toast-header ${type === 'error' ? 'bg-danger' : 'bg-success'}">
                        <strong class="me-auto">${title}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body">
                        ${message}
                    </div>
                </div>
            `;
            
            // Agregar toast al contenedor
            $('.toast-container').append(toast);
            
            // Mostrar toast
            const toastElement = new bootstrap.Toast(document.getElementById(toastId));
            toastElement.show();
            
            // Eliminar toast después de ocultarse
            $(`#${toastId}`).on('hidden.bs.toast', function() {
                $(this).remove();
            });
        }
        
        // Asegurar que los inputs de formulario mantengan su color de fondo
        $('body').on('mouseover mouseout', '.form-control, .form-select', function() {
            $(this).css({
                'background-color': '#1a2b5d',
                'color': 'white'
            });
        });
    });
</script>
@endpush