@php
      $category = ['KTP', 'Medical', 'SKCK', 'BPJS', 'Personnel Competency'];
  @endphp
  <div id="modal_add_password_document" class="modal h-modal">
      <div class="modal-background"></div>
      <form id="form_create_password">
          <div class="modal-content">
              <div class="modal-card">
                  <div class="modal-card-head">
                      <div class="fs-14 fw-700">Create Password Document</div>
                  </div>
                  <div class="modal-card-body pt-3">
                      <div class="inner-content">
                          <div class="field">
                              <label class="fs-12 fw-500" style="color: black !important">Title<sup
                                      class="text-danger">*</sup>
                              </label>
                              <div class="control">
                                  <input type="text" name="title" id="title" class="input"
                                      placeholder="Enter title" autocomplete="off">
                              </div>
                          </div>
                          {{-- <div class="field" id="field_select_type">
                              <label class="fs-12 fw-500" style="color: black !important">Type<sup
                                      class="text-danger">*</sup>
                              </label>
                              <div class="select is-fullwidth">
                                  <select name="type" class="input" id="type">
                                      <option value="">Select Type</option>
                                      <option value="document">Document</option>
                                      <option value="employee">Employee</option>
                                  </select>
                              </div>
                          </div> --}}
                          <div class="field">
                              <label class="fs-12 fw-500" style="color: black !important">@lang('app.password')<sup
                                      class="text-danger">*</sup>
                              </label>
                              <div class="control" style="position: relative;">
                                  <input type="password" name="password" id="password" class="input"
                                      placeholder="Enter password" style="padding-right: 40px;">

                                  <i class="fa-regular fa-eye" id="toggleEye"
                                      style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer;"
                                      onclick="togglePassword('password','toggleEye')"></i>
                              </div>
                          </div>
                          <div class="field">
                              <label class="fs-12 fw-500" style="color: black !important">Password Confirmation<sup
                                      class="text-danger">*</sup>
                              </label>
                              <div class="control" style="position: relative;">
                                  <input type="password" name="password_confirmation" id="password_confirmation_edit"
                                      class="input" placeholder="Enter password confirmation"
                                      style="padding-right: 40px;">

                                  <i class="fa-regular fa-eye" id="toggleEyeConfirmation"
                                      style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer;"
                                      onclick="togglePassword('password_confirmation_edit','toggleEyeConfirmation')"></i>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="modal-card-foot is-end" style="border: none !important">
                      <a class="button h-button h-modal-close">@lang('app.cancel')</a>
                      <button type="submit" form="form_create_password" id="btn_create_password"
                          class="button h-button is-warning">@lang('app.save')</button>
                  </div>
              </div>
          </div>
      </form>
  </div>

  @push('scripts')
      <script>
          function initializeSelect2(selector, placeholder) {
              $(selector).select2({
                  placeholder: placeholder,
                  templateResult: function(data) {
                      var $result = $('<span></span>');
                      $result.text(data.text);
                      $result.css('color', 'black');
                      return $result;
                  },
                  templateSelection: function(data) {
                      var $selection = $('<span></span>');
                      $selection.text(data.text);
                      $selection.css('color', 'black');
                      $('#gate_id-error').remove()
                      $('.select2-container').css({
                          'border': '0.2px solid rgb(238, 236, 236)',
                      });
                      return $selection;
                  }
              });
          }

          function createPassword() {
              $('#btn_create_password').removeClass('is-loading')

              $("#form_create_password").validate({
                  rules: {
                      title: {
                          required: true
                      },
                      password: {
                          required: true,
                          minlength: 6
                      },
                      password_confirmation: {
                          required: true,
                          equalTo: "#password"
                      }
                  },
                  messages: {
                      title: {
                          required: "The title field is required.",
                      },
                      password: {
                          required: "The password field is required.",
                          minlength: "The password must be at least 6 characters."
                      },
                      password_confirmation: {
                          required: "Please confirm your password.",
                          equalTo: "Passwords do not match."
                      }
                  },
                  errorClass: 'invalid-feedback help',
                  errorElement: 'div',
                  errorPlacement: function(error, element) {
                      error.insertAfter(element);
                  },
                  highlight: function(element) {
                      $(element).addClass('is-danger');
                  },
                  unhighlight: function(element) {
                      $(element).removeClass('is-danger');
                  },
                  submitHandler: function(form) {
                      $('#btn_create_password').addClass('is-loading')

                      const formData = new FormData(form);

                      $.ajax({
                          url: urlCreatePasswordDocument,
                          type: 'POST',
                          data: formData,
                          processData: false,
                          contentType: false,
                          headers: {
                              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                          },
                          beforeSend: function() {
                              $("#btn_create_password").prop('disabled', true);
                          },
                          success: function(res) {
                              if (res.status) {
                                  $("#btn_create_password").prop('disabled', false).removeClass(
                                      'is-loading')

                                  showNotification('primary', 'Success', res.message)
                                  form.reset();

                                  $('#modal_add_password_document').removeClass('is-active');

                                  getDataPasswordDocument()

                              } else {
                                  $("#btn_create_password").prop('disabled', false).removeClass(
                                      'is-loading')
                                  showNotification('danger', 'Error', res.message)
                              }

                          },
                          error: function(xhr, status, error) {
                              $("#btn_create_password").prop('disabled', false).removeClass(
                                  'is-loading')

                              if (xhr.status === 422) {
                                  $('.invalid-feedback').remove();

                                  let errors = xhr.responseJSON.errors;

                                  for (let field in errors) {
                                      if (errors.hasOwnProperty(field)) {
                                          let errorMessage = errors[field][0];
                                          let fieldElement = $(`[name="${field}"]`);
                                          if (fieldElement.length) {
                                              fieldElement.after(
                                                  `<span id="${field}-error" class="invalid-feedback text-danger">${errorMessage}</span>`
                                              );
                                          }
                                      }
                                  }
                              } else {
                                  showNotification('danger', 'Error', 'Please try again,',
                                      'An unexpected error occurred.')
                              }
                          }
                      });
                  }
              });
          }

          $('#type').on('change', function() {
              $('#field_select_category').remove()
              $('#field_select_employee').remove()
              const type = $(this).val()
              if (type === 'document') {
                  $('#field_select_type').after(componentSelectDocument())
              } else {
                  $('#field_select_type').after(componentSelectEmployee())
                  initializeSelect2(".select-employee", "Select Employee");

              }
          })

          function componentSelectDocument() {
              const category = @json($category);
              return ` <div class="field" id="field_select_category">
                            <label class="fs-12 fw-500" style="color: black !important">Category Document
                                <sup class="text-danger">*</sup>
                            </label>
                            <div class="select is-fullwidth">
                                <select name="category" class="input" id="category">
                                    <option value="">Select Category Document</option>
                                    @foreach ($category as $item)
                                        <option value="{{ $item }}">{{ $item }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>`
          }

          function componentSelectEmployee() {
              const employees = @json($employees);
              return ` <div class="field" id="field_select_employee">
                            <label class="fs-12 fw-500" style="color: black !important">Employee<sup
                                    class="text-danger">*</sup>
                            </label>
                            <select name="employee_id" class="input select-employee" id="employee_id">
                                <option value="">Select Employee</option>
                                @foreach ($employees as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>`
          }

          $(document).ready(function() {
              $('#modal_add_password_document .modal-background').click(function(event) {
                  event.stopPropagation();
              });

              $('.h-modal-close').click(function() {
                  $('#modal_add_password_document').removeClass('is-active');
                  $('#modal_add_password_document form')[0].reset();
                  $('.invalid-feedback').remove();
                  $('.input').removeClass('is-danger');
                  $("#btn_create_password")
                      .removeClass('is-loading')
                      .prop('disabled', false);
              });

              createPassword()
          });
      </script>
  @endpush