@php
  $customizerHidden = 'customizer-hide';
  $configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Inscription')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/bs-stepper/bs-stepper.scss',
    'resources/assets/vendor/libs/bootstrap-select/bootstrap-select.scss',
    'resources/assets/vendor/libs/select2/select2.scss',
    'resources/assets/vendor/libs/@form-validation/form-validation.scss',
    'resources/assets/vendor/libs/animate-css/animate.scss',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'])
@endsection

@section('page-style')
    @vite(['resources/assets/vendor/scss/pages/page-auth.scss'])
@endsection

@section('vendor-script')
    @vite([
      'resources/assets/vendor/libs/cleavejs/cleave.js',
      'resources/assets/vendor/libs/moment/moment.js',
      'resources/assets/vendor/libs/cleavejs/cleave-phone.js',
      'resources/assets/vendor/libs/bs-stepper/bs-stepper.js',
      'resources/assets/vendor/libs/select2/select2.js',
      'resources/assets/vendor/libs/@form-validation/popular.js',
      'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
      'resources/assets/vendor/libs/@form-validation/auto-focus.js',
    ])
@endsection

@section('page-script')

  @section('page-script')
    <script src="{{ asset('assets/js/jquery-3.5.1.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages-auth-multisteps.js') }}"></script>
    <script src="{{ asset('assets/js/sweetalert2.js') }}"></script>
@endsection
  <script>
    document.addEventListener('DOMContentLoaded', function (e) {
      (function () {
        $('#btnNext').prop('disabled', true);
        $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });
        const stepsValidation = document.querySelector('#multiStepsValidation');
        if (typeof stepsValidation !== undefined && stepsValidation !== null) {
          // Multi Steps form
          const stepsValidationForm = stepsValidation.querySelector('#multiStepsForm');
          // Form steps
          const stepsValidationFormStep1 = stepsValidationForm.querySelector('#accountDetailsValidation');
          const stepsValidationFormStep2 = stepsValidationForm.querySelector('#personalInfoValidation');
          // Multi steps next prev button
          const stepsValidationNext = [].slice.call(stepsValidationForm.querySelectorAll('.btn-next'));
          const stepsValidationPrev = [].slice.call(stepsValidationForm.querySelectorAll('.btn-prev'));

          let validationStepper = new Stepper(stepsValidation, {
            linear: true
          });

          // Account details
          const multiSteps1 = FormValidation.formValidation(stepsValidationFormStep1, {
            fields: {
              codeFoner: {
                validators: {
                  notEmpty: {
                    message: 'Veuillez saisir le code FONER'
                  },
                  stringLength: {
                    min: 15,
                    max: 15,
                    message: 'Le code FONER ne peut pas excedé 15 caractère'
                  },
                  regexp: {
                    regexp: "^\d{4}/\d{4}[A-Z]\d{5}$",
                    message: 'Le code FONER doit commencer par 5 chiffres suivi slash ensuite'
                  }
                }
              }
            },
            plugins: {
              trigger: new FormValidation.plugins.Trigger(),
              bootstrap5: new FormValidation.plugins.Bootstrap5({
                // Use this for enabling/changing valid/invalid class
                // eleInvalidClass: '',
                eleValidClass: '',
                rowSelector: '.col-sm-6'
              }),
              autoFocus: new FormValidation.plugins.AutoFocus(),
              submitButton: new FormValidation.plugins.SubmitButton()
            },
            init: instance => {
              instance.on('plugins.message.placed', function (e) {
                if (e.element.parentElement.classList.contains('input-group')) {
                  e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
                }
              });
            }
          }).on('core.form.valid', function () {
            // Jump to the next step when all fields in the current step are valid
            validationStepper.next();
          });

          // Personal info
          const multiSteps2 = FormValidation.formValidation(stepsValidationFormStep2, {
            fields: {
              multiStepsFirstName: {
                validators: {
                  notEmpty: {
                    message: 'Please enter first name'
                  }
                }
              },
              multiStepsAddress: {
                validators: {
                  notEmpty: {
                    message: 'Please enter your address'
                  }
                }
              }
            },
            plugins: {
              trigger: new FormValidation.plugins.Trigger(),
              bootstrap5: new FormValidation.plugins.Bootstrap5({
                // Use this for enabling/changing valid/invalid class
                // eleInvalidClass: '',
                eleValidClass: '',
                rowSelector: function (field, ele) {
                  // field is the field name
                  // ele is the field element
                  switch (field) {
                    case 'multiStepsFirstName':
                      return '.col-sm-6';
                    case 'multiStepsAddress':
                      return '.col-md-12';
                    default:
                      return '.row';
                  }
                }
              }),
              autoFocus: new FormValidation.plugins.AutoFocus(),
              submitButton: new FormValidation.plugins.SubmitButton()
            }
          }).on('core.form.valid', function () {
            const Toast = Swal.mixin({
                toast: true,
                position: "top-end",
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });
            var formData = $('#multiStepsForm').serializeArray();
            var data = {};
            $.each(formData, function(_, field) {
                data[field.name] = field.value;
            });
            $.ajax({
              type: "post",
              url: "{{route('inscription.process')}}",
              data: data,
              dataType: 'json',
              cache: false,
              timeout: 5000,
              success: function (data) {
                // console.log("RESPONSE ", data);
                if(data.code == 200){
                  Toast.fire({
                      icon: "success",
                      title: data.msg
                  });
                  window.location.href= "{{route('login.form')}}";
                }
              },
              error: function (e) {
                if('responseJSON' in e ) {
                    Toast.fire({
                        icon: "warning",
                        title: e.responseJSON.message
                    });
                }
              }
            })
          });

          stepsValidationNext.forEach(item => {
            item.addEventListener('click', event => {
              // When click the Next button, we will validate the current step
              switch (validationStepper._currentIndex) {
                case 0:
                  multiSteps1.validate();
                  break;

                case 1:
                  multiSteps2.validate();
                  break;

                default:
                  break;
              }
            });
          });

          stepsValidationPrev.forEach(item => {
            item.addEventListener('click', event => {
              switch (validationStepper._currentIndex) {
                case 1:
                  validationStepper.previous();
                  break;

                case 0:

                default:
                  break;
              }
            });
          });
        }

        $('#go').on('click', function() {
          const codeFoner = $('#codeFoner').val();
          $.ajax({
            url: "{{route('redevables.search')}}" + '?code=' + codeFoner,
            type: 'GET',
            dataType: 'json',
            success: function(res) {
              if(res.code == 200) {
                const data = res.data;
                const dNaiss = null != data.date_naissance ? moment(data.date_naissance).format('DD-MM-YYYY') : '';
                $('#nomRedevable').val(data.nom_redevable);
                $('#prenomRedevable').val(data.prenom_redevable);
                $('#dateNaiss').val(dNaiss);
                $('#lieuNaiss').val(data.lieu_naissance);
                $('#nomPere').val(data.nom_pere);
                $('#prenomPere').val(data.prenom_pere);
                $('#nomMere').val(data.nom_mere);
                $('#prenomMere').val(data.prenom_mere);
                $('#redevableDetails').removeClass('d-none');
                $('#lblAlert').addClass('d-none');
                $('#btnNext').prop('disabled', false);
              } else {
                var alertContent = "<div class=\"alert alert-warning fade show\">"+res.msg+"</div>";
                $('#lblAlert').html(alertContent);
                $('#lblAlert').removeClass('d-none');
                $('#redevableDetails').addClass('d-none');
                $('#btnNext').prop('disabled', true);
              }
            },
            error: function(xhr, status, error) {
              console.error('Failed to fetch data:', error);
              if (('responseJSON' in error) && ('message' in e.responseJSON))
              {
                var alertContent = "<div class=\"alert alert-danger fade show\">"+e.responseJSON.message+"<span class=\"close\" data-dismiss=\"alert\" style=\"cursor:pointer\">&times;</span></div>";
                $('#lblAlert').html(alertContent);
                $('#lblAlert').removeClass('d-none');
                $('#redevableDetails').addClass('d-none');
              }
              $('#btnNext').prop('disabled', true);
            }
          });
        })
      })();
    });

  </script>
