@extends('layouts.admin')

@section('content')
<div class="container-fluid px-4 py-5">
    {{-- Boutons d'actions rapides --}}
    <div class="d-flex justify-content-end mb-4">
        <button type="button" class="btn btn-success shadow-sm rounded-pill px-4" id="btnShowImport">
            <i class="fas fa-file-excel me-2"></i> Importer un rôle via CSV
        </button>
    </div>

    {{-- Bloc d'importation --}}
    <div id="importBlock" class="card shadow-sm border-0 mb-4 overflow-hidden" style="display: none; border-radius: 15px; background-color: #e8f5e9; border-left: 5px solid #198754 !important;">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="fw-bold mb-0 text-success"><i class="fas fa-upload me-2"></i> Importation du Rôle d'Audience (CSV)</h6>
                <button type="button" class="btn-close" id="btnCloseImport"></button>
            </div>
            <form action="{{ route('admin.audiences.affaires.import', $audience->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row align-items-end g-3">
                    <div class="col-md-8">
                        <label class="form-label small fw-bold text-success-emphasis">Fichier CSV (Séparateur point-virgule)</label>
                        <input type="file" name="csv_file" class="form-control rounded-3" accept=".csv" required>
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-success w-100 fw-bold rounded-3">Lancer l'importation</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- En-tête --}}
    <div class="d-flex align-items-center mb-4">
        <a href="{{ route('admin.audiences.index') }}" class="btn btn-light rounded-circle shadow-sm me-3 border" style="width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;">
            <i class="fa fa-arrow-left text-secondary"></i>
        </a>
        <div>
            <h2 class="fw-bold text-dark mb-0">Rôle d'Audience</h2>
            <p class="text-muted mb-0">
                <span class="badge bg-soft-primary text-primary border border-primary-subtle rounded-pill px-3 py-1 me-2">{{ $audience->chambre->nom_chambre ?? 'N/A' }}</span>
                Audience du {{ $audience->date_audience->format('d/m/Y') }}
            </p>
        </div>
    </div>

    <div class="row g-4">
        {{-- FORMULAIRE D'INSCRIPTION --}}
        <div class="col-xl-4">
            <div class="card border-0 shadow-sm rounded-4 sticky-top custom-card" style="top: 20px;">
                <div class="card-header bg-dark text-white rounded-top-4 py-3 border-0">
                    <h6 class="mb-0 fw-bold"><i class="fa fa-plus-circle me-2"></i>Inscrire une affaire</h6>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('admin.audiences.affaires.store', $audience->id) }}" method="POST">
                        @csrf
                        
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">N° Requête / Dossier <span class="text-danger">*</span></label>
                            <input type="text" name="numero_requete" class="form-control rounded-3 @error('numero_requete') is-invalid @enderror" value="{{ old('numero_requete') }}" placeholder="Ex: 2026-0045" required>
                            @error('numero_requete')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">Nature de l'affaire <span class="text-danger">*</span></label>
                            <select name="idnature" class="form-select rounded-3 @error('idnature') is-invalid @enderror" required>
                                <option value="" selected disabled>Choisir la nature...</option>
                                @isset($nature_aff)
                                    @foreach($nature_aff as $nature)
                                        <option value="{{ $nature->idnature }}" {{ old('idnature') == $nature->idnature ? 'selected' : '' }}>
                                            {{ $nature->libelle }} @if($nature->sigle) ({{ $nature->sigle }}) @endif
                                        </option>
                                    @endforeach
                                @endisset
                            </select>
                            @error('idnature')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="row g-2">
                            <div class="col-md-6 mb-3">
                                <label class="form-label small fw-bold text-secondary">Demandeur <span class="text-danger">*</span></label>
                                <input type="text" name="nom_demandeur" class="form-control rounded-3 @error('nom_demandeur') is-invalid @enderror" value="{{ old('nom_demandeur') }}" placeholder="Nom" required>
                                @error('nom_demandeur')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label small fw-bold text-secondary">Défendeur <span class="text-danger">*</span></label>
                                <input type="text" name="nom_defendeur" class="form-control rounded-3 @error('nom_defendeur') is-invalid @enderror" value="{{ old('nom_defendeur') }}" placeholder="Nom" required>
                                @error('nom_defendeur')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row g-2">
                            <div class="col-md-6 mb-3">
                                <label class="form-label small fw-bold text-secondary">Avocat Demandeur</label>
                                <input type="text" name="avocat_demandeur" class="form-control rounded-3" value="{{ old('avocat_demandeur') }}" placeholder="Me...">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label small fw-bold text-secondary">Avocat Défendeur</label>
                                <input type="text" name="avocat_defendeur" class="form-control rounded-3" value="{{ old('avocat_defendeur') }}" placeholder="Me...">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">Conseiller Rapporteur <span class="text-danger">*</span></label>
                            <select name="id_conseiller" class="form-select rounded-3 @error('id_conseiller') is-invalid @enderror" required>
                                <option value="" selected disabled>Choisir un conseiller...</option>
                                @foreach($conseillers as $conseiller)
                                    <option value="{{ $conseiller->id }}" {{ old('id_conseiller') == $conseiller->id ? 'selected' : '' }}>
                                        {{ $conseiller->civilite }} {{ strtoupper($conseiller->nom) }} {{ $conseiller->prenoms }}
                                    </option>
                                @endforeach
                            </select>
                            @error('id_conseiller')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">Type d'affaire <span class="text-danger">*</span></label>
                            <select name="type_affaire" class="form-select rounded-3 @error('type_affaire') is-invalid @enderror" required>
                                <option value="Affaires nouvelles" {{ old('type_affaire') == 'Affaires nouvelles' ? 'selected' : '' }}>Affaires nouvelles</option>
                                <option value="Affaires en délibéré" {{ old('type_affaire') == 'Affaires en délibéré' ? 'selected' : '' }}>Affaires en délibéré</option>
                                <option value="Affaires en prorogation" {{ old('type_affaire') == 'Affaires en prorogation' ? 'selected' : '' }}>Affaires en prorogation</option>
                            </select>
                            @error('type_affaire')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-secondary">Décision (Optionnel)</label>
                            <textarea name="decision" class="form-control rounded-3" rows="3" placeholder="Saisir l'arrêt ou l'observation...">{{ old('decision') }}</textarea>
                        </div>

                        <button type="submit" class="btn btn-primary w-100 rounded-pill py-2 fw-bold shadow-sm">
                            <i class="fa fa-save me-2"></i>Valider l'inscription
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {{-- LISTE DES DOSSIERS --}}
        <div class="col-xl-8">
            @if(session('success'))
                <div class="alert alert-success border-0 shadow-sm rounded-4 mb-3 d-flex align-items-center gap-2">
                    <i class="fa fa-check-circle fs-5"></i> <span>{{ session('success') }}</span>
                </div>
            @endif

            <div class="card border-0 shadow-sm rounded-4 overflow-hidden custom-card">
                <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0 text-dark">Affaires inscrites</h5>
                    <span class="badge bg-soft-primary text-primary border border-primary-subtle rounded-pill px-3 py-2 fw-bold" style="font-size: 0.8rem;">
                        {{ $audience->affaires->count() }} dossiers enregistrés
                    </span>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light border-bottom">
                            <tr>
                                <th class="ps-4 py-3 text-muted fw-bold small text-uppercase" style="font-size: 0.72rem;">N° Requête</th>
                                <th class="py-3 text-muted fw-bold small text-uppercase" style="font-size: 0.72rem;">Parties & Conseils</th>
                                <th class="py-3 text-muted fw-bold small text-uppercase" style="font-size: 0.72rem;">Rapporteur</th>
                                <th class="py-3 text-muted fw-bold small text-uppercase" style="font-size: 0.72rem;">Nature / Type / Décision</th>
                                <th class="text-center pe-4 py-3 text-muted fw-bold small text-uppercase" style="font-size: 0.72rem; width: 120px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($audience->affaires as $affaire)
                            <tr>
                                <td class="ps-4">
                                    <span class="fw-bold text-dark d-block">{{ $affaire->numero_requete }}</span>
                                    @if(!empty($affaire->decision))
                                        <span class="badge bg-soft-success text-success border border-success-subtle rounded-pill px-2 py-0.5 mt-1" style="font-size: 0.65rem;">
                                            <i class="fas fa-gavel me-1" style="font-size: 0.6rem;"></i> Tranché
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex flex-column gap-1">
                                        <div>
                                            <span class="text-success fw-semibold small d-inline-flex align-items-center gap-1" title="Demandeur">
                                                <i class="fas fa-arrow-right text-success" style="font-size: 0.7rem;"></i>
                                                {{ Str::limit($affaire->nom_demandeur, 25) }}
                                            </span>
                                            @if($affaire->avocat_demandeur)
                                                <small class="text-muted d-block ps-3" style="font-size: 0.72rem;">
                                                    <i class="fas fa-balance-scale text-secondary me-1" style="font-size: 0.65rem;"></i>Me {{ Str::limit($affaire->avocat_demandeur, 20) }}
                                                </small>
                                            @endif
                                        </div>
                                        <div class="text-muted my-0 ps-3 fw-bold" style="font-size: 0.62rem; letter-spacing: 0.5px;">CONTRE</div>
                                        <div>
                                            <span class="text-danger fw-semibold small d-inline-flex align-items-center gap-1" title="Défendeur">
                                                <i class="fas fa-arrow-left text-danger" style="font-size: 0.7rem;"></i>
                                                {{ Str::limit($affaire->nom_defendeur, 25) }}
                                            </span>
                                            @if($affaire->avocat_defendeur)
                                                <small class="text-muted d-block ps-3" style="font-size: 0.72rem;">
                                                    <i class="fas fa-balance-scale text-secondary me-1" style="font-size: 0.65rem;"></i>Me {{ Str::limit($affaire->avocat_defendeur, 20) }}
                                                </small>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($affaire->id_conseiller && $affaire->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" style="width: 28px; height: 28px; font-size: 0.75rem;">
                                                <i class="fas fa-user-tie"></i>
                                            </div>
                                            <div>
                                                <span class="fw-bold text-dark d-block" style="font-size: 0.82rem;">{{ strtoupper($affaire->conseiller->nom) }}</span>
                                                <span class="text-muted" style="font-size: 0.78rem;">{{ $affaire->conseiller->prenoms }}</span>
                                            </div>
                                        </div>
                                    @else
                                        <span class="badge bg-light text-muted border rounded-pill px-2 py-1" style="font-size: 0.7rem;">Non assigné</span>
                                    @endif
                                </td>
                                <td>
                                    @if($affaire->nature)
                                        <span class="badge bg-soft-primary text-primary border border-primary-subtle rounded-pill px-2 py-0.5 mb-1 d-inline-block" style="font-size: 0.65rem;">
                                            {{ $affaire->nature->sigle ?? $affaire->nature->libelle }}
                                        </span>
                                    @endif
                                    <div class="small text-secondary mb-1" style="font-size: 0.78rem;">
                                        {{ $affaire->type_affaire }}
                                    </div>
                                    @if($affaire->decision)
                                        <div class="small text-success d-flex align-items-center gap-1 mt-1" style="font-size: 0.75rem;" title="{{ $affaire->decision }}">
                                            <i class="fa fa-gavel" style="font-size: 0.7rem;"></i>
                                            <span class="text-truncate" style="max-width: 140px;">{{ Str::limit($affaire->decision, 22) }}</span>
                                        </div>
                                    @endif
                                </td>
                                <td class="text-center pe-4">
                                    <div class="d-flex justify-content-center gap-1">
                                        <a href="{{ route('admin.affaires.show', $affaire->id) }}" class="btn btn-sm btn-action text-primary" title="Consulter">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.affaires.edit', $affaire->id) }}" class="btn btn-sm btn-action text-success" title="Modifier">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form action="{{ route('admin.audiences.affaires.destroy', $affaire->id) }}" method="POST" onsubmit="return confirm('Voulez-vous détacher / supprimer cette affaire de cette audience ?')" style="display:inline;">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-action text-danger" title="Supprimer">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <div class="py-4">
                                        <i class="fa fa-folder-open fa-3x mb-3 text-secondary opacity-40"></i>
                                        <h5 class="fw-semibold text-dark mb-1">Aucune affaire pour cette audience</h5>
                                        <p class="text-muted small mb-0">Utilisez le formulaire à gauche ou l'import pour ajouter des dossiers.</p>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Design System moderne et doux */
    .bg-soft-primary { 
        background-color: #eaf2ff; 
    }
    .bg-soft-success {
        background-color: #e8f5e9;
    }
    
    .custom-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .custom-card:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
    }

    /* Boutons d'actions circulaires */
    .btn-action {
        width: 32px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        transition: all 0.2s ease-in-out;
    }
    .btn-action:hover {
        background-color: #ffffff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }
    .btn-action.text-primary:hover { color: #0d6efd !important; border-color: #0d6efd; }
    .btn-action.text-success:hover { color: #198754 !important; border-color: #198754; }
    .btn-action.text-danger:hover { color: #dc3545 !important; border-color: #dc3545; }

    .table-hover tbody tr:hover { 
        background-color: #f8fafd; 
    }
    
    select.form-select option {
        color: #000000 !important;
        background-color: #ffffff !important;
    }
</style>
@endsection

@section('scripts')
<script>
    document.getElementById('btnShowImport').addEventListener('click', () => {
        document.getElementById('importBlock').style.display = 'block';
    });
    document.getElementById('btnCloseImport').addEventListener('click', () => {
        document.getElementById('importBlock').style.display = 'none';
    });
</script>
@endsection