@extends('layouts.admin')

@section('content')
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="mt-4 h3">Configuration : Natures de Recours</h1>
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.comoe.decisions.index') }}">Décisions</a></li>
                <li class="breadcrumb-item active">Natures</li>
            </ol>
        </div>
        <button type="button" class="btn btn-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#addNatureModal">
            <i class="fas fa-plus-circle me-1"></i> Ajouter une nature
        </button>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm">{{ session('success') }}</div>
    @endif

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white py-3">
            <div class="row align-items-center">
                <div class="col">
                    <h6 class="m-0 fw-bold text-primary">Liste des natures</h6>
                </div>
                <div class="col-md-4">
                    {{-- Champ de filtrage automatique --}}
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-search text-muted"></i></span>
                        <input type="text" id="filterNature" class="form-control bg-light border-start-0" placeholder="Filtrer par libellé...">
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <table class="table table-hover align-middle mb-0" id="natureTable">
                <thead class="table-light">
                    <tr>
                        <th class="ps-4">Libellé de la nature</th>
                        <th>Utilisations</th>
                        <th class="text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody id="natureTableBody">
                    @forelse($natures as $nature)
                    <tr class="nature-row">
                        <td class="ps-4 fw-bold text-dark nature-name">{{ $nature->libelle }}</td>
                        <td>
                            <span class="badge bg-light text-dark border">
                                {{ $nature->decisions_count ?? $nature->decisions()->count() }} décision(s)
                            </span>
                        </td>
                        <td class="text-end pe-4">
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-primary" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#editNatureModal{{ $nature->id }}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <form action="{{ route('admin.comoe.natures.destroy', $nature->id) }}" method="POST" class="d-inline">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Supprimer cette nature ?')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>

                    {{-- Modal Edition (Placé ici pour rester dans la boucle) --}}
                    <div class="modal fade" id="editNatureModal{{ $nature->id }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <form action="{{ route('admin.comoe.natures.update', $nature->id) }}" method="POST">
                                @csrf @method('PUT')
                                <div class="modal-content border-0 shadow">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Modifier la nature</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <label class="small fw-bold mb-2">Libellé</label>
                                        <input type="text" name="libelle" class="form-control" value="{{ $nature->libelle }}" required>
                                    </div>
                                    <div class="modal-footer bg-light">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                                        <button type="submit" class="btn btn-primary">Mettre à jour</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    @empty
                    <tr id="emptyRow">
                        <td colspan="3" class="text-center py-5 text-muted">Aucune nature enregistrée.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="card-footer bg-white border-top-0 py-2">
            <small class="text-muted"><span id="visibleCount">{{ $natures->count() }}</span> nature(s) affichée(s)</small>
        </div>
    </div>
</div>

{{-- Modal Ajout --}}
<div class="modal fade" id="addNatureModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('admin.comoe.natures.store') }}" method="POST">
            @csrf
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Nouvelle Nature de Recours</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="small fw-bold mb-2 text-muted">Libellé de la nature</label>
                        <input type="text" name="libelle" class="form-control form-control-lg" placeholder="ex: Recours en annulation" required>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-success px-4">Enregistrer</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Script de filtrage JS --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterInput = document.getElementById('filterNature');
    const tableRows = document.querySelectorAll('.nature-row');
    const visibleCount = document.getElementById('visibleCount');

    filterInput.addEventListener('keyup', function() {
        const term = filterInput.value.toLowerCase().trim();
        let count = 0;

        tableRows.forEach(row => {
            const text = row.querySelector('.nature-name').textContent.toLowerCase();
            if (text.includes(term)) {
                row.style.display = "";
                count++;
            } else {
                row.style.display = "none";
            }
        });

        visibleCount.textContent = count;
    });
});
</script>
@endsection