@extends('layouts.admin')

@section('content')
<div class="container-fluid px-4 py-5">

    {{-- ALERTES ET NOTIFICATIONS --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm rounded-4 mb-4 d-flex align-items-center no-print" role="alert">
            <i class="fas fa-check-circle me-3 fa-lg text-success"></i>
            <div><strong>Succès !</strong> {{ session('success') }}</div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- EN-TÊTE DYNAMIQUE --}}
    <div class="d-flex justify-content-between align-items-start mb-4 pb-3 border-bottom header-separation">
        <div>
            <nav aria-label="breadcrumb" class="no-print">
                <ol class="breadcrumb mb-1 small text-uppercase fw-bold">
                    <li class="breadcrumb-item"><a href="{{ route('admin.audiences.index') }}" class="text-decoration-none text-muted">Audiences</a></li>
                    <li class="breadcrumb-item active text-primary" aria-current="page">Enrôlement</li>
                </ol>
            </nav>
            <h2 class="fw-bold text-dark mb-1 header-title">{{ $audience->chambre->nom_chambre ?? 'Chambre de jugement' }}</h2>
            <p class="text-muted mb-0 small">Rôle d'audience de la séance du <strong class="text-dark">{{ \Carbon\Carbon::parse($audience->date_audience)->translatedFormat('d F Y') }}</strong></p>
        </div>
        <div class="d-flex gap-2 no-print">
            <a href="{{ route('admin.audiences.index') }}" class="btn btn-outline-secondary rounded-pill px-4">
                <i class="fas fa-arrow-left me-2"></i>Retour à la liste
            </a>
            <button type="button" class="btn btn-primary rounded-pill shadow-sm px-4 fw-bold" data-bs-toggle="modal" data-bs-target="#modalAddAffaire">
                <i class="fas fa-plus-circle me-2"></i>Ajouter des Affaires au rôle
            </button>
        </div>
    </div>

    {{-- ZONE DE TITRE SÉPARÉE EXCLUSIVEMENT POUR L'IMPRESSION PHYSIQUE --}}
    <div class="print-only-header text-center mb-4">
        <h3>CONSEIL D'ÉTAT</h3>
        <h4 class="text-uppercase fw-bold">{{ $audience->chambre->nom_chambre ?? 'Chambre de jugement' }}</h4>
        <h5 class="text-secondary">RÔLE D'AUDIENCE DU {{ \Carbon\Carbon::parse($audience->date_audience)->translatedFormat('d F Y') }} À {{ $audience->heure_audience ? \Carbon\Carbon::parse($audience->heure_audience)->format('H\hi') : '09h00' }}</h5>
        <p class="mb-0"><strong>Lieu :</strong> {{ $audience->lieu ?? 'Salle d\'audience' }}</p>
        <hr class="my-3">
    </div>

    <div class="row g-4">
        
        {{-- BLOC INFO AUDIENCE (GAUCHE) --}}
        <div class="col-xl-3 col-lg-4 no-print">
            <div class="card border-0 shadow-sm rounded-4 sticky-top p-4 bg-white" style="top: 25px;">
                <h6 class="fw-bold text-dark mb-3"><i class="fas fa-info-circle text-primary me-2"></i>Fiche d'audience</h6>
                
                <div class="mb-3">
                    <span class="text-muted small text-uppercase d-block fw-bold" style="font-size: 0.65rem;">Planification</span>
                    <div class="d-flex align-items-center gap-2 mt-1">
                        <i class="far fa-calendar-alt text-primary"></i>
                        <span class="fw-bold text-dark">{{ \Carbon\Carbon::parse($audience->date_audience)->translatedFormat('d F Y') }}</span>
                    </div>
                    <div class="d-flex align-items-center gap-2 mt-1 ps-3 text-secondary small">
                        <i class="far fa-clock"></i>
                        <span>{{ $audience->heure_audience ? \Carbon\Carbon::parse($audience->heure_audience)->format('H:i') : '09:00' }}</span>
                    </div>
                </div>

                <div class="mb-3 border-top pt-3">
                    <span class="text-muted small text-uppercase d-block fw-bold" style="font-size: 0.65rem;">Lieu / Espace</span>
                    <span class="fw-semibold text-dark d-block mt-1"><i class="fas fa-map-marker-alt text-danger me-1"></i> {{ $audience->lieu ?? 'Non assigné' }}</span>
                </div>

                <div class="mb-3 border-top pt-3">
                    <span class="text-muted small text-uppercase d-block fw-bold" style="font-size: 0.65rem;">Volume d'enrôlement</span>
                    <span class="badge bg-soft-primary text-primary border border-primary-subtle rounded-pill px-3 py-1 mt-1 fw-bold">
                        {{ $audience->affaires->count() }} affaires au rôle
                    </span>
                </div>

                <div class="border-top pt-3 d-grid">
                    <button onclick="window.print();" class="btn btn-sm btn-outline-dark rounded-pill py-2 fw-semibold">
                        <i class="fas fa-print me-2"></i>Imprimer le Rôle
                    </button>
                </div>
            </div>
        </div>

        {{-- TABLEAU DES AFFAIRES DU RÔLE (DROITE) --}}
        <div class="col-xl-9 col-lg-8 width-full-print">
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden border-print-none">
                <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center no-print">
                    <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.05rem;">Liste des dossiers assignés</h5>
                    <div class="input-group input-group-sm w-auto border rounded-pill bg-light px-2">
                        <span class="input-group-text bg-transparent border-0"><i class="fas fa-search text-muted"></i></span>
                        <input type="text" id="affairesSearch" class="form-control bg-transparent border-0" placeholder="Filtrer les affaires rattachées...">
                    </div>
                </div>

                <div class="table-responsive" style="min-height: 250px;">
                    <table class="table table-hover align-middle mb-0 table-print" id="affairesTable">
                        <thead class="bg-light border-bottom header-print">
                            <tr>
                                <th class="ps-4 py-3 text-muted fw-bold small text-uppercase cell-padding-print" style="font-size: 0.72rem; width: 18%;">Réf. Requête</th>
                                <th class="py-3 text-muted fw-bold small text-uppercase cell-padding-print" style="font-size: 0.72rem; width: 47%;">Parties en Cause</th>
                                <th class="py-3 text-muted fw-bold small text-uppercase cell-padding-print" style="font-size: 0.72rem; width: 25%;">Rapporteur</th>
                                <th class="text-center pe-4 py-3 text-muted fw-bold small text-uppercase no-print" style="font-size: 0.72rem; width: 10%;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($audience->affaires as $index => $aff)
                                <tr>
                                    <td class="ps-4 cell-padding-print">
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="print-only text-muted small fw-bold me-1">N°{{ $index + 1 }}</span>
                                            <span class="fw-bold text-dark">{{ $aff->numero_requete }}</span>
                                        </div>
                                        @if($aff->nature)
                                            <span class="badge bg-soft-info text-info border border-info-subtle rounded-pill d-block mt-1 py-0.5 text-center badge-print" style="font-size: 0.65rem; width: fit-content;">
                                                {{ $aff->nature->sigle ?? $aff->nature->libelle }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="cell-padding-print">
                                        <div class="d-flex flex-column gap-1">
                                            <div>
                                                <span class="text-success small fw-bold text-print-dark">{{ $aff->nom_demandeur }}</span>
                                                @if($aff->avocat_demandeur)
                                                    <span class="text-muted d-block ps-3 font-print-italic" style="font-size: 0.75rem;">Me {{ $aff->avocat_demandeur }}</span>
                                                @endif
                                            </div>
                                            <div class="text-danger small fw-bold mt-1 text-print-dark">{{ $aff->nom_defendeur }}</div>
                                        </div>
                                    </td>
                                    <td class="cell-padding-print">
                                        @if($aff->conseiller)
                                            <div class="small d-flex align-items-center gap-2">
                                                <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center no-print" style="width: 28px; height: 28px; font-size: 0.75rem;">
                                                    <i class="fas fa-user-tie"></i>
                                                </div>
                                                <span class="fw-bold text-dark text-print-normal">{{ strtoupper($aff->conseiller->nom) }} {{ $aff->conseiller->prenoms }}</span>
                                            </div>
                                        @else
                                            <span class="text-muted small italic font-print-italic">Aucun conseiller</span>
                                        @endif
                                    </td>
                                    <td class="text-center pe-4 no-print">
                                        <div class="d-flex justify-content-center gap-2">
                                            <a href="{{ route('admin.affaires.show', $aff->id) }}" class="btn btn-sm btn-action text-primary" title="Consulter l'affaire">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <form action="{{ route('admin.audiences.destroy-affaire', $aff->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Désenrôler cette affaire de cette audience ?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-action text-danger" title="Retirer du rôle d'audience">
                                                    <i class="fas fa-minus-circle"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-5 text-muted">
                                        <div class="py-3">
                                            <i class="fas fa-folder-open fa-2x text-secondary opacity-50 mb-2"></i>
                                            <p class="mb-0 small">Le rôle d'audience est actuellement vide.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL INTERACTIF : SÉLECTIONNER ET AJOUTER DES AFFAIRES --}}
<div class="modal fade no-print" id="modalAddAffaire" data-bs-backdrop="static" tabindex="-1" aria-labelledby="modalAddAffaireLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <form action="{{ route('admin.audiences.store-affaire', $audience->id) }}" method="POST">
            @csrf
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-header bg-primary text-white p-4 border-0 rounded-top-4">
                    <div>
                        <h5 class="modal-title fw-bold" id="modalAddAffaireLabel"><i class="fas fa-gavel me-2"></i>Enrôler des dossiers de la chambre</h5>
                        <p class="text-white-50 mb-0 small mt-1">Cochez les requêtes de cette chambre libres d'affectation pour les affecter à cette séance.</p>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <div class="modal-body p-4">
                    {{-- Barre de filtrage interne au modal --}}
                    <div class="mb-3">
                        <div class="input-group border rounded-pill bg-light px-2">
                            <span class="input-group-text bg-transparent border-0"><i class="fas fa-search text-muted"></i></span>
                            <input type="text" id="modalAffaireSearch" class="form-control bg-transparent border-0 py-2" placeholder="Rechercher par n° de requête, demandeur ou défendeur...">
                        </div>
                    </div>

                    {{-- Tableau de choix interactif --}}
                    <div class="table-responsive rounded-3 border bg-white" style="max-height: 350px; overflow-y: auto;">
                        <table class="table table-hover align-middle mb-0" id="modalAffairesTable">
                            <thead class="bg-light sticky-top" style="z-index: 5;">
                                <tr>
                                    <th class="ps-4 py-3 text-center" style="width: 8%;">
                                        <div class="form-check d-flex justify-content-center">
                                            <input class="form-check-input" type="checkbox" id="selectAllAffaires" style="cursor: pointer;">
                                        </div>
                                    </th>
                                    <th class="py-3 text-muted fw-bold small text-uppercase" style="font-size: 0.72rem; width: 22%;">Réf. Requête</th>
                                    <th class="py-3 text-muted fw-bold small text-uppercase" style="font-size: 0.72rem; width: 45%;">Parties en Cause</th>
                                    <th class="py-3 text-muted fw-bold small text-uppercase" style="font-size: 0.72rem; width: 25%;">Rapporteur initial</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($affaires as $affLibre)
                                    <tr style="cursor: pointer;" onclick="toggleRowCheckbox(this, event)">
                                        <td class="ps-4 text-center">
                                            <div class="form-check d-flex justify-content-center">
                                                <input class="form-check-input row-checkbox" type="checkbox" name="affaire_ids[]" value="{{ $affLibre->id }}" onclick="event.stopPropagation(); updateSelectAllState();" style="cursor: pointer;">
                                            </div>
                                        </td>
                                        <td>
                                            <span class="fw-bold text-dark">{{ $affLibre->numero_requete }}</span>
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column gap-0.5">
                                                <span class="text-success small fw-bold">{{ $affLibre->nom_demandeur }}</span>
                                                <span class="text-danger small fw-bold">{{ $affLibre->nom_defendeur }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="text-muted small">
                                                {{ $affLibre->conseiller ? strtoupper($affLibre->conseiller->nom).' '.substr($affLibre->conseiller->prenoms, 0, 1).'.' : 'Non assigné' }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-5 text-muted">
                                            <div class="py-3">
                                                <i class="fas fa-folder-open fa-2x text-secondary opacity-50 mb-2"></i>
                                                <p class="mb-0 small fw-bold">Aucune affaire disponible</p>
                                                <p class="text-muted mb-0" style="font-size: 0.8rem;">Tous les dossiers de cette chambre sont déjà enrôlés.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div id="selectionCounter" class="form-text mt-2 text-primary fw-bold" style="display: none;">
                        <i class="fas fa-check-double me-1"></i> <span id="countSpan">0</span> dossier(s) sélectionné(s)
                    </div>
                </div>

                <div class="modal-footer border-0 p-4">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Fermer</button>
                    <button type="submit" id="submitEnrollBtn" class="btn btn-primary rounded-pill px-5 fw-bold shadow-sm" disabled>
                        <i class="fas fa-check-circle me-2"></i>Inscrire les dossiers sélectionnés
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- CONFIGURATION DE STYLE POUR INTERFACE ET IMPRESSION SPÉCIFIQUE --}}
<style>
    .bg-soft-info { background-color: #e0f7fa; color: #00acc1; }
    .btn-action {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        transition: all 0.2s;
    }
    .btn-action:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        transform: translateY(-1px);
    }
    .btn-action.text-primary:hover { border-color: #0d6efd; background-color: #fff; }
    .btn-action.text-danger:hover { border-color: #dc3545; background-color: #fff; }
    
    /* Éléments masqués par défaut sur l'écran */
    .print-only-header, .print-only {
        display: none;
    }

    /* FEUILLE DE STYLE D'IMPRESSION PROFESSIONNELLE */
    @media print {
        body {
            background: white !important;
            color: black !important;
            font-size: 12pt !important;
            font-family: "Times New Roman", Times, serif !important;
        }
        .no-print {
            display: none !important;
        }
        .print-only-header {
            display: block !important;
        }
        .print-only {
            display: inline !important;
        }
        .width-full-print {
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 100% !important;
        }
        .border-print-none {
            border: none !important;
            box-shadow: none !important;
        }
        .header-separation {
            border-bottom: 2px solid black !important;
            margin-bottom: 20px !important;
        }
        .table-print {
            width: 100% !important;
            border-collapse: collapse !important;
            margin-top: 15px !important;
        }
        .table-print th, .table-print td {
            border: 1px solid #333 !important;
            color: black !important;
            background-color: transparent !important;
        }
        .cell-padding-print {
            padding: 8px 10px !important;
        }
        .text-print-dark {
            color: black !important;
            font-weight: bold !important;
        }
        .text-print-normal {
            color: black !important;
            font-weight: normal !important;
        }
        .font-print-italic {
            font-style: italic !important;
            color: #555 !important;
        }
        .badge-print {
            border: none !important;
            background: transparent !important;
            color: black !important;
            font-weight: bold !important;
            padding: 0 !important;
        }
    }
</style>

{{-- SCRIPTS LOGIQUES : FILTRE DU TABLEAU PRINCIPAL, COMPORTEMENT DU MODAL ET AUTO-PRINT --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        
        // 1. Filtrage en temps réel du Tableau Principal (Hors Modal)
        const mainSearchInput = document.getElementById('affairesSearch');
        const mainTable = document.getElementById('affairesTable');
        if (mainSearchInput && mainTable) {
            mainSearchInput.addEventListener('keyup', function() {
                const filter = mainSearchInput.value.toLowerCase();
                const rows = mainTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
                for (let i = 0; i < rows.length; i++) {
                    const text = rows[i].textContent.toLowerCase();
                    rows[i].style.display = text.includes(filter) ? "" : "none";
                }
            });
        }

        // 2. Filtrage en temps réel dans la table du Modal (Recherche interne)
        const modalSearchInput = document.getElementById('modalAffaireSearch');
        const modalTable = document.getElementById('modalAffairesTable');
        if (modalSearchInput && modalTable) {
            modalSearchInput.addEventListener('keyup', function() {
                const filter = modalSearchInput.value.toLowerCase();
                const rows = modalTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
                for (let i = 0; i < rows.length; i++) {
                    if (rows[i].cells.length > 1) {
                        const text = rows[i].textContent.toLowerCase();
                        rows[i].style.display = text.includes(filter) ? "" : "none";
                    }
                }
            });
        }

        // 3. Gestion globale du bouton "Tout sélectionner" du Modal
        const selectAllCheckbox = document.getElementById('selectAllAffaires');
        if (selectAllCheckbox) {
            selectAllCheckbox.addEventListener('change', function() {
                const checkboxes = document.querySelectorAll('.row-checkbox');
                checkboxes.forEach(cb => {
                    const row = cb.closest('tr');
                    if (row.style.display !== 'none') {
                        cb.checked = selectAllCheckbox.checked;
                    }
                });
                updateSelectAllState();
            });
        }

        // 4. Étape finale : Détection et déclenchement automatique de l'impression (?print=1)
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('print')) {
            // Un délai de 650ms laisse au navigateur le temps de charger la feuille CSS d'impression
            setTimeout(function() {
                window.print();
            }, 650);
        }
    });

    // Fonction déclenchée lors d'un clic n'importe où sur une ligne de choix pour cocher/décocher
    function toggleRowCheckbox(row, event) {
        if (event.target.type === 'checkbox') return;

        const checkbox = row.querySelector('.row-checkbox');
        if (checkbox) {
            checkbox.checked = !checkbox.checked;
            updateSelectAllState();
        }
    }

    // Calcule et rafraîchit l'état des compteurs de sélection et d'activation de bouton de validation
    function updateSelectAllState() {
        const checkboxes = document.querySelectorAll('.row-checkbox');
        const selectAllCheckbox = document.getElementById('selectAllAffaires');
        const submitBtn = document.getElementById('submitEnrollBtn');
        const counterDiv = document.getElementById('selectionCounter');
        const countSpan = document.getElementById('countSpan');
        
        let checkedCount = 0;
        let visibleCount = 0;

        checkboxes.forEach(cb => {
            const row = cb.closest('tr');
            if (row.style.display !== 'none') {
                visibleCount++;
                if (cb.checked) {
                    checkedCount++;
                }
            }
        });

        if (selectAllCheckbox) {
            selectAllCheckbox.checked = (visibleCount > 0 && checkedCount === visibleCount);
        }

        if (submitBtn) {
            submitBtn.disabled = checkedCount === 0;
        }

        if (counterDiv && countSpan) {
            if (checkedCount > 0) {
                countSpan.textContent = checkedCount;
                counterDiv.style.display = 'block';
            } else {
                counterDiv.style.display = 'none';
            }
        }
    }
</script>
@endsection