@endsection


@section('content')
    <section class="section-py bg-body first-section-pt">
        <div class="container mt-2">
            <div class="card">
                <div class="card-body border-end">
                  <div id="multiStepsValidation" class="bs-stepper shadow-none">
                    <div class="bs-stepper-header border-bottom-0">
                        <div class="step" data-target="#accountDetailsValidation">
                            <button type="button" class="step-trigger">
                                <span class="bs-stepper-circle"><i class="ti ti-smart-home ti-sm"></i></span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title">Redevable</span>
                                    <span class="bs-stepper-subtitle">Vérification du code FONER</span>
                                </span>
                            </button>
                        </div>
                        <div class="line">
                            <i class="ti ti-chevron-right"></i>
                        </div>
                        <div class="step" data-target="#personalInfoValidation">
                            <button type="button" class="step-trigger">
                                <span class="bs-stepper-circle"><i class="ti ti-users ti-sm"></i></span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title">Compte</span>
                                    <span class="bs-stepper-subtitle">Informations du compte</span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="bs-stepper-content">
                        <form id="multiStepsForm" onSubmit="return false">
                            <!-- Account Details -->
                            <div id="accountDetailsValidation" class="content">
                                <div class="content-header mb-4">
                                    <h3 class="mb-1">Vérification du code FONER</h3>
                                    <p>Saisir le code FONER</p>
                                </div>
                                <div class="row g-3">
                                  <div class="col-sm-12">
                                    <label class="form-label" for="codeFoner">Code FONER</label>
                                    <div class="d-flex w-75">
                                      <input type="text" id="codeFoner" name="code_foner"
                                          class="form-control" placeholder="Code FONER ici" />
                                      <button class="btn btn-info mx-3" id="go"><i class="fas fa-search"></i> Rechercher</button>
                                    </div>
                                  </div>
                                  <div class="col-sm-12 d-none" id="redevableDetails">
                                    <div class="row">
                                      <div class="col-sm-6 ">
                                        <label class="form-label" for="nomRedevable">Nom</label>
                                        <input type="text" id="nomRedevable" name="nom_redevable"
                                            class="form-control" readonly />
                                      </div>
                                      <div class="col-sm-6">
                                          <label class="form-label" for="prenomRedevable">Prénom</label>
                                          <input type="text" id="prenomRedevable" name="prenom_redevable"
                                              class="form-control" readonly />
                                      </div>
                                      <div class="col-md-6">
                                          <label class="form-label" for="dateNaiss">Date de naissance</label>
                                          <input type="text" id="dateNaiss" name="date_naiss"
                                              class="form-control" readonly />
                                      </div>
                                      <div class="col-md-6">
                                          <label class="form-label" for="lieuNaiss">Lieu de naissance</label>
                                          <input type="text" id="lieuNaiss" name="lieu_naiss"
                                              class="form-control" readonly />
                                      </div>
                                      <div class="col-md-6">
                                          <label class="form-label" for="nomPere">Nom du père</label>
                                          <input type="text" id="nomPere" name="nom_pere"
                                              class="form-control" readonly />
                                      </div>
                                      <div class="col-md-6">
                                          <label class="form-label" for="prenomPere">Prénom du père</label>
                                          <input type="text" id="prenomPere" name="prenom_pere"
                                              class="form-control" readonly />
                                      </div>
                                      <div class="col-md-6">
                                          <label class="form-label" for="nomMere">Nom de la mère</label>
                                          <input type="text" id="nomMere" name="nom_mere"
                                              class="form-control" readonly />
                                      </div>
                                      <div class="col-md-6">
                                          <label class="form-label" for="prenomMere">Prénom de la mère</label>
                                          <input type="text" id="prenomMere" name="prenom_mere"
                                              class="form-control" readonly />
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-sm-12 d-none" id="lblAlert"></div>
                                  <div class="col-12 d-flex justify-content-between mt-4">
                                      <button class="btn btn-label-secondary btn-prev"> <i
                                              class="ti ti-arrow-left ti-xs me-sm-1 me-0"></i>
                                          <span class="align-middle d-sm-inline-block d-none">Précédent</span>
                                      </button>
                                      <button class="btn btn-primary btn-next" id="btnNext"> <span
                                              class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Suivant</span>
                                          <i class="ti ti-arrow-right ti-xs"></i></button>
                                  </div>
                              </div>
                            </div>
                            <!-- Personal Info -->
                            <div id="personalInfoValidation" class="content">
                                <div class="content-header mb-4">
                                    <h3 class="mb-1">Informations du compte</h3>
                                    <p>Saisir les informations du compte</p>
                                </div>
                                <div class="row g-3">
                                  <div class="col-sm-12">
                                      <label class="form-label" for="multiStepsEmail">Adresse email</label>
                                      <input type="text" id="multiStepsEmail" name="multiStepsEmail" class="form-control" placeholder="Saisir l'adresse email" />
                                  </div>
                                  <div class="col-sm-6 form-password-toggle">
                                      <label class="form-label" for="multiStepsPass">Mot de passe</label>
                                      <div class="input-group input-group-merge">
                                          <input type="password" id="multiStepsPass" name="multiStepsPass"
                                              class="form-control"
                                              placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                              aria-describedby="multiStepsPass2" />
                                          <span class="input-group-text cursor-pointer" id="multiStepsPass2"><i
                                                  class="ti ti-eye-off"></i></span>
                                      </div>
                                  </div>
                                  <div class="col-sm-6 form-password-toggle">
                                      <label class="form-label" for="multiStepsConfirmPass">Confirmer mot de passe</label>
                                      <div class="input-group input-group-merge">
                                          <input type="password" id="multiStepsConfirmPass"
                                              name="multiStepsConfirmPass" class="form-control"
                                              placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                              aria-describedby="multiStepsConfirmPass2" />
                                          <span class="input-group-text cursor-pointer" id="multiStepsConfirmPass2"><i
                                                  class="ti ti-eye-off"></i></span>
                                      </div>
                                  </div>
                                  <div class="col-12 d-flex justify-content-between mt-4">
                                    <button class="btn btn-label-secondary btn-prev"> <i class="ti ti-arrow-left ti-xs me-sm-1 me-0"></i>
                                      <span class="align-middle d-sm-inline-block d-none">Précédent</span>
                                    </button>
                                    <button type="submit" class="btn btn-success btn-next btn-submit">Valider</button>
                                  </div>
                              </div>
                            </div>
                        </form>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </section>

@endsection