@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" />
@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">Step wizard with validation</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 action="#" 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="id_signer[]" id="id_signer_1" 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="id_receiver_internal[]" id="id_receiver_internal_1" 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">
                <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="name"
                    placeholder="Name"
                  />
                </div>
              </div>
              <div class="col-sm-3">
                <div class="mb-3">
                  <input
                    type="text"
                    class="form-control"
                    id="email"
                    name="email"
                    placeholder="Email"
                  />
                </div>
              </div>
              <div class="col-sm-3">
                <div class="mb-3">
                  <input
                    type="text"
                    class="form-control"
                    id="as"
                    name="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">
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="behName1">Behaviour :</label>
                  <input
                    type="text"
                    class="form-control required"
                    id="behName1"
                  />
                </div>
                <div class="mb-3">
                  <label for="participants1">Confidance</label>
                  <input
                    type="text"
                    class="form-control required"
                    id="participants1"
                  />
                </div>
                <div class="mb-3">
                  <label for="participants1">Result</label>
                  <select
                    class="form-select required"
                    id="participants1"
                    name="location"
                  >
                    <option value="">Select Result</option>
                    <option value="Selected">Selected</option>
                    <option value="Rejected">Rejected</option>
                    <option value="Call Second-time">
                      Call Second-time
                    </option>
                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="decisions1">Comments</label>
                  <textarea
                    name="decisions"
                    id="decisions1"
                    rows="4"
                    class="form-control"
                  ></textarea>
                </div>
                <div class="mb-3">
                  <label>Rate Interviwer :</label>
                  <div class="c-inputs-stacked">
                    <div class="form-check">
                      <input
                        type="radio"
                        id="customRadio11"
                        name="customRadio"
                        class="form-check-input"
                      />
                      <label
                        class="form-check-label"
                        for="customRadio11"
                        >1 star</label
                      >
                    </div>
                    <div class="form-check">
                      <input
                        type="radio"
                        id="customRadio12"
                        name="customRadio"
                        class="form-check-input"
                      />
                      <label
                        class="form-check-label"
                        for="customRadio12"
                        >2 star</label
                      >
                    </div>
                    <div class="form-check">
                      <input
                        type="radio"
                        id="customRadio13"
                        name="customRadio"
                        class="form-check-input"
                      />
                      <label
                        class="form-check-label"
                        for="customRadio13"
                        >3 star</label
                      >
                    </div>
                    <div class="form-check">
                      <input
                        type="radio"
                        id="customRadio14"
                        name="customRadio"
                        class="form-check-input"
                      />
                      <label
                        class="form-check-label"
                        for="customRadio14"
                        >4 star</label
                      >
                    </div>
                    <div class="form-check">
                      <input
                        type="radio"
                        id="customRadio15"
                        name="customRadio"
                        class="form-check-input"
                      />
                      <label
                        class="form-check-label"
                        for="customRadio15"
                        >5 star</label
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Step 5 -->
          <h6>Step 5</h6>
          <section>
            <div class="row">
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="behName1">Behaviour :</label>
                  <input
                    type="text"
                    class="form-control required"
                    id="behName1"
                  />
                </div>
                <div class="mb-3">
                  <label for="participants1">Confidance</label>
                  <input
                    type="text"
                    class="form-control required"
                    id="participants1"
                  />
                </div>
                <div class="mb-3">
                  <label for="participants1">Result</label>
                  <select
                    class="form-select required"
                    id="participants1"
                    name="location"
                  >
                    <option value="">Select Result</option>
                    <option value="Selected">Selected</option>
                    <option value="Rejected">Rejected</option>
                    <option value="Call Second-time">
                      Call Second-time
                    </option>
                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="decisions1">Comments</label>
                  <textarea
                    name="decisions"
                    id="decisions1"
                    rows="4"
                    class="form-control"
                  ></textarea>
                </div>
                <div class="mb-3">
                  <label>Rate Interviwer :</label>
                  <div class="c-inputs-stacked">
                    <div class="form-check">
                      <input
                        type="radio"
                        id="customRadio11"
                        name="customRadio"
                        class="form-check-input"
                      />
                      <label
                        class="form-check-label"
                        for="customRadio11"
                        >1 star</label
                      >
                    </div>
                    <div class="form-check">
                      <input
                        type="radio"
                        id="customRadio12"
                        name="customRadio"
                        class="form-check-input"
                      />
                      <label
                        class="form-check-label"
                        for="customRadio12"
                        >2 star</label
                      >
                    </div>
                    <div class="form-check">
                      <input
                        type="radio"
                        id="customRadio13"
                        name="customRadio"
                        class="form-check-input"
                      />
                      <label
                        class="form-check-label"
                        for="customRadio13"
                        >3 star</label
                      >
                    </div>
                    <div class="form-check">
                      <input
                        type="radio"
                        id="customRadio14"
                        name="customRadio"
                        class="form-check-input"
                      />
                      <label
                        class="form-check-label"
                        for="customRadio14"
                        >4 star</label
                      >
                    </div>
                    <div class="form-check">
                      <input
                        type="radio"
                        id="customRadio15"
                        name="customRadio"
                        class="form-check-input"
                      />
                      <label
                        class="form-check-label"
                        for="customRadio15"
                        >5 star</label
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </form>
      </div>
    </div>
  </div>
</div>
@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>
  var form = $(".validation-wizard").show();

    $(".validation-wizard").steps({
      headerTag: "h6",
      bodyTag: "section",
      transitionEffect: "fade",
      titleTemplate: '<span class="step">#index#</span> #title#',
      labels: {
        finish: "Submit",
      },
      onStepChanging: function (event, currentIndex, newIndex) {
        return (
          currentIndex > newIndex ||
          (!(3 === newIndex && Number($("#age-2").val()) < 18) &&
            (currentIndex < newIndex &&
              (form.find(".body:eq(" + newIndex + ") label.error").remove(),
              form
                .find(".body:eq(" + newIndex + ") .error")
                .removeClass("error")),
            (form.validate().settings.ignore = ":disabled,:hidden"),
            form.valid()))
        );
      },
      onFinishing: function (event, currentIndex) {
        return (form.validate().settings.ignore = ":disabled"), form.valid();
      },
      onFinished: function (event, currentIndex) {
        swal(
          "Form Submitted!",
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat eleifend ex semper, lobortis purus sed."
        );
      },
    }),
    $(".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: {
        email: {
          email: !0,
        },
      },
    });

    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 = 1;

  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}</label>
                  <select name="id_signer[]" 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 = 1;

  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="name"
                    placeholder="Name"
                  />
                </div>
              </div>
              <div class="col-sm-3">
                <div class="mb-3">
                  <input
                    type="text"
                    class="form-control"
                    id="email"
                    name="email"
                    placeholder="Email"
                  />
                </div>
              </div>
              <div class="col-sm-3">
                <div class="mb-3">
                  <input
                    type="text"
                    class="form-control"
                    id="as"
                    name="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) {
    $(".removeclassReceiverExternal" + rid).remove();
  }

  var receiver_internal_repeat_count = 1;

  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="id_receiver_internal[]" 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_signer_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) {
    $(".removeclassReceiverInternal" + rid).remove();
  }
  </script>
@endsection