@extends('admin.layout.master')

@section('content')
<section class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-wrapper">
            
            <!-- Dossier Hero Header -->
            <div class="hero-detail animate-fade-in">
                <div class="hero-title-section">
                    <div class="hero-subtitle">
                        <i class="feather icon-file-text"></i> Détail de la Police
                    </div>
                    <div class="hero-title">{{ $police->libellePolice }}</div>
                    
                    <div class="hero-badges">
                        @php
                            /* Détermination de la couleur pour le type d'avenant */
                            $codeAv = $police->typeAvenant->codeTypeAvenant ?? '';
                            $avColor = '149, 165, 166'; // default
                            
                            if(in_array($codeAv, ['AFN', 'INC'])) $avColor = '46, 204, 113'; // success
                            elseif(in_array($codeAv, ['RET', 'ADL'])) $avColor = '52, 152, 219'; // info
                            elseif(in_array($codeAv, ['RES', 'SUS'])) $avColor = '231, 76, 60'; // danger
                            elseif($codeAv == 'ANL') $avColor = '241, 196, 15'; // warning
                            elseif($codeAv == 'RVP') $avColor = 'var(--vt-primary-rgb)'; // primary

                            $etat = $police->etatpolice->libelle ?? 'Non défini';
                            $badgeClass = 'badge-default-chic';
                            if($etat == 'En cours') $badgeClass = 'badge-success-chic';
                            elseif($etat == 'Résiliée') $badgeClass = 'badge-default-chic';
                            elseif($etat == 'Suspendue') $badgeClass = 'badge-danger-chic';
                            elseif($etat == 'Annulée') $badgeClass = 'badge-info-chic';
                            elseif($etat == 'Expirée') $badgeClass = 'badge-warning-chic';
                        @endphp
                        
                        @if($police->typeAvenant)
                            <span class="badge-chic" style="border-color: rgba({{ $avColor }}, 0.3); background: rgba({{ $avColor }}, 0.15); color: rgb({{ $avColor }});">
                                {{ $police->typeAvenant->libelle }}
                            </span>
                        @endif

                        <span class="badge-chic {{ $badgeClass }}">
                            État : {{ $etat }}
                        </span>
                    </div>
                </div>

                <div class="hero-stats">
                    <div class="hero-stat-item">
                        <div class="hero-stat-value">N°</div>
                        <div class="hero-stat-label">{{ $police->numeroPolice }}</div>
                    </div>
                    <div class="hero-stat-item">
                        <div class="hero-stat-value" style="color: #f1c40f;">
                            {{ $nbre_adherent }} <span>/</span> {{ $nbre_beneficiaire }}
                        </div>
                        <div class="hero-stat-label">Adhérents / Bénéf.</div>
                    </div>
                    <div class="hero-stat-item">
                        <div class="hero-stat-value" style="color: #2ecc71;">1</div>
                        <div class="hero-stat-label">Polices Liées</div>
                    </div>
                </div>
            </div>

            <!-- Two-column Dossier Layout -->
            <div class="detail-container">
                
                <!-- Colonne Gauche -->
                <div class="detail-column-left animate-fade-in" style="animation-delay: 0.1s;">
                    
                    <!-- Carte Informations Générales -->
                    <div class="detail-card">
                        <div class="detail-card-header">
                            <i class="feather icon-info"></i> Informations Générales
                        </div>
                        <ul class="detail-list">
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-user"></i> Souscripteur</span>
                                <span class="detail-value">{{ $police->souscripteur->nom.' '.$police->souscripteur->prenoms }}</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-corner-down-left"></i> À rembourser à</span>
                                <span class="detail-value">{{ $police->rembourserA ?: 'Non Défini' }}</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-layers"></i> Type Contrat</span>
                                <span class="detail-value">{{ $police->codeTypeContrat == 'G' ? 'GROUPE' : 'PARTICULIER' }}</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-check-circle"></i> Référencement</span>
                                <span class="detail-value">{{ $police->avecReferencement == 0 ? 'NON' : 'OUI' }}</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-dollar-sign"></i> Budget</span>
                                <span class="detail-value">{{ $police->avecReferencement == 0 ? 'NON' : 'OUI' }}</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Carte Dates & Avenants -->
                    <div class="detail-card">
                        <div class="detail-card-header">
                            <i class="feather icon-calendar"></i> Historique & Validité
                        </div>
                        <ul class="detail-list">
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-play"></i> Date d'effet</span>
                                <span class="detail-value">{{ $police->dateEffet->format('d/m/Y') }}</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-stop-circle"></i> Date d'échéance</span>
                                <span class="detail-value">{{ $police->dateEcheance->format('d/m/Y') }}</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-file-plus"></i> N° Avenant</span>
                                <span class="detail-value font-mono">{{ $police->numeroAvenant ?: 'Non Défini' }}</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-clock"></i> Date d'avenant</span>
                                <span class="detail-value">{{ $police->dateAvenant->format('d/m/Y') }}</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Colonne Droite -->
                <div class="detail-column-right animate-fade-in" style="animation-delay: 0.2s;">
                    
                    <!-- Carte Commissions & Taux -->
                    <div class="detail-card">
                        <div class="detail-card-header">
                            <i class="feather icon-percent"></i> Commissions & Taux Appliqués
                        </div>
                        <ul class="detail-list">
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-briefcase"></i> Taux Comm Gestion</span>
                                <span class="detail-value highlight-value">{{ $police->tauxCommissionGerant ?: 'Non Défini' }} %</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-shield"></i> Taux Comm Garant</span>
                                <span class="detail-value highlight-value">{{ $police->tauxCommissionGcAssureur ?: 'Non Défini' }} %</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-map"></i> Taux Comm Courtier</span>
                                <span class="detail-value highlight-value">{{ $police->tauxCommission ?: 'Non Défini' }} %</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-user-check"></i> Taux Comm Commercial</span>
                                <span class="detail-value highlight-value">{{ $police->tauxCommissionAutre ?: 'Non Défini' }} %</span>
                            </li>
                            <li class="detail-list-item alert-list-item">
                                <span class="detail-label alert-label"><i class="feather icon-alert-triangle"></i> Taux Seuil Alerte Sinis.</span>
                                <span class="detail-value alert-value">{{ $police->tauxCommissionAutre ?: 'Non Défini' }} %</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-check-circle"></i> Taux avec référencement</span>
                                <span class="detail-value highlight-value">{{ $police->tauxAvecReferencement ?: 'Non Défini' }} %</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-x-circle"></i> Taux sans référencement</span>
                                <span class="detail-value highlight-value">{{ $police->tauxSansReferencement ?: 'Non Défini' }} %</span>
                            </li>
                            <li class="detail-list-item">
                                <span class="detail-label"><i class="feather icon-refresh-cw"></i> Taux Ristourne</span>
                                <span class="detail-value highlight-value">{{ $police->tauxRistourne ?: 'Non Défini' }} %</span>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>

            <!-- Bouton Retour -->
            <div class="text-center mt-4 mb-5 pb-5">
                <a onclick="showOverlay()" href="{{ url()->previous() }}" class="btn-return-chic">
                    <i class="feather icon-arrow-left"></i> Retour à la liste
                </a>
            </div>

        </div>
    </div>
