@php $p = request('periode'); @endphp
<div class="flex flex-wrap items-end gap-2" id="fd-root">
    <div>
        <label class="mb-1 block text-[11px] text-slate-400">Filtrer par</label>
        <select name="periode" id="fd-periode" class="h-9 rounded-lg border-slate-200 text-sm">
            <option value="">Toutes</option>
            <option value="jour"    @selected($p==='jour')>Jour</option>
            <option value="plage"   @selected($p==='plage')>Plage de jours</option>
            <option value="semaine" @selected($p==='semaine')>Semaine</option>
            <option value="mois"    @selected($p==='mois')>Mois</option>
            <option value="annee"   @selected($p==='annee')>Année</option>
        </select>
    </div>

    {{-- Champ déclencheur + popup calendrier --}}
    <div id="fd-field" class="relative @if(!$p) hidden @endif">
        <label class="mb-1 block text-[11px] text-slate-400" id="fd-label">Date</label>
        <input type="text" id="fd-trigger" readonly placeholder="Sélectionner…"
               class="h-9 w-56 cursor-pointer rounded-lg border-slate-200 text-sm" autocomplete="off">

        {{-- Valeurs soumises --}}
        <input type="hidden" name="date"        id="fd-date"        value="{{ request('date') }}">
        <input type="hidden" name="date_debut"  id="fd-date_debut"  value="{{ request('date_debut') }}">
        <input type="hidden" name="date_fin"    id="fd-date_fin"    value="{{ request('date_fin') }}">
        <input type="hidden" name="semaine"     id="fd-semaine"     value="{{ request('semaine') }}">
        <input type="hidden" name="mois"        id="fd-mois"        value="{{ request('mois') }}">
        <input type="hidden" name="annee"       id="fd-annee"       value="{{ request('annee') }}">

        <div id="fd-pop" class="absolute left-0 z-40 mt-1 hidden w-72 rounded-xl border border-slate-200 bg-white p-3 shadow-lg">
            <div class="mb-2 flex items-center justify-between">
                <button type="button" id="fd-prev" class="flex h-7 w-7 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100">&#8249;</button>
                <div id="fd-title" class="text-sm font-medium text-slate-800"></div>
                <button type="button" id="fd-next" class="flex h-7 w-7 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100">&#8250;</button>
            </div>
            <div id="fd-body"></div>
            <div class="mt-2 flex items-center justify-between border-t border-slate-100 pt-2 text-xs">
                <button type="button" id="fd-clear" class="text-slate-500 hover:text-slate-700">Effacer</button>
                <button type="button" id="fd-today" class="font-medium text-emerald-600 hover:text-emerald-700">Aujourd'hui</button>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    var root = document.getElementById('fd-root');
    if (!root) return;

    var MOIS = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
    var MOIS_C = ['Janv.','Févr.','Mars','Avr.','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'];
    var JOURS = ['Lu','Ma','Me','Je','Ve','Sa','Di'];

    var periode = document.getElementById('fd-periode');
    var field   = document.getElementById('fd-field');
    var label   = document.getElementById('fd-label');
    var trigger = document.getElementById('fd-trigger');
    var pop     = document.getElementById('fd-pop');
    var title   = document.getElementById('fd-title');
    var body    = document.getElementById('fd-body');
    var prev    = document.getElementById('fd-prev');
    var next    = document.getElementById('fd-next');
    var clearBtn= document.getElementById('fd-clear');
    var todayBtn= document.getElementById('fd-today');

    var H = {
        date: document.getElementById('fd-date'),
        date_debut: document.getElementById('fd-date_debut'),
        date_fin: document.getElementById('fd-date_fin'),
        semaine: document.getElementById('fd-semaine'),
        mois: document.getElementById('fd-mois'),
        annee: document.getElementById('fd-annee')
    };

    function pad(n){ return (n<10?'0':'')+n; }
    function ymd(d){ return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate()); }
    function parse(s){ if(!s) return null; var p=s.split('-'); return new Date(+p[0], +p[1]-1, +p[2]); }
    function frd(d){ return pad(d.getDate())+'/'+pad(d.getMonth()+1)+'/'+d.getFullYear(); }
    function lundi(d){ var x=new Date(d); var j=(x.getDay()+6)%7; x.setDate(x.getDate()-j); return x; }
    function dimanche(d){ var x=lundi(d); x.setDate(x.getDate()+6); return x; }
    function isoWeek(d){ var x=new Date(Date.UTC(d.getFullYear(),d.getMonth(),d.getDate())); var day=(x.getUTCDay()+6)%7; x.setUTCDate(x.getUTCDate()-day+3); var y0=new Date(Date.UTC(x.getUTCFullYear(),0,4)); var w=1+Math.round(((x-y0)/86400000-3+((y0.getUTCDay()+6)%7))/7); return [x.getUTCFullYear(), w]; }

    var view = new Date();      // mois/année affichés (jour/semaine/mois)
    var decade = view.getFullYear();
    var rangeTmp = null;        // début temporaire pour "plage"

    function mode(){ return periode.value; }

    function updateLabel(){
        var m = mode();
        label.textContent = m==='jour' ? 'Date' : (m==='plage' ? 'Plage de jours' : (m==='semaine' ? 'Semaine' : (m==='mois' ? 'Mois' : (m==='annee' ? 'Année' : 'Date'))));
        var t = '';
        if (m==='jour' && H.date.value) t = frd(parse(H.date.value));
        else if (m==='plage' && (H.date_debut.value || H.date_fin.value)) t = (H.date_debut.value?frd(parse(H.date_debut.value)):'…') + ' → ' + (H.date_fin.value?frd(parse(H.date_fin.value)):'…');
        else if (m==='semaine' && H.semaine.value){ var w=isoWeek(parse(H.semaine.value)); t='Semaine '+w[1]+' · '+w[0]; }
        else if (m==='mois' && H.mois.value){ var pp=H.mois.value.split('-'); t=MOIS[+pp[1]-1]+' '+pp[0]; }
        else if (m==='annee' && H.annee.value) t = H.annee.value;
        trigger.value = t;
    }

    // ---------- Rendus ----------
    function renderJours(){
        var y=view.getFullYear(), m=view.getMonth();
        title.textContent = MOIS[m]+' '+y;
        var first=lundi(new Date(y,m,1));
        var html='<div class="grid grid-cols-7 gap-1 text-center text-[11px] text-slate-400 mb-1">';
        JOURS.forEach(function(j){ html+='<div>'+j+'</div>'; });
        html+='</div><div class="grid grid-cols-7 gap-1">';
        var semSel = (mode()==='semaine' && H.semaine.value) ? [ymd(lundi(parse(H.semaine.value))), ymd(dimanche(parse(H.semaine.value)))] : null;
        var dd = H.date_debut.value, df = H.date_fin.value;
        for (var i=0;i<42;i++){
            var d=new Date(first); d.setDate(first.getDate()+i);
            var out = d.getMonth()!==m;
            var key = ymd(d);
            var cls='h-8 rounded-lg text-sm ';
            var sel=false;
            if (mode()==='jour') sel = (H.date.value===key);
            if (mode()==='plage'){ if(dd&&df) sel = (key>=dd && key<=df); else sel = (key===dd); }
            if (mode()==='semaine' && semSel) sel = (key>=semSel[0] && key<=semSel[1]);
            cls += out ? 'text-slate-300 ' : 'text-slate-700 hover:bg-emerald-50 ';
            if (sel) cls += 'bg-emerald-600 text-white hover:bg-emerald-600 ';
            html+='<button type="button" data-day="'+key+'" class="'+cls+'">'+d.getDate()+'</button>';
        }
        html+='</div>';
        body.innerHTML=html;
        body.querySelectorAll('[data-day]').forEach(function(b){ b.addEventListener('click', function(){ pickJour(this.getAttribute('data-day')); }); });
    }
    function renderMois(){
        title.textContent = view.getFullYear();
        var sel = H.mois.value; // yyyy-mm
        var html='<div class="grid grid-cols-3 gap-2">';
        for (var i=0;i<12;i++){
            var key=view.getFullYear()+'-'+pad(i+1);
            var cls='h-10 rounded-lg text-sm text-slate-700 hover:bg-emerald-50 ';
            if (sel===key) cls='h-10 rounded-lg text-sm bg-emerald-600 text-white ';
            html+='<button type="button" data-mois="'+key+'" class="'+cls+'">'+MOIS_C[i]+'</button>';
        }
        html+='</div>';
        body.innerHTML=html;
        body.querySelectorAll('[data-mois]').forEach(function(b){ b.addEventListener('click', function(){ H.mois.value=this.getAttribute('data-mois'); updateLabel(); close(); }); });
    }
    function renderAnnees(){
        var start=decade-5;
        title.textContent = start+' – '+(start+11);
        var sel=H.annee.value;
        var html='<div class="grid grid-cols-3 gap-2">';
        for (var i=0;i<12;i++){
            var an=start+i;
            var cls='h-10 rounded-lg text-sm text-slate-700 hover:bg-emerald-50 ';
            if (sel==an) cls='h-10 rounded-lg text-sm bg-emerald-600 text-white ';
            html+='<button type="button" data-annee="'+an+'" class="'+cls+'">'+an+'</button>';
        }
        html+='</div>';
        body.innerHTML=html;
        body.querySelectorAll('[data-annee]').forEach(function(b){ b.addEventListener('click', function(){ H.annee.value=this.getAttribute('data-annee'); updateLabel(); close(); }); });
    }
    function render(){
        var m=mode();
        if (m==='mois') renderMois();
        else if (m==='annee') renderAnnees();
        else renderJours();
    }

    // ---------- Sélection ----------
    function pickJour(key){
        var m=mode();
        if (m==='jour'){ H.date.value=key; updateLabel(); close(); return; }
        if (m==='semaine'){ H.semaine.value=key; updateLabel(); close(); return; }
        if (m==='plage'){
            if (!rangeTmp){ rangeTmp=key; H.date_debut.value=key; H.date_fin.value=''; render(); updateLabel(); }
            else {
                var a=rangeTmp, b=key;
                if (b<a){ var t=a; a=b; b=t; }
                H.date_debut.value=a; H.date_fin.value=b; rangeTmp=null;
                updateLabel(); close();
            }
        }
    }

    // ---------- Popup ----------
    function open(){
        var m=mode(); if(!m) return;
        // position de départ
        var ref = H.date.value || H.date_debut.value || H.semaine.value;
        if (m==='mois' && H.mois.value){ var pp=H.mois.value.split('-'); view=new Date(+pp[0], +pp[1]-1, 1); }
        else if (ref) view=parse(ref);
        else view=new Date();
        decade = (m==='annee' && H.annee.value) ? +H.annee.value : view.getFullYear();
        rangeTmp=null;
        render();
        pop.classList.remove('hidden');
    }
    function close(){ pop.classList.add('hidden'); }

    trigger.addEventListener('click', function(){ pop.classList.contains('hidden') ? open() : close(); });
    prev.addEventListener('click', function(){ step(-1); });
    next.addEventListener('click', function(){ step(1); });
    function step(dir){
        var m=mode();
        if (m==='mois'){ view.setFullYear(view.getFullYear()+dir); renderMois(); }
        else if (m==='annee'){ decade+=dir*12; renderAnnees(); }
        else { view.setMonth(view.getMonth()+dir); renderJours(); }
    }
    clearBtn.addEventListener('click', function(){
        H.date.value=H.date_debut.value=H.date_fin.value=H.semaine.value=H.mois.value=H.annee.value='';
        rangeTmp=null; updateLabel(); render();
    });
    todayBtn.addEventListener('click', function(){ view=new Date(); decade=view.getFullYear(); render(); });

    periode.addEventListener('change', function(){
        field.classList.toggle('hidden', !periode.value);
        rangeTmp=null; updateLabel();
        if (!pop.classList.contains('hidden')) open();
    });

    document.addEventListener('click', function(e){ if (!field.contains(e.target)) close(); });

    updateLabel();
})();
</script>