@extends('layouts.index')
@section('title')
    Forms Request
@endsection
@section('css')
    <link
        href="{{ asset('back') }}/libs/dropzone/dist/min/dropzone.min.css"
        rel="stylesheet"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ asset('back') }}/libs/ckeditor/samples/toolbarconfigurator/lib/codemirror/neo.css"
    />
    <link
      href="{{asset('back')}}/libs/jquery-steps/jquery.steps.css"
      rel="stylesheet"
    />
    <link href="{{asset('back')}}/libs/jquery-steps/steps.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" integrity="sha512-EZSUkJWTjzDlspOoPSpUFR0o0Xy7jdzW//6qhUkoZ9c4StFkVsp9fbbd0O06p9ELS3H486m4wmrCELjza4JEog==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
      .dropify-message p{
        text-align: center;
      }
    </style>
@endsection
@section('content')
<div class="container-fluid">
  <div class="col-12">
    <div class="card">
      <div class="border-bottom title-part-padding">
        <h4 class="mb-0">Create Forms</h4>
      </div>
      <div class="card-body wizard-content">
        <h6 class="card-subtitle mb-3">
          {{-- You can us the validation like what we did --}}
        </h6>
        <form id="composeForm" method="POST" enctype="multipart/form-data" class="validation-wizard wizard-circle mt-5">
          <!-- Step 1 -->
          <h6>Template</h6>
          <section>
            <div class="row">
              <div class="col-md-12">
                <div class="mb-3">
                  <label for="wfirstName2">
                    Forms Type <span class="text-danger">*</span>
                  </label>
                  <select name="id_ref_form" id="id_ref_form" style="cursor: pointer;" class="form-select required" onchange="showFormBody(this.value)">
                      <option value="">-- Select --</option>
                      @foreach ($letter_types as $item)
                        <option value="{{$item->id}}">{{$item->nama}}</option>
                      @endforeach
                  </select>
                  <div id="preview_template" class="mt-3" style="display: none">
                    <h5 class="text-secondary">Preview Template</h5>
                    <iframe src="#" id="previewOffice" width="100%" height="623px" frameborder="0">This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Step 2 -->
          <h6>Signer</h6>
          <section>
            <div class="row">
              {{-- <div class="col-sm-12">
                <div class="form-group mb-3">
                  <label for="">Signature Type <sup class="text-danger">*</sup> </label>
                  <br>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input primary" type="radio" name="ttd_type" id="ttd-type1" value="signature" checked="">
                    <label class="form-check-label" for="ttd-type1">Signature</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input primary" type="radio" name="ttd_type" id="ttd-type2" value="initial">
                    <label class="form-check-label" for="ttd-type2">Initial</label>
                  </div>
                </div>
              </div> 
              <div class="col-sm-9">
                <div class="mb-3">
                  <label for="id_signer_1">Requested By <sup class="text-danger">*</sup></label>
                  <select name="signer[0]" id="id_signer_0" class="select2 form-control custom-select required" style="width: 100%; height: 36px">
                      <option value="">-- Select --</option>
                      @foreach ($pegawai as $item)
                        <option value="{{$item->id}}">{{$item->nama_lengkap}}</option>
                      @endforeach
                  </select>
                </div>
              </div>
              <div class="col-sm-3 mt-4">
                <div class="mb-3">
                  <button
                    onclick="signer_repeat();"
                    class="
                      btn
                      rounded-pill
                      px-4
                      btn-light-success
                      text-success
                      font-weight-medium
                      waves-effect waves-light
                    "
                    type="button"
                  >
                    <i class="ri-add-circle-line fs-5"></i>
                  </button>
                </div>
              </div> --}}
              <div class="col-sm-4">
                <div class="mb-3">
                  <label for="id_signer_1">Requested By <sup class="text-danger">*</sup></label>
                  <select name="signer[0]" id="id_signer_0" class="select2 form-control custom-select required" onchange="showPegawaiAtasan(this.value)" style="width: 100%; height: 36px">
                  </select>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="mb-3">
                  <label for="id_signer_1">Reviewed/Acknowledge By <sup class="text-danger">*</sup></label>
                  <select name="signer[1]" id="id_signer_1" class="select2 form-control custom-select required signmorethan" style="width: 100%; height: 36px">
                  </select>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="mb-3">
                  <label for="id_signer_3">Approved By <sup class="text-danger">*</sup></label>
                  <select name="signer[2]" id="id_signer_2" class="select2 form-control custom-select required signmorethan" style="width: 100%; height: 36px">
                  </select>
                </div>
              </div>
            </div>
            <div id="signer_repeat" class="my-4 mb-5"></div>
          </section>
          <!-- Step 3 -->
          <h6>Receiver</h6>
          <section>
            <label for="">Internal</label>
            <div class="row">
              <div class="col-sm-9">
                <div class="mb-3">
                  <select name="receiver_internal[0]" id="id_receiver_internal_0" class="select2 form-control custom-select" style="width: 100%; height: 36px">
                      <option value="">-- Select --</option>
                      @foreach ($receiver as $item)
                        <option value="{{$item->id}}">{{$item->nama_lengkap}}</option>
                      @endforeach
                  </select>
                </div>
              </div>
              <div class="col-sm-3">
                <div class="mb-3">
                  <button
                    onclick="receiver_internal_repeat();"
                    class="
                      btn
                      rounded-pill
                      px-4
                      btn-light-success
                      text-success
                      font-weight-medium
                      waves-effect waves-light
                    "
                    type="button"
                  >
                    <i class="ri-add-circle-line fs-5"></i>
                  </button>
                </div>
              </div>
            </div>
            <div id="receiver_internal_repeat" class="my-4 mb-5"></div>
            <label for="">External</label>
            <div class="row">
              <div class="col-sm-3">
                <div class="mb-3">
                  <input
                    type="text"
                    class="form-control"
                    id="name"
                    name="receiver_external[0][name]"
                    placeholder="Name"
                  />
                </div>
              </div>
              <div class="col-sm-3">
                <div class="mb-3">
                  <input
                    type="text"
                    class="form-control"
                    id="email"
                    name="receiver_external[0][email]"
                    placeholder="Email"
                  />
                </div>
              </div>
              <div class="col-sm-3">
                <div class="mb-3">
                  <input
                    type="text"
                    class="form-control"
                    id="as"
                    name="receiver_external[0][as]"
                    placeholder="As a"
                  />
                </div>
              </div>
              <div class="col-sm-3">
                <div class="mb-3">
                  <button
                    onclick="receiver_external_repeat();"
                    class="
                      btn
                      rounded-pill
                      px-4
                      btn-light-success
                      text-success
                      font-weight-medium
                      waves-effect waves-light
                    "
                    type="button"
                  >
                    <i class="ri-add-circle-line fs-5"></i>
                  </button>
                </div>
              </div>
            </div>
            <div id="receiver_external_repeat" class="my-4"></div>
          </section>
          <!-- Step 4 -->
          <h6>Forms Content</h6>
          <section>
            <div class="row mb-2">
              <div class="col-md-12">
                <label for="">Subject <sup class="text-danger">*</sup> </label>
                <input type="text" name="subject" id="subject" class="form-control required" required>
              </div>
            </div>
            <div class="row">
              <h3>Form Input</h3>
              <div class="col-md-12" id="form-body">
              </div>
            </div>
            <div class="row mb-3">
              <h3>Attachment</h3>
              <div class="col-md-12">
                <input type="file" name="attachment" class="dropify" data-allowed-file-extensions="pdf png psd" />
              </div>
            </div>
          </section>
        </form>
      </div>
    </div>
  </div>
