@extends('admin.layout.master')

@section('content')
<section class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-wrapper">
            
            <!-- Quick Header Info -->
            <div class="premium-header-card animate-fade-in text-white">
                <div class="client-identity">
                    <h1>{{ $client->nom.' '.$client->prenoms }}</h1>
                    <div class="d-flex align-items-center gap-3">
                        <span class="id-pill"><i class="feather icon-hash"></i> {{ $client->numeroClient }}</span>
                        <span class="badge" style="background: var(--vt-primary); border-radius: 50px; padding: 6px 15px; font-weight: 700; color: #fff;">
                            {{ $type->libelle }}
                        </span>
                    </div>
                </div>

                <div class="header-stats">
                    <div class="header-stat-item">
                        <span class="label">Polices Actives</span>
                        <span class="value">{{ $nbre_police }}</span>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Main Information -->
                <div class="col-lg-8">
                    <div class="details-grid-card animate-fade-in" style="animation-delay: 0.1s;">
                        <div class="details-section-title">
                            <i class="feather icon-info"></i>
                            <h3>Informations Générales</h3>
                        </div>
                        
                        <div class="info-row">
                            <div class="info-label"><i class="feather icon-user"></i> Nom du Partenaire</div>
                            <div class="info-value"><strong>{{ $client->nom.' '.$client->prenoms }}</strong></div>
                        </div>

                        <div class="info-row">
                            <div class="info-label"><i class="feather icon-award"></i> Titre / Statut Jurdique</div>
                            <div class="info-value">{{ $titre->libelle }}</div>
                        </div>

                        <div class="info-row">
                            <div class="info-label"><i class="feather icon-map-pin"></i> Adresse Géographique</div>
                            <div class="info-value">{{ $client->adresseGeo ?: 'N/A' }} {{ $client->boitepostale ? '— CP '.$client->boitepostale : '' }}</div>
                        </div>

                        <div class="info-row">
                            <div class="info-label"><i class="feather icon-globe"></i> Pays / Région</div>
                            <div class="info-value">
                                <span class="badge bg-light text-dark me-2">{{ isset($pays) ? $pays->libelle : 'Non Défini' }}</span>
                                <span style="opacity: 0.7;">{{ isset($region) ? $region->libelle : '' }}</span>
                            </div>
                        </div>

                        <div class="info-row">
                            <div class="info-label"><i class="feather icon-home"></i> Commune / Localité</div>
                            <div class="info-value">{{ isset($localite) ? $localite->libelle : 'Non Défini' }}</div>
                        </div>

                        <div class="info-row">
                            <div class="info-label"><i class="feather icon-briefcase"></i> Secteur d'activité</div>
                            <div class="info-value">{{ isset($secteuractivite) ? $secteuractivite->libelle : 'Non Défini' }}</div>
                        </div>

                        <div class="info-row">
                            <div class="info-label"><i class="feather icon-file-text"></i> Registre de Commerce</div>
                            <div class="info-value"><code>{{ $client->registreCommerce ?: 'Non renseigné' }}</code></div>
                        </div>
                    </div>
                </div>

                <!-- Contact Details -->
                <div class="col-lg-4">
                    <div class="details-grid-card animate-fade-in" style="animation-delay: 0.2s;">
                        <div class="details-section-title">
                            <i class="feather icon-phone"></i>
                            <h3>Coordonnées</h3>
                        </div>

                        <div class="info-row">
                            <div class="info-label" style="width: 120px;"><i class="feather icon-smartphone"></i> Mobile</div>
                            <div class="info-value"><strong style="color: var(--vt-primary);">{{ $client->telephonePortable ?: '—' }}</strong></div>
                        </div>

                        <div class="info-row">
                            <div class="info-label" style="width: 120px;"><i class="feather icon-phone"></i> Bureau</div>
                            <div class="info-value">{{ $client->telephoneBureau ?: '—' }}</div>
                        </div>

                        <div class="info-row">
                            <div class="info-label" style="width: 120px;"><i class="feather icon-mail"></i> Email</div>
                            <div class="info-value"><a href="mailto:{{ $client->email }}" style="color: var(--vt-text-secondary); text-decoration: none;">{{ $client->email ?: 'N/A' }}</a></div>
                        </div>
                    </div>

                    <!-- Mandataire Card -->
                    <div class="details-grid-card animate-fade-in" style="animation-delay: 0.3s;">
                        <div class="details-section-title">
                            <i class="feather icon-user-check"></i>
                            <h3>Mandataire</h3>
                        </div>
                        <div style="padding: 20px 30px;">
                            <h4 class="mandataire-name" style="color: #fff; font-size: 1rem; margin-bottom: 5px;">{{ $client->nomMandataire ?: 'Aucun mandataire' }}</h4>
                            <p style="font-size: 0.85rem; color: var(--vt-muted); margin-bottom: 20px;">Gestionnaire attitré</p>
                            
                            @if($client->nomMandataire)
                                <div class="d-flex flex-column gap-3">
                                    <div style="font-size: 0.9rem; display: flex; align-items: center; gap: 10px;">
                                        <i class="feather icon-phone" style="color: var(--vt-primary);"></i> 
                                        <span class="mandataire-info">{{ $client->telephonePortablemandataire ?: 'N/A' }}</span>
                                    </div>
                                    <div style="font-size: 0.9rem; display: flex; align-items: center; gap: 10px;">
                                        <i class="feather icon-mail" style="color: var(--vt-primary);"></i> 
                                        <span class="mandataire-info">{{ $client->emailMandataire ?: 'N/A' }}</span>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer Navigation -->
            <div class="actions-footer animate-fade-in" style="animation-delay: 0.4s;">
                <a onclick="showOverlay()" href="{{ url()->previous() }}" class="btn-chic btn-back-chic">
                    <i class="feather icon-arrow-left"></i> Retour à la liste
                </a>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Subtle row animation
        $('.info-row').each(function(i) {
            $(this).css({
                'opacity': '0',
                'transform': 'translateX(-10px)',
                'transition': 'all 0.3s ease ' + (i * 0.03) + 's'
            });
            setTimeout(() => { $(this).css({'opacity':'1', 'transform':'translateX(0)'}); }, 200);
        });
    });
