@extends('admin.layout.master')



@section('content')
<section class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-wrapper">
            <!-- Page Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 class="fw-800 text-white mb-1">Souscripteurs</h2>
                    <p class="text-muted small mb-0">Gestion et suivi des souscripteurs</p>
                </div>
            </div>

            <!-- Dashboard Stats Row -->
            <div class="kpi-row animate-fade-in">
                <div class="kpi-card">
                    <i class="feather icon-users kpi-icon"></i>
                    <span class="kpi-label">Souscripteurs Total</span>
                    <span class="kpi-value" id="kpi-souscripteurs">
                        <i class="feather icon-loader rotate-infinite opacity-50" style="font-size: 1.2rem;"></i>
                    </span>
                    <div class="kpi-progress">
                        <div class="kpi-progress-bar" style="width: 100%; background: var(--vt-primary);"></div>
                    </div>
                </div>
                <div class="kpi-card">
                    <i class="feather icon-file-text kpi-icon"></i>
                    <span class="kpi-label">Polices Total</span>
                    <span class="kpi-value" id="kpi-polices">
                        <i class="feather icon-loader rotate-infinite opacity-50" style="font-size: 1.2rem;"></i>
                    </span>
                    <div class="kpi-progress">
                        <div class="kpi-progress-bar" style="width: 100%; background: #f1c40f;"></div>
                    </div>
                </div>
                <div class="kpi-card">
                    <i class="feather icon-user-check kpi-icon"></i>
                    <span class="kpi-label">Adhérents Total</span>
                    <span class="kpi-value" id="kpi-adherents">
                        <i class="feather icon-loader rotate-infinite opacity-50" style="font-size: 1.2rem;"></i>
                    </span>
                    <div class="kpi-progress">
                        <div class="kpi-progress-bar" style="width: 100%; background: #2ecc71;"></div>
                    </div>
                </div>
            </div>

            <!-- Filter Glassmorphism bar -->
            <div class="filter-bar-premium animate-fade-in" style="animation-delay: 0.1s;">
                <div class="row align-items-center g-3">
                    <div class="col-md-9 search-input-wrapper">
                        <i class="feather icon-search"></i>
                        {{ Form::text('recherche', $recherche ?? old('recherche'), ['class' => 'form-control input-chic', 'placeholder' => 'Rechercher par nom de souscripteur...', 'id' => 'recherche', 'style' => 'padding-left: 45px;']) }}
                    </div>
                    <div class="col-md-3">
                        <button type="button" id="btnSouscripteurSearch" class="btn-valider-premium w-100">
                            <i class="feather icon-filter"></i> Valider le filtrage
                        </button>
                    </div>
                </div>
            </div>

            <!-- Main Data Table Card -->
            <div class="premium-card animate-fade-in" style="animation-delay: 0.2s;">
                <div class="table-responsive table-container-modern" id="preview">
                    @if(isset($souscripteurs) && $souscripteurs->count() > 0)
                        <table class="modern-table">
                            <thead>
                                <tr>
                                    <th>ID / Localité</th>
                                    <th>Nom Souscripteur</th>
                                    <th>Type / Secteur</th>
                                    <th>Contact Fixe / Adresse</th>
                                    <th>Mobile</th>
                                    <th class="text-center">Polices</th>
                                    <th class="text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($souscripteurs as $souscripteur)
                                <tr>
                                    <td><span class="id-badge">{{ $souscripteur->idSouscripteur }}</span></td>
                                    <td><strong style="color: var(--vt-text);">{{ $souscripteur->souscripteur }}</strong></td>
                                    <td><span class="type-badge">{{ $souscripteur->typeClient }}</span></td>
                                    <td>
                                        <div style="font-size: 0.8rem; color: var(--vt-muted);">{{ $souscripteur->codeApporteur ?? 'N/A' }}</div>
                                        <div class="address-cell" title="{{ $souscripteur->AdresseClient }}">
                                            {{ Str::limit($souscripteur->AdresseClient, 35) }}
                                        </div>
                                    </td>
                                    <td><code style="color: var(--vt-primary);">{{ $souscripteur->telephonePortable }}</code></td>
                                    <td class="text-center">
                                        @php
                                            $policeCount = 0;
                                            foreach ($nbre_polices as $nbre_police) {
                                                if ($nbre_police->idClient == $souscripteur->idSouscripteur) {
                                                    $policeCount = $nbre_police->police;
                                                    break;
                                                }
                                            }
                                        @endphp
                                        <span class="value" style="font-weight: 700; color: var(--vt-text);">{{ $policeCount }}</span>
                                    </td>
                                    <td>
                                        <div class="btn-action-group justify-content-end">
                                            <a onclick="showOverlay()" href="{{ route('admin.police.index', ['idSouscripteur' => $souscripteur->idSouscripteur]) }}" 
                                               class="btn-action-minimal red" title="Voir les polices">
                                                <i class="feather icon-file-text"></i>
                                            </a>
                                            <a onclick="showOverlay()" href="{{ route('admin.souscripteur.show', ['souscripteur' => $souscripteur->idSouscripteur]) }}" 
                                               class="btn-action-minimal blue" title="Détails complets">
                                                <i class="feather icon-eye"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <!-- Pagination Section -->
                        <div class="pagination-footer" style="padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.05);">
                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <p class="mb-0" style="font-size: 0.85rem; color: var(--vt-muted);">
                                        Affichage de <strong>{{ $souscripteurs->count() }}</strong> sur <strong>{{ $souscripteurs->total() }}</strong> souscripteurs
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex justify-content-end">
                                        {!! $souscripteurs->appends(Request::except('page'))->onEachSide(1)->links() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="empty-state">
                            <i class="feather icon-search"></i>
                            <h3>Aucun souscripteur trouvé</h3>
                            <p>Essayez d'ajuster vos critères de recherche pour trouver des résultats.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Bottom Navigation -->
            <div class="back-nav animate-fade-in" style="animation-delay: 0.3s;">
                <a onclick="showOverlay()" href="{{ url()->previous() }}" class="btn-back">
                    <i class="feather icon-arrow-left me-2"></i> Retour à la page précédente
                </a>
            </div>
        </div>
    </div>
</section>

<script>
    function animateValue(element, start, end, duration) {
        if (!element) return;
        const range = end - start;
        const increment = range / (duration / 16);
        let current = start;
        
        const timer = setInterval(() => {
            current += increment;
            if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
                element.textContent = Math.round(end).toLocaleString();
                clearInterval(timer);
            } else {
                element.textContent = Math.floor(current).toLocaleString();
            }
        }, 16);
    }

    $(document).ready(function() {
        // Animation subtle for rows
        $('.modern-table tbody tr').each(function(i) {
            $(this).css({
                'opacity': '0',
                'transform': 'translateY(10px)',
                'transition': 'all 0.3s ease ' + (i * 0.05) + 's'
            });
            
            setTimeout(() => {
                $(this).css({
                    'opacity': '1',
                    'transform': 'translateY(0)'
                });
            }, 300);
        });

        // Charger les KPIs de manière asynchrone
        loadKpiStats();

        function loadKpiStats() {
            $.ajax({
                url: "{{ route('admin.souscripteur.kpi_stats') }}",
                method: "GET",
                data: {
                    recherche: $('#recherche').val()
                },
                success: function(response) {
                    const sousEl = document.getElementById('kpi-souscripteurs');
                    const polEl = document.getElementById('kpi-polices');
                    const adEl = document.getElementById('kpi-adherents');

                    if(sousEl) { sousEl.innerHTML = '0'; animateValue(sousEl, 0, parseInt(response.nbre_souscripteur.replace(/\s/g, '')), 1000); }
                    if(polEl) { polEl.innerHTML = '0'; animateValue(polEl, 0, parseInt(response.nbre_police.replace(/\s/g, '')), 1000); }
                    if(adEl) { adEl.innerHTML = '0'; animateValue(adEl, 0, parseInt(response.nbre_adherent.replace(/\s/g, '')), 1000); }
                },
                error: function() {
                    $('#kpi-souscripteurs').html('N/A');
                    $('#kpi-polices').html('N/A');
                    $('#kpi-adherents').html('N/A');
                }
            });
        }

        // Search trigger
        $('#recherche').on('keypress', function(e) {
            if(e.which == 13) {
                executeSearch();
            }
        });

        $('#btnSouscripteurSearch').on('click', function() {
            executeSearch();
        });

        function executeSearch() {
            let query = $('#recherche').val();
            showOverlay();
            window.location.href = "{{ route('admin.souscripteur.index') }}?recherche=" + encodeURIComponent(query);
        }

    });
