@extends('layouts.app')
@section('title', 'Jours fériés')
@section('page-title', 'Fichiers de base — Jours fériés')

@push('styles')
<style>
    .c-card{background:#fff;border-radius:12px;border:1px solid var(--border);padding:18px 22px;margin-bottom:14px;}
    .f-label{font-size:12px;font-weight:700;color:var(--text-muted);white-space:nowrap;}
    .f-input{border:1.5px solid var(--border);border-radius:7px;padding:5px 9px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;color:var(--text);background:#fff;outline:none;transition:border-color 0.2s;}
    .f-input:focus{border-color:var(--yellow);}
    .s-title{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--navy);border-bottom:2px solid var(--yellow);padding-bottom:5px;margin-bottom:14px;}
    .btn-y{background:var(--yellow);color:var(--navy);border:none;border-radius:20px;padding:8px 22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
    .btn-y:hover{background:#e0b000;}
    .btn-ghost{background:#fff;color:var(--text-muted);border:1.5px solid var(--border);border-radius:20px;padding:7px 18px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;}
    .btn-ghost:hover{background:#F4F6FB;}
    .btn-sm{border:none;border-radius:6px;padding:4px 10px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}

    .ferie-table{width:100%;border-collapse:collapse;}
    .ferie-table thead th{background:#F4F6FB;padding:10px 14px;font-size:11px;font-weight:800;color:var(--text-muted);text-align:left;border-bottom:1.5px solid var(--border);}
    .ferie-table tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
    .ferie-table tbody tr:last-child{border-bottom:none;}
    .ferie-table tbody tr:hover{background:#f8f9fb;}
    .ferie-table tbody tr.selected{background:rgba(245,197,24,.10);}
    .ferie-table tbody td{padding:9px 14px;font-size:13px;font-weight:600;color:var(--text);vertical-align:middle;}

    .list-wrap{border:1.5px solid var(--border);border-radius:8px;overflow:hidden;max-height:480px;overflow-y:auto;}
    .list-wrap::-webkit-scrollbar{width:6px;}
    .list-wrap::-webkit-scrollbar-thumb{background:#CBD0DC;border-radius:3px;}

    .msg-error{display:none;background:#fff5f5;border:1px solid #fed7d7;border-radius:7px;padding:8px 14px;font-size:13px;font-weight:700;color:#c53030;margin-bottom:12px;}
</style>
@endpush

@section('content')
@php
$moisNoms = ['','Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
@endphp

<div style="max-width:680px;">
<div class="c-card">
    <div class="s-title">Jours fériés</div>

    <div id="msg-error" class="msg-error"></div>

    {{-- Formulaire ajout / modification --}}
    <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;">
        <div style="display:flex;align-items:center;gap:6px;">
            <label class="f-label">Jour</label>
            <input type="number" class="f-input" style="width:70px;" id="inJour" min="1" max="31" placeholder="JJ">
        </div>
        <div style="display:flex;align-items:center;gap:6px;">
            <label class="f-label">Mois</label>
            <select class="f-input" style="width:140px;" id="inMois">
                @foreach($moisNoms as $n => $m)
                    @if($n > 0)<option value="{{ $n }}">{{ sprintf('%02d',$n) }} — {{ $m }}</option>@endif
                @endforeach
            </select>
        </div>
        <div style="display:flex;align-items:center;gap:6px;">
            <label class="f-label">Libellé</label>
            <input type="text" class="f-input" style="width:180px;" id="inLibelle" placeholder="Ex : Noël">
        </div>
        <button type="button" class="btn-y" style="padding:6px 16px;" id="btn-action" onclick="sauvegarder()">
            <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:var(--navy);fill:none;stroke-width:2.5;stroke-linecap:round;" id="btn-icon">
                <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            <span id="btn-label">Ajouter</span>
        </button>
        <button type="button" class="btn-ghost" id="btn-annuler" style="display:none;" onclick="resetForm()">Annuler</button>
    </div>

    {{-- Table --}}
    <div class="list-wrap">
        <table class="ferie-table">
            <thead>
                <tr>
                    <th style="width:60px;">Jour</th>
                    <th style="width:160px;">Mois</th>
                    <th>Libellé</th>
                    <th style="width:40px;"></th>
                </tr>
            </thead>
            <tbody id="ferieBody">
                @forelse($jours as $j)
                <tr id="row-{{ $j->id }}" onclick="editer({{ $j->id }}, {{ $j->jour }}, {{ $j->mois }}, '{{ addslashes($j->libelle ?? '') }}')">
                    <td style="text-align:center;font-weight:800;color:var(--navy);">{{ sprintf('%02d', $j->jour) }}</td>
                    <td>{{ sprintf('%02d', $j->mois) }} — {{ $moisNoms[$j->mois] }}</td>
                    <td>{{ $j->libelle }}</td>
                    <td style="text-align:center;">
                        <button class="btn-sm" style="background:#FFF5F5;color:#E53E3E;"
                            onclick="event.stopPropagation();supprimer({{ $j->id }})">✕</button>
                    </td>
                </tr>
                @empty
                <tr id="empty-row">
                    <td colspan="4" style="text-align:center;padding:28px;color:var(--text-muted);font-size:13px;font-weight:600;">
                        Aucun jour férié défini
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div style="margin-top:12px;font-size:12px;color:var(--text-muted);">
        {{ $jours->count() }} jour{{ $jours->count() > 1 ? 's' : '' }} férié{{ $jours->count() > 1 ? 's' : '' }} — cliquez sur une ligne pour la modifier
    </div>
</div>
</div>
@endsection

@push('scripts')
<script>
const CSRF      = '{{ csrf_token() }}';
const URL_STORE = '{{ route("jours-feries.store") }}';
const MOIS_NOMS = ['','Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
let currentId   = null;

function showError(msg) {
    const e = document.getElementById('msg-error');
    e.textContent = msg; e.style.display = 'block';
    setTimeout(() => e.style.display = 'none', 4000);
}

function editer(id, jour, mois, libelle) {
    currentId = id;
    document.getElementById('inJour').value    = jour;
    document.getElementById('inMois').value    = mois;
    document.getElementById('inLibelle').value = libelle;
    document.getElementById('btn-label').textContent = 'Modifier';
    document.getElementById('btn-icon').innerHTML    = '<polyline points="20 6 9 17 4 12"/>';
    document.getElementById('btn-annuler').style.display = 'inline-flex';
    document.querySelectorAll('#ferieBody tr').forEach(r => r.classList.remove('selected'));
    document.getElementById('row-' + id)?.classList.add('selected');
    document.getElementById('inLibelle').focus();
}

function resetForm() {
    currentId = null;
    document.getElementById('inJour').value    = '';
    document.getElementById('inMois').selectedIndex = 0;
    document.getElementById('inLibelle').value = '';
    document.getElementById('btn-label').textContent = 'Ajouter';
    document.getElementById('btn-icon').innerHTML    = '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>';
    document.getElementById('btn-annuler').style.display = 'none';
    document.querySelectorAll('#ferieBody tr').forEach(r => r.classList.remove('selected'));
}

async function sauvegarder() {
    const jour    = parseInt(document.getElementById('inJour').value);
    const mois    = parseInt(document.getElementById('inMois').value);
    const libelle = document.getElementById('inLibelle').value.trim();

    if (!jour || jour < 1 || jour > 31) { showError('Veuillez saisir un jour valide (1-31).'); return; }
    if (!mois) { showError('Veuillez sélectionner un mois.'); return; }

    if (currentId) {
        const res  = await fetch('/jours-feries/' + currentId, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
            body: JSON.stringify({ jour, mois, libelle }),
        });
        const json = await res.json();
        if (!json.success) { showError('Erreur lors de la modification.'); return; }

        const row = document.getElementById('row-' + currentId);
        if (row) {
            row.cells[0].textContent = String(jour).padStart(2,'0');
            row.cells[1].textContent = String(mois).padStart(2,'0') + ' — ' + MOIS_NOMS[mois];
            row.cells[2].textContent = libelle;
            row.setAttribute('onclick', `editer(${currentId}, ${jour}, ${mois}, '${libelle.replace(/'/g,"\\'")}')`);
        }
        resetForm();

    } else {
        const res  = await fetch(URL_STORE, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
            body: JSON.stringify({ jour, mois, libelle }),
        });
        const json = await res.json();
        if (!json.success) { showError(json.message || 'Erreur.'); return; }

        document.getElementById('empty-row')?.remove();
        const id = json.data.id;
        const tr = document.createElement('tr');
        tr.id = 'row-' + id;
        tr.setAttribute('onclick', `editer(${id}, ${jour}, ${mois}, '${libelle.replace(/'/g,"\\'")}')`);
        tr.innerHTML = `
            <td style="text-align:center;font-weight:800;color:var(--navy);">${String(jour).padStart(2,'0')}</td>
            <td>${String(mois).padStart(2,'0')} — ${MOIS_NOMS[mois]}</td>
            <td>${libelle}</td>
            <td style="text-align:center;">
                <button class="btn-sm" style="background:#FFF5F5;color:#E53E3E;"
                    onclick="event.stopPropagation();supprimer(${id})">✕</button>
            </td>`;
        document.getElementById('ferieBody').appendChild(tr);
        resetForm();
    }
}

async function supprimer(id) {
    if (!confirm('Supprimer ce jour férié ?')) return;
    const res  = await fetch('/jours-feries/' + id, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': CSRF } });
    const json = await res.json();
    if (json.success) {
        document.getElementById('row-' + id)?.remove();
        if (currentId === id) resetForm();
        if (!document.querySelector('#ferieBody tr:not(#empty-row)')) {
            const tr = document.createElement('tr');
            tr.id = 'empty-row';
            tr.innerHTML = `<td colspan="4" style="text-align:center;padding:28px;color:var(--text-muted);font-size:13px;font-weight:600;">Aucun jour férié défini</td>`;
            document.getElementById('ferieBody').appendChild(tr);
        }
    } else { showError('Erreur lors de la suppression.'); }
}
</script>
@endpush