@extends('admin.layout.master')

<link rel="stylesheet" type="text/css" href="{{ asset('plugins/files/assets/css/select-responsive-fraza.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
    /* Styles généraux */
    .pcoded-content {
        padding: 20px;
    }

    .page-header {
        margin-bottom: 30px;
    }

    .page-header-title h4 {
        font-size: 1.8rem;
        color:rgb(0, 0, 0);
        font-weight: 600;
    }

    .breadcrumb {
        background: #fff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .breadcrumb-item a {
        color:rgb(0, 0, 0);
        text-decoration: none;
        font-weight: 500;
    }

    .breadcrumb-item a:hover {
        text-decoration: underline;
    }

    /* Statistiques */
    .stat-card {
        background: #2c3e50;
        color: #fff;
        border-radius: 8px;
        padding: 15px;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .stat-card h5 {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .stat-card .badge {
        font-size: 1rem;
        padding: 5px 10px;
        border-radius: 20px;
    }

    .stat-card .label {
        font-size: 0.9rem;
        padding: 5px 10px;
        border-radius: 20px;
    }

    .stat-card p {
        margin: 5px 0;
        font-size: 0.9rem;
    }

    .stat-card .proile-rating span {
        font-weight: 600;
        font-size: 1rem;
    }

    /* Profil */
    .emp-profile {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        padding: 20px;
        margin: 20px 0;
    }

    /* Onglets */
    .nav-tabs {
        border-bottom: 2px solid #dee2e6;
        margin-bottom: 20px;
    }

    .nav-tabs .nav-link {
        font-weight: 600;
        color: #6c757d;
        border: none;
        padding: 10px 20px;
        transition: color 0.3s ease;
    }

    .nav-tabs .nav-link:hover {
        color: #007bff;
    }

    .nav-tabs .nav-link.active {
        color: #007bff;
        border-bottom: 3px solid #007bff;
        background: none;
    }

    /* Contenu des onglets */
    .profile-tab {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
    }

    .profile-tab .row {
        margin-bottom: 10px;
        align-items: center;
    }

    .profile-tab .col-md-6:first-child {
        font-weight: 600;
        color: #2c3e50;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
    }

    .profile-tab .col-md-6:first-child i {
        margin-right: 8px;
        color: #007bff;
    }

    .profile-tab .col-md-6:last-child {
        color: #555;
        font-size: 0.9rem;
    }

    .profile-tab .col-md-6:last-child p {
        margin: 0;
        padding: 5px 0;
    }

    /* Bouton Retour */
    .btn-return {
        background: #fff;
        border: 1px solid #dee2e6;
        color: #2c3e50;
        font-weight: 600;
        padding: 10px 20px;
        border-radius: 50px;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    }

    .btn-return:hover {
        background: #007bff;
        color: #fff;
        transform: scale(1.05);
    }

    .btn-return i {
        margin-right: 8px;
    }

    /* Responsivité */
    @media (max-width: 768px) {
        .stat-card {
            margin-bottom: 15px;
        }

        .profile-tab .row {
            flex-direction: column;
            align-items: flex-start;
        }

        .profile-tab .col-md-6 {
            width: 100%;
            margin-bottom: 10px;
        }

        .profile-tab .col-md-6:first-child {
            margin-bottom: 5px;
        }
    }

    @media (max-width: 576px) {
        .nav-tabs .nav-link {
            padding: 8px 15px;
            font-size: 0.9rem;
        }

        .emp-profile {
            padding: 15px;
        }

        .btn-return {
            width: 100%;
            text-align: center;
        }
    }
</style>

@section('content')
<section>
    <div class="pcoded-content">
        <!-- Breadcrumb -->
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h4 class="m-b-10">Polices</h4>
                        </div>
                        <ul class="breadcrumb shadow-sm p-3 bg-light rounded">
                            <li class="breadcrumb-item"><a href="{{ route('home_path') }}"><i class="feather icon-home"></i></a></li>
                            <li class="breadcrumb-item"><a href="{{ route('home_path') }}">Accueil</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.police.index') }}" style="font-weight: bold;">Détail police</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="pcoded-inner-content">
            <div class="page-wrapper">
                <div class="page-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- Statistiques -->
                            <div class="row mb-3 g-2">
                                <div class="col-md-4">
                                    <div class="card shadow-sm text-center p-2 bg-dark text-white" style="min-height: 10px;">
                                        <h5> <i class="fas fa-file-alt me-1"></i> {{ $police->libellePolice}} </h5>
                                        <h6> Numéro Police :  {{ $police->numeroPolice }}</h6>
                                        @if ($police->typeAvenant->codeTypeAvenant == "AFN")
                                        <label class="label label-success">{{ $police->typeAvenant->libelle }}<br></label>
                                        @elseif($police->typeAvenant->codeTypeAvenant == "RET")
                                        <label class="label label-info">{{ $police->typeAvenant->libelle }}<br></label>
                                        @elseif($police->typeAvenant->codeTypeAvenant == "INC")
                                        <label class="label label-success">{{ $police->typeAvenant->libelle }}<br></label>
                                        @elseif($police->typeAvenant->codeTypeAvenant == "REN")
                                        @elseif($police->typeAvenant->codeTypeAvenant == "RES")
                                        <label class="label label-danger">{{ $police->typeAvenant->libelle }}<br></label>
                                        @elseif($police->typeAvenant->codeTypeAvenant == "SUS")
                                        <label class="label label-danger">{{ $police->typeAvenant->libelle }}<br></label>
                                        @elseif($police->typeAvenant->codeTypeAvenant == "ANL")
                                        <label class="label label-warning">{{ $police->typeAvenant->libelle }}<br></label>
                                        @elseif($police->typeAvenant->codeTypeAvenant == "RVP")
                                        <label class="label label-primary">{{ $police->typeAvenant->libelle }}<br></label>
                                        @elseif($police->typeAvenant->codeTypeAvenant == "ADL")
                                        <label class="label label-info">{{ $police->typeAvenant->libelle }}<br></label>
                                        @elseif($police->typeAvenant->codeTypeAvenant == "CHE")
                                        <label class="label label-inverse">{{ $police->typeAvenant->libelle }}<br></label>
                                        @elseif($police->typeAvenant->codeTypeAvenant == "REP")
                                        <label class="label label-default">{{ $police->typeAvenant->libelle }}<br></label>
                                        @elseif($police->typeAvenant->codeTypeAvenant == "CHC")
                                        <label class="label label-inverse">{{ $police->typeAvenant->libelle }}<br></label>
                                        @endif
                                    </div>
                                </div>
                                 <div class="col-md-4">
                                    <div class="card shadow-sm text-center p-2 bg-dark text-white" style="min-height: 10px;">
                                        <h5><i class="fas fa-users me-1"></i> Adhérent (s) / Bénéficiaire (s) </h5>
                                        <span class="badge bg-warning">{{ $nbre_adherent }} / {{ $nbre_beneficiaire }}</span>
                                    </div>
                                </div> 
                                <div class="col-md-4">
                                    <div class="card shadow-sm text-center p-2 bg-dark text-white" style="min-height: 10px;">
                                        <h5><i class="fas fa-file-alt me-1"></i> Polices</h5>
                                        <span class="badge bg-success">1</span>
                                    </div>
                                </div>
                            </div>
                            <!-- Profil -->
                            <div class="card emp-profile">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Informations du police</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Information Commission</a>
                                    </li> 
                                </ul>
                                <div class="tab-content profile-tab" id="myTabContent">
                                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                        <div class="row">
                                            <div class="col-md-10">
                                                <div class="row">
                                                    <div class="col-md-10">
                                                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-file-alt"></i> Nom Police :</div>
                                                                <div class="col-md-6"><p>{{ $police->libellePolice }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-user"></i> Souscripteur :</div>
                                                                <div class="col-md-6"><p>{{ $police->souscripteur->nom.' '.$police->souscripteur->prenoms }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-user-check"></i> À rembourser à :</div>
                                                                <div class="col-md-6"><p>{{ $police->rembourserA ?: 'Non Défini' }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-users"></i> Type :</div>
                                                                <div class="col-md-6"><p>{{ $police->codeTypeContrat == 'G' ? 'GROUPE' : 'PARTICULIER' }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-calendar-alt"></i> Date d'effet :</div>
                                                                <div class="col-md-6"><p>{{ $police->dateEffet->format('d/m/Y') }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-calendar-times"></i> Date d'échéance :</div>
                                                                <div class="col-md-6"><p>{{ $police->dateEcheance->format('d/m/Y') }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-file-contract"></i> N° avenant :</div>
                                                                <div class="col-md-6"><p>{{ $police->numeroAvenant ?: 'Non Défini' }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-calendar-check"></i> Date d'avenant :</div>
                                                                <div class="col-md-6"><p>{{ $police->dateAvenant->format('d/m/Y') }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-info-circle"></i> État police :</div>
                                                                <div class="col-md-6">
                                                                    @switch($police->etatpolice->libelle)
                                                                        @case('En cours')
                                                                            <span class="label label-success">{{ $police->etatpolice->libelle }}</span>
                                                                            @break
                                                                        @case('Résiliée')
                                                                            <span class="label label-default">{{ $police->etatpolice->libelle }}</span>
                                                                            @break
                                                                        @case('Suspendue')
                                                                            <span class="label label-danger">{{ $police->etatpolice->libelle }}</span>
                                                                            @break
                                                                        @case('Annulée')
                                                                            <span class="label label-info">{{ $police->etatpolice->libelle }}</span>
                                                                            @break
                                                                        @case('Expirée')
                                                                            <span class="label label-warning">{{ $police->etatpolice->libelle }}</span>
                                                                            @break
                                                                        @default
                                                                            <span class="label label-default">{{ $police->etatpolice->libelle }}</span>
                                                                    @endswitch
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-check-circle"></i> Référencement :</div>
                                                                <div class="col-md-6"><p>{{ $police->avecReferencement == 0 ? 'NON' : 'OUI' }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-dollar-sign"></i> Budget :</div>
                                                                <div class="col-md-6"><p>{{ $police->avecReferencement == 0 ? 'NON' : 'OUI' }}</p></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                        <div class="row">
                                            <div class="col-md-10">
                                                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-percentage"></i> Taux Comm Gestion (%) :</div>
                                                                <div class="col-md-6"><p>{{ $police->tauxCommissionGerant ?: 'Non Défini' }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-percentage"></i> Taux Comm Garant (%) :</div>
                                                                <div class="col-md-6"><p>{{ $police->tauxCommissionGcAssureur ?: 'Non Défini' }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-percentage"></i> Taux Comm Courtier (%) :</div>
                                                                <div class="col-md-6"><p>{{ $police->tauxCommission ?: 'Non Défini' }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-percentage"></i> Taux Comm Commercial (%) :</div>
                                                                <div class="col-md-6"><p>{{ $police->tauxCommissionAutre ?: 'Non Défini' }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-exclamation-triangle"></i> Taux Seuil Alerte Sinis. (%) :</div>
                                                                <div class="col-md-6"><p>{{ $police->tauxCommissionAutre ?: 'Non Défini' }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-percentage"></i> Taux avec référencement (%) :</div>
                                                                <div class="col-md-6"><p>{{ $police->tauxAvecReferencement ?: 'Non Défini' }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-percentage"></i> Taux sans référencement (%) :</div>
                                                                <div class="col-md-6"><p>{{ $police->tauxSansReferencement ?: 'Non Défini' }}</p></div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6"><i class="fas fa-percentage"></i> Taux Ristourne (%) :</div>
                                                                <div class="col-md-6"><p>{{ $police->tauxRistourne ?: 'Non Défini' }}</p></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Bouton Retour -->
                            <div class="text-center mt-4">
                                <a onclick="showOverlay()" href="{{ url()->previous() }}" class="btn btn-return">
                                    <i class="fas fa-arrow-circle-left"></i> Retour
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </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>
@endsection