@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')
@vite([
'resources/assets/js/jquery-setup.js',
'resources/assets/js/pages-auth-multisteps.js',
'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'
])
<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);
            }
          });
        })
      })();
    });

var editModal;
function openSearchCodeFonerModal() {
  editModal = new bootstrap.Modal(document.getElementById('searchCodeFonerModal'), {backdrop: 'static', keyboard: false});
  editModal.show();
}

function processSearch() {
  const term = $('#nip_cnib').val();
  if ('' != term) {
    $.ajax({
      url: "{{route('code-foner.search')}}" + '?term=' + term,
      type: 'GET',
      dataType: 'json',
      success: function(res) {
        if(res.code == 200) {
          editModal.hide();
          const data = res.data;
          $('#codeFoner').val(data.code_foner);
          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);

          const searchAlertContent = `<div class="alert alert-warning" role="alert">
            <h6 class="alert-heading mb-2">Avertissement</h6>
            <p class="mb-0">${res.msg} </p>
          </div>`
          $('#searchAlert').html('');
          $('#searchAlert').html(searchAlertContent);
        }
      },
      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);
      }
    });
  } else {
    const Toast = Swal.mixin({
      toast: true,
      position: "top-end",
      showConfirmButton: false,
      timer: 3000,
      timerProgressBar: true,
      width: 600,
      didOpen: (toast) => {
          toast.onmouseenter = Swal.stopTimer;
          toast.onmouseleave = Swal.resumeTimer;
      }
    });
    Toast.fire({
      icon: "warning",
      title: 'Veuillez saisir le NIP ou le N° CNIB ou le code INE'
    });
  }
}
</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>Saisie du 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-success mx-3" id="go"><i class="fas fa-search"></i> Rechercher</button>
                    </div>
                    <p>Code FONER oublié ? <a href="javascript:void(0)" onclick="openSearchCodeFonerModal();">Cliquez
                        ici</a></p>
                  </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-success 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>

@include('frontend.modal_find_code')
@endsection