@extends('layouts.master')

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

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

.license-section {
    padding: 0;
    margin-bottom: 30px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

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

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

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

.entries-control {
    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: 8px 15px;
    min-width: 70px;
}

.search-box {
    position: relative;
    width: 300px;
}

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

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

.search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
}

.license-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

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

.license-table tbody tr {
    background-color: rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
}

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

.license-table tbody td {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #e1e6f0;
}

.license-table tbody tr:last-child td {
    border-bottom: none;
}

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

.edit-btn, .delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
}

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

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

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

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

.license-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.copy-btn {
    background-color: #1a2b5d;
    border: none;
    color: white;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.copy-btn:hover {
    background-color: #FF3600;
    transform: translateY(-2px);
}

.expired-badge {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ff6b6b;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
}

.active-badge {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
}

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

.pagination-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.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;
    cursor: pointer;
}

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

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

.footer-branding {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* Estilos para 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;
}

/* 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,
#createModal .form-control:hover,
#editModal .form-control:hover,
#deleteModal .form-control:hover {
    background-color: #1a2b5d !important;
    color: white !important;
}

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

.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;
    color: white;
}

.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%);
}

.text-danger {
    color: #ff6b6b !important;
}

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

@media screen and (max-width: 768px) {
    .table-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .search-box {
        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) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .license-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .copy-btn {
        margin-top: 5px;
    }
}
</style>
@endpush

@push('title')
Licencias
@endpush

@section('content')
<div class="main-container">
    <div class="license-section">
        <div class="section-header">
            <h1 class="section-title">Licencias</h1>
            @role('Admin')
            <button class="create-btn" data-bs-toggle="modal" data-bs-target="#createModal">
                <i class="ti ti-plus"></i> Crear Cliente
            </button>
            @endrole
        </div>
        
        <div class="table-controls">
            <div class="entries-control">
                <span>Mostrar</span>
                <select class="entries-select" id="entries-select">
                    <option value="10" selected>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">
                <input type="text" class="search-input" id="search-input" placeholder="Buscar...">
                <i class="ti ti-search search-icon"></i>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="license-table" id="license-table">
                <thead>
                    <tr>
                        @role('Admin')
                        <th>Acciones</th>
                        @endrole
                        <th>Licencia Offline</th>
                        <th>Conjunto</th>
                        <th>@lang('System.End_Plan')</th>
                        <th>                        @role('Admin')
                            Integrador
                            @endrole
                            @role('Client')
                            Administrador
                            @endrole
</th>
                        @role('Client')
                        <th>Email</th>
                        <th>Ciudad</th>
                        <th>Telefono</th>
                        @endrole
                        <th>MAC</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($customer as $c)
                    <tr>
                        @role('Admin')
                        <td>
                            <div class="action-buttons">
                                <button class="edit-btn" data-bs-toggle="modal" data-bs-target="#editModal"
                                   data-id="{{ $c->id }}"
                                   data-admin="{{ $c->admin }}"
                                   data-city="{{ $c->city }}"
                                   data-email="{{ $c->email }}"
                                   data-phone="{{ $c->phone }}"
                                   data-expired-plan="{{ $c->expired_plan }}"
                                   data-mac="{{ $c->MAC }}"
                                   data-name-country="{{ $c->Name_Country }}"
                                   data-integrador="{{ $c->create_user }}">
                                   <i class="ti ti-edit"></i> @lang('System.Edit')
                                </button>
                                <button class="delete-btn" data-bs-toggle="modal" data-bs-target="#deleteModal" data-id="{{ $c->id }}">
                                    <i class="ti ti-trash"></i> @lang('System.Delete')
                                </button>
                            </div>
                        </td>
                        @endrole
                        <td>
                            <div class="license-container">
                                <span>{{ $c->license_offline }}</span>
                                <button class="copy-btn" title="Copiar" onclick="copyLicense(this)" data-license="{{ $c->license_offline }}">
                                    <i class="ti ti-copy"></i>
                                </button>
                            </div>
                        </td>
                        <td>{{ $c->Name_Country }}</td>
                        <td>
                            <span class="{{ strtotime($c->expired_plan) < strtotime('today') ? 'expired-badge' : 'active-badge' }}">
                                {{ abs(round((strtotime($c->expired_plan) - strtotime('today')) / (60 * 60 * 24))) }} días
                                {{ strtotime($c->expired_plan) < strtotime('today') ? 'vencidos' : 'restantes' }}
                            </span>
                        </td>
                        <td>
                            @if(isset($c->creator_name))
                                {{ $c->creator_name }}
                            @else
                                {{ $c->admin }}
                            @endif
                        </td>
                        @role('Client')
                        <td>{{ $c->email }}</td>
                        <td>{{$c->city}}</td>
                        <td>{{ $c->phone }}</td>
                        @endrole
                        <td>{{ $c->MAC }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <div class="pagination-container">
            <div class="pagination-info" id="pagination-info">
                Mostrando registros del 1 al {{ min(count($customer), 10) }} de un total de {{ count($customer) }} registros
            </div>
            <div class="pagination-controls">
                <button class="page-btn" id="first-page">Primero</button>
                <button class="page-btn" id="prev-page">Anterior</button>
                <button class="page-btn active-page">1</button>
                <button class="page-btn" id="next-page">Siguiente</button>
                <button class="page-btn" id="last-page">Último</button>
            </div>
        </div>
    </div>

</div>

@role('Admin')
<!-- Modal Create -->
<div class="modal fade" id="createModal">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <h5 class="modal-title">Crear Cliente</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
           </div>
           <form action="{{ route('customer.store') }}" method="POST" id="createCustomerForm">
            @csrf
            <div class="modal-body">
                <input type="hidden" name="mac_date_hash" id="mac_date_hash">
                <div class="mb-3">
                    <label class="form-label" style="color:white">Administrador</label>
                    <input type="text" class="form-control" name="admin" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" style="color:white">Ciudad</label>
                    <input type="text" class="form-control" name="city" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" style="color:white">Email</label>
                    <input type="email" class="form-control" name="email" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" style="color:white">Teléfono</label>
                    <input type="text" class="form-control" name="phone" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" style="color:white">Fecha de Vencimiento</label>
                    <input type="date" class="form-control" name="expired_plan" id="expired_plan" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" style="color:white">MAC</label>
                    <input type="text" class="form-control" name="MAC" id="MAC" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" style="color:white">Conjunto</label>
                    <input type="text" class="form-control" name="Name_Country" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" style="color:white">Integrador</label>
                    <select class="form-select" name="integrador_id" id="integrador_id" required>
                        <option value="">Seleccionar integrador</option>
                        @foreach ($integradores as $integrador)
                            <option style="color: white" value="{{ $integrador->id }}">{{ $integrador->name }}</option>
                        @endforeach
                    </select>
                </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">Crear</button>
            </div>
        </form>
       </div>
   </div>
</div>

<!-- Modal Edit -->
<div class="modal fade" id="editModal">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <h5 class="modal-title">Editar Cliente</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
           </div>
           <form action="{{ route('customer.edit') }}" method="POST" id="editCustomerForm">
               @csrf
               <input type="hidden" name="id" id="edit-id">
               <input type="hidden" name="mac_date_hash" id="edit_mac_date_hash">
               <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label" style="color:white">Administrador</label>
                    <input type="text" class="form-control" name="admin" id="edit-admin" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" style="color:white">Ciudad</label>
                    <input type="text" class="form-control" name="city" id="edit-city" required>
                </div>
                   <div class="mb-3">
                       <label class="form-label" style="color:white">Email</label>
                       <input type="email" class="form-control" id="edit-email" name="email" required>
                   </div>
                   <div class="mb-3">
                       <label class="form-label" style="color:white">Teléfono</label>
                       <input type="text" class="form-control" id="edit-phone" name="phone" required>
                   </div>
                   <div class="mb-3">
                       <label class="form-label" style="color:white">Fecha de Vencimiento</label>
                       <input type="date" class="form-control" id="edit-expired-plan" name="expired_plan" required>
                   </div>
                   <div class="mb-3">
                       <label class="form-label" style="color:white">MAC</label>
                       <input type="text" class="form-control" id="edit-mac" name="MAC" required>
                   </div>
                   <div class="mb-3">
                       <label class="form-label" style="color:white">Conjunto</label>
                       <input type="text" class="form-control" id="edit-name-country" name="Name_Country" required>
                   </div>
                   <div class="mb-3">
                        <label class="form-label" style="color:white">Integrador</label>
                        <select class="form-select" name="create_user" id="edit-integrador" required>
                            <option value="">Seleccionar integrador</option>
                            @foreach ($integradores as $integrador)
                                <option value="{{ $integrador->id }}">{{ $integrador->name }}</option>
                            @endforeach
                        </select>
                    </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</button>
               </div>
           </form>
       </div>
   </div>
</div>

<!-- Modal Delete -->
<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">@lang('System.Delete') Cliente</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <form action="{{ route('customer.delete') }}" method="POST">
               @csrf
               <input type="hidden" name="id" id="delete-id">
               <div class="modal-body">
                   <p class="text-danger">¿Está seguro de eliminar este cliente?</p>
                   <small style="color: #8b97b7;" class="d-block mt-2">
                       Esta acción no se puede deshacer
                   </small>
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@lang('System.Cancel')</button>
                   <button type="submit" class="btn btn-danger">@lang('System.Delete')</button>
               </div>
           </form>
       </div>
   </div>
</div>
@endrole
@endsection

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    // Función para generar mac_date_hash
    function generateMacDateHash(mac, date) {
        // Formatear la fecha
        const formattedDate = new Date(date);
        const year = formattedDate.getFullYear();
        const month = String(formattedDate.getMonth() + 1).padStart(2, '0');
        const day = String(formattedDate.getDate()).padStart(2, '0');
    
        // Crear la combinación MAC_Y-m-d
        const combinedString = `${mac}_${year}-${month}-${day}`;
    
        // Convertir a Base64
        return btoa(combinedString);
    }
    
    // Función para copiar licencia
    function copyLicense(button) {
        const license = button.getAttribute('data-license');
        navigator.clipboard.writeText(license).then(() => {
            // Cambiar temporalmente el ícono a un check
            const icon = button.querySelector('i');
            icon.classList.remove('ti-copy');
            icon.classList.add('ti-check');
            
            // Volver al ícono original después de 1 segundo
            setTimeout(() => {
                icon.classList.remove('ti-check');
                icon.classList.add('ti-copy');
            }, 1000);
        });
    }

    // Manejo de búsqueda en la tabla
    document.getElementById('search-input').addEventListener('keyup', function() {
        const searchValue = this.value.toLowerCase().trim();
        const tableRows = document.querySelectorAll('#license-table tbody tr');
        
        let visibleCount = 0;
        tableRows.forEach(row => {
            const textContent = row.textContent.toLowerCase();
            if (textContent.includes(searchValue)) {
                row.style.display = '';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });
        
        // Actualizar información de paginación
        updatePaginationInfo(visibleCount, tableRows.length);
    });
    
    // Cambiar número de registros mostrados
    document.getElementById('entries-select').addEventListener('change', function() {
        const entriesPerPage = parseInt(this.value);
        const tableRows = document.querySelectorAll('#license-table tbody tr');
        
        tableRows.forEach((row, index) => {
            if (index < entriesPerPage) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
        
        // Actualizar información de paginación
        updatePaginationInfo(Math.min(entriesPerPage, tableRows.length), tableRows.length);
    });
    
    // Función para actualizar información de paginación
    function updatePaginationInfo(visibleCount, totalCount) {
        document.getElementById('pagination-info').textContent = 
            `Mostrando registros del 1 al ${visibleCount} de un total de ${totalCount} registros`;
    }

    @role('Admin')
    // Formulario de creación de cliente
    document.getElementById('createCustomerForm').addEventListener('submit', function(e) {
        e.preventDefault();
    
        // Obtener los valores
        const mac = document.getElementById('MAC').value;
        const date = document.getElementById('expired_plan').value;
    
        // Generar el hash
        const base64String = generateMacDateHash(mac, date);
    
        // Asignar al campo oculto
        document.getElementById('mac_date_hash').value = base64String;
    
        // Enviar el formulario
        this.submit();
    });
    // Formulario de edición de cliente
    document.getElementById('editCustomerForm').addEventListener('submit', function(e) {
        e.preventDefault();
    
        // Obtener los valores
        const mac = document.getElementById('edit-mac').value;
        const date = document.getElementById('edit-expired-plan').value;
    
        // Generar el hash
        const base64String = generateMacDateHash(mac, date);
    
        // Asignar al campo oculto
        document.getElementById('edit_mac_date_hash').value = base64String;
    
        // Enviar el formulario
        this.submit();
    });

    // Validación adicional para formato MAC en formulario de creación
    document.getElementById('MAC').addEventListener('input', function() {
        let value = this.value.toUpperCase();
        value = value.replace(/[^0-9A-F:]/g, '');
    
        // Formato XX:XX:XX:XX:XX:XX
        if (value.length > 17) {
            value = value.slice(0, 17);
        }
    
        // Añadir : automáticamente
        if (value.length > 0) {
            value = value.replace(/([0-9A-F]{2})([0-9A-F]{2})/g, '$1:$2');
            value = value.replace(/:{2,}/g, ':');
            if (value.endsWith(':')) {
                value = value.slice(0, -1);
            }
        }
    
        this.value = value;
    });
    
    // Validación adicional para formato MAC en formulario de edición
    document.getElementById('edit-mac').addEventListener('input', function() {
        let value = this.value.toUpperCase();
        value = value.replace(/[^0-9A-F:]/g, '');
    
       // Formato XX:XX:XX:XX:XX:XX
       if (value.length > 17) {
            value = value.slice(0, 17);
        }
    
        // Añadir : automáticamente
        if (value.length > 0) {
            value = value.replace(/([0-9A-F]{2})([0-9A-F]{2})/g, '$1:$2');
            value = value.replace(/:{2,}/g, ':');
            if (value.endsWith(':')) {
                value = value.slice(0, -1);
            }
        }
    
        this.value = value;
    });

    // Funcionalidad de edición
    document.querySelectorAll('.edit-btn').forEach(button => {
        button.addEventListener('click', function() {
            const id = this.getAttribute('data-id');
            const admin = this.getAttribute('data-admin');
            const city = this.getAttribute('data-city');
            const email = this.getAttribute('data-email');
            const phone = this.getAttribute('data-phone');
            const expiredPlan = this.getAttribute('data-expired-plan');
            const mac = this.getAttribute('data-mac');
            const nameCountry = this.getAttribute('data-name-country');
            const integrador = this.getAttribute('data-integrador');

            document.getElementById('edit-id').value = id;
            document.getElementById('edit-admin').value = admin;
            document.getElementById('edit-city').value = city;
            document.getElementById('edit-email').value = email;
            document.getElementById('edit-phone').value = phone;
            document.getElementById('edit-expired-plan').value = expiredPlan;
            document.getElementById('edit-mac').value = mac;
            document.getElementById('edit-name-country').value = nameCountry;
            document.getElementById('edit-integrador').value = integrador;
            
            // También generamos el hash inicial cuando se carga el modal
            const base64String = generateMacDateHash(mac, expiredPlan);
            document.getElementById('edit_mac_date_hash').value = base64String;
        });
    });

    // Funcionalidad de eliminación
    document.querySelectorAll('.delete-btn').forEach(button => {
        button.addEventListener('click', function() {
            const id = this.getAttribute('data-id');
            document.getElementById('delete-id').value = id;
        });
    });
    @endrole
    
    // Inicialización
    document.addEventListener('DOMContentLoaded', function() {
        // Cargar valores iniciales
        document.getElementById('entries-select').value = "10";
        const tableRows = document.querySelectorAll('#license-table tbody tr');
        updatePaginationInfo(Math.min(10, tableRows.length), tableRows.length);
        
        // Asegurar que los inputs de formulario mantengan su color de fondo
        document.querySelectorAll('.form-control, .form-select').forEach(input => {
            input.addEventListener('mouseleave', function() {
                this.style.backgroundColor = '#1a2b5d';
                this.style.color = 'white';
            });
        });
    });
</script>
@endpush