@extends('layouts.base')
@section('title','Détails de la session')

@section('style')
<link href="{{ asset('assets/css/evalidation/session.css') }}" rel="stylesheet" type="text/css">
<style>
    :root {
        /* Mets ici ton vert foncé corporate si différent */
        --ev-green-dark: #146c43;
        /* vert foncé */
        --ev-green: #198754;
        /* vert principal */
        --ev-green-soft: #e9f7ef;
        /* fond doux */
    }

    /* Caméra */
    .ev-camera-wrap {
        position: relative;
        background: #000;
        border-radius: .5rem;
        overflow: hidden;
    }

    #video {
        width: 100%;
        height: auto;
        display: block;
    }

    .ev-target {
        position: absolute;
        inset: 12%;
        border: 2px dashed rgba(255, 255, 255, .6);
        border-radius: .5rem;
    }

    .ev-camera-wrap.active {
        border: 3px solid var(--ev-green-dark);
        box-shadow: 0 0 10px rgba(20, 108, 67, .25);
    }

    /* Chips / boules */
    #chips {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        justify-content: center;
    }

    .ball-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--ev-green-dark);
        color: #fff;
        font-weight: 700;
        font-size: 2rem;
        margin: .25rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
        border: 2px solid #fff;
    }

    .ball-badge.empty {
        background: #e9ecef;
        color: #6c757d;
        border: 2px dashed #adb5bd;
    }

    /* Grille photos */
    .photos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: .75rem;
    }

    .photos-grid img {
        width: 100%;
        height: 100px;
        object-fit: cover;
        border-radius: .375rem;
        border: 1px solid #eee;
    }

    /* Petits textes d'aide */
    .hint {
        font-size: .8rem;
        color: #6c757d;
    }

    /* Statut badges */
    .status-badge {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
        border-radius: 0.375rem;
    }

    .status-preparation {
        background-color: #e2e3e5;
        color: #383d41;
    }

    .status-pending {
        background-color: #fff3cd;
        color: #856404;
    }

    .status-validated {
        background-color: #d4edda;
        color: #155724;
    }

    .status-rejected {
        background-color: #f8d7da;
        color: #721c24;
    }

    .status-ventilated {
        background-color: #d1ecf1;
        color: #0c5460;
    }

    /* Progression */
    .progress {
        background-color: #e9ecef;
        width: 100%;
        min-width: 200px;
    }

    .progress-bar {
        background: linear-gradient(90deg, var(--ev-green-dark), var(--ev-green));
        transition: width 0.3s ease;
        min-height: 8px;
        background-color: #28a745 !important;
        /* Fallback si les variables CSS ne fonctionnent pas */
    }

    /* Boutons de même largeur */
    .btn-equal-width {
        width: 120px;
        flex: none;
    }

    /* ===== Modal homogène ===== */
    #validationModal .modal-content,
    #saveModal .modal-content,
    #generatePVModal .modal-content,
    #rejectModal .modal-content,
    #ventilateModal .modal-content {
        border: 0;
        border-radius: .75rem;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    }

    .ev-modal-card {
        border: 1px solid #edf2f7;
        border-radius: .75rem;
        overflow: hidden;
        background: #fff;
    }

    .ev-modal-card__header {
        background: var(--ev-green-soft);
        color: #0f5132;
        padding: .75rem 1rem;
        font-weight: 600;
    }

    .ev-modal-card__body {
        padding: 1rem 1.25rem;
    }

    #confidence {
        background: #fff;
        border: 1px solid #e6f4ea;
        color: #0f5132;
    }

    #validationMessage.alert {
        background: #fff;
        border-left: 4px solid #ffc107;
    }
</style>
@endsection

