@extends('admin.layout.master')



@section('content')
<section class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-wrapper">
            
            <div class="page-header-garde animate-fade-in">
                <h2 class="text-white fw-800">Gestion de la Pharmacie de garde</h2>
                <p class="text-muted small mb-0">Configuration et activation des gardes pharmaceutiques</p>
            </div>

            <!-- Banner Période -->
            <div class="period-summary animate-fade-in shadow-premium">
                <div class="row w-100 g-0 align-items-center text-center text-md-start">
                    <!-- Date Début -->
                    <div class="col-md-4 d-flex align-items-center justify-content-center justify-content-md-start px-4 py-2">
                        <div class="period-icon-box">
                            <i class="feather icon-calendar"></i>
                        </div>
                        <div class="d-flex flex-column ms-3">
                            <span class="period-title"> DÉBUT DE PÉRIODE</span>
                            <span class="period-date">{{ \Carbon\Carbon::parse($dateDebut)->translatedFormat('d M Y') }}</span>
                        </div>
                    </div>

                    <!-- Date Fin -->
                    <div class="col-md-4 d-flex align-items-center justify-content-center justify-content-md-start px-4 py-2 border-lux-start">
                        <div class="period-icon-box">
                            <i class="feather icon-calendar"></i>
                        </div>
                        <div class="d-flex flex-column ms-3">
                            <span class="period-title"> FIN DE PÉRIODE</span>
                            <span class="period-date">{{ \Carbon\Carbon::parse($dateFin)->translatedFormat('d M Y') }}</span>
                        </div>
                    </div>

                    <!-- Total -->
                    <div class="col-md-4 d-flex align-items-center justify-content-center justify-content-md-start px-4 py-2 border-lux-start">
                        <div class="period-icon-box icon-total">
                            <i class="feather icon-activity"></i>
                        </div>
                        <div class="d-flex flex-column ms-3">
                            <span class="period-title"> PHARMACIES EN GARDE</span>
                            <span class="period-date text-primary">{{ $nbre_prestataire }} GARDS</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filter Bar -->
            <div class="filter-bar-premium animate-fade-in mb-4">
                <div class="row g-3 align-items-end">
                    <div class="col-md-8">
                        <label class="filter-label">Recherche par Nom</label>
                        <input type="text" id="search-nom" class="form-control input-chic" placeholder="Rechercher une pharmacie..." autocomplete="off">
                    </div>
                    <div class="col-md-4">
                        <label class="filter-label">Localité / Zone</label>
                        <select id="search-localite" class="form-control select2 js-select2-premium">
                            <option value="">Toutes les zones</option>
                            @foreach($localite as $code => $libelle)
                                @if($code)
                                    <option value="{{ strtolower($libelle) }}">{{ $libelle }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                   
                </div>
            </div>

            <!-- Result Cloud Table -->
            <div class="cloud-table-container animate-fade-in" id="preview-container">
                @include('Prestataire::admin.prestataire.items')
            </div>

            <div class="text-center mt-5">
                <a href="{{ route('admin.prestataire.indexPha') }}" class="btn" style="color: var(--vt-muted); font-weight: 700; gap: 10px; display: inline-flex; align-items: center; text-decoration: none;">
                    <i class="feather icon-arrow-left text-primary"></i> Retour Liste des Gardes
                </a>
            </div>

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



<script>
$(document).ready(function() {

    /* ── Select2 ── */
    $("#search-localite").select2({
        minimumResultsForSearch: Infinity,
        placeholder: "Toutes les zones",
        allowClear: true,
        width: '100%'
    });

    /* ── Filtre client-side ── */
    var totalInitial = {{ $nbre_prestataire }};

    function applyFilter() {
        var nom       = $('#search-nom').val().toLowerCase().trim();
        var localite  = $('#search-localite').val() ? $('#search-localite').val().toLowerCase().trim() : '';
        var visible   = 0;

        $('#preview-container .cloud-row-item').each(function() {
            var rowNom      = $(this).data('nom') ? $(this).data('nom').toLowerCase() : '';
            var rowLocalite = $(this).data('localite') ? $(this).data('localite').toLowerCase() : '';

            var matchNom      = !nom      || rowNom.indexOf(nom) !== -1;
            var matchLocalite = !localite || rowLocalite.indexOf(localite) !== -1;

            if (matchNom && matchLocalite) {
                $(this).show();
                visible++;
            } else {
                $(this).hide();
            }
        });

        /* Mise à jour du compteur bas */
        $('#results-counter').text(visible + ' RÉSULTATS PHARMACIES');

        /* Mise à jour du compteur banner */
        $('.period-date.text-primary').text(visible + ' GARDS');

        /* Afficher message vide si 0 résultats */
        var $empty = $('#no-results-msg');
        if (visible === 0) {
            $empty.show();
        } else {
            $empty.hide();
        }
    }

    /* Déclencheurs */
    $('#search-nom').on('input', applyFilter);
    $('#search-localite').on('change', applyFilter);
    $('#btn-filter').on('click', applyFilter);

    /* ── Toggle garde (inchangé) ── */
    $(document).on('change', '.toggle-class', function() {
        var isChecked = $(this).prop('checked');
        var est_garde = isChecked ? 1 : 0;
        var id = $(this).data('id');

        var label = $(this).closest('.c-cell').find('.status-label');
        label.text(isChecked ? 'Désactivation' : 'Activation');

        $.ajax({
            type: "GET",
            dataType: "json",
            url: '{{ route("changeStatus") }}',
            data: {'est_garde': est_garde, 'id': id},
            success: function(data) {
                console.log("Garde status updated.");
            }
        });
    });

});
</script>

<style>
/* ══════════════════════════════════════════════
       GESTION DES GARDES — Design Medical-Premium
       ══════════════════════════════════════════════ */

    .page-header-garde { margin-bottom: 30px; }
    .page-header-garde h2 { font-weight: 800; color: #fff; letter-spacing: -0.5px; }

    .filter-label { font-size: 0.55rem; text-transform: uppercase; font-weight: 800; color: var(--vt-primary); margin-bottom: 10px; display: block; letter-spacing: 1px; }

    /* Period Banner Premium Optimized */
    .period-summary {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 5px solid var(--vt-primary);
        border-radius: 20px;
        padding: 25px 15px;
        margin-bottom: 40px;
        display: flex;
        align-items: center;
        color: #fff;
        transition: all 0.4s ease;
    }

    .period-icon-box {
        width: 44px; height: 44px;
        background: rgba(var(--vt-primary-rgb), 0.1);
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        color: var(--vt-primary);
        font-size: 1.2rem;
    }
    .icon-total { background: rgba(255,255,255,0.05); color: #fff; }

    .period-title { 
        font-size: 0.6rem; 
        text-transform: uppercase; 
        font-weight: 800; 
        color: var(--vt-muted); 
        letter-spacing: 1.5px; 
        margin-bottom: 4px;
    }
    .period-date { font-weight: 900; color: #fff; font-size: 1rem; letter-spacing: -0.2px; }

    .border-lux-start { border-left: 1px solid rgba(255,255,255,0.08); }

    @media (max-width: 768px) {
        .border-lux-start { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 15px; padding-top: 15px !important; }
    }

    /* Cloud Table Item (Custom) */
    .cloud-row-item {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 16px;
        padding: 15px 20px;
        display: grid;
        grid-template-columns: 1fr 2fr 2fr 1.5fr 1fr;
        gap: 15px;
        align-items: center;
        margin-bottom: 12px;
        transition: all 0.3s;
    }
    .cloud-row-item:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--vt-primary); transform: translateY(-2px); }
    .c-cell { font-size: 0.8rem; color: #fff; }
    .c-label { display: block; font-size: 0.55rem; color: var(--vt-muted); font-weight: 700; text-transform: uppercase; margin-bottom: 2px; }
    .c-main { font-weight: 800; color: #fff; }

    /* Switch Style (Repeat for safety) */
    .switch-premium { position: relative; display: inline-block; width: 44px; height: 24px; }
    .switch-premium input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.1); transition: .4s; border-radius: 24px; }
    .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
    input:checked + .slider { 
        background-color: var(--vt-primary) !important; 
        box-shadow: 0 0 15px rgba(var(--vt-primary-rgb), 0.5);
    }
    input:checked + .slider:before { transform: translateX(20px); background-color: #000; }
</style>


<style>
.custom-pagi-item .pagination { gap: 8px; margin: 0; }
    .custom-pagi-item .page-link { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #fff !important; border-radius: 10px; font-weight: 700; padding: 6px 12px; font-size: 0.75rem; }
    .custom-pagi-item .page-item.active .page-link { background: var(--vt-primary) !important; color: #000 !important; border-color: transparent !important; }

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

    body.light-mode .period-summary {
        background: #ffffff !important;
        border: 1px solid #e2e8f0;
        border-left: 5px solid var(--vt-primary);
        box-shadow: 0 15px 35px rgba(0,0,0,0.04);
    }

    body.light-mode .period-icon-box {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

    body.light-mode .period-title {
        color: #94a3b8;
    }

    body.light-mode .period-date {
        color: #1e293b !important;
    }

    body.light-mode .border-lux-start {
        border-left-color: #f1f5f9;
    }

    body.light-mode .icon-total {
        color: var(--vt-primary);
    }

    body.light-mode .cloud-row-item {
        background: #ffffff !important;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 8px 20px rgba(0,0,0,0.02);
    }
    
    body.light-mode .cloud-row-item:hover {
        background: #fdfdfe !important;
        border-color: var(--vt-primary);
        box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    }

    body.light-mode .c-cell {
        color: #475569 !important;
    }

    body.light-mode .c-main {
        color: #1e293b !important;
    }

    body.light-mode .slider {
        background-color: #e2e8f0;
    }

    body.light-mode .custom-pagi-item .page-link {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
        color: #64748b !important;
    }

    body.light-mode .custom-pagi-item .page-item.active .page-link {
        background: var(--vt-primary) !important;
        color: #000 !important;
        box-shadow: 0 5px 15px rgba(var(--vt-primary-rgb), 0.2);
    }
</style>

@endsection