@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;
}

.notification-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;
    margin-bottom: 20px;
}

.notification-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;
}

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

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

.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-close {
    color: white;
    filter: invert(1) grayscale(100%) brightness(200%);
}

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

@media screen and (max-width: 576px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}
</style>
@endpush

@push('title')
Clientes por notificar
@endpush

@section('content')
<div class="main-container">
    <div class="license-section">
        <div class="section-header">
            <h1 class="section-title">Clientes por notificar</h1>
        </div>
        
        <button id="sendNotificationBtn" class="notification-btn">
            <i class="ti ti-bell"></i> Enviar notificación a todos
        </button>
        
        <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>
                        <th>Conjunto</th>
                        <th>Días para vencimiento</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($customer as $c)
                    <tr>
                        <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>
                    </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>

<!-- Modal de Confirmación para Enviar Notificaciones -->
<div class="modal fade" id="sendNotificationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar envío de notificaciones</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('customer.send_notifications') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <p>¿Está seguro de enviar notificaciones a todos los clientes listados?</p>
                    <p>Se enviarán correos electrónicos a <span id="notification-count">{{ count($customer) }}</span> clientes.</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-primary">Confirmar</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>
    // 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);
        
        // Actualizar contador en el modal
        document.getElementById('notification-count').textContent = visibleCount;
    });
    
    // 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');
        
        let visibleCount = 0;
        tableRows.forEach((row, index) => {
            if (index < entriesPerPage) {
                row.style.display = '';
                visibleCount++;
            } 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`;
    }
    
    // Botón para abrir el modal de envío de notificaciones
    document.getElementById('sendNotificationBtn').addEventListener('click', function() {
        const visibleRows = document.querySelectorAll('#license-table tbody tr:not([style*="display: none"])');
        document.getElementById('notification-count').textContent = visibleRows.length;
        
        const modal = new bootstrap.Modal(document.getElementById('sendNotificationModal'));
        modal.show();
    });
    
    // 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);
    });
</script>
@endpush