@extends('layouts.admin')

@section('content')
<div class="container-fluid px-4 py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-dark text-gradient">Gestion des Affaires</h2>
            <p class="text-muted mb-0">Consultez et gérez l'ensemble des requêtes enregistrées dans la base Comoé.</p>
        </div>
        <a href="{{ route('admin.affaires.create') }}" class="btn btn-primary btn-lg rounded-pill shadow-sm">
            <i class="fas fa-plus-circle me-2"></i>Nouvelle affaire
        </a>
    </div>

    {{-- Statistiques rapides --}}
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 p-3 bg-white h-100">
                <div class="d-flex align-items-center gap-3">
                    <div class="bg-primary bg-opacity-10 text-primary rounded-3 p-3">
                        <i class="fas fa-folder fa-2x"></i>
                    </div>
                    <div>
                        <small class="text-muted fw-bold text-uppercase d-block" style="font-size: 0.75rem; letter-spacing: 0.5px;">Total Affaires</small>
                        <h3 class="fw-bold mb-0 text-dark">{{ $affaires->total() }}</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 p-3 bg-white h-100">
                <div class="d-flex align-items-center gap-3">
                    <div class="bg-info bg-opacity-10 text-info rounded-3 p-3">
                        <i class="fas fa-copy fa-2x"></i>
                    </div>
                    <div>
                        <small class="text-muted fw-bold text-uppercase d-block" style="font-size: 0.75rem; letter-spacing: 0.5px;">Affichées sur cette page</small>
                        <h3 class="fw-bold mb-0 text-dark">{{ $affaires->count() }}</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 p-3 bg-white h-100">
                <div class="d-flex align-items-center gap-3">
                    <div class="bg-success bg-opacity-10 text-success rounded-3 p-3">
                        <i class="fas fa-check-circle fa-2x"></i>
                    </div>
                    <div>
                        <small class="text-muted fw-bold text-uppercase d-block" style="font-size: 0.75rem; letter-spacing: 0.5px;">Statut de la base</small>
                        <h3 class="fw-bold mb-0 text-dark" style="font-size: 1.2rem;">Opérationnel</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="card-body p-0">
            <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.75rem;">N° Requête</th>
                            <th class="py-3 text-muted fw-bold small text-uppercase" style="font-size: 0.75rem;">Nature & Type</th>
                            <th class="py-3 text-muted fw-bold small text-uppercase" style="font-size: 0.75rem;">Parties & Avocats</th>
                            <th class="py-3 text-muted fw-bold small text-uppercase" style="font-size: 0.75rem;">Conseiller / Audience</th>
                            <th class="py-3 text-center text-muted fw-bold small text-uppercase" style="font-size: 0.75rem; width: 150px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($affaires as $affaire)
                        <tr>
                            <td class="ps-4">
                                <div class="d-flex align-items-center gap-2">
                                    <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-1" style="font-size: 0.7rem;" title="Décision renseignée">
                                            <i class="fas fa-gavel me-1" style="font-size: 0.65rem;"></i> Tranché
                                        </span>
                                    @endif
                                </div>
                                <small class="text-muted d-inline-flex align-items-center gap-1 mt-1">
                                    <i class="far fa-calendar-check text-secondary"></i>
                                    {{ $affaire->date_aff ? \Carbon\Carbon::parse($affaire->date_aff)->format('d/m/Y') : 'Non affectée' }}
                                </small>
                            </td>
                            <td>
                                @if($affaire->nature)
                                    <span class="badge bg-soft-primary text-primary border border-primary-subtle rounded-pill px-2 py-1">
                                        {{ $affaire->nature->sigle ?? $affaire->nature->libelle }}
                                    </span>
                                @else
                                    <span class="badge bg-light text-muted border rounded-pill px-2 py-1">Non spécifiée</span>
                                @endif
                                <div class="small mt-1 text-secondary" style="font-size: 0.8rem;">
                                    {{ $affaire->type_affaire ?? 'Type non renseigné' }}
                                </div>
                            </td>
                            <td>
                                <div class="d-flex flex-column gap-2">
                                    <div>
                                        <span class="text-success fw-semibold small d-inline-flex align-items-center gap-1 mb-0" title="Demandeur">
                                            <i class="fas fa-arrow-right text-success" style="font-size: 0.7rem;"></i>
                                            {{ Str::limit($affaire->nom_demandeur, 30) }}
                                        </span>
                                        @if($affaire->avocat_demandeur)
                                            <small class="text-muted d-block ps-3" style="font-size: 0.75rem;" title="Avocat Demandeur">
                                                <i class="fas fa-balance-scale text-secondary me-1" style="font-size: 0.65rem;"></i>Me {{ Str::limit($affaire->avocat_demandeur, 25) }}
                                            </small>
                                        @endif
                                    </div>
                                    <div>
                                        <span class="text-danger fw-semibold small d-inline-flex align-items-center gap-1 mb-0" title="Défendeur">
                                            <i class="fas fa-arrow-left text-danger" style="font-size: 0.7rem;"></i>
                                            {{ Str::limit($affaire->nom_defendeur, 30) }}
                                        </span>
                                        @if($affaire->avocat_defendeur)
                                            <small class="text-muted d-block ps-3" style="font-size: 0.75rem;" title="Avocat Défendeur">
                                                <i class="fas fa-balance-scale text-secondary me-1" style="font-size: 0.65rem;"></i>Me {{ Str::limit($affaire->avocat_defendeur, 25) }}
                                            </small>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="small d-flex align-items-center gap-1 text-dark">
                                    <i class="fas fa-user-tie text-muted" style="width: 14px;"></i> 
                                    <span>
                                        {{ $affaire->id_conseiller && $affaire->conseiller ? strtoupper($affaire->conseiller->nom).' '.$affaire->conseiller->prenoms : 'Non assigné' }}
                                    </span>
                                </div>
                                <div class="small mt-1 d-flex align-items-center gap-1 text-secondary">
                                    <i class="fas fa-calendar-alt text-muted" style="width: 14px;"></i>
                                    @if($affaire->audience)
                                        <span class="text-dark">{{ \Carbon\Carbon::parse($affaire->audience->date_audience)->format('d/m/Y') }}</span>
                                    @else
                                        <span class="text-warning font-monospace" style="font-size: 0.75rem;">Non programmée</span>
                                    @endif
                                </div>
                            </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="Voir les détails">
                                        <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.affaires.destroy', $affaire->id) }}" method="POST" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer définitivement cette affaire ?');" 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="fas fa-folder-open fa-3x mb-3 text-secondary opacity-50"></i>
                                    <h5 class="fw-semibold text-dark mb-1">Aucune affaire enregistrée</h5>
                                    <p class="text-muted small mb-0">La base de données est vide pour le moment.</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($affaires->hasPages())
        <div class="card-footer bg-white border-top py-3">
            <div class="d-flex justify-content-center custom-pagination">
                {{ $affaires->links() }}
            </div>
        </div>
        @endif
    </div>
</div>

<style>
    /* Design System moderne et doux */
    .bg-soft-primary { 
        background-color: #eaf2ff; 
    }
    .bg-soft-success {
        background-color: #e8f5e9;
    }
    
    /* 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; 
    }

    /* Corrections d'affichage de la pagination Laravel standard */
    .custom-pagination nav svg {
        width: 14px;
    }
    .custom-pagination .pagination {
        margin-bottom: 0;
        display: flex;
        gap: 4px;
    }
    .page-item .page-link {
        border-radius: 8px !important;
        margin: 0 2px;
        border: 1px solid #dee2e6;
        color: #495057;
    }
    .page-item.active .page-link {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
        color: #fff;
    }
</style>
@endsection