@extends('layouts.front')
@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/form.css') }}">
<style>
    /* Styles pour le stepper */
    .stepper {
        display: flex;
        justify-content: space-between;
        margin: 2rem 0 3rem;
        position: relative;
        flex-wrap: wrap;
    }

    .stepper::before {
        content: '';
        position: absolute;
        top: 15px;
        left: 0;
        right: 0;
        height: 2px;
        background: #e0e0e0;
        z-index: 1;
    }

    .step {
        position: relative;
        z-index: 2;
        text-align: center;
        width: 25%;
        min-width: 120px;
        margin-bottom: 1rem;
    }

    .step-number {
        width: 30px;
        height: 30px;
        background: #e0e0e0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.5rem;
        color: #fff;
        font-weight: bold;
    }

    .step.active .step-number {
        background: #4CAF50;
    }

    .step.completed .step-number {
        background: #4CAF50;
    }

    .step.completed .step-number::after {
        content: '✓';
    }

    .step-label {
        font-size: 0.8rem;
        color: #666;
    }

    .step.active .step-label {
        font-weight: bold;
        color: #333;
    }

    .form-section {
        display: none;
        animation: fadeIn 0.3s ease-in-out;
        background: #fff;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 0 15px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

    .form-section.active {
        display: block;
    }

    .form-navigation {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;
        padding: 1.5rem 0;
        border-top: 1px solid #eee;
    }
    
    .section-header {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #f0f0f0;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
@endpush

@section('content')
    <div class="container py-3">
        @if($errors->any())
            <div class="alert alert-danger">
                <h5><i class="fas fa-exclamation-triangle"></i> Erreur de validation</h5>
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        
        <!-- Form Container -->
        <div class="form-container">
            <div class="form-title">
                <i class="fas fa-exclamation-circle"></i> @lang('plainte.complaint_form')
            </div>
            
            <!-- Stepper -->
            <div class="stepper">
                <div class="step active" data-step="1">
                    <div class="step-number">1</div>
                    <div class="step-label">@lang('plainte.identity')</div>
                </div>
                <div class="step" data-step="2">
                    <div class="step-number">2</div>
                    <div class="step-label">@lang('plainte.complaint_details')</div>
                </div>
                <div class="step" data-step="3">
                    <div class="step-number">3</div>
                    <div class="step-label">@lang('plainte.attachments')</div>
                </div>
                <div class="step" data-step="4">
                    <div class="step-number">4</div>
                    <div class="step-label">@lang('plainte.confirmation')</div>
                </div>
            </div>
            {{-- <!-- Progress Bar -->
            <div class="progress-container">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div class="progress-text" id="progressText">0% @lang('plainte.complete')</div>
            </div> --}}
            
            <!-- Form Content -->
            <form id="fundingForm" action="{{ route('plaintes.store') }}" method="POST" enctype="multipart/form-data" class="form-content my-3 needs-validation" novalidate>
                @csrf
                <input type="hidden" name="canal_reception" value="web" >
                <!-- Section 1: Informations du plaignant -->
                <div class="form-section active" id="section-1">
                    <div class="section-header">
                        <i class="fas fa-user"></i>
                        <h3>1. @lang('plainte.complainant_information')</h3>
                    </div>
                    <div class="form-row">
                        {{-- Anonyme --}}
                        <div class="form-group">
                            <label class="form-label required">@lang('plainte.anonymous_complaint')</label>
                            <select name="est_anonyme" id="est_anonyme" class="form-control" required>
                                <option {{ old('est_anonyme') == '' ? 'selected' : '' }} value="">@lang('plainte.select')</option>
                                <option {{ old('est_anonyme') == '0' ? 'selected' : '' }} value="0">@lang('plainte.no')</option>
                                <option {{ old('est_anonyme') == '1' ? 'selected' : '' }} value="1">@lang('plainte.yes')</option>
                            </select>
                        </div>
                        {{-- Qui etes-vous ? --}}
                        <div class="form-group">
                            <label class="form-label required">@lang('plainte.who_are_you')</label>
                            <select name="plaignant[type]" id="type_plaignant" class="form-control" required>
                                <option {{ old('plaignant.type') == '' ? 'selected' : '' }} value="">@lang('plainte.select')</option>
                                <option {{ old('plaignant.type') == 'individu' ? 'selected' : '' }} value="individu">@lang('plainte.individual')</option>
                                <option {{ old('plaignant.type') == 'groupe' ? 'selected' : '' }} value="groupe">@lang('plainte.group')</option>
                                <option {{ old('plaignant.type') == 'communaute' ? 'selected' : '' }} value="communaute">@lang('plainte.community')</option>
                            </select>
                        </div>
                        
                    </div>
                    <div id="non_anonyme" class="d-none">
                        
                        <div class="form-row individu">
                            <div class="form-group">
                                <label class="form-label required">@lang('plainte.last_name')</label>
                                <input type="text" value="{{ old('plaignant.nom') }}" name="plaignant[nom]" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label">@lang('plainte.first_name')</label>
                                <input type="text" value="{{ old('plaignant.prenom') }}" name="plaignant[prenom]" class="form-control" required>
                            </div>
                        </div>
                        <div class="form-row individu">
                            <div class="form-group">
                                <label class="form-label">@lang('plainte.gender')</label>
                                <select name="plaignant[genre]" class="form-control" required>
                                    <option {{ old('plaignant.genre') == '' ? 'selected' : '' }} value="">@lang('plainte.select')</option>
                                    <option {{ old('plaignant.genre') == 'M' ? 'selected' : '' }} value="M">@lang('plainte.male')</option>
                                    <option {{ old('plaignant.genre') == 'F' ? 'selected' : '' }} value="F">@lang('plainte.female')</option>
                                </select>
                            </div>
                            <div class="form-group individu">
                                <label class="form-label required">@lang('plainte.address')</label>
                                <input type="text" name="plaignant[adresse]" value="{{ old('plaignant.adresse') }}" class="form-control" required>
                            </div>
                        </div>
                        <div class="form-group groupe">
                                <label class="form-label">@lang('plainte.group_name')</label>
                            <input type="text" name="plaignant[nom]" value="{{ old('plaignant.nom') }}" class="form-control" required>
                        </div>
                        <div class="form-group groupe">
                            <label class="form-label">@lang('plainte.address')</label>
                            <input type="text" value="{{ old('plaignant.adresse') }}" name="plaignant[adresse]" class="form-control" required>
                        </div>
                        
                        <div class="form-group communaute">
                                <label class="form-label">@lang('plainte.community_name')</label>
                            <input type="text" value="{{ old('plaignant.nom') }}" name="plaignant[nom]" class="form-control" required>
                        </div>

                        <div class="form-group communaute">
                            <label class="form-label">@lang('plainte.address')</label>
                        </div>
                        <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">@lang('messages.phone')</label>
                            <input type="tel" name="plaignant[telephone]" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="form-label">@lang('messages.email')</label>
                            <input type="email" name="plaignant[email]" class="form-control" required>
                        </div>
                        
                    </div>
                        
                    </div>
                    {{-- Anonyme --}}
                    <div class="form-group d-none" id="anonyme">
                        <label class="form-label required">@lang('plainte.email')</label>
                        <input type="email" value="{{ old('plaignant.email') }}" name="plaignant[email]" class="form-control" required>
                        <small class="form-text text-muted">@lang('plainte.email_hint')</small>
                    </div>
                    
                    <!-- Boutons de navigation -->
                    <div class="form-navigation">
                        <button type="button" class="btn btn-secondary" disabled>@lang('plainte.previous')</button>
                        <button type="button" class="btn btn-primary next-btn" data-next="2">@lang('plainte.next')</button>
                    </div>
                </div>
                <!-- Section 2: Détails de la Plainte -->
                <div class="form-section" id="section-2">
                    <div class="section-header">
                        <i class="fas fa-info-circle"></i>
                        <h3>2. @lang('plainte.complaint_details')</h3>
                    </div>
                    {{-- Type de plainte --}}
                    <div class="form-group">
                        <label class="form-label required">@lang('plainte.complaint_type')</label>
                        <select name="type_plainte" class="form-control" required>
                            <option {{ old('type_plainte') == '' ? 'selected' : '' }} value="">@lang('plainte.select')</option>
                            <option {{ old('type_plainte') == 'environnementale' ? 'selected' : '' }} value="environnementale">@lang('plainte.environmental')</option>
                            <option {{ old('type_plainte') == 'sociale' ? 'selected' : '' }} value="sociale">@lang('plainte.social')</option>
                            <option {{ old('type_plainte') == 'genre' ? 'selected' : '' }} value="genre">@lang('plainte.other')</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">@lang('plainte.complaint_object')</label>
                        <input type="text" name="objet" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label required">@lang('plainte.complaint_description')</label>
                        <textarea name="description" class="form-control textarea" rows="5" required placeholder="@lang('plainte.describe_complaint_placeholder')"></textarea>
                    </div>
                    <div class="form-navigation">
                        <button type="button" class="btn btn-secondary prev-btn" data-prev="1">@lang('plainte.previous')</button>
                        <button type="button" class="btn btn-primary next-btn" data-next="3">@lang('plainte.next')</button>
                    </div>
                </div>
                <!-- Section 3: Pièces Jointes -->
                <div class="form-section" id="section-3">
                    <div class="section-header">
                        <i class="fas fa-paperclip"></i>
                        <h3>3. @lang('plainte.attachments')</h3>
                    </div>

                    <div class="form-group">
                        <label class="form-label">@lang('plainte.complaint_supporting_documents')</label>
                        <input type="file" id="fileInput" name="preuves[]" class="file-input" 
                               accept=".pdf,.doc,.docx,.xls,.xlsx" multiple>
                        <div class="file-upload-area" onclick="document.getElementById('fileInput').click()">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <h4>@lang('plainte.click_to_upload')</h4>
                            <p>@lang('plainte.accepted_formats'): PDF, DOC, DOCX, XLS, XLSX</p>
                            <p style="font-size: 0.9rem; color: #666;">@lang('plainte.max_file_size')</p>
                        </div>
                        <div class="file-list" id="fileList"></div>
                        <div class="help-text">
                            <i class="fas fa-info-circle"></i>
                            @lang('plainte.multiple_files_info')
                        </div>
                    </div>
                    <div class="form-navigation">
                        <button type="button" class="btn btn-secondary prev-btn" data-prev="2">@lang('plainte.previous')</button>
                        <button type="button" class="btn btn-primary next-btn" data-next="4">@lang('plainte.next')</button>
                    </div>
                </div>
                <!-- Section 4: Confirmation -->
                <div class="form-section" id="section-4">
                    <div class="section-header">
                        <i class="fas fa-check-circle"></i>
                        <h3>4. @lang('plainte.confirmation')</h3>
                    </div>
                    <div class="form-group">
                        <label class="form-label">@lang('plainte.confirmation_text')</label>
                        <p>@lang('plainte.confirmation_message')</p>
                    </div>
                    <div class="form-navigation">
                        <button type="button" class="btn btn-secondary prev-btn" data-prev="3">@lang('plainte.previous')</button>
                        <button type="submit" class="btn btn-success float-end">
                            <i class="fas fa-paper-plane"></i> @lang('plainte.submit')
                        </button>
                    </div>
                </div>
                <!-- Form Actions -->
                <div class="form-actions">
                    <a href="{{ route('home') }}" class="btn btn-secondary" >
                        <i class="fas fa-redo"></i>
                        @lang('plainte.cancel')
                    </a>
                </div>
            </form>
        </div>
    </div>

    

    
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Gestion de la navigation entre les étapes
        const formSections = document.querySelectorAll('.form-section');
        const prevBtns = document.querySelectorAll('.prev-btn');
        const nextBtns = document.querySelectorAll('.next-btn');
        const steps = document.querySelectorAll('.step');
        
        // Afficher la première section par défaut
        showSection(0);
        
        // Gestion du clic sur les boutons Suivant
        nextBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const currentSection = this.closest('.form-section');
                const nextSectionId = this.dataset.next;
                
                // Validation du formulaire avant de passer à l'étape suivante
                if (validateSection(currentSection)) {
                    currentSection.classList.remove('active');
                    document.getElementById(`section-${nextSectionId}`).classList.add('active');
                    updateStepper(nextSectionId);
                }
            });
        });
        
        // Gestion du clic sur les boutons Précédent
        prevBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const currentSection = this.closest('.form-section');
                const prevSectionId = this.dataset.prev;
                
                currentSection.classList.remove('active');
                document.getElementById(`section-${prevSectionId}`).classList.add('active');
                updateStepper(prevSectionId);
            });
        });
        
        // Fonction pour afficher une section spécifique
        function showSection(index) {
            formSections.forEach((section, i) => {
                if (i === index) {
                    section.classList.add('active');
                } else {
                    section.classList.remove('active');
                }
            });
            
            updateStepper(index + 1);
        }
        
        // Fonction pour mettre à jour le stepper
        function updateStepper(activeStep) {
            steps.forEach((step, index) => {
                const stepNumber = parseInt(step.dataset.step);
                
                if (stepNumber < activeStep) {
                    step.classList.add('completed');
                    step.classList.remove('active');
                } else if (stepNumber == activeStep) {
                    step.classList.add('active');
                    step.classList.remove('completed');
                } else {
                    step.classList.remove('active', 'completed');
                }
            });
            
            // Faire défiler vers le haut de la section
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
        
        // Fonction de validation des sections
        function validateSection(section) {
            // On vérifie si le champ est obligatoire, non disabled et visible
            const requiredFields = section.querySelectorAll('[required]:not(.d-none):not([disabled])');
            let isValid = true;
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    field.classList.add('is-invalid');
                    isValid = false;
                } else {
                    field.classList.remove('is-invalid');
                }
            });
            
            if (!isValid) {
                Swal.fire({
                    icon: 'error',
                    title: 'Champs obligatoires',
                    text: 'Veuillez remplir tous les champs obligatoires avant de continuer.',
                    confirmButtonColor: '#2ecc71'
                });
            }
            
            return isValid;
        }
        
        // Gestion du changement de type de plaignant
        const typePlaignant = document.getElementById('type_plaignant');
        if (typePlaignant) {
            typePlaignant.addEventListener('change', function() {
                const type = this.value;
                document.querySelectorAll('.individu, .groupe, .communaute').forEach(el => {
                    el.style.display = 'none';
                });
                
                if (type === 'individu') {
                    document.querySelectorAll('.individu').forEach(el => {
                        el.style.display = 'block';
                    });
                } else if (type === 'groupe') {
                    document.querySelectorAll('.groupe').forEach(el => {
                        el.style.display = 'block';
                    });
                } else if (type === 'communaute') {
                    document.querySelectorAll('.communaute').forEach(el => {
                        el.style.display = 'block';
                    });
                }
            });
            
            // Déclencher le changement au chargement si une valeur est déjà sélectionnée
            if (typePlaignant.value) {
                typePlaignant.dispatchEvent(new Event('change'));
            }
        }
        
        // Gestion de l'affichage des champs pour les plaintes anonymes
        const estAnonyme = document.getElementById('est_anonyme');
        const nonAnonymeSection = document.getElementById('non_anonyme');
        
        if (estAnonyme && nonAnonymeSection) {
            estAnonyme.addEventListener('change', function() {
                if (this.value === '0') {
                    nonAnonymeSection.classList.remove('d-none');
                } else {
                    nonAnonymeSection.classList.add('d-none');
                }
            });
            
            // Déclencher le changement au chargement si une valeur est déjà sélectionnée
            if (estAnonyme.value) {
                estAnonyme.dispatchEvent(new Event('change'));
            }
        }

    
        $("#est_anonyme,#type_plaignant").on('change', function() {

            $("#non_anonyme input,#non_anonyme select").attr('disabled', true);
            $("#anonyme input,#anonyme select").attr('disabled', true);
            
            if ($("#est_anonyme").val() == 1) {
                $("#anonyme").removeClass('d-none');
                $("#non_anonyme").addClass('d-none');
                $("#anonyme input,#anonyme select").removeAttr('disabled');
            }
            else {
                $("#non_anonyme").removeClass('d-none');
                $("#anonyme").addClass('d-none');
                $("#non_anonyme input,#non_anonyme select").removeAttr('disabled');

                $(".groupe").addClass('d-none');
                $(".communaute").addClass('d-none');
                $(".individu").addClass('d-none');
                $(".individu input,.individu select").attr('disabled', true);
                $(".groupe input,.groupe select").attr('disabled', true);
                $(".communaute input,.communaute select").attr('disabled', true);
                var type_plaignant=$("#type_plaignant").val();
                if (type_plaignant == 'individu') {
                    $(".individu").removeClass('d-none');
                    $(".individu input").removeAttr('disabled');
                    $(".individu select").removeAttr('disabled');
                }
                else if (type_plaignant == 'groupe') {
                    $(".groupe").removeClass('d-none');
                    $(".groupe input").removeAttr('disabled');
                    $(".groupe select").removeAttr('disabled');
                }
                else if (type_plaignant == 'communaute') {
                    $(".communaute").removeClass('d-none');
                    $(".communaute input").removeAttr('disabled');
                    $(".communaute select").removeAttr('disabled');
                }
            }
            
        });
    });
