@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>Step 1</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>
              </div>
            </div>
          </section>
          <!-- Step 2 -->
          <h6>Step 2</h6>
          <section>
            <div class="row">
              <div class="col-sm-9">
                <div class="mb-3">
                  <label for="id_signer_1">Signer 1 <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>
            <div id="signer_repeat" class="my-4 mb-5"></div>
          </section>
          <!-- Step 3 -->
          <h6>Step 3</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 ($pegawai 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>Step 4</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>
          <!-- Step 5 -->
          <h6>Step 5</h6>
          <section>
            <div class="row mb-3">
              <div class="col-md-12">
                <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 class="d-flex justify-content-between">
                    <div class="folat-start">
                      <a href="#" id="downloadOffice" class="btn btn-outline-info btn-sm" download="">
                        <i class="fa fa-file-word"></i> Download
                      </a>
                      <a href="javascript:void(0)" id="uploadHref" class="btn btn-outline-warning btn-sm">
                        <i class="fa fa-upload"></i> Upload
                      </a>
                      
                    </div>
                    <div class="float-end">
                        <i class="fa fa-check text-success" id="fileUploaded" style="display:none"></i>
                    </div>
                  </div>
              </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 == 4) {
          
          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 => {
            if (resp.status == true) {
                  let data = resp.data;

                  temp_id_form = data.id;
                  $('#previewOffice').attr('src', 'https://view.officeapps.live.com/op/embed.aspx?src='+data.temp_word_storage+'&embedded=true')
                  $('#downloadOffice').attr('href', data.temp_word_storage);
                  console.log(resp);
              }else if (resp.status == false){
                if (resp.data) {
                        var error = Object.entries(resp.data);
                        error.forEach((key,value) => {
                          console.log(key[1]);
                        });
                    }
              }
          })
        }
        
        if (currentIndex == 4 && newIndex < 4) {

          let field = {
            _token: "{{csrf_token()}}",
            id_form: temp_id_form
          };

          fetch("{{ route('forms.destroy') }}", {
              method: "POST",
              body: JSON.stringify(field),
              headers: {
                  'Content-Type': 'application/json'
              }
          }).then(response => response.json())
          .then(resp => {
            if (resp.status == true) {
                console.log(resp);
              }else if (resp.status == false){
                if (resp.data) {
                        var error = Object.entries(resp.data);
                        error.forEach((key,value) => {
                          console.log(key[1]);
                        });
                    }
              }
          })
        }

        if (newIndex === 3 && Number($("#age-2").val()) < 18) {
              return false;
        }

        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();

      },
      onStepChanged: function (event, currentIndex, priorIndex){
        if (priorIndex == 4) {
          $('#fileUploaded').hide();
          $('#file').val('');
          $('.last').addClass('disabled').removeClass('done');
        }
        if (currentIndex == 4) {
            $('.validation-wizard').find('a[href="#finish"]').hide();
        }
      },
      onFinishing: function (event, currentIndex) {
        form.validate().settings.ignore = ":disabled";
        return form.valid();
      },
      onFinished: function (event, currentIndex) {

        let field = {
          _token: "{{csrf_token()}}",
          id_form: temp_id_form
        };

        fetch("{{route('forms.activate')}}", {
          method: 'POST',
          body: JSON.stringify(field),
          headers: {
              'Content-Type': 'application/json'
          }
        }).then(response => response.json())
        .then(resp => {
          if (resp.status == true) {
            Swal.fire('Forms success created !', '', 'success')

            setInterval(() => {
                window.location.href = "{{url('forms/detail')}}/"+resp.data.id
            }, 1000);
          } else {
            if (resp.data) {
                var error = Object.entries(resp.data);
                error.forEach((key,value) => {
                  alert(key[1])
                });
            }
          }
        })
      },
    });

    $(".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) {

      let url = "{{route('forms.template', ':id')}}";
      url = url.replace(':id', val);
      fetch(url)
        .then((response) => response.json())
        .then((data) => {
          
          let html = data.html;
          $('#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">
                      <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="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 ($pegawai 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));
  }

  $('.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);
    }
  })
  </script>
@endsection