</script>

<style>
/* ══════════════════════════════════════════════
       SOUSCRIPTEURS — Design Premium & Chic
       ══════════════════════════════════════════════ */

    /* Glassmorphism Containers */
    .premium-card {
        background: rgba(255, 255, 255, 0.02) !important;
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        margin-bottom: 25px;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .premium-card:hover {
        border-color: rgba(var(--vt-primary-rgb), 0.3);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    }

    .kpi-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }

    .kpi-card {
        background: rgba(255, 255, 255, 0.03) !important;
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 15px 20px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .kpi-card:hover {
        transform: translateY(-5px);
        border-color: rgba(var(--vt-primary-rgb), 0.3);
        background: rgba(var(--vt-primary-rgb), 0.02) !important;
    }

    .kpi-icon {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 1.2rem;
        opacity: 0.15;
        color: var(--vt-primary);
    }

    .kpi-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        color: var(--vt-muted);
        display: block;
        margin-bottom: 5px;
    }

    .kpi-value {
        font-size: 1.5rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
    }

    .kpi-progress {
        height: 3px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        margin-top: 10px;
        overflow: hidden;
    }

    .kpi-progress-bar {
        height: 100%;
        border-radius: 10px;
    }

    /* ── Light Mode Overrides ── */
    body.light-mode h2.text-white {
        color: #1e293b !important;
    }

    body.light-mode .kpi-card {
        background: #ffffff !important;
        border: 1px solid rgba(var(--vt-primary-rgb), 0.1);
        box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    }
    
    body.light-mode .kpi-card:hover {
        border-color: var(--vt-primary);
        box-shadow: 0 15px 40px rgba(0,0,0,0.08) !important;
    }

    body.light-mode .kpi-value {
        color: #1e293b !important;
    }

    body.light-mode .kpi-icon {
        opacity: 0.8;
        color: var(--vt-primary);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
    }

    body.light-mode .kpi-progress {
        background: #f1f5f9;
    }

    .rotate-infinite {
        animation: rotate 2s linear infinite;
        display: inline-block;
    }

    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* Premium Table */
    .table-container-modern {
        padding: 0;
        overflow: hidden;
    }

    .modern-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .modern-table thead th {
        background: rgba(var(--vt-primary-rgb), 0.06);
        color: var(--vt-primary);
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 18px 20px;
        border-bottom: 2px solid rgba(var(--vt-primary-rgb), 0.2);
    }

    .modern-table tbody td {
        padding: 16px 20px;
        font-size: 0.9rem;
        color: var(--vt-text-secondary);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }

    .modern-table tbody tr {
        transition: all 0.2s;
    }

    .modern-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.02);
    }

    /* Status & Badges */
    .id-badge {
        font-family: var(--font-mono);
        color: var(--vt-primary);
        background: rgba(var(--vt-primary-rgb), 0.1);
        padding: 4px 10px;
        border-radius: 6px;
        font-weight: 700;
    }

    .type-badge {
        font-size: 0.75rem;
        font-weight: 700;
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        padding: 4px 12px;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Action Buttons */
    .btn-action-group {
        display: flex;
        gap: 8px;
    }

    .btn-action-minimal {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--vt-text-secondary);
        transition: all 0.3s;
    }

    .btn-action-minimal:hover {
        transform: translateY(-3px);
    }

    .btn-action-minimal.red:hover {
        background: #ef4444;
        border-color: #ef4444;
        color: #fff;
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    }

    .btn-action-minimal.blue:hover {
        background: #3b82f6;
        border-color: #3b82f6;
        color: #fff;
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    }

    /* Empty state */
    .empty-state {
        padding: 60px 20px;
        text-align: center;
        color: var(--vt-muted);
    }

    .empty-state i {
        font-size: 4rem;
        opacity: 0.2;
        margin-bottom: 20px;
    }

    /* Navigation */
    .back-nav {
        margin-top: 30px;
        display: flex;
        justify-content: center;
    }

    .btn-back {
        background: rgba(255, 255, 255, 0.05);
        color: var(--vt-text-secondary);
        padding: 12px 30px;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        font-weight: 700;
        transition: all 0.3s;
        text-decoration: none;
    }

    .btn-back:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.2);
    }

</style>

@endsection