{{-- @extends('layouts.masteruser') --}}
@extends('layouts.master')

@section('title', 'Express54')

@section('content')

    <!--links-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
        ul#progressbar li.active::before, 
        ul#progressbar li.active::after {
            /*background: {{ $colorCode }};  /* Utilisation de la couleur du pays */
            color_: white !important;
        }
    </style>

    <!-- MultiStep Form -->
    <div class="stepper-body" style="min-height: calc(100vh - 110px);">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-11 col-sm-9 col-md-8 col-lg-8  text-center p-10 mt-3 mb-2">
                    <div class="card px-5 pt-4 pb-0 mt-3 mb-3">

                        <form id="msform" method="POST" action="{{ route('applicationSubmit') }}"
                            enctype="multipart/form-data">
                            @csrf

                            <ul id="progressbar">

                                <li class="active" id="collectdata"><strong>@lang('messages.collectdata')</strong></li>
                                <li id="documents"><strong>@lang('messages.documents')</strong></li>

                            </ul>

                            <div id="alert-container">
                                @if (Session('error'))
                                    <div class="alert alert-warning" role="alert">
                                        {{ Session('error') }}
                                    </div>
                                @endif

                                @if (Session('success'))
                                    <div class="alert alert-success" role="alert">
                                        {{ Session('success') }}
                                    </div>
                                @endif
                            </div>
                            <!-- alert time out  -->
                            <script>
                                document.addEventListener("DOMContentLoaded", function() {
                                    var alertContainer = document.getElementById("alert-container");
                                    if (alertContainer) {
                                        setTimeout(function() {
                                            alertContainer.remove();
                                        }, 5000);
                                    }
                                });
                            </script>
                            <br>

                            <!-- fieldsets -->
                            <fieldset id="collect_data">
                                <input type="hidden" id="parentServiceId" name="parentServiceId"
                                    value="{{ request('parentServiceId') }}">
                                <input type="hidden" name="childServiceId" value="{{ request('childServiceId') }}">

                                <!-- for getting selected child id using conditon -->
                                @php
                                    $selectedChild = request('childServiceId');
                                @endphp
                                <input type="hidden" name="selected_app_id" id="selected_app_id">

                                <!-- bourse -->
                                
                                <div class="form-group row">
                                    <label for="" class="col-sm-4 col-form-label text-end">@lang('messages.full_name')<span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="fname" name="fname" required>
                                    </div>
                                </div>
                            
                                <div class="form-group row">
                                    <label for="date_naissance"
                                        class="col-sm-4 col-form-label text-end">Date de naissance <span
                                            aria-hidden="true" class="required">*</span> : <span
                                            style="font-size:10px;color:red">@lang('messages.date_alert')</span></label>
                                    <div class="col-sm-6">
                                        <input type="date" class="form-control" id="date_naissance" name="date_naissance" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="lieu_naissance" class="col-sm-4 col-form-label text-end">Lieu de naissance<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="lieu_naissance" name="lieu_naissance" required>
                                    </div>
                                </div>

                                <div class="form-group row mb-3">
                                    <label for="pays_naissance" class="col-sm-4 col-form-label text-en">Pays de naissance <span
                                    aria-hidden="true" class="required">*</span></label>
                                    <div class="col-sm-6">
                                        <select name="pays_naissance" id="country_id" class="form-control" required>
                                            <option value="">Sélectionnez un pays</option>
                                        </select>
                                    </div>
                                </div>
                                <script>
                                    document.addEventListener('DOMContentLoaded', function () {
                                        const countrySelect = document.getElementById('country_id');

                                        const loadingOption = document.createElement('option');
                                        loadingOption.textContent = 'Chargement des pays...';
                                        loadingOption.disabled = true;
                                        loadingOption.selected = true;
                                        countrySelect.appendChild(loadingOption);

                                        function getFlagEmoji(countryCode) {
                                            const codePoints = countryCode
                                                .toUpperCase()
                                                .split('')
                                                .map(char => 127397 + char.charCodeAt());
                                            return String.fromCodePoint(...codePoints);
                                        }

                                        fetch('/user/pays')
                                            .then(response => {
                                                if (!response.ok) {
                                                    throw new Error('Erreur réseau');
                                                }
                                                return response.json();
                                            })
                                            .then(countries => {
                                                countrySelect.innerHTML = '';

                                                // Ajout manuel de "Côte d'Ivoire" en premier
                                                const coteOption = document.createElement('option');
                                                coteOption.value = 'Côte d\'Ivoire';
                                                coteOption.textContent = `${getFlagEmoji('CI')} Côte d'Ivoire`;
                                                countrySelect.appendChild(coteOption);

                                                // Option par défaut après
                                                const defaultOption = document.createElement('option');
                                                defaultOption.value = '';
                                                defaultOption.textContent = 'Sélectionnez un pays';
                                                countrySelect.appendChild(defaultOption);

                                                // Filtrer "Ivory Coast" et éviter de réajouter "Côte d'Ivoire"
                                                countries
                                                    .filter(country => country.name !== 'Ivory Coast' && country.name !== "Côte d'Ivoire")
                                                    .forEach(country => {
                                                        const option = document.createElement('option');
                                                        option.value = country.name;
                                                        option.textContent = `${getFlagEmoji(country.iso2)} ${country.name}`;
                                                        countrySelect.appendChild(option);
                                                    });
                                            })
                                            .catch(error => {
                                                console.error('Erreur lors de la récupération des pays:', error);
                                                countrySelect.innerHTML = '<option value="">Erreur lors du chargement des pays</option>';
                                            });
                                    });
                                    </script>


                                    <div class="form-group row">
                                        <label for="appartmentornumber"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.street')<span aria-hidden="true"
                                                class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="adresse"
                                                name="adresse" required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="telephone" class="col-sm-4 col-form-label text-end">@lang('messages.contact')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="telephone" name="telephone" required>
                                            <small id="telephoneError" style="color: red; display: none;"></small>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="" class="col-sm-4 col-form-label text-end">@lang('messages.passport_number')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="passport_number" name="passport_number"
                                                required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="" class="col-sm-4 col-form-label text-end">@lang('messages.bank_name')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="banque_name" name="banque_name"
                                                required>
                                        </div>
                                    </div>

                                <div class="form-group row">
                                    <label for="bank_account_number" class="col-sm-4 col-form-label text-end">@lang('messages.bank_account_number')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="bank_account_number" name="bank_account_number"
                                            required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="swift_iban_number" class="col-sm-4 col-form-label text-end">@lang('messages.number_swift')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="swift_iban_number" name="swift_iban_number"
                                            required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="email" class="col-sm-4 col-form-label text-end">@lang('messages.email')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="email" class="form-control" name="email" required>
                                        <span id="emailError" class="text-danger"></span>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="university" class="col-sm-4 col-form-label text-end">@lang('messages.university_name')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="university" class="form-control" name="university" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="filiere" class="col-sm-4 col-form-label text-end">@lang('messages.filiere')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="filiere" class="form-control" name="filiere" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="annee_detude" class="col-sm-4 col-form-label text-end">
                                        @lang('messages.study_year')
                                        <span aria-hidden="true" class="required">*</span> :
                                    </label>
                                    <div class="col-sm-6">
                                        <select name="annee_detude" id="annee_detude" class="form-control" required>
                                            @for ($year = now()->year; $year >= now()->year - 10; $year--)
                                                <option value="{{ $year }}-{{ $year + 1 }}">{{ $year }}-{{ $year + 1 }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div><br>

                                <div class="form-group row">
                                    <label for="dateannebourse"
                                        class="col-sm-4 col-form-label text-end">Date première année de bourse<span
                                            aria-hidden="true" class="required">*</span> : <span
                                            style="font-size:10px;color:red">@lang('messages.date_alert')</span></label>
                                    <div class="col-sm-6">
                                        <input type="date" class="form-control" id="dateanneebourse" name="dateanneebourse" required>
                                    </div>
                                </div>

                                <div class="form-group row mb-5">
                                    <label for="typebourse" class="col-sm-4 col-form-label text-end">
                                        Type de formation<span aria-hidden="true" class="required">*</span> :
                                        <span style="font-size:10px;color:red">Type de Bourse</span>
                                    </label>
                                    <div class="col-sm-6">
                                        <select class="form-control" id="typebourse" name="typebourse" required>
                                            <option value="">-- Sélectionnez --</option>
                                            <option value="these">Thèse</option>
                                            <option value="master">Master</option>
                                            <option value="grande_ecole">Grande École</option>
                                            <option value="classe_prepa_hec">Classe Prépa HEC</option>
                                            <option value="bourse_excellence">Bourse Excellence</option>
                                            <option value="ingenieur">Ingénieur</option>
                                            <option value="expertise_comptable">Expertise Comptable</option>
                                            <option value="classe_prepa_math">Classe Prépa Maths</option>
                                        </select>
                                    </div>
                                </div>

                                <h6 class="text-right">Parents </h6>
                                <div class="form-group row">
                                    <label for="nomparent"
                                        class="col-sm-4 col-form-label text-end">Nom complet du parent : <span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="nomparent" name="nomparent" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="contactparent" class="col-sm-4 col-form-label text-end">Contact du parent : <span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="contactparent" name="contactparent" required>
                                        <small id="contactparentError" style="color: red; display: none;"></small>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="emailparent" class="col-sm-4 col-form-label text-end">Email d'un parent : <span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="email" class="form-control" id="emailparent" name="emailparent" required>
                                        <span id="emailparentError" class="text-danger"></span>
                                    </div>
                                </div>

                                <h6 class="text-right">Personne à contacter en cas d'urgence </h6>
                                <div class="form-group row">
                                    <label for="nomtuteur"
                                        class="col-sm-4 col-form-label text-end">Nom complet du tuteur : <span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="nomtuteur" name="nomtuteur" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="contacttuteur" class="col-sm-4 col-form-label text-end">Contact du tuteur : <span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="contacttuteur" name="contacttuteur" required>
                                        <small id="contacttuteurError" style="color: red; display: none;"></small>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="emailtuteur" class="col-sm-4 col-form-label text-end">Email du tuteur : <span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="email" class="form-control" id="emailtuteur" name="emailtuteur" required>
                                        <span id="emailtuteurError" class="text-danger"></span>
                                    </div>
                                </div>
                            
                                <button type="button" id="previousButton1"
                                    class="btn rounded-pill btn-lg px-3 action-button-previous"
                                    style="background: {{ $colorCode }};"
                                    onmouseover="this.style.background='{{ $hovercolor }}';"
                                    onmouseout="this.style.background='{{ $colorCode }}';">
                                    <i class="fas fa-thin fa-angle-left"></i>
                                    @lang('messages.previous')</button>

                                <script>
                                    document.addEventListener("DOMContentLoaded", function() {
                                        const previousButton = document.getElementById('previousButton1');
                                        previousButton.addEventListener('click', function() {
                                            const url = '/user/steper/mainservice';
                                            window.location.href = url;
                                        });
                                    });
                                </script>

                                <button type="button" name="next"
                                    class="btn rounded-pill btn-lg px-3 next action-button" value="Next"
                                    id="nextButton2" style="background: {{ $colorCode }};"
                                    onmouseover="this.style.background='{{ $hovercolor }}';"
                                    onmouseout="this.style.background='{{ $colorCode }}';">@lang('messages.next')
                                    <i class="fas fa-thin fa-angle-right"></i>
                                </button>

                                <script>
                                    $(document).ready(function() {
                                        $("#nextButton2").prop("disabled", true);

                                        function validateEmail(email) {
                                            const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                                            return re.test(email);
                                        }

                                        function validatePhoneNumber(phone) {
                                            const re = /^(?:\+?\d{1,3})?[ -]?\d{9,15}$/; // Format international (+22512345678) ou local (0123456789)
                                            return re.test(phone);
                                        }

                                        function checkFields() {
                                            let allRequiredFieldsFilled = true;
                                            let emailValid = true;
                                            let phoneValid = true;

                                            $("#collect_data input, #collect_data select").each(function() {
                                                if ($(this).prop("required") && !$(this).hasClass("d-none")) {
                                                    const fieldValue = $(this).val().trim();

                                                    if ($(this).is("select") && (fieldValue === "" || fieldValue === null)) {
                                                        allRequiredFieldsFilled = false;
                                                        return false;
                                                    } 

                                                    if ($(this).is("input")) {
                                                        if (fieldValue === "") {
                                                            allRequiredFieldsFilled = false;
                                                            return false;
                                                        }

                                                        // Validation email
                                                        if ($(this).attr("type") === "email" && !validateEmail(fieldValue)) {
                                                            emailValid = false;
                                                            $("#emailError").text("Adresse e-mail invalide.").show();
                                                            return false;
                                                        } else {
                                                            $("#emailError").text("").hide();
                                                        }

                                                        // Validation des numéros de téléphone
                                                        if ($(this).attr("id") === "telephone" || $(this).attr("id") === "contactparent" || $(this).attr("id") === "contacttuteur") {
                                                            if (!validatePhoneNumber(fieldValue)) {
                                                                phoneValid = false;
                                                                $(`#${$(this).attr("id")}Error`).text("Numéro invalide (ex: +22512345678 ou 0123456789)").show();
                                                                return false;
                                                            } else {
                                                                $(`#${$(this).attr("id")}Error`).text("").hide();
                                                            }
                                                        }
                                                    }
                                                }
                                            });

                                            return allRequiredFieldsFilled && emailValid && phoneValid;
                                        }

                                        function toggleNextButton() {
                                            const isValid = checkFields();
                                            $("#nextButton2").prop("disabled", !isValid);
                                        }

                                        $("input, select").on("input change", function() {
                                            toggleNextButton();
                                        });

                                        toggleNextButton();
                                    });
                                </script>
                            </fieldset>

                            <!-- DOCUMENTS UPLOAD SECTION  -->
                            <fieldset>

                                <div class="form-group row">
                                    <label for="photo"
                                        class="col-sm-4 col-form-label text-end">@lang('messages.photo')<span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" required id="photo" name="photo" accept=".jpeg,.jpg,.png,.JPEG,.JPG,.PNG" required>
                                        <small class="text-danger" id="photoValidationMessage" style="display: none;">Please upload a valid file.</small>
                                        <input type="hidden" id="aspectRatio" name="aspectRatio">
                                        <input type="hidden" id="croppedImage" name="photo">
                                        <canvas id="cropperCanvas" style="display: none;"></canvas>
                                    </div>
                                </div>

                                <!-- Modal -->
                                <div class="modal fade" id="cropImageModal" data-bs-backdrop="false" tabindex="-1" role="dialog"
                                    aria-labelledby="cropImageModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="cropImageModalLabel">Crop Image</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="img-container">
                                                    <img id="imageToCrop" src="" alt="Image for cropping">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                <button type="button" class="btn btn-primary" id="cropButton">Crop</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="copy_baccalaureat_attestation_reussite" class="col-sm-4 col-form-label text-end">@lang('messages.copy_baccalaureat_attestation_reussite') <span aria-hidden="true" class="required">*</span>:</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="copy_baccalaureat_attestation_reussite" name="copy_baccalaureat_attestation_reussite" accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF" required>
                                        <small class="text-danger" id="photoValidationMessage2" style="display: none;">Please upload a valid file.</small>
                                    </div>
                                </div>

                                <div class="form-group row ">
                                    <label for="copy_dernier_diplome"
                                        class="col-sm-4 col-form-label text-end">@lang('messages.copy_dernier_diplome')<span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="copy_dernier_diplome" name="copy_dernier_diplome" accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF" require>
                                        <small class="text-danger" id="photoValidationMessage3" style="display: none;">Please upload a valid file.</small>
                                    </div>
                                </div>
                                
                                @if(request('parentServiceId') == 1)
                                    <div class="form-group row">
                                        <label for="attestion_engagement" class="col-sm-4 col-form-label text-end">@lang('messages.attestion_engagement') <span aria-hidden="true" class="required">*</span>:</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="attestion_engagement" name="attestion_engagement" accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF" required>
                                            <small class="text-danger" id="photoValidationMessage4" style="display: none;">Please upload a valid file.</small>
                                        </div>
                                    </div>
                                @endif

                                @if(request('childServiceId') == 27 || request('childServiceId') == 26)
                                    <div class="form-group row">
                                        <label for="attestion_engagement" class="col-sm-4 col-form-label text-end">@lang('messages.attestion_bourse') <span aria-hidden="true" class="required">*</span>:</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="attestion_engagement" name="attestion_engagement" accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF" required>
                                            <small class="text-danger" id="photoValidationMessage4" style="display: none;">Please upload a valid file.</small>
                                        </div>
                                    </div>
                                @endif
                                    
                                @if(request('childServiceId') == 25 || request('childServiceId') == 23)
                                    <div class="form-group row">
                                        <label for="attestion_bourse_secour" class="col-sm-4 col-form-label text-end">@lang('messages.attestion_secour')<span aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="attestion_bourse_secour" name="attestion_bourse_secour" accept=".png, .jpg, .jpeg, .PNG, .JPG, .JPEG" required>
                                            <small class="text-danger" id="photoValidationMessage5" style="display: none;">Please upload a valid file.</small>
                                        </div>
                                    </div>
                                @endif

                                <div class="form-group row">
                                    <label for="certificat_scolarite"
                                        class="col-sm-4 col-form-label text-end">@lang('messages.certificat_scolarite')<span aria-hidden="true" class=""></span> :</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="certificat_scolarite" name="certificat_scolarite" accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF" >
                                        <small class="text-danger" id="photoValidationMessage6" style="display: none;">Please upload a valid file.</small>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="copy_of_password_cni"
                                        class="col-sm-4 col-form-label text-end">@lang('messages.copy_of_password_cni') <span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="copy_of_password_cni" name="copy_of_password_cni" accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF" required>
                                        <small class="text-danger" id="copy_of_password_cniError" style="display: none;"></small>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="copy_rib"
                                        class="col-sm-4 col-form-label text-end">@lang('messages.copy_rib') <span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="copy_rib" name="copy_rib" accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF" required>
                                        <small class="text-danger" id="7photoValidationMessage9" style="display: none;">Please upload avalid file.</small>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="procuration_cni_parent"
                                        class="col-sm-4 col-form-label text-end">Procuration ou CNI parent :</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="procuration_cni_parent" name="procuration_cni_parent" accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="autre"
                                        class="col-sm-4 col-form-label text-end">Autre :</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="autre" name="autre" accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                        <small class="text-danger" id="7photoValidationMessage9" style="display: none;">Please upload avalid file.</small>
                                    </div>
                                </div>

                                
                                <script>
                                    document.addEventListener("DOMContentLoaded", function () {
                                        const form = document.getElementById("msform");
                                        const fileInputs = document.querySelectorAll("input[type='file'][required]");
                                        const submitButton = document.getElementById("submitButton5");

                                        // Fonction pour vérifier si tous les fichiers requis sont remplis
                                        function checkFiles() {
                                            let allFilled = true;

                                            fileInputs.forEach(input => {
                                                if (!input.files.length) {
                                                    allFilled = false;
                                                }
                                            });

                                            submitButton.disabled = !allFilled; // Active/Désactive le bouton
                                        }

                                        // Désactiver le bouton au chargement de la page si les fichiers requis sont vides
                                        checkFiles();

                                        // Ajouter un écouteur d'événements sur chaque input file
                                        fileInputs.forEach(input => {
                                            input.addEventListener("change", checkFiles);
                                        });
                                    });
                                </script>

                                <button type="button" name="previous" class="btn rounded-pill btn-lg px-3 previous action-button-previous"
                                value="Previous" style="background: {{ $colorCode }};"
                                onmouseover="this.style.background={{ $hovercolor }};"
                                onmouseout="this.style.background={{ $colorCode }};"><i class="fas fa-thin fa-angle-left"></i>
                                @lang('messages.previous')</button>

                                <button type="submit" name="pay" class="btn rounded-pill btn-lg px-3 action-button" value="payment"
                                id="submitButton5" style="background: {{ $colorCode }};"
                                onmouseover="this.style.background={{ $hovercolor }};"
                                onmouseout="this.style.background={{ $colorCode }};"><i class="fas fa-thin fa-angle-right"></i>
                                Soumettre</button>

                            </fieldset>

                        </form>

                        <!--new next button run -->
                        <script>
                            $(document).ready(function() {

                                var current_fs, next_fs, previous_fs; //fieldsets
                                var opacity;
                                var current = 1;
                                var steps = $("fieldset").length;

                                setProgressBar(current);
                                // if (nextButton.disabled == false) {
                                $(".next").click(function() {

                                    $(".file-error").text("");


                                    // Check if all upload file inputs  files selected or not..
                                    var fileInputs = $("fieldset:visible input[type='file']");
                                    // console.log(fileInputs, 'fileInputs');
                                    var filesSelected = true;

                                    fileInputs.each(function() {
                                        var input = $(this);

                                        if (this.parentElement.parentElement.classList.contains('d-none')) {
                                            return;
                                        }

                                        if (input.prop("required") && this.files.length === 0) {
                                            filesSelected = false;
                                            var inputId = $(this).attr("id");

                                            // $("." + inputId + "_error").text(
                                            // "Please select a file.").show(); // Display the error message
                                        }
                                    });

                                    if (!filesSelected) {
                                        alert("Please fill all required fields")
                                        return; // Prevent advancing to the next step
                                    }

                                    current_fs = $(this).parent();
                                    next_fs = $(this).parent().next();

                                    // Add Class Active
                                    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

                                    // Show the next fieldset
                                    next_fs.show();

                                    // Hide the current fieldset with style
                                    current_fs.animate({
                                        opacity: 0
                                    }, {
                                        step: function(now) {
                                            // For making fieldset appear animation
                                            opacity = 1 - now;

                                            current_fs.css({
                                                'display': 'none',
                                                'position': 'relative'
                                            });
                                            next_fs.css({
                                                'opacity': opacity
                                            });
                                        },
                                        duration: 500
                                    });
                                    setProgressBar(++current);
                                });


                                $(".previous").click(function() {

                                    current_fs = $(this).parent();
                                    previous_fs = $(this).parent().prev();

                                    // Remove class active
                                    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

                                    // Show the previous fieldset
                                    previous_fs.show();

                                    // Hide the current fieldset with style
                                    current_fs.animate({
                                        opacity: 0
                                    }, {
                                        step: function(now) {
                                            // For making fieldset appear animation
                                            opacity = 1 - now;

                                            current_fs.css({
                                                'display': 'none',
                                                'position': 'relative'
                                            });
                                            previous_fs.css({
                                                'opacity': opacity
                                            });
                                        },
                                        duration: 500
                                    });
                                    setProgressBar(--current);
                                });

                                function setProgressBar(curStep) {
                                    var percent = parseFloat(100 / steps) * curStep;
                                    percent = percent.toFixed();
                                    $(".progress-bar").css("width", percent + "%")
                                }
                            });
                        </script>

                        <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
                        <script>
                            $(document).ready(function() {
                                $('#submitButton5').on('click', function(e) {
                                    e.preventDefault();
                                    var requiredFields = $('#msform').find('[required]');
                                    // Filter the required fields with the d-none class
                                    var formFields = requiredFields.filter('.d-none');
                                    // Remove the 'required' attribute by setting the property to false
                                    formFields.prop('required', false);
                                    $('#msform').get(0).submit();
                                });
                            });
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('/countryState.js') }}"></script>
    <script src="{{ asset('/assets/js/deliverydata.js') }}"></script>

@endsection