@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 (Vue depuis Collège)
                    </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" style="color: #fff; opacity: 1;">{{ $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>
            </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" style="background: rgba(231, 76, 60, 0.03); padding: 18px 15px; border-radius: 12px; border: 1px solid rgba(231, 76, 60, 0.1);">
                                <span class="detail-label" style="color: #e74c3c;"><i class="feather icon-alert-triangle" style="color: #e74c3c; opacity: 1;"></i> Taux Seuil Alerte Sinis.</span>
                                <span class="detail-value" style="color: #e74c3c; font-family: monospace; font-size: 1.05rem;">{{ $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
                </a>
            </div>

        </div>
    </div>
</section>

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

    /* Hero Dossier */
    .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: 24px;
        padding: 40px;
        margin-bottom: 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        position: relative;
        overflow: hidden;
    }

    .hero-detail::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(var(--vt-primary-rgb), 0.15) 0%, transparent 70%);
        pointer-events: none;
    }

    .hero-title-section { position: relative; z-index: 1; flex: 1; min-width: 300px; }
    
    .hero-subtitle {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--vt-primary);
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .hero-title {
        font-size: 2.2rem;
        font-weight: 800;
        color: #fff;
        margin: 12px 0 20px;
        line-height: 1.2;
    }

    .hero-badges { display: flex; gap: 10px; flex-wrap: wrap; }

    .hero-stats {
        display: flex;
        gap: 20px;
        position: relative;
        z-index: 1;
        flex-wrap: wrap;
    }

    .hero-stat-item {
        background: rgba(0,0,0,0.3);
        border: 1px solid rgba(255,255,255,0.05);
        padding: 15px 25px;
        border-radius: 16px;
        text-align: center;
        min-width: 140px;
        backdrop-filter: blur(5px);
    }

    .hero-stat-value { font-size: 1.8rem; font-weight: 800; color: #fff; }
    .hero-stat-value span { opacity: 0.4; font-weight: 400; font-size: 1.3rem; margin: 0 5px; }
    
    .hero-stat-label {
        font-size: 0.65rem;
        text-transform: uppercase;
        color: rgba(255,255,255,0.5);
        letter-spacing: 1px;
        margin-top: 5px;
        font-weight: 700;
    }

    /* Structure Grille Listes */
    .detail-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    @media (max-width: 991px) {
        .detail-container { grid-template-columns: 1fr; }
    }

    /* Detail Card */
    .detail-card {
        background: rgba(255,255,255,0.015);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 20px;
        padding: 30px;
        margin-bottom: 30px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .detail-card:hover {
        background: rgba(255,255,255,0.025);
        border-color: rgba(255,255,255,0.08);
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }

    .detail-card-header {
        font-size: 1.05rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        display: flex;
        align-items: center;
        gap: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .detail-card-header i { color: var(--vt-primary); font-size: 1.2rem; }

    /* List Items */
    .detail-list { list-style: none; padding: 0; margin: 0; }

    .detail-list-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 18px 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.85rem;
        color: var(--vt-muted);
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 140px;
    }

    .detail-label i { opacity: 0.5; font-size: 1rem; width: 22px; text-align: center; }

    .detail-value {
        font-size: 0.95rem;
        color: #fff;
        font-weight: 600;
        text-align: right;
        flex: 1;
        word-break: break-word;
        padding-left: 15px;
        line-height: 1.4;
    }

    .highlight-value { color: var(--vt-primary); font-family: monospace; font-size: 1.05rem; }

    /* Badges */
    .badge-chic {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.7rem;
        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); }
    .badge-primary-chic { background: rgba(var(--vt-primary-rgb), 0.15); color: var(--vt-primary); border: 1px solid rgba(var(--vt-primary-rgb), 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: 12px 30px;
        border-radius: 50px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.85rem;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        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);
    }
</style>

@endsection