{{-- @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('cvSubmit') }}"
                            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="nom" class="col-sm-4 col-form-label text-end">Nom <span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="nom" name="nom" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="prenom" class="col-sm-4 col-form-label text-end">Prénom(s)<span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="prenom" name="prenom" required>
                                    </div>
                                </div>
                            

                                <div class="form-group row">
                                    <label for="diplome" class="col-sm-4 col-form-label text-end">Diplôme<span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="diplome" name="diplome" required>
                                    </div>
                                </div>

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

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

                                <div class="form-group row">
                                    <label for="telephone" class="col-sm-4 col-form-label text-end">Numéro de téléphone<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="adresse" class="col-sm-4 col-form-label text-end">Adresse<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>

                                <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 = '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="cv" class="col-sm-4 col-form-label text-end">Curriculum vitae <span aria-hidden="true" class="required">*</span>:</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="cv" name="cv" 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="piece"
                                        class="col-sm-4 col-form-label text-end">Photocopie CNI ou Passeport ou Carte consulaire<span aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="piece" name="piece" 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>
                                
                                <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