</div>

<form id="form-upload" method="POST" style="all: unset">
  <input type="file" name="file" id="upload" style="display: none" onchange="uploadSubmit()">
  <input type="submit" id="formSubmit" style="display: none">
</form>

@endsection
@section('js')
  <script src="{{asset('back')}}/js/custom.min.js"></script>
  <script src="{{asset('back')}}/libs/jquery-steps/build/jquery.steps.min.js"></script>
  <script src="{{asset('back')}}/libs/jquery-validation/dist/jquery.validate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    var form = $(".validation-wizard").show();
    var temp_id_form = null;

    $(".validation-wizard").steps({
      headerTag: "h6",
      bodyTag: "section",
      transitionEffect: "fade",
      titleTemplate: '<span class="step">#index#</span> #title#',
      labels: {
        finish: "Submit",
      },
      onStepChanging: function (event, currentIndex, newIndex) {


        if (newIndex == 1) {
            let ref_form_id = $('#id_ref_form').val();
            let formData = new FormData();

            formData.append('ref_form_id', ref_form_id);

            fetch("{{route('forms.pegawai')}}", {
                method: "POST",
                body: formData,
                headers: {
                    "X-CSRF-TOKEN": "{{csrf_token()}}"
                }
            }).then(response => response.json())
            .then(function(resp) {

                let html = '<option value="">-- SELECT --</option>';
                let pegawai = resp.data;
                if (pegawai.length > 0) {
                    pegawai.forEach((e,i) => {
                      html += `
                          <option value="${e.id}">${e.nama_lengkap}</option>
                      `;
                    })
                }
                $('#id_signer_0').html(html);
            })
        }

        if (currentIndex < newIndex) {
          form.find(".body:eq(" + newIndex + ") label.error").remove();
          form
            .find(".body:eq(" + newIndex + ") .error")
            .removeClass("error");
        }
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();

      },

      onFinishing: function (event, currentIndex) {
        console.log(form.validate());
        form.validate().settings.ignore = ":disabled";
        return form.valid();
      },

      onFinished: function (event, currentIndex) {
            Swal.fire({
              title: 'Loading...',
              allowOutsideClick: false,
              showConfirmButton: false,
              didOpen: () => {
                Swal.showLoading();
              }
            });

            var fD = document.forms.composeForm;
              var fData = new FormData(fD);
              var formData = new FormData();
              var data = {};

              for (var [key, value] of fData.entries()) {

                const input = fD.elements[key];
                if (input.type == 'select-multiple') {
                    data[key] = [];
                    data[key].push(value);
                    formData.append(key, data[key]);
                }else if(input.type == 'checkbox'){
                    if (!Array.isArray(data[key])) {
                        data[key] = [];
                    }
                    data[key].push(value);
                }else if(input.type == 'file'){
                    var field = document.querySelector('[name="'+key+'"]');
                    formData.append(key, field.files[0]);
                }else{
                  formData.append(key, value);
                }
              }

              fetch("{{ route('forms.store') }}", {
                  method: "POST",
                  body: formData,
                  headers: {
                      "X-CSRF-TOKEN": "{{csrf_token()}}"
                  }
              }).then(response => response.json())
              .then(resp => {
                Swal.close();
                if (resp.status == true) {
                  Swal.fire('Forms success created !', '', 'success')

                  setInterval(() => {
                      window.location.href = "{{url('forms/detail')}}/"+resp.data.hash_id
                  }, 1000);
                  }else if (resp.status == false){
                    if (resp.data) {
                            var error = Object.entries(resp.data);
                            error.forEach((key,value) => {
                              console.log(key[1]);
                            });
                        }
                  }
              }).catch(error => {
                Swal.close();

                console.error(error);
              })

          },
        });

        $(".validation-wizard").validate({
        ignore: "input[type=hidden]",
        errorClass: "text-danger",
        successClass: "text-success",
        highlight: function (element, errorClass) {
          $(element).removeClass(errorClass);
        },
        unhighlight: function (element, errorClass) {
          $(element).removeClass(errorClass);
        },
        errorPlacement: function (error, element) {
          error.insertAfter(element);
        },
        rules: {
          id_ref_form: {
            required: true
          },
          email: {
            email: !0,
          },
          "receiver_internal[0]": {
            required: function(element){
                if ($("[name='receiver_eksternal[0][name]']").val()=="" && $("[name='receiver_eksternal[0][email]']").val()=="" && $("[name='receiver_eksternal[0][as]']").val()=="") {
                  return true;
                }else{
                  return false;
                }
            },
          },
          "receiver_eksternal[0][name]": {
              required: function(element){
                return $("[name='receiver_internal[0]']").val()=="";
            },
          },
          "receiver_eksternal[0][email]": {
              required: function(element){
                return $("[name='receiver_internal[0]']").val()=="";
            },
          },
          "receiver_eksternal[0][as]": {
              required: function(element){
                return $("[name='receiver_internal[0]']").val()=="";
            },
          },
          "subject" : {
            required: true,
          }
        },
      });

    function showFormBody(val) {

      if (val == '') {
        $('#preview_template').hide();
      }

      let url = "{{route('forms.template', ':id')}}";
      url = url.replace(':id', val);
      fetch(url)
        .then((response) => response.json())
        .then((data) => {
          if (data.form.template_storage) {
            $('#preview_template').show();
            $('#previewOffice').attr('src', 'https://view.officeapps.live.com/op/embed.aspx?src='+data.form.template_storage+'&embedded=true');
          }else{
            $('#preview_template').hide();
          }

          let html = data.html;
          let repeat = data.repeat ?? '';

          if (repeat !== '') {
              html = html + repeat;
          }
          $('#form-body').html(html);
        })
      .catch(console.error);
    }
    
  </script>
  <script src="{{asset('back')}}/libs/jquery.repeater/jquery.repeater.min.js"></script>
  <script src="{{asset('back')}}/extra-libs/jquery.repeater/repeater-init.js"></script>
  <script src="{{asset('back')}}/libs/select2/dist/js/select2.full.min.js"></script>
  <script src="{{asset('back')}}/libs/select2/dist/js/select2.min.js"></script>
  <script src="{{asset('back')}}/js/pages/forms/select2/select2.init.js"></script>
  <script>

  var signer_repeat_count = 0;

  function signer_repeat() {
    signer_repeat_count++;
    var objTo = document.getElementById("signer_repeat");
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "mb-3 removeclassSigner" + signer_repeat_count);
    var rdiv = "removeclassSigner" + signer_repeat_count;
    divtest.innerHTML =
      `<div class="row"><div class="col-sm-9">
                <div class="mb-3">
                  <label for="id_signer_${signer_repeat_count}">Signer ${signer_repeat_count + 1}</label>
                  <select name="signer[${signer_repeat_count}]" id="id_signer_${signer_repeat_count}" class="select2 form-control custom-select" style="width: 100%; height: 36px">
                  </select>
                </div>
              </div>
              <div class="col-sm-3 mt-4"> <div class="form-group"> <button class="btn rounded-pill px-4 btn-light-danger text-danger font-weight-medium waves-effect waves-light" type="button" onclick="remove_signer_repeat(${signer_repeat_count});"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></div>`;

    objTo.appendChild(divtest);
    feather.replace();
    $('#id_signer_'+signer_repeat_count).select2();
  }

  function remove_signer_repeat(rid) {
    signer_repeat_count--;
    $(".removeclassSigner" + rid).remove();
  }

  var receiver_external_repeat_count = 0;

  function receiver_external_repeat() {
    receiver_external_repeat_count++;
    var objTo = document.getElementById("receiver_external_repeat");
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "mb-3 removeclassReceiverExternal" + receiver_external_repeat_count);
    var rdiv = "removeclassReceiverExternal" + receiver_external_repeat_count;
    divtest.innerHTML =
      `<div class="row"><div class="col-sm-3">
                <div class="mb-3">
                  <input
                    type="text"
                    class="form-control"
                    id="name"
                    name="receiver_external[${receiver_external_repeat_count}][name]"
                    placeholder="Name"
                  />
                </div>
              </div>
              <div class="col-sm-3">
                <div class="mb-3">
                  <input
                    type="text"
                    class="form-control"
                    id="email"
                    name="receiver_external[${receiver_external_repeat_count}][email]"
                    placeholder="Email"
                  />
                </div>
              </div>
              <div class="col-sm-3">
                <div class="mb-3">
                  <input
                    type="text"
                    class="form-control"
                    id="as"
                    name="receiver_external[${receiver_external_repeat_count}][as]"
                    placeholder="As a"
                  />
                </div>
              </div><div class="col-sm-3"> <div class="form-group"> <button class="btn rounded-pill px-4 btn-light-danger text-danger font-weight-medium waves-effect waves-light" type="button" onclick="remove_receiver_external_repeat(${receiver_external_repeat_count});"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></div>`;

    objTo.appendChild(divtest);
    feather.replace();
  }

  function remove_receiver_external_repeat(rid) {
    receiver_external_repeat_count--;
    $(".removeclassReceiverExternal" + rid).remove();
  }

  var receiver_internal_repeat_count = 0;

  function receiver_internal_repeat() {
    receiver_internal_repeat_count++;
    var objTo = document.getElementById("receiver_internal_repeat");
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "mb-3 removeclassReceiverInternal" + receiver_internal_repeat_count);
    var rdiv = "removeclassReceiverInternal" + receiver_internal_repeat_count;
    divtest.innerHTML =
      `<div class="row"><div class="col-sm-9">
                <div class="mb-3">
                  <select name="receiver_internal[${receiver_internal_repeat_count}]" id="id_receiver_internal_${receiver_internal_repeat_count}" class="select2 form-control custom-select" style="width: 100%; height: 36px">
                      <option value="">-- Select --</option>
                      @foreach ($receiver as $item)
                        <option value="{{$item->id}}">{{$item->nama_lengkap}}</option>
                      @endforeach
                  </select>
                </div>
              </div>
              <div class="col-sm-3"> <div class="form-group"> <button class="btn rounded-pill px-4 btn-light-danger text-danger font-weight-medium waves-effect waves-light" type="button" onclick="remove_receiver_internal_repeat(${receiver_internal_repeat_count});"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></div>`;

    objTo.appendChild(divtest);
    feather.replace();
    $('#id_receiver_internal_'+receiver_internal_repeat_count).select2();
  }

  function remove_receiver_internal_repeat(rid) {
    receiver_internal_repeat_count--;
    $(".removeclassReceiverInternal" + rid).remove();
    console.log($(".removeclassReceiverInternal" + rid));
  }
  
  function getRepeatFormField() {
    var repeatFormbuilder = document.getElementsByClassName("repeat-formbuilderbuilder");

    // Loop through the input fields and do something with them
    for (var i = 0; i < repeatFormbuilder.length; i++) {
      console.log(repeatFormbuilder[i].value);
    }
  }

  $('.dropify').dropify({
      messages: {
          'default': 'Drag and drop a file here or click',
          'replace': 'Drag and drop or click to replace',
          'remove':  'Remove',
          'error':   'Ooops, something wrong happended.'
      }
  });
  
  document.getElementById('uploadHref').onclick = function() {
    document.getElementById('upload').click();
  }

  const formUpload = document.getElementById('form-upload');

  function uploadSubmit() {
    formSubmit.click();
  }

  formUpload.addEventListener('submit', async (e) => {
    e.preventDefault();

    let file = formUpload.file.files[0];

    let formData = new FormData();
    formData.append('id_form', temp_id_form)
    formData.append('file', file)

    try {
        let response = await fetch("{{ route('forms.upload') }}", {
            method: "POST",
            body: formData,
            headers: {
                "X-CSRF-TOKEN": "{{csrf_token()}}"
            }
        });
        var datasend = await response.json();

        if (datasend.status == true) {

            $('#fileUploaded').show();
            $('#fileUploaded').html(datasend.data.originalName);
            $('.validation-wizard').find('a[href="#finish"]').show();

        }else if(datasend.status == false){
            if (datasend.data) {
                var error = Object.entries(datasend.data);
                var html = ''
                error.forEach((key,value) => {
                  if (key[1]) {
                    key[1].forEach((k,v) => {
                      console.log(k);
                      html += '<li>'+k+'</li>'
                    })
                  }
                });

                Swal.fire({
                  title: 'Fail !',
                  icon: 'error',
                  html:
                      '<ul>'+html+'</ul>'    
                  ,
                  showCloseButton: true,
                  showCancelButton: false,
                  focusConfirm: false,
                  confirmButtonText:
                    '<i class="fa fa-thumbs-up"></i> Ok!',
                  confirmButtonAriaLabel: 'Thumbs up, great!',
                })
            }
        }

    } catch (err) {
        console.log(err);
    }
  })

  function showPegawaiAtasan(id) {
    
    let html_atasan = null;
    let html_semua = null;

    if (id) {
      let formData = new FormData();
      formData.append('id_pegawai', id);
  
      fetch("{{route('forms.pegawaiSigner')}}", {
          method: "POST",
          body: formData,
          headers: {
              "X-CSRF-TOKEN": "{{csrf_token()}}"
          }
      }).then(response => response.json())
      .then(function(resp) {
        
        let semua = resp.data?.semua;
        if (semua.length > 0) {
          semua.forEach((e,i) => {
            html_semua += `
            <option value="${e.id}">${e.nama_lengkap}</option>
            `;
          })
        }
        let atasan = resp.data?.atasan;
        if (atasan.length > 0) {
            atasan.forEach((e,i) => {
              html_atasan += `
                  <option value="${e.id}">${e.nama_lengkap}</option>
              `;
            })
        }
  
        $('#id_signer_1').html(html_semua);
        $('#id_signer_2').html(html_atasan);
  
      })
    }else{
      $('#id_signer_1').html(html_semua);
      $('#id_signer_2').html(html_atasan);
    }

  }

  function formbuilder_repeat() {

      var elements = document.querySelectorAll('[id="repeat-formbuilder"]');

      // Get the number of elements with the "your-id" id
      var count = elements.length + 1;

      // Get the parent form element
      const parentForm = document.getElementById("repeat-formbuilder");

      // Get the input fields inside the parent form
      const inputFields = parentForm.querySelectorAll("input, select, textarea");

      // Clone the parent form element
      const clonedForm = parentForm.cloneNode(true);

      // Update the name attributes of the cloned input fields
      const clonedInputFields = clonedForm.querySelectorAll("input, select, textarea");
      clonedInputFields.forEach((field, index) => {
        const fieldName = field.getAttribute("name");
        if (fieldName) {
          const newFieldName = fieldName.replace(/\d+/, count);
          console.log(newFieldName);
          field.setAttribute("name", newFieldName);
        }
      });

      // Add a "Remove" button to the cloned form element
      const removeButton = document.createElement("button");
      removeButton.innerHTML = "<i class='ri-delete-bin-line fs-5'></i>";
      removeButton.classList.add("btn", "rounded-pill", "px-4", "btn-light-danger", "text-danger", "font-weight-medium", "waves-effect", "waves-light", "mb-3");
      removeButton.addEventListener("click", () => {
        clonedForm.remove();
      });
      
      const titleRows = document.createElement("div");
      titleRows.innerHTML = '<b>Rows '+count+'</b>';
      titleRows.classList.add("text-center");

      clonedForm.prepend(titleRows);
      clonedForm.appendChild(removeButton);

      // Add the cloned form to the DOM
      parentForm.parentNode.insertBefore(clonedForm, null);
  }
  </script>
@endsection