@extends('admin.layout.master')



@section('content')
<section class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-wrapper">
            
            <!-- En-tête de page -->
            <div class="page-header-chic animate-fade-in">
                <div class="header-title-chic">
                    <h4>Réseau de Soins</h4>
                    <p><i class="feather icon-map-pin"></i> Réseau de Soins </p>
                </div>
                <div class="header-actions">
                    <a href="{{ url()->previous() }}" onclick="showOverlay()" class="btn-retour-chic">
                        <i class="feather icon-arrow-left"></i> Retour
                    </a>
                </div>
            </div>

            <!-- Barre de Filtres Premium -->
            <div class="filter-bar-premium animate-fade-in" style="animation-delay: 0.1s;">
                {{ Form::open(['route' => 'admin.reseau.index', 'method' => 'GET', "onsubmit" => "showOverlay()", 'id' => 'form_statistique']) }}
                    <input id="idPolice" name="idPolice" type="hidden" value="{{$idPolice}}">
                    <input id="idAdherent" name="idAdherent" type="hidden" value="{{$idAdherent}}">
                    <input id="idBeneficiaire" name="idBeneficiaire" type="hidden" value="{{$idBeneficiaire}}">
                    
                    <div class="row g-4">
                        <div class="col-lg-3 col-md-6">
                            <label class="filter-label">Recherche prestataire</label>
                            {{ Form::text('recherche', old('recherche'), ['class' => 'form-control input-chic', 'placeholder' => 'Rechercher un prestataire...', 'id' => 'recherche']) }}
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <label class="filter-label">Collèges</label>
                            {{ Form::select('idCollege', $colleges, old('idCollege'), ['class' => 'form-control select2 js-select2-premium', 'id' => 'idCollege']) }}
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <label class="filter-label">Localité</label>
                            {{ Form::select('codeLocalite', $localites, old('codeLocalite'), ['class' => 'form-control select2 js-select2-premium', 'id' => 'codeLocalite']) }}
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <label class="filter-label">Type prestataire</label>
                            {{ Form::select('codeTypePrestataire', $typePrestataires, old('codeTypePrestataire'), ['class' => 'form-control select2 js-select2-premium', 'id' => 'codeTypePrestataire']) }}
                        </div>
                        
                        <div class="col-12 mt-3 text-end">
                            <button class="btn-valider-premium d-inline-flex" style="width: auto; height: auto;">
                                <i class="feather icon-search"></i> Filtrer la liste
                            </button>
                        </div>
                    </div>  
                {{ form::close()}}
            </div>

            <!-- Data Table Conteneur -->
            @if(isset($reseaux))
            <div class="table-container-chic animate-fade-in" style="animation-delay: 0.2s;" id="preview">
                
                <div class="badge-compteur">
                    <i class="feather icon-activity"></i> {{ $nbre_prestations }} Prestataire(s) trouvé(s)
                </div>

                <div class="table-responsive">
                    <table class="table-chic">
                        <thead>
                            <tr>
                                <th>LOCALITE</th>
                                <th>POLICE</th>
                                <th>COLLEGE</th>
                                <th>TYPE PRESTATAIRE</th>
                                <th>PRESTATAIRE</th>
                                <th>ADRESSE GEOGRAPHIQUE</th>
                                <th>TÉLÉPHONE FIXE</th>
                                <th>TÉLÉPHONE PORTABLE</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ( $reseaux as $reseau )
                                <tr>
                                    <td>{{ Str::limit($reseau->localite, 35) }}</td>
                                    <td>{{ Str::limit($reseau->Police, 40) }}</td>
                                    <td>{{ Str::limit($reseau->libelleCollege, 35) }}</td>
                                    <td>{{ Str::limit($reseau->typeprestataire, 35) }}</td>
                                    <td class="td-highlight">{{ Str::limit($reseau->Prestataire, 35) }}</td>
                                    <td>{{ Str::limit($reseau->situation, 35) }}</td>
                                    <td>{{ Str::limit($reseau->TelephoneFixe, 35) ?: '-' }}</td>
                                    <td>{{ Str::limit($reseau->telephonePortable, 35) ?: '-' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-4 text-muted">Aun prestataire trouvé.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
                    <div class="text-muted font-weight-bold font-mono" style="font-size: 0.85rem;">
                        Total : {{ count($reseaux) }} Prestation(s) listée(s)
                    </div>
                    @if (($reseaux->count() != 0))
                        <div class="pagination-chic">
                            <span onclick="showOverlay()">
                                {!! $reseaux->appends(Request::except(array('page')))->onEachSide(-1)->links() !!}
                            </span>
                        </div>
                    @endif
                </div>

            </div>
            @endif

        </div>
    </div>
</section>

@section('scripts')
<script>
    $(document).ready(function() {
        if ($('.select2 js-select2-premium').length) {
            $('.select2 js-select2-premium').select2({
                width: '100%',
                minimumResultsForSearch: 10
            });
        }
    });
</script>
@endsection

<style>
/* ══════════════════════════════════════════════
       LISTE RÉSEAU DE SOINS — Design Premium
       ══════════════════════════════════════════════ */
    .pcoded-content, .pcoded-inner-content, .page-wrapper { background: transparent !important; }

    /* Entête Premium */
    .page-header-chic {
        background: linear-gradient(135deg, rgba(var(--vt-primary-rgb), 0.05), rgba(0,0,0,0.2));
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 20px;
        padding: 25px 30px;
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .header-title-chic h4 {
        font-size: 1.5rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 5px 0;
    }

    .header-title-chic p {
        font-size: 0.85rem;
        color: var(--vt-muted);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-retour-chic {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: #fff;
        padding: 10px 20px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .btn-retour-chic:hover {
        background: rgba(var(--vt-primary-rgb), 0.1);
        border-color: var(--vt-primary);
        color: #fff;
        transform: translateY(-2px);
    }


    /* TABLE PREMIUM CHIC */
    .table-container-chic {
        background: rgba(255,255,255,0.01);
        border-radius: 20px;
        padding: 20px;
        border: 1px solid rgba(255,255,255,0.03);
    }
    
    .badge-compteur {
        background: rgba(var(--vt-primary-rgb), 0.15);
        color: var(--vt-primary);
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
        border: 1px solid rgba(var(--vt-primary-rgb), 0.3);
    }

    .table-chic {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 8px;
    }
    
    .table-chic th {
        background: rgba(0,0,0,0.2);
        color: var(--vt-muted);
        padding: 15px 20px;
        font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        border: none;
        text-align: left;
        white-space: nowrap;
    }
    .table-chic th:first-child { border-radius: 12px 0 0 12px; }
    .table-chic th:last-child { border-radius: 0 12px 12px 0; }

    .table-chic td {
        background: rgba(255,255,255,0.02);
        padding: 15px 20px;
        color: #fff;
        font-size: 0.8rem;
        border-top: 1px solid rgba(255,255,255,0.04);
        border-bottom: 1px solid rgba(255,255,255,0.04);
        vertical-align: middle;
        white-space: nowrap;
    }
    .table-chic td:first-child { border-left: 1px solid rgba(255,255,255,0.04); border-radius: 12px 0 0 12px; }
    .table-chic td:last-child { border-right: 1px solid rgba(255,255,255,0.04); border-radius: 0 12px 12px 0; }

    .table-chic tbody tr { transition: all 0.3s; }
    .table-chic tbody tr:hover td {
        background: rgba(255,255,255,0.05);
        border-color: rgba(var(--vt-primary-rgb), 0.3);
    }

    /* ── Light Mode Overrides ── */
    body.light-mode h2.text-white, 
    body.light-mode .header-title-chic h4 { color: #1e293b !important; }
    
    body.light-mode .page-header-chic {
        background: linear-gradient(135deg, rgba(var(--vt-primary-rgb), 0.05), #ffffff);
        border-color: #e2e8f0;
        box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
    }
    
    body.light-mode .btn-retour-chic {
        background: #f1f5f9;
        border-color: #e2e8f0;
        color: #475569;
    }
    
    body.light-mode .btn-retour-chic:hover {
        background: #e2e8f0;
        color: #1e293b;
    }

    body.light-mode .filter-bar-premium {
        background: #ffffff;
        border-color: #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    }

    body.light-mode .filter-label { color: #475569; }

    body.light-mode .table-container-chic {
        background: #ffffff;
        border-color: #e2e8f0;
        box-shadow: 0 10px 25px -5px rgba(0,0,0,0.04);
    }

    body.light-mode .table-chic th {
        background: #f8fafc;
        color: #64748b;
    }

    body.light-mode .table-chic td {
        background: #ffffff;
        color: #334155;
        border-color: #f1f5f9;
    }

    body.light-mode .table-chic tbody tr:hover td {
        background: #f8fafc;
        border-color: rgba(var(--vt-primary-rgb), 0.2);
    }

    body.light-mode .badge-compteur {
        background: rgba(var(--vt-primary-rgb), 0.08);
        border-color: rgba(var(--vt-primary-rgb), 0.15);
    }

    body.light-mode .pagination-chic .page-item .page-link {
        background: #ffffff;
        border-color: #e2e8f0;
        color: #475569;
    }

    .td-highlight {
        font-weight: 700;
        color: var(--vt-primary);
    }

    /* Pagination Chic */
    .pagination-chic .pagination { margin: 0; gap: 5px; justify-content: flex-end; }
    .pagination-chic .page-item .page-link {
        background: rgba(255,255,255,0.02);
        border: 1px solid rgba(255,255,255,0.05);
        color: #fff;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 600;
    }
    .pagination-chic .page-item.active .page-link { background: var(--vt-primary); border-color: var(--vt-primary); color: #000; }
</style>

@endsection