@extends('layouts.base')

@section('title', 'Configuration PV - E-Validation')

@section('style')
<link href="{{ asset('assets/css/evalidation/session.css') }}" rel="stylesheet" type="text/css">
<style>
    /* Styles pour l'éditeur PV */
    #pvEditor {
        font-family: 'Times New Roman', serif;
        line-height: 1.6;
        color: #333;
        position: relative;
    }

    #pvEditor .text-left {
        text-align: left !important;
    }

    #pvEditor .text-center {
        text-align: center !important;
    }

    #pvEditor .text-right {
        text-align: right !important;
    }

    #pvEditor:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 117, 84, 0.25);
    }

    #pvEditor h3 {
        color: #007554;
        border-bottom: 2px solid #007554;
        padding-bottom: 0.5rem;
    }

    #pvEditor strong {
        color: #007554;
    }

    /* Placeholder */
    #pvEditor:empty:before {
        content: "Commencez à taper votre contenu PV ici...";
        color: #6c757d;
        font-style: italic;
    }

    /* Boutons Variables */
    .btn-outline-secondary {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
        white-space: nowrap;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
    }

    .btn-outline-secondary:hover {
        background-color: #007554;
        border-color: #007554;
        color: #fff;
        transform: translateY(-1px);
    }

    /* Boutons Formatage */
    .btn-outline-light {
        font-size: 0.8rem;
        padding: 0.375rem 0.5rem;
        white-space: nowrap;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
        border-color: #dee2e6;
        color: #6c757d;
    }

    .btn-outline-light:hover,
    .btn-outline-light.active {
        background-color: #007554;
        border-color: #007554;
        color: #fff;
    }

    /* Responsive boutons */
    @media (max-width: 576px) {

        .btn-outline-secondary,
        .btn-outline-light {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

        .gap-1 {
            gap: 0.25rem !important;
        }

        .vr {
            display: none !important;
        }
    }

    @media (max-width: 400px) {

        .btn-outline-secondary,
        .btn-outline-light {
            font-size: 0.7rem;
            padding: 0.2rem 0.4rem;
        }

        .btn-outline-secondary i,
        .btn-outline-light i {
            font-size: 0.8rem;
        }
    }

    /* Accordéon Variables */
    .accordion-button {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        font-weight: 500;
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }

    .accordion-button:not(.collapsed) {
        background-color: #e3f2fd;
        border-color: #2196f3;
        color: #1976d2;
    }

    .accordion-button:focus {
        box-shadow: 0 0 0 0.25rem rgba(33, 150, 243, 0.25);
    }

    .accordion-item {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        position: relative;
    }

    .accordion-body {
        background-color: #fafafa;
        border: 1px solid #dee2e6;
        border-top: none;
        border-radius: 0 0 0.375rem 0.375rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        max-width: 600px;
        min-width: 400px;
    }

    /* Variables protégées */
    .pv-variable {
        background-color: #e8f5e8;
        border: 1px solid #007554;
        border-radius: 4px;
        padding: 1px 2px;
        margin: 0 2px;
        font-weight: 600;
        color: #007554;
        display: inline-block;
        font-family: 'Courier New', monospace;
        font-size: 0.7em;
        user-select: none;
        cursor: default;
        white-space: nowrap;
    }

    .pv-variable * {
        pointer-events: none;
        user-select: none;
    }

    .pv-variable[contenteditable="false"] {
        outline: none;
    }

    /* Éditeur container */
    .border.rounded-3 {
        min-height: 400px;
    }

    @media (max-width: 768px) {
        #pvEditor {
            font-size: 0.9rem;
            padding: 1rem !important;
        }

        #pvEditor h3 {
            font-size: 1.1rem;
        }
    }

    @media (max-width: 576px) {
        #pvEditor {
            font-size: 0.85rem;
            padding: 0.75rem !important;
            min-height: 300px !important;
        }

        #pvEditor h3 {
            font-size: 1rem;
        }

        .border.rounded-3 {
            min-height: 300px !important;
        }
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <!-- En-tête de la page -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h5 mb-1 fw-bold text-dark">Configuration PV</h1>
                    <p class="text-muted mb-0">Configuration du modèle de procès-verbal de tirage</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Configuration PV -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <form id="pvConfigForm" onsubmit="savePVConfig(event)">
                        <!-- Éditeur de contenu PV -->
                        <div class="mb-4">
                            <!-- Barre d'outils avec Variables et Formatage -->
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <!-- Variables disponibles -->
                                <div class="accordion" id="variablesAccordion" style="width: auto;">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingVariables">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapseVariables"
                                                aria-expanded="false" aria-controls="collapseVariables">
                                                <i class="ph-duotone ph-code me-2"></i>
                                                Variables disponibles
                                            </button>
                                        </h2>
                                        <div id="collapseVariables" class="accordion-collapse collapse"
                                            aria-labelledby="headingVariables" data-bs-parent="#variablesAccordion"
                                            style="position: absolute; z-index: 1000; width: 100%;">
                                            <div class="accordion-body">
                                                <!-- Session de tirage -->
                                                <div class="mb-4">
                                                    <h6 class="text-muted mb-3">
                                                        <i class="ph-duotone ph-calendar-check me-1"></i>
                                                        Session de tirage
                                                    </h6>
                                                    <div class="d-flex flex-wrap gap-2">
                                                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                                            onclick="insertVariableToken('{TYPE_JEU}')">
                                                            <i class="ph-duotone ph-game-controller me-1"></i>Type Jeu
                                                        </button>
                                                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                                            onclick="insertVariableToken('{NUMERO_TIRAGE}')">
                                                            <i class="ph-duotone ph-hash me-1"></i>N° Tirage
                                                        </button>
                                                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                                            onclick="insertVariableToken('{DATE_TIRAGE}')">
                                                            <i class="ph-duotone ph-calendar me-1"></i>Date(jj/mm)
                                                        </button>
                                                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                                            onclick="insertVariableToken('{ANNEE_TIRAGE}')">
                                                            <i class="ph-duotone ph-calendar me-1"></i>Année
                                                        </button>
                                                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                                            onclick="insertVariableToken('{HEURE_TIRAGE}')">
                                                            <i class="ph-duotone ph-clock me-1"></i>Heure
                                                        </button>
                                                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                                            onclick="insertVariableToken('{NOMBRE_BOULES}')">
                                                            <i class="ph-duotone ph-circle me-1"></i>Nbre Boules
                                                        </button>
                                                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                                            onclick="insertVariableToken('{NUMEROS_TIRES}')">
                                                            <i class="ph-duotone ph-hash me-1"></i>Numéros
                                                        </button>
                                                    </div>
                                                </div>

                                                <!-- Personnel présent -->
                                                <div class="mb-4">
                                                    <h6 class="text-muted mb-3">
                                                        <i class="ph-duotone ph-users me-1"></i>
                                                        Personnel présent
                                                    </h6>
                                                    <div class="d-flex flex-wrap gap-2">
                                                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                                            onclick="insertVariableToken('{ANIMATEUR}')">
                                                            <i class="ph-duotone ph-user me-1"></i>Animateur/Animatrice
                                                        </button>
                                                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                                            onclick="insertVariableToken('{MACHINISTE}')">
                                                            <i class="ph-duotone ph-gear me-1"></i>Machiniste
                                                        </button>
                                                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                                            onclick="insertVariableToken('{PERSONNE_POIRE}')">
                                                            <i class="ph-duotone ph-user-plus me-1"></i>Poire
                                                        </button>
                                                    </div>
                                                </div>

                                                <!-- Validation -->
                                                <div class="mb-0">
                                                    <h6 class="text-muted mb-3">
                                                        <i class="ph-duotone ph-check-circle me-1"></i>
                                                        Validation
                                                    </h6>
                                                    <div class="d-flex flex-wrap gap-2">
                                                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                                            onclick="insertVariableToken('{HEURE_VALIDATION}')">
                                                            <i class="ph-duotone ph-check-circle me-1"></i>Validation
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Barre d'outils d'édition -->
                                <div class="d-flex flex-wrap gap-1 align-items-center">
                                    <span class="text-muted small me-2">Formatage :</span>
                                    <button type="button" class="btn btn-outline-light btn-sm"
                                        onclick="formatText('bold')" title="Gras">
                                        <i class="ph-duotone ph-text-b"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-light btn-sm"
                                        onclick="formatText('italic')" title="Italique">
                                        <i class="ph-duotone ph-text-italic"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-light btn-sm"
                                        onclick="formatText('underline')" title="Souligné">
                                        <i class="ph-duotone ph-text-underline"></i>
                                    </button>
                                    <div class="vr mx-1"></div>
                                    <button type="button" class="btn btn-outline-light btn-sm"
                                        onclick="formatText('justifyLeft')" title="Aligner à gauche">
                                        <i class="ph-duotone ph-text-align-left"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-light btn-sm"
                                        onclick="formatText('justifyCenter')" title="Centrer">
                                        <i class="ph-duotone ph-text-align-center"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-light btn-sm"
                                        onclick="formatText('justifyRight')" title="Aligner à droite">
                                        <i class="ph-duotone ph-text-align-right"></i>
                                    </button>
                                    <div class="vr mx-1"></div>
                                    <button type="button" class="btn btn-outline-light btn-sm"
                                        onclick="formatText('insertUnorderedList')" title="Liste à puces">
                                        <i class="ph-duotone ph-list-bullets"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-light btn-sm"
                                        onclick="formatText('insertOrderedList')" title="Liste numérotée">
                                        <i class="ph-duotone ph-list-numbers bg-white"></i>
                                    </button>

                                    <div class="vr mx-1"></div>
                                    <span class="text-muted small me-2">Couleur :</span>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-outline-light btn-sm"
                                            onclick="formatText('foreColor', '#007554')" title="Vert foncé">
                                            <i class="ph-duotone ph-paint-brush" style="color: #007554;"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-light btn-sm"
                                            onclick="formatText('foreColor', '#000000')" title="Noir">
                                            <i class="ph-duotone ph-paint-brush" style="color: #000000;"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Éditeur de texte -->
                            <div class="border rounded-3" style="min-height: 400px;">
                                <div id="pvEditor" contenteditable="true" class="p-3 p-md-4"
                                    style="min-height: 400px; outline: none; font-family: 'Times New Roman', serif; line-height: 1.6;">
                                    <div class="text-center mb-4">
                                        <div class="fw-bold text-uppercase">PROCÈS-VERBAL DE TIRAGE {TYPE_JEU}
                                            N°{NUMERO_TIRAGE}</div>
                                    </div>

                                    <p class="mb-3">
                                        L'an {ANNEE_TIRAGE}<br>
                                        Le {DATE_TIRAGE}<br>
                                        à {HEURE_TIRAGE} mn.
                                    </p>

                                    <p class="mb-3">
                                        A la requête de la LOTERIE NATIONALE DU BENIN (LNB) SA, Société d'Etat
                                        immatriculée au RCCM de Cotonou sous le Numéro 09 B 4513, 01 BP : 998, IFU :
                                        3200700020617, Tél: (229) 21 31 64 22, Email: secretariat.lnb@lnb.bj, ayant son
                                        siège à Cotonou, rue 5052 Angle Avenue Clozel et Boulevard de la Marina 2650,
                                        agissant aux poursuites et diligences de monsieur Gaston ZOSSOU, Directeur
                                        général, demeurant et domicilié ès-qualités au siège de la LNB SA, lequel fait
                                        élection de domicile audit lieu en tant que de présent pour présent est ses
                                        suites ;
                                    </p>

                                    <p class="mb-3">
                                        Et par devant moi, Cécile Flora KOSSOUHO, Huissier de Justice près la Cour
                                        d'Appel de Cotonou et le Tribunal de Première Classe de Cotonou, inscrite au
                                        tableau des Huissiers de Justice du Bénin sous le N° 09 le 16 Juin 1999, y
                                        demeurant et domiciliée au lot 442 Suru-Léré, 1er Arrondissement de la commune
                                        de Cotonou, Rue 1.405, Tel : 01 20 24 80 88 / 01 62 86 74 42, Cotonou ;
                                    </p>

                                    <p class="mb-3">
                                        A procédé au tirage au sort de {NOMBRE_BOULES} numéros suivants :
                                    </p>

                                    <div class="mb-4">
                                        {NUMEROS_TIRES}
                                    </div>

                                    <p class="mb-3">
                                        En présence de {ANIMATEUR}, animateur/animatrice de ladite émission, de
                                        {MACHINISTE}, machiniste et de {PERSONNE_POIRE}, à la poire ;
                                    </p>

                                    <p class="mb-3">
                                        Suite à ce tirage, je valide les numéros gagnants sus cités à
                                        {HEURE_VALIDATION} mn
                                    </p>

                                    <p class="mb-3">
                                        Plus rien n'étant, j'ai rédigé et clos le présent procès-verbal de tirage dont
                                        l'original enregistré a été remis au requérant pour servir et valoir ce que de
                                        droit.
                                    </p>

                                    <p class="mb-3">
                                        Employé pour copie une (01) feuille de timbre à 1.200F CFA.
                                    </p>

                                    <div class="mt-5 text-end">
                                        <p class="mb-1">COUT :</p>
                                        <p class="mb-0"><strong>Cécile Flora KOSSOUHO</strong><br>Huissier de Justice
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Bouton d'action -->
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg shadow-sm">
                                Enregistrer le Modèle PV
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<!-- Ton script externe optimisé -->
<script src="{{ asset('assets/js/evalidation/pv-config.js') }}" defer></script>
@endsection