@section('content')
<div class="container-fluid px-2 px-md-3">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1 fw-bold text-dark">Session #{{ $session->session_number }}</h1>
                    <p class="text-muted mb-0">
                        {{ $session->gameType->name ?? 'Type de jeu inconnu' }} •
                        {{ $session->drawing_date->format('d/m/Y') }} à {{
                        \Carbon\Carbon::parse($session->drawing_time)->format('H:i') }}
                    </p>
                </div>
                <div class="d-flex gap-2">
                    <span class="status-badge status-{{ $session->status ?? 'preparation' }}">
                        @switch($session->status ?? 'preparation')
                        @case('preparation') En préparation de tirage @break
                        @case('pending') En attente de validation @break
                        @case('validated') Validé @break
                        @case('rejected') Rejeté @break
                        @case('ventilated') Ventilé @break
                        @default En préparation de tirage
                        @endswitch
                    </span>
                </div>
            </div>
        </div>
    </div>

    @if (session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <div class="row g-4 d-flex">
        <!-- Bloc A - Informations -->
        <div class="col-12 col-lg-3 d-flex">
            <div class="card w-100 d-flex flex-column">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Informations</h6>
                    <button class="btn btn-sm btn-outline-secondary d-lg-none" type="button" data-bs-toggle="collapse"
                        data-bs-target="#sessionInfoCollapse">
                        <i class="ph-light ph-caret-down"></i>
                    </button>
                </div>
                <div class="collapse d-lg-block flex-grow-1" id="sessionInfoCollapse">
                    <div class="card-body d-flex flex-column">
                        <div class="mb-3">
                            <small class="text-muted">Type de jeu</small>
                            <div class="fw-semibold">{{ $session->gameType->name ?? 'N/A' }}</div>
                        </div>

                        @if($session->animator_name)
                        <div class="mb-3">
                            <small class="text-muted">Animateur/Animatrice</small>
                            <div class="fw-semibold">
                                @if($session->animator_civility){{ $session->animator_civility }} @endif{{
                                $session->animator_name }}
                            </div>
                        </div>
                        @endif

                        @if($session->machinist_name)
                        <div class="mb-3">
                            <small class="text-muted">Machiniste</small>
                            <div class="fw-semibold">
                                @if($session->machinist_civility){{ $session->machinist_civility }} @endif{{
                                $session->machinist_name }}
                            </div>
                        </div>
                        @endif

                        @if($session->person_at_pear)
                        <div class="mb-3">
                            <small class="text-muted">Personne à la poire</small>
                            <div class="fw-semibold">
                                @if($session->person_at_pear_civility){{ $session->person_at_pear_civility }} @endif{{
                                $session->person_at_pear }}
                            </div>
                        </div>
                        @endif

                        <div class="mt-auto pt-3 border-top">
                            <small class="text-muted">Créée le</small>
                            <div class="fw-semibold small">{{ $session->created_at->format('d/m/Y H:i') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bloc B - Capture et OCR -->
        <div class="col-12 col-lg-5 d-flex scannerBlock">
            <div class="card w-100 d-flex flex-column">
                <div class="card-header">
                    <h6 class="mb-0">Scanner les boules</h6>
                </div>
                <div class="card-body d-flex flex-column">
                    <div class="d-flex gap-2 mb-3">
                        <button id="btnToggle" class="btn btn-success flex-grow-1">Activer la caméra</button>
                        <button id="btnShot" class="btn btn-dark flex-grow-1" disabled>Capturer et lire</button>
                    </div>

                    <div id="ocrStatus" class="text-center mb-2" style="display: none;">
                        <small class="text-default">
                            <i class="ph-light ph-spinner ph-spin me-1"></i>
                            <span id="ocrStatusText">Chargement OCR...</span>
                        </small>
                    </div>

                    <div class="text-center mb-3" style="display: none;">
                        <button id="btnTestOCR" class="btn btn-outline-info btn-sm">
                            <i class="ph-light ph-test-tube me-1"></i> Tester OCR
                        </button>
                    </div>

                    <div class="ev-camera-wrap mb-3 flex-grow-1 d-flex flex-column">
                        <video id="video" autoplay playsinline muted class="flex-grow-1"></video>
                        <canvas id="canvas" class="d-none"></canvas>
                        <div class="ev-target"></div>
                    </div>

                    <div class="text-center mt-auto">
                        <div class="text-muted" style="font-size: 0.6rem;">
                            <i class="ph-light ph-lightbulb me-1"></i>
                            Conseil : Assurez-vous que le numéro est bien visible et centré
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bloc C - Validation et actions -->
        <div class="col-12 col-lg-4 ballsBlock">
            <div class="card w-100 d-flex flex-column">
                <div class="card-header">
                    <h6 class="mb-0">Boules scannées</h6>
                </div>
                <div class="card-body d-flex flex-column">
                    <div class="text-center mb-3">
                        @php
                        $status = $session->status;
                        $rawDrawn = $session->drawn_numbers ?? [];
                        $drawnCount = is_array($rawDrawn)
                        ? count($rawDrawn)
                        : (method_exists($rawDrawn, 'count') ? $rawDrawn->count() : 0);
                        @endphp


                        @if (in_array($status, ['preparation', 'rejected']))
                        <span class="badge bg-primary" id="count" style="font-size: 0.8rem;">0/{{ $ballCount }}</span>
                        <div class="mt-2">
                            <div class="progress" style="height: 8px; width: 100%; min-width: 200px;">
                                <div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%"></div>
                            </div>
                        </div>
                        @endif
                    </div>

                    <div id="chips" class="mb-4">—</div>

                    <hr class="my-3">

                    <div class="d-grid gap-2 mt-auto">
                        <button id="btnSave" class="btn btn-success" disabled>Enregistrer les boules</button>
                        <div class="d-flex gap-2">
                            <button id="btnGeneratePV" class="btn btn-success btn-equal-width" disabled>Générer
                                PV</button>
                            <button id="btnDownloadPV" class="btn btn-danger btn-equal-width" style="display: none;"
                                onclick="viewPV()" title="Voir le PV généré">
                                Voir PV
                            </button>
                            <button id="btnReject" class="btn btn-danger btn-equal-width" disabled>Rejeter</button>
                        </div>
                        <button id="btnVentilate" class="btn btn-primary" disabled>Ventiler par mail</button>
                        <button id="btnReset" class="btn btn-dark" style="display: none;"
                            onclick="showResetModal()">Réinitialiser</button>
                        <button id="btnDelete" class="btn btn-danger" style="display: none;"
                            onclick="showDeleteModal()">Supprimer la session</button>
                    </div>

                    <div id="scanNote" class="hint mt-3 text-center" aria-live="polite"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal validation -->
<div class="modal fade" id="validationModal" tabindex="-1" aria-labelledby="validationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- Header homogène -->
            <div class="modal-header">
                <h5 class="modal-title" id="validationModalLabel">
                    Confirmer le numéro
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Fermer"></button>
            </div>

            <div class="modal-body p-4">
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="ev-modal-card h-100">
                            <div class="ev-modal-card__header">
                                <i class="ph-light ph-camera me-2"></i> Photo capturée
                            </div>
                            <div class="ev-modal-card__body text-center d-flex flex-column justify-content-center">
                                <div class="position-relative">
                                    <img id="ballPhoto" src="" alt="Photo de la boule"
                                        class="img-fluid rounded shadow-sm mx-auto"
                                        style="max-height: 280px; border: 3px solid #e9ecef;">
                                    {{-- <div
                                        class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
                                        <div class="bg-white bg-opacity-90 rounded-pill px-3 py-1">
                                            <small class="text-muted fw-semibold">Boule tirée</small>
                                        </div>
                                    </div> --}}
                                </div>
                                <small class="text-muted mt-3 d-block">
                                    <i class="ph-light ph-info me-1"></i>
                                    Vérifiez le numéro visible sur la boule
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ev-modal-card h-100">
                            <div class="ev-modal-card__header">
                                <i class="ph-light ph-eye me-2"></i> Lecture automatique
                            </div>
                            <div
                                class="ev-modal-card__body text-center d-flex flex-column justify-content-center align-items-center">
                                <div class="d-flex flex-column justify-content-center align-items-center"
                                    style="min-height: 200px;">
                                    <div id="detectedNumber" class="display-1 fw-bold mb-2"
                                        style="font-size: 7rem; line-height: 1;">
                                        --
                                    </div>
                                    <div id="detectedNumberInWords" class="fw-semibold text-muted"
                                        style="font-size: 1.3rem;">--</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="validationMessage" class="alert mt-4 border-0 shadow-sm" style="display:none;">
                    <div class="d-flex align-items-center">
                        <i class="ph-light ph-warning me-2" style="font-size: 1.2rem;"></i>
                        <span id="validationText"></span>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="ph-light ph-x me-2"></i>Annuler
                </button>
                <button type="button" class="btn btn-success btn-lg px-4" id="confirmScan" onclick="confirmNumber()">
                    <i class="ph-light ph-check me-2"></i>Confirmer
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal confirmation enregistrement -->
<div class="modal fade" id="saveModal" tabindex="-1" aria-labelledby="saveModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Header homogène -->
            <div class="modal-header">
                <h5 class="modal-title" id="saveModalLabel">
                    <i class="ph-light ph-floppy-disk me-2"></i>Enregistrer les boules scannées
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Fermer"></button>
            </div>

            <div class="modal-body p-4">
                <div class="text-center mb-4">
                    <p class="text-muted mb-0">
                        {{-- Vous avez scanné <strong id="saveModalCount">0</strong> boule(s). --}}
                        Voulez-vous les enregistrer maintenant ?
                    </p>
                </div>

                <!-- Liste des boules scannées -->
                {{-- <div class="row g-2" id="saveModalBalls"></div> --}}
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="ph-light ph-x me-2"></i>Annuler
                </button>
                <button type="button" class="btn btn-primary" id="confirmSave">
                    <i class="ph-light ph-floppy-disk me-2"></i>Enregistrer
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal confirmation génération PV -->
<div class="modal fade" id="generatePVModal" tabindex="-1" aria-labelledby="generatePVModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="generatePVModalLabel">
                    <i class="ph-light ph-file-text me-2"></i>Générer le PV
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <p class="text-muted">
                        <span id="generatePVMessage">Voulez-vous générer le PV pour cette session ?</span>
                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="ph-light ph-x me-2"></i>Annuler
                </button>
                <button type="button" class="btn btn-warning" id="confirmGeneratePV">
                    <i class="ph-light ph-file-text me-2"></i>Générer le PV
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal confirmation rejet -->
<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="rejectModalLabel">
                    <i class="ph-light ph-warning-circle me-2"></i>Rejeter le tirage
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <p class="text-muted">Cette action est <strong>irréversible</strong>. Êtes-vous sûr de vouloir
                        rejeter ce tirage ?</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="ph-light ph-x me-2"></i>Annuler
                </button>
                <button type="button" class="btn btn-danger" id="confirmReject">
                    <i class="ph-light ph-warning-circle me-2"></i>Rejeter
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal confirmation ventilation -->
<div class="modal fade" id="ventilateModal" tabindex="-1" aria-labelledby="ventilateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ventilateModalLabel">
                    <i class="ph-light ph-envelope me-2"></i>Ventiler par mail
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <p class="text-muted">Voulez-vous ventiler cette session par mail ?</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    <i class="ph-light ph-x me-2"></i>Annuler
                </button>
                <button type="button" class="btn btn-info" id="confirmVentilate">
                    <i class="ph-light ph-envelope me-2"></i>Ventiler
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal confirmation suppression -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="ph-light ph-warning-circle me-2 text-danger"></i>
                    Confirmer la suppression
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir supprimer cette session ?</p>
                <div class="alert alert-warning">
                    <i class="ph-light ph-warning me-2"></i>
                    <strong>Attention :</strong> Cette action est irréversible.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">
                    <i class="ph-light ph-trash me-2"></i>Supprimer
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal confirmation réinitialisation -->
<div class="modal fade" id="resetModal" tabindex="-1" aria-labelledby="resetModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resetModalLabel">
                    <i class="ph-light ph-arrow-clockwise me-2 text-warning"></i>
                    Confirmer la réinitialisation
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <p class="text-muted">Cette action va <strong>effacer toutes les boules</strong> enregistrées pour
                        cette session. Vous pourrez ensuite recommencer l'enregistrement.</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-warning" id="confirmReset">
                    <i class="ph-light ph-arrow-clockwise me-2"></i>Réinitialiser
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="https://unpkg.com/tesseract.js@4.1.1/dist/tesseract.min.js"></script>
<script src="{{ asset('assets/js/evalidation/session-show.js') }}"></script>
<script>
    // Configuration pour le module JavaScript
    const sessionConfig = {
        sessionId: @json($session?->id ?? 0),
        sessionHashId: @json(Crypt::encrypt($session?->id ?? 0)),
        drawnNumbers: @json($session?->drawn_numbers ?? []),
        ballCount: {{ $ballCount }},
        minNumber: {{ $minNumber }},
        maxNumber: {{ $maxNumber }},
        sessionStatus: @json($session->status ?? null)
    };

    // Initialiser le module quand le DOM est prêt
    document.addEventListener('DOMContentLoaded', function() {
        initializeSessionShow(sessionConfig);
    });
</script>
@endsection