@extends('layouts.base')

@section('title')
    Réclamation/form
@endsection

@section('style')
    <style>
        /* Wizard pills styling */
        #wizard-steps .nav-link {
            border-radius: 9999px;
        }

        #wizard-steps .nav-link.active {
            background-color: rgb(0, 117, 84, 1);
            color: #fff !important;
        }
        
        /* Styles pour les champs avec erreur */
        .form-control.is-invalid,
        .form-select.is-invalid {
            border-color: #dc3545;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
        }
        
        /* Styles pour les steps avec erreur */
        .wizard-step.has-errors {
            border: 2px solid #dc3545 !important;
            border-radius: 8px !important;
            padding: 15px !important;
            background-color: #fff5f5 !important;
            margin-bottom: 20px;
        }
        
        /* Animation pour attirer l'attention sur les erreurs */
        .wizard-step.has-errors {
            animation: errorPulse 2s ease-in-out infinite;
        }
        
        @keyframes errorPulse {
            0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
            100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
        }
        
        /* Style pour les messages d'erreur */
        .text-danger {
            font-weight: 500;
            margin-top: 5px;
            display: block;
        }
        
        /* Indicateur visuel sur les onglets avec erreur */
        #wizard-steps .nav-link.has-errors {
            position: relative;
        }
        
        #wizard-steps .nav-link.has-errors::after {
            content: "!";
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #dc3545;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }
        
        /* Rendre les onglets cliquables */
        #wizard-steps .nav-link {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        #wizard-steps .nav-link:hover:not(.active) {
            background-color: #e9ecef;
            color: #495057 !important;
        }
        
        #wizard-steps .nav-link.has-errors:hover {
            background-color: #f8d7da !important;
            color: #721c24 !important;
        }
        
        /* Style pour l'alerte de validation */
        #validation-alert {
            margin-bottom: 20px;
            border-left: 4px solid #dc3545;
        }
        
        /* Animation pour l'alerte */
        #validation-alert.fade.show {
            animation: slideInDown 0.5s ease-out;
        }
        
        @keyframes slideInDown {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    </style>
@endsection

@section('content')
    <!-- Breadcrumb start -->
    <div class="row m-1">
        <div class="col-12 ">
            <h4 class="main-title">Réclamation de gain</h4>
            <ul class="app-line-breadcrumbs mb-3">
                <li class="">
                    <a class="f-s-14 f-w-500" href="{{ route('reclamation.index') }}">
                        <span>
                            <i class="ph-duotone  ph-stack f-s-16 "></i> Tableau de bord
                        </span>
                    </a>
                </li>
                {{-- <li>
                    <a class="f-s-14 f-w-500" href="{{ route('reclamation.list') }}">Toutes Réclamations</a>
                </li> --}}
                <li class="active">
                    <a class="f-s-14 f-w-500" href="#">Formulaire</a>
                </li> --}}
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            {{-- <div class="alert alert-light-success " role="alert"> Light success color alert with an example link check
                it </div> --}}
            <div class="card">

                <div class="card-body">
                    {{--
                    <livewire:claims.form :claimCases="$claimCases" /> --}}
                    <form class="g-3 app-form" action="{{ route('reclamation.store') }}" method="POST" id="claimWizardForm" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <ul class="nav nav-pills gap-4" id="wizard-steps" style="text-decoration: none;">
                                <li class="nav-item"><span class="nav-link text-muted text-2xl active" data-step="0">1.
                                        Réclamation</span></li>
                                {{-- <li class="nav-item"><span class="nav-link text-muted text-2xl" data-step="1">2.
                                        Réclamant</span></li> --}}
                                <li class="nav-item"><span class="nav-link text-muted text-2xl" data-step="1">2. Détails du
                                        jeu</span></li>
                                <li class="nav-item"><span class="nav-link text-muted text-2xl" data-step="2">3.
                                        Pièces</span>
                                </li>
                            </ul>
                        </div>

                        {{-- <div class="app-divider-v dashed"></div> --}}

                        <div class="wizard-step" data-step="0">
                            <div class="form-group row">
                                <div class="col-md-4">
                                    <label for="claim_reference">Reference de la réclamtion</label>
                                    <input readonly type="text" id="claim_reference" name="claim_reference" class="form-control"
                                         value="{{ $claim->claim_reference }}" required>
                                    <span class="text-danger">@error('claim_reference'){{ $message }}@enderror</span>
                                </div>
                                <div class="col-md-4">
                                    <label for="claim_date">Date de le réclamation</label>
                                    <input type="date" id="claim_date" name="claim_date" value="{{ $claim->claim_date->format('Y-m-d') }}" class="form-control" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label for="nature">Cause de la réclamation</label>
                                    <select id="nature" name="nature" data-placeholder="Sélectionnez...." class="form-select select-basic" required>
                                        <option value=""></option>
                                        @foreach ($claimCases as $item)
                                            <option value="{{ $item }}" {{ old('nature') == $item ? 'selected' : '' }}>{{ $item }}</option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger">@error('nature'){{ $message }}@enderror</span>
                                </div>
                            </div>
                        </div>

                        <div class="wizard-step d-none" data-step="1">
                            <div class="app-divider-v dashed">
                                <p class="badge bg-primary text-white">Joint la première description du ticket</p>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-4">
                                    <label for="play_date required">Date & heure du jeu</label>
                                    <input type="datetime-local" id="play_date" name="play_date" value="{{ old('play_date') }}"
                                        class="form-control" required>
                                    <span class="text-danger">@error('play_date'){{ $message }}@enderror</span>
                                </div>
                                <div class="col-md-4">
                                    <label for="expire_date">Date d'expiration</label>
                                    <input type="datetime-local" name="expire_date" value="{{ old('expire_date') }}" id="expire_date" class="form-control" required>
                                    <span class="text-danger">@error('expire_date'){{ $message }}@enderror</span>
                                </div>
                                <div class="col-md-4">
                                    <label for="game_type">Type de jeu</label>
                                    <div class="d-flex">
                                        <select id="game_type" name="game_type" class="select-example form-select select-basic"
                                            data-placeholder="Sélectionner un type de jeu" required>
                                            
                                        </select>
                                        <a class="btn btn-primary" data-bs-target="#exampleModalDefault" data-bs-toggle="modal"><i
                                            class="ph-light ph-plus"></i></a>
                                    </div>
                                    
                                    <span class="text-danger">@error('game_type'){{ $message }}@enderror</span>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-md-4">
                                    <label for="amount">Prix du ticket</label>
                                    <input type="number" value="{{ old('amount') }}" min="0" id="amount" name="amount" class="form-control"
                                        placeholder="25000" required>
                                    <span class="text-danger">@error('amount'){{ $message }}@enderror</span>
                                </div>
                                {{-- <div class="col-md-3">
                                    <label for="">Ticket <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="ticket_number" value="{{ $claim->ticket_number }}" readonly>
                                </div> --}}
                                <div class="col-md-4">
                                    <label for="gain">Le Gain</label>
                                    <input type="number" min="0" value="{{ old('gain') }}" id="gain" name="gain"
                                        class="form-control" placeholder="50000" required>
                                    <span class="text-danger">@error('gain'){{ $message }}@enderror</span>
                                </div>
                                <div class="col-md-4">
                                    <label for="ticket_referenceId">Reference</label>
                                    <input type="text" value="{{ old('ticket_referenceId') }}" id="ticket_referenceId" name="ticket_referenceId" class="form-control"
                                        placeholder="25207133110" required>
                                    <span class="text-danger">@error('ticket_referenceId'){{ $message }}@enderror</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-check d-flex mt-3">
                                        <input class="form-check-input" id="flexCheckIndeterminate" type="checkbox"
                                            name="gain_disponible">
                                        <label class="form-check-label ms-2" for="flexCheckIndeterminate">
                                            Le gain est toujours disponible <i class="ph-light ph-question text-muted"></i>
                                        </label>
                                    </div>                                            
                                    <span class="text-danger">@error('gain_disponible'){{ $message }}@enderror</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-check d-flex mt-3">
                                        <input class="form-check-input" id="flexCheckInPartner" type="checkbox"
                                            name="partner_advice">
                                        <label class="form-check-label ms-2" for="flexCheckInPartner">Avis du partenaire
                                            technique attendu</label>
                                    </div>
                                    <span class="text-danger">@error('partner_advice'){{ $message }}@enderror</span>
                                </div>
                            </div>
                        </div>

                        <div class="wizard-step d-none" data-step="2">
                            <div class="app-divider-v dashed">
                                <p class="badge bg-primary text-white">Joint la capture du ticket</p>
                            </div>
                            <div class="row file-uploader-box">
                                <div class="col-md-6">
                                    <label for="">Capture de la description</label>
                                    <input type="file" class="form-control" name="description_capture" id="description_capture" required>
                                    <span class="text-danger">@error('description_capture'){{ $message }}@enderror</span>
                                    @if (old('description_capture'))
                                        <div class="mt-2" style="border: 2px dotted #cbd5e1;">
                                            <img src="{{ old('description_capture') }}" class="img-fluid p-2" alt="Aperçu capture de la description">
                                        </div>
                                    @else
                                        <div class="mt-2 d-none" id="description_preview_box" style="border: 2px dotted #cbd5e1;">
                                            <img id="description_preview" class="img-fluid p-2" alt="Aperçu capture de la description">
                                        </div>
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <label for="ticket_file">Capture du ticket</label>
                                    <input type="file" id="ticket_file" name="ticket_file" class="form-control"
                                        accept="image/*" required>
                                    <span class="text-danger">@error('ticket_file'){{ $message }}@enderror</span>
                                    <div class="mt-2 d-none" id="ticket_preview_box" style="border: 2px dotted #cbd5e1;">
                                        <img id="ticket_preview" class="img-fluid p-2" alt="Aperçu ticket">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-12 d-flex justify-content-between">
                                <button type="button" class="btn btn-outline-secondary" id="btnPrev" disabled> <i
                                        class="ph-light ph-arrow-left"></i> Précédent</button>
                                <div>
                                    <button type="button" class="btn btn-outline-primary" id="btnNext">Suivant <i
                                            class="ph-light ph-arrow-right"></i></button>
                                    <button class="btn btn-primary d-none" id="btnSubmit" type="submit"> 
                                        {{-- @if (isset($claim))
                                            <i class="ph-light ph-floppy-disk"></i> Mettre à jour
                                        @else --}}
                                            <i class="ph-light ph-cloud-upload"></i> Enregistrer
                                        {{-- @endif --}}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal for adding new game type -->
    <div aria-hidden="true" aria-labelledby="exampleModalDefault" class="modal fade" id="exampleModalDefault" tabindex="-1">
        <div class="modal-dialog app_modal_md">
            <div class="modal-content">
                <div class="modal-header bg-primary-800">
                    <h1 class="modal-title fs-5 text-white" id="exampleModalDefault13">Enregistrer nouveau type de jeu</h1>
                    <button aria-label="Close" class="fs-5 border-0 bg-none text-white" data-bs-dismiss="modal"
                        type="button"><i class="ph-light ph-x-circle fs-3"></i></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form action="" class="app-form" id="journalForm">
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <label for="">Libellé <span class="text-danger">*</span></label>
                                    <input type="text" name="title" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group row mt-2">
                                <div class="col-md-12">
                                    <label for="">Description</label>
                                    <textarea name="description" id="description" class="form-control"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-light-primary" type="button" id="jrSubmitBtn"><i
                            class="ph-light ph-cloud-arrow-down"></i> &nbsp;Enregistrer</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            // Chargement initial des journaux
            getAllJournal();

            $("#jrSubmitBtn").on("click", function () {
                var form = document.getElementById('journalForm');
                
                if (form.checkValidity()) {
                    var formData = {
                        title: $('input[name="title"]').val(),
                        description: $('#description').val(),
                        _token: $('meta[name="csrf-token"]').attr('content') // Ajout direct du token dans les data
                    };

                    $.ajax({
                        url: "{{ route('reclamation.store.type.jeu') }}",
                        method: 'POST',
                        data: formData,
                        beforeSend: function() {
                            // Désactiver le bouton pendant l'envoi
                            $("#jrSubmitBtn").prop('disabled', true).html('<i class="ph-light ph-spinner ph-spin"></i> Enregistrement...');
                        },
                        success: function (response) {
                            $('#exampleModalDefault').modal('hide');
                            form.reset();
                            
                            // Rafraîchir la liste sans délai inutile
                            getAllJournal();
                            
                            Toastify({
                                text: "Type de jeu créé avec succès",
                                duration: 3000,
                                close: true,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "#4CAF50"
                            }).showToast();
                        },
                        error: function (xhr) {
                            let errorMessage = "Une erreur est survenue";
                            if (xhr.responseJSON && xhr.responseJSON.errors) {
                                errorMessage = Object.values(xhr.responseJSON.errors).join('<br>');
                            }
                            
                            Toastify({
                                text: errorMessage,
                                duration: 3000,
                                close: true,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "#f44336"
                            }).showToast();
                        },
                        complete: function() {
                            $("#jrSubmitBtn").prop('disabled', false).html('<i class="ph-light ph-cloud-arrow-down"></i> &nbsp;Enregistrer');
                        }
                    });
                } else {
                    form.reportValidity();
                }
            });

            function getAllJournal() {
                $.ajax({
                    url: "{{ route('reclamation.type.jeu') }}",
                    method: 'GET',
                    success: function(response) {
                        console.log(response);
                        // Récupérer l'ancienne valeur sélectionnée
                        const oldValue = "{{ old('game_type') }}";
                        
                        // Vider la liste avant de la remplir
                        $("#game_type").empty().append('<option value="">Sélectionner un type de jeu</option>');

                        $.each(response, function(i, data) {
                            const option = `<option value="${data.id}" ${oldValue == data.id ? 'selected' : ''}>${data.name}</option>`;
                            $("#game_type").append(option);
                        });
                        
                        // Si il y a une ancienne valeur, la sélectionner
                        if (oldValue) {
                            $("#game_type").val(oldValue);
                        }
                    },
                    error: function(xhr) {
                        console.error("Erreur lors du chargement des types de jeu", xhr);
                    }
                });
            }
        });
    </script>
    <script>
        (function () {
            const steps = Array.from(document.querySelectorAll('.wizard-step'));
            const stepTabs = Array.from(document.querySelectorAll('#wizard-steps .nav-link'));
            const btnPrev = document.getElementById('btnPrev');
            const btnNext = document.getElementById('btnNext');
            const btnSubmit = document.getElementById('btnSubmit');
            let currentStep = 0;

            // Fonction pour détecter les erreurs de validation et déterminer le step à afficher
            function detectValidationErrorsAndShowStep() {
                const errorElements = document.querySelectorAll('.text-danger');
                let firstErrorStep = 0;
                let hasValidationErrors = false;
                
                console.log('Détection des erreurs de validation...');
                console.log('Nombre d\'éléments d\'erreur trouvés:', errorElements.length);
                
                // Parcourir tous les éléments d'erreur pour trouver le premier
                for (let errorElement of errorElements) {
                    if (errorElement.textContent.trim() !== '') {
                        hasValidationErrors = true;
                        console.log('Erreur trouvée:', errorElement.textContent.trim());
                        
                        // Trouver le champ parent de cette erreur
                        const fieldName = errorElement.previousElementSibling?.name || 
                                        errorElement.previousElementSibling?.id ||
                                        errorElement.parentElement?.querySelector('input, select, textarea')?.name ||
                                        errorElement.parentElement?.querySelector('input, select, textarea')?.id;
                        
                        console.log('Nom du champ avec erreur:', fieldName);
                        
                        if (fieldName) {
                            // Déterminer dans quel step se trouve ce champ
                            const stepIndex = getFieldStepIndex(fieldName);
                            console.log('Step correspondant au champ:', stepIndex);
                            
                            if (stepIndex !== -1) {
                                firstErrorStep = stepIndex;
                                break;
                            }
                        }
                    }
                }
                
                console.log('Erreurs de validation trouvées:', hasValidationErrors);
                console.log('Premier step avec erreur:', firstErrorStep);
                
                // Afficher le step contenant l'erreur seulement s'il y a des erreurs de validation
                if (hasValidationErrors) {
                    if (firstErrorStep !== currentStep) {
                        console.log('Changement de step de', currentStep, 'vers', firstErrorStep);
                        currentStep = firstErrorStep;
                        showStep(currentStep);
                    }
                    
                    // Mettre en évidence visuellement les champs avec erreur
                    highlightErrorFields();
                }
            }
            
            // Fonction pour déterminer dans quel step se trouve un champ
            function getFieldStepIndex(fieldName) {
                const fieldMappings = {
                    // Step 0: Réclamation
                    'claim_reference': 0,
                    'claim_date': 0,
                    'nature': 0,
                    
                    // Step 1: Détails du jeu
                    'play_date': 1,
                    'expire_date': 1,
                    'game_type': 1,
                    'amount': 1,
                    'gain': 1,
                    'ticket_referenceId': 1,
                    'gain_disponible': 1,
                    'partner_advice': 1,
                    
                    // Step 2: Pièces
                    'description_capture': 2,
                    'ticket_file': 2
                };
                
                return fieldMappings[fieldName] !== undefined ? fieldMappings[fieldName] : -1;
            }
            
            // Fonction pour restaurer les anciennes valeurs des checkboxes
            function restoreOldCheckboxValues() {
                // Restaurer gain_disponible
                const gainDisponibleOld = "{{ old('gain_disponible') }}";
                if (gainDisponibleOld === 'on' || gainDisponibleOld === '1') {
                    const checkbox = document.getElementById('flexCheckIndeterminate');
                    if (checkbox) {
                        checkbox.checked = true;
                    }
                }
                
                // Restaurer partner_advice
                const partnerAdviceOld = "{{ old('partner_advice') }}";
                if (partnerAdviceOld === 'on' || partnerAdviceOld === '1') {
                    const checkbox = document.getElementById('flexCheckInPartner');
                    if (checkbox) {
                        checkbox.checked = true;
                    }
                }
            }
            
            // Fonction pour mettre en évidence les champs avec erreur
            function highlightErrorFields() {
                const errorElements = document.querySelectorAll('.text-danger');
                const stepErrors = new Set(); // Pour tracker quels steps ont des erreurs
                
                errorElements.forEach(errorElement => {
                    if (errorElement.textContent.trim() !== '') {
                        // Trouver le champ parent
                        const field = errorElement.previousElementSibling || 
                                    errorElement.parentElement?.querySelector('input, select, textarea');
                        
                        if (field) {
                            // Ajouter une classe pour mettre en évidence
                            field.classList.add('is-invalid');
                            
                            // Marquer le step comme ayant des erreurs
                            const stepElement = field.closest('.wizard-step');
                            if (stepElement) {
                                stepElement.classList.add('has-errors');
                                const stepIndex = parseInt(stepElement.dataset.step);
                                stepErrors.add(stepIndex);
                            }
                        }
                    }
                });
                
                // Marquer les onglets correspondants avec des erreurs
                stepTabs.forEach((tab, index) => {
                    if (stepErrors.has(index)) {
                        tab.classList.add('has-errors');
                    } else {
                        tab.classList.remove('has-errors');
                    }
                });
                
                // L'alerte sera gérée par updateValidationAlertForCurrentStep() lors du changement de step
            }
            
            // Fonction pour afficher l'alerte de validation
            function showValidationAlert(totalErrors, stepErrors) {
                // Cette fonction est maintenant principalement utilisée pour la détection initiale
                // La logique principale est dans updateValidationAlertForCurrentStep()
                updateValidationAlertForCurrentStep();
            }

            function showStep(index) {
                steps.forEach((el, i) => {
                    if (i === index) {
                        el.classList.remove('d-none');
                    } else {
                        el.classList.add('d-none');
                    }
                });
                stepTabs.forEach((tab, i) => {
                    const isActive = i === index;
                    tab.classList.toggle('active', isActive);
                    tab.classList.toggle('bg-primary', isActive);
                    tab.classList.toggle('text-white', isActive);
                    tab.classList.toggle('has-errors', false); // Reset has-errors for all tabs
                });
                btnPrev.disabled = index === 0;
                const isLast = index === steps.length - 1;
                btnNext.classList.toggle('d-none', isLast);
                btnSubmit.classList.toggle('d-none', !isLast);
                
                // Mettre à jour l'alerte de validation pour le nouveau step
                updateValidationAlertForCurrentStep();
            }
            
            // Fonction pour mettre à jour l'alerte de validation pour le step courant
            function updateValidationAlertForCurrentStep() {
                const currentStepElement = document.querySelector(`[data-step="${currentStep}"]`);
                if (currentStepElement) {
                    const currentStepErrors = currentStepElement.querySelectorAll('.text-danger');
                    let hasErrors = false;
                    
                    currentStepErrors.forEach(errorElement => {
                        if (errorElement.textContent.trim() !== '') {
                            hasErrors = true;
                        }
                    });
                    
                    if (hasErrors) {
                        // Recréer l'alerte pour le step courant
                        const stepNames = ['Réclamation', 'Détails du jeu', 'Pièces'];
                        const stepName = stepNames[currentStep];
                        const errorCount = currentStepErrors.length;
                        
                        let alertElement = document.getElementById('validation-alert');
                        if (!alertElement) {
                            alertElement = document.createElement('div');
                            alertElement.id = 'validation-alert';
                            alertElement.className = 'alert alert-danger alert-dismissible fade show';
                        }
                        
                        alertElement.innerHTML = `
                            <i class="ph-light ph-warning-circle me-2"></i>
                            <strong>Attention !</strong> Il y a ${errorCount} erreur(s) de validation dans le step courant.
                            <div class="mt-2 small"><br>• Step ${currentStep + 1} (${stepName}): ${errorCount} erreur(s) à corriger</div>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        `;
                        
                        // Insérer l'alerte si elle n'existe pas
                        if (!document.getElementById('validation-alert')) {
                            const breadcrumb = document.querySelector('.app-line-breadcrumbs').closest('.row');
                            breadcrumb.parentNode.insertBefore(alertElement, breadcrumb.nextSibling);
                        }
                    } else {
                        // Masquer l'alerte si le step courant n'a pas d'erreurs
                        const alertElement = document.getElementById('validation-alert');
                        if (alertElement) {
                            alertElement.remove();
                        }
                    }
                }
            }

            function isFilled(id) {
                const el = document.getElementById(id);
                return el && String(el.value).trim() !== '';
            }

            function validateStep(index) {
                switch (index) {
                    case 0:
                        return isFilled('nature');
                    {{-- case 1:
                        return isFilled('first_name') && isFilled('last_name') && isFilled('tel') && isFilled('npi'); --}}
                    case 1:
                        return isFilled('play_date') && isFilled('expire_date') && isFilled('game_type') &&
                            isFilled('amount') && isFilled('gain') && isFilled('ticket_referenceId');
                    case 2:
                        const ticket = document.getElementById('ticket_file');
                        return ticket && ticket.files && ticket.files.length > 0;
                    default:
                        return true;
                }
            }

            btnNext && btnNext.addEventListener('click', function () {
                if (!validateStep(currentStep)) {
                    // alert('Veuillez remplir correctement les champs requis avant de continuer.');
                    Toastify({
                        text: "Veuillez remplir correctement les champs requis avant de continuer.",
                        duration: 5000,
                        close: true,
                        gravity: "top",
                        position: "center",
                        backgroundColor: "#eb382f"
                    }).showToast();
                    return;
                }
                if (currentStep < steps.length - 1) {
                    currentStep += 1;
                    showStep(currentStep);
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            });

            btnPrev && btnPrev.addEventListener('click', function () {
                if (currentStep > 0) {
                    currentStep -= 1;
                    showStep(currentStep);
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            });

            // File previews
            function bindPreview(inputId, boxId, imgId) {
                const input = document.getElementById(inputId);
                const box = document.getElementById(boxId);
                const img = document.getElementById(imgId);
                if (!input || !box || !img) return;
                input.addEventListener('change', function () {
                    const file = input.files && input.files[0];
                    if (!file) { box.classList.add('d-none'); return; }
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        img.src = e.target.result;
                        box.classList.remove('d-none');
                    };
                    reader.readAsDataURL(file);
                });
            }

            bindPreview('description_capture', 'description_preview_box', 'description_preview');
            bindPreview('ticket_file', 'ticket_preview_box', 'ticket_preview');

            // Initialisation : détecter les erreurs de validation et afficher le bon step
            // Restaurer les anciennes valeurs des checkboxes
            restoreOldCheckboxValues();
            
            // Après un court délai pour s'assurer que le DOM est complètement chargé
            // Vérifier s'il y a des erreurs de validation et afficher le step correspondant
            setTimeout(() => {
                const hasValidationErrors = document.querySelectorAll('.text-danger').length > 0;
                if (hasValidationErrors) {
                    detectValidationErrorsAndShowStep();
                } else {
                    // Si pas d'erreurs, afficher le step par défaut
                    showStep(currentStep);
                }
            }, 100);
            
            // Ajouter des event listeners sur les onglets pour permettre la navigation
            stepTabs.forEach((tab, index) => {
                tab.addEventListener('click', function() {
                    // Permettre la navigation vers n'importe quel step
                    currentStep = index;
                    showStep(currentStep);
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                });
            });
            
            // Restaurer les anciennes valeurs des checkboxes
            restoreOldCheckboxValues();
            
            // Ajouter des event listeners pour nettoyer les erreurs quand l'utilisateur corrige
            document.addEventListener('input', function(e) {
                if (e.target.matches('input, select, textarea')) {
                    // Retirer la classe d'erreur du champ
                    e.target.classList.remove('is-invalid');
                    
                    // Retirer le message d'erreur s'il existe
                    const errorSpan = e.target.parentElement.querySelector('.text-danger');
                    if (errorSpan && errorSpan.textContent.trim() !== '') {
                        errorSpan.textContent = '';
                    }
                    
                    // Vérifier si le step n'a plus d'erreurs
                    const stepElement = e.target.closest('.wizard-step');
                    if (stepElement) {
                        const hasErrors = stepElement.querySelectorAll('.text-danger').length > 0;
                        if (!hasErrors) {
                            stepElement.classList.remove('has-errors');
                            
                            // Mettre à jour l'onglet correspondant
                            const stepIndex = parseInt(stepElement.dataset.step);
                            const tab = stepTabs[stepIndex];
                            if (tab) {
                                tab.classList.remove('has-errors');
                            }
                        }
                    }
                }
            });
            
            // Ajouter un event listener pour les changements de fichiers
            document.addEventListener('change', function(e) {
                if (e.target.matches('input[type="file"]')) {
                    // Retirer la classe d'erreur du champ de fichier
                    e.target.classList.remove('is-invalid');
                    
                    // Retirer le message d'erreur s'il existe
                    const errorSpan = e.target.parentElement.querySelector('.text-danger');
                    if (errorSpan && errorSpan.textContent.trim() !== '') {
                        errorSpan.textContent = '';
                    }
                    
                    // Vérifier si le step n'a plus d'erreurs
                    const stepElement = e.target.closest('.wizard-step');
                    if (stepElement) {
                        const hasErrors = stepElement.querySelectorAll('.text-danger').length > 0;
                        if (!hasErrors) {
                            stepElement.classList.remove('has-errors');
                            
                            // Mettre à jour l'onglet correspondant
                            const stepIndex = parseInt(stepElement.dataset.step);
                            const tab = stepTabs[stepIndex];
                            if (tab) {
                                tab.classList.remove('has-errors');
                            }
                        }
                    }
                }
            });
        })();
    </script>
@endsection