</section>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<style>
/* ══════════════════════════════════════════════
       DÉTAIL POLICE — Design "Dossier Premium"
   ══════════════════════════════════════════════ */
    .pcoded-content, .pcoded-inner-content, .page-wrapper { background: transparent !important; }

    /* Hero Section */
    .hero-detail {
        background: linear-gradient(135deg, rgba(var(--vt-primary-rgb), 0.08), rgba(0,0,0,0.2));
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 20px; padding: 25px 30px; margin-bottom: 20px; 
        display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden;
    }
    
    .hero-title-section { width: 100%; }
    .hero-title { font-size: 1.7rem; font-weight: 800; color: #fff; margin: 8px 0 15px; }

    .hero-stats {
        display: flex;
        gap: 15px;
        position: relative;
        z-index: 1;
        flex-wrap: nowrap;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 5px;
    }
    
    .hero-stats::-webkit-scrollbar { height: 4px; }
    .hero-stats::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
    .hero-stats::-webkit-scrollbar-thumb { background: rgba(var(--vt-primary-rgb), 0.2); border-radius: 10px; }
    
    .hero-stat-item { 
        background: rgba(0,0,0,0.3); 
        border: 1px solid rgba(255,255,255,0.05); 
        padding: 12px 20px; 
        border-radius: 14px; 
        text-align: center; 
        backdrop-filter: blur(5px); 
        flex: 1;
        min-width: 130px; 
    }
    .hero-stat-value { font-size: 1.5rem; font-weight: 800; color: #fff; }
    .hero-stat-value span { opacity: 0.4; font-weight: 400; font-size: 1.1rem; margin: 0 4px; }
    .hero-stat-label { font-size: 0.6rem; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 700; margin-top: 3px; letter-spacing: 1px; }

    /* Layout & Cards */
    .detail-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 991px) { .detail-container { grid-template-columns: 1fr; } }

    .detail-card { background: rgba(255,255,255,0.015); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 20px; margin-bottom: 20px; transition: all 0.3s; }
    .detail-card:hover { background: rgba(255,255,255,0.025); border-color: rgba(255,255,255,0.08); box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
    
    .detail-card-header { font-size: 0.95rem; font-weight: 800; color: #fff; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 1px; }
    .detail-card-header i { color: var(--vt-primary); font-size: 1.1rem; }

    .detail-list { list-style: none; padding: 0; margin: 0; }
    .detail-list-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,0.06); }
    .detail-list-item:last-child { border-bottom: none; padding-bottom: 0; }
    .detail-list-item:first-child { padding-top: 0; }

    .detail-label { font-size: 0.8rem; color: var(--vt-muted); font-weight: 700; display: flex; align-items: center; gap: 8px; min-width: 130px; }
    .detail-label i { opacity: 0.5; font-size: 0.9rem; width: 20px; text-align: center; }
    .detail-value { font-size: 0.9rem; color: #fff; font-weight: 600; text-align: right; flex: 1; padding-left: 10px; line-height: 1.3; }
    .highlight-value { color: var(--vt-primary); font-family: monospace; font-size: 1rem; }

    .alert-list-item { background: rgba(231, 76, 60, 0.03); padding: 12px 15px !important; border-radius: 10px; border: 1px solid rgba(231, 76, 60, 0.1) !important; margin: 8px 0; }
    .alert-label { color: #e74c3c !important; }
    .alert-label i { color: #e74c3c !important; opacity: 1 !important; }
    .alert-value { color: #e74c3c !important; font-family: monospace; font-size: 1rem; }

    /* Badges */
    .badge-chic { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 6px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
    .badge-success-chic { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.2); }
    .badge-danger-chic { background: rgba(231, 76, 60, 0.15); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.2); }
    .badge-warning-chic { background: rgba(241, 196, 15, 0.15); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.2); }
    .badge-info-chic { background: rgba(52, 152, 219, 0.15); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.2); }
    .badge-default-chic { background: rgba(149, 165, 166, 0.15); color: #95a5a6; border: 1px solid rgba(149, 165, 166, 0.2); }

    /* Return button */
    .btn-return-chic { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: #fff; padding: 10px 25px; border-radius: 50px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; }
    .btn-return-chic:hover { background: rgba(var(--vt-primary-rgb), 0.1); border-color: var(--vt-primary); color: #fff; transform: translateY(-2px); }

    /* ── Light Mode ── */
    body.light-mode .hero-detail { background: linear-gradient(135deg, rgba(var(--vt-primary-rgb), 0.08), #ffffff); border-color: #e2e8f0; box-shadow: 0 8px 25px -10px rgba(0,0,0,0.05); }
    body.light-mode .hero-title { color: #1e293b; }
    body.light-mode .hero-stat-item { background: #f8fafc; border-color: #e2e8f0; }
    body.light-mode .hero-stat-value { color: #1e293b; }
    body.light-mode .hero-stat-label { color: #64748b; opacity: 1; }
    body.light-mode .detail-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 8px 20px -5px rgba(0,0,0,0.04); }
    body.light-mode .detail-card-header { color: #1e293b !important; border-bottom-color: #f1f5f9; }
    body.light-mode .detail-label { color: #475569 !important; }
    body.light-mode .detail-label i { opacity: 0.8; }
    body.light-mode .detail-value { color: #1e293b !important; }
    body.light-mode .detail-list-item { border-bottom-color: #f1f5f9; }
    body.light-mode .btn-return-chic { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
    body.light-mode .btn-return-chic:hover { background: #e2e8f0; color: #1e293b; }
</style>
@endsection