</script>

<style>
/* ══════════════════════════════════════════════
       DÉTAILS SOUSCRIPTEUR — Design Premium
       ══════════════════════════════════════════════ */

    .premium-header-card {
        background: linear-gradient(135deg, rgba(var(--vt-primary-rgb), 0.15) 0%, rgba(0, 0, 0, 0.4) 100%) !important;
        backdrop-filter: blur(20px);
        border: 1px solid rgba(var(--vt-primary-rgb), 0.2);
        border-radius: 24px;
        padding: 40px;
        margin-bottom: 30px;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .premium-header-card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -20%;
        width: 60%;
        height: 200%;
        background: radial-gradient(circle, rgba(var(--vt-primary-rgb), 0.1) 0%, transparent 70%);
        z-index: 0;
    }

    .client-identity {
        position: relative;
        z-index: 1;
    }

    .client-identity h1 {
        font-size: 2.2rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 8px;
        letter-spacing: -1px;
    }

    .client-identity .id-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(var(--vt-primary-rgb), 0.2);
        color: var(--vt-primary);
        padding: 6px 16px;
        border-radius: 50px;
        font-weight: 700;
        font-family: var(--font-mono);
        font-size: 0.9rem;
        border: 1px solid rgba(var(--vt-primary-rgb), 0.3);
    }

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

    .header-stat-item {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 15px 25px;
        border-radius: 18px;
        text-align: center;
    }

    .header-stat-item .label {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--vt-muted);
        font-weight: 700;
        display: block;
        margin-bottom: 5px;
    }

    .header-stat-item .value {
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--vt-primary);
    }

    /* Info Grid */
    .details-grid-card {
        background: rgba(255, 255, 255, 0.02) !important;
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 24px;
        padding: 0;
        overflow: hidden;
        margin-bottom: 30px;
    }

    .details-section-title {
        background: rgba(255, 255, 255, 0.03);
        padding: 20px 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .details-section-title i {
        color: var(--vt-primary);
        font-size: 1.2rem;
    }

    .details-section-title h3 {
        font-size: 1.1rem;
        font-weight: 700;
        margin: 0;
        color: #fff;
    }

    .info-row {
        display: flex;
        padding: 18px 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        transition: background 0.2s;
    }

    .info-row:hover {
        background: rgba(var(--vt-primary-rgb), 0.02);
    }

    .info-row:last-child {
        border-bottom: none;
    }

    .info-label {
        width: 250px;
        color: var(--vt-muted);
        font-weight: 600;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .info-label i {
        width: 20px;
        text-align: center;
        font-size: 0.85rem;
        opacity: 0.6;
    }

    .info-value {
        flex: 1;
        color: var(--vt-text);
        font-weight: 500;
        font-size: 0.95rem;
    }

    .info-value strong {
        color: #fff;
    }

    /* Action Buttons */
    .actions-footer {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .btn-chic {
        padding: 12px 35px;
        border-radius: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.3s;
        text-decoration: none;
    }

    .btn-back-chic {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--vt-text-secondary);
    }

    .btn-back-chic:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        transform: translateY(-2px);
    }

    /* Mobile handling */
    @media (max-width: 991px) {
        .info-label { width: 180px; }
        .premium-header-card { flex-direction: column; align-items: flex-start; gap: 25px; padding: 30px; }
        .header-stats { width: 100%; }
        .header-stat-item { flex: 1; }
    }

    /* ══════════════════════════════════════════════
       LIGHT MODE OVERRIDES — Visibilité Renforcée
       ══════════════════════════════════════════════ */
    
    body.light-mode .premium-header-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
    }
    body.light-mode .premium-header-card::before {
        background: radial-gradient(circle, rgba(var(--vt-primary-rgb), 0.08) 0%, transparent 70%);
    }
    body.light-mode .client-identity h1 { 
        color: #0f172a !important;
        text-shadow: none !important;
    }
    
    body.light-mode .header-stat-item {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    }
    body.light-mode .header-stat-item .value { color: var(--vt-primary) !important; }
    
    /* Cartes d'informations - Bordures et ombres nettes */
    body.light-mode .details-grid-card {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
    }
    
    body.light-mode .details-section-title {
        background: #f1f5f9 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    body.light-mode .details-section-title h3 { 
        color: #0f172a !important; 
    }
    
    body.light-mode .info-row { 
        border-bottom: 1px solid #f1f5f9 !important; 
    }
    body.light-mode .info-row:hover { 
        background: #f8fafc !important; 
    }
    
    body.light-mode .info-label { 
        color: #475569 !important; 
    }
    body.light-mode .info-label i { 
        color: var(--vt-primary) !important; 
        opacity: 1 !important; 
    }
    
    body.light-mode .info-value { 
        color: #1e293b !important; 
    }
    body.light-mode .info-value strong { 
        color: #0f172a !important; 
    }
    body.light-mode .info-value code { 
        background: #f1f5f9 !important; 
        color: var(--vt-primary) !important; 
        border: 1px solid #e2e8f0;
        padding: 4px 8px; 
        border-radius: 6px; 
    }
    
    /* Bouton retour */
    body.light-mode .btn-back-chic {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #475569 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    }
    body.light-mode .btn-back-chic:hover {
        background: #0f172a !important;
        color: #ffffff !important;
        border-color: #0f172a !important;
    }

    /* Mandataire spécifiques */
    body.light-mode .mandataire-name { color: #0f172a !important; }
    body.light-mode .mandataire-info { color: #1e293b !important; }

</style>
@endsection