</script>
   <script>
    const form = document.getElementById('fundingForm');
    if (form) {
        form.addEventListener('submit', function() {
            Swal.fire({
                title: 'Soumission en cours',
                html: 'Traitement de votre plainte...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
        });
    }

// Gestion des champs conditionnels
// $(document).ready(function() {
//     // Gestion de l'affichage des champs en fonction du type de plaignant
//     function updateFormFields() {
//         const typePlaignant = $('#type_plaignant').val();
//         const estAnonyme = $('#est_anonyme').val();
        
//         // Masquer tous les champs conditionnels
//         $('.individu, .groupe, .communaute, #anonyme').addClass('d-none');
//         $('.individu input, .groupe input, .communaute input, #anonyme input').prop('disabled', true);
        
//         // Afficher les champs en fonction du type de plaignant
//         if (typePlaignant === 'individu') {
//             $('.individu').removeClass('d-none');
//             $('.individu input, .individu select').prop('disabled', false);
//         } else if (typePlaignant === 'groupe') {
//             $('.groupe').removeClass('d-none');
//             $('.groupe input, .groupe select').prop('disabled', false);
//         } else if (typePlaignant === 'communaute') {
//             $('.communaute').removeClass('d-none');
//             $('.communaute input, .communaute select').prop('disabled', false);
//         }
        
//         // Gestion des champs pour les plaintes anonymes
//         if (estAnonyme === '1') {
//             $('#anonyme').removeClass('d-none');
//             $('#anonyme input').prop('disabled', false);
//             $('.individu, .groupe, .communaute').addClass('d-none');
//             $('.individu input, .groupe input, .communaute input').prop('disabled', true);
//         } else if (estAnonyme === '0') {
//             $('#anonyme').addClass('d-none');
//             $('#anonyme input').prop('disabled', true);
//         }
//     }
    
//     // Écouteurs d'événements
//     $('#type_plaignant, #est_anonyme').on('change', updateFormFields);
    
//     // Mise à jour initiale
//     updateFormFields();
// });
        //     });
            
        //     const percentage = Math.round((filled / inputs.length) * 100);
        //     progressFill.style.width = percentage + '%';
        //     progressText.textContent = percentage + '% ' + '@lang('plainte.complete')';
        // }

        // Add event listeners to all form inputs
        // form.addEventListener('input', updateProgress);
        // form.addEventListener('change', updateProgress);

        // File upload handling
        const fileInput = document.getElementById('fileInput');
        const fileList = document.getElementById('fileList');
        let uploadedFiles = [];

        fileInput.addEventListener('change', function(e) {
            Array.from(e.target.files).forEach(file => {
                if (file.size > 10 * 1024 * 1024) {
                    alert(`@lang('plainte.file_too_large') ${file.name}`);
                    return;
                }
                
                if (!uploadedFiles.find(f => f.name === file.name)) {
                    uploadedFiles.push(file);
                    addFileToList(file);
                }
            });
            // updateProgress();
        });

        function addFileToList(file) {
            const fileItem = document.createElement('div');
            fileItem.className = 'file-item';
            fileItem.innerHTML = `
                <div class="file-item-info">
                    <i class="fas fa-file-${getFileIcon(file.name)}"></i>
                    <span>${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)</span>
                </div>
                <button type="button" class="remove-file" onclick="removeFile('${file.name}')">
                    <i class="fas fa-times"></i>
                </button>
            `;
            fileList.appendChild(fileItem);
        }

        function getFileIcon(filename) {
            const ext = filename.split('.').pop().toLowerCase();
            const icons = {
                'pdf': 'pdf',
                'doc': 'word',
                'docx': 'word',
                'xls': 'excel',
                'xlsx': 'excel'
            };
            return icons[ext] || 'alt';
        }

        function removeFile(filename) {
            uploadedFiles = uploadedFiles.filter(f => f.name !== filename);
            const items = fileList.querySelectorAll('.file-item');
            items.forEach(item => {
                if (item.textContent.includes(filename)) {
                    item.remove();
                }
            });
            // updateProgress();
        }




        // Validate numeric inputs
        const numericInputs = form.querySelectorAll('input[type="number"]');
        numericInputs.forEach(input => {
            input.addEventListener('input', function() {
                if (this.value < 0) {
                    this.value = 0;
                }
            });
        });

        

        // Initialize progress on load
        // updateProgress();

        // Smooth scroll to top button
        window.addEventListener('scroll', function() {
            const scrollBtn = document.getElementById('scrollTopBtn');
            if (!scrollBtn) {
                const btn = document.createElement('button');
                btn.id = 'scrollTopBtn';
                btn.innerHTML = '<i class="fas fa-arrow-up"></i>';
                btn.style.cssText = `
                    position: fixed;
                    bottom: 2rem;
                    right: 2rem;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background: linear-gradient(135deg, #2e8b57, #228b22);
                    color: white;
                    border: none;
                    cursor: pointer;
                    display: none;
                    align-items: center;
                    justify-content: center;
                    font-size: 1.2rem;
                    box-shadow: 0 4px 15px rgba(46, 139, 87, 0.3);
                    transition: all 0.3s ease;
                    z-index: 1000;
                `;
                btn.addEventListener('click', function() {
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                });
                document.body.appendChild(btn);
            }
            
            const scrollTopBtn = document.getElementById('scrollTopBtn');
            if (window.pageYOffset > 300) {
                scrollTopBtn.style.display = 'flex';
            } else {
                scrollTopBtn.style.display = 'none';
            }
        });
    </script> 
    <script>
        (function () {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }
                        form.classList.add('was-validated')
                    }, false)
                })
        })()
    </script>
@endpush