@extends('layouts.index')
@section('title')
    Form Workspace
@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"
    />
@endsection
@section('content')
    <div class="email-app border-top">
      <!-- ============================================================= -->
      <!-- Left Part -->
      <!-- ============================================================= -->
      <div class="left-part">
        <a
          class="
            ri-menu-2-line ri-close-fill
            btn btn-success
            show-left-part
            d-block d-md-none
          "
          href="javascript:void(0)"
        ></a>
        <div
          class="scrollable position-relative"
          style="height: calc(100vh - 190px)"
        >
          <div class="p-3">
            <a
              class="waves-effect waves-light btn btn-danger d-block"
              href="{{route('forms.create')}}"
              >Compose</a
            >
          </div>
          <div class="divider"></div>
          <ul class="list-group">
            <li>
              <small
                class="
                  p-3
                  d-block
                  text-uppercase text-dark
                  font-weight-medium
                "
                >Folders</small
              >
            </li>
            <li class="list-group-item border-0 p-0">
              <a
                href="javascript:void(0)" onclick="load()"
                class="
                  list-group-item-action
                  d-flex
                  align-items-center
                "
                ><i
                  data-feather="inbox"
                  class="feather-sm fill-white me-2"
                ></i>
                Inbox
                <span
                  class="
                    badge
                    bg-light-success
                    text-success
                    px-3
                    rounded-pill
                    font-weight-medium
                    ms-auto
                  "
                  >{{$count_inbox ?: 0}}</span
                ></a
              >
            </li>
            <li class="list-group-item border-0 p-0">
              <a
                href="javascript:void(0)" onclick="load('disposition', null, null, null)"
                class="
                  list-group-item-action
                  d-flex
                  align-items-center
                "
                ><i
                  data-feather="fast-forward"
                  class="feather-sm fill-white me-2"
                ></i>
                Forwarded
                <span
                  class="
                    badge
                    bg-light-success
                    text-success
                    px-3
                    rounded-pill
                    font-weight-medium
                    ms-auto
                  "
                  >{{$count_disposition ?: 0}}</span
                ></a
              >
            </li>
            <li class="list-group-item border-0 p-0">
              <a
                href="javascript:void(0)" onclick="load('signing', null, null, null)"
                class="list-group-item-action d-flex align-items-center"
              >
                <i
                  data-feather="feather"
                  class="feather-sm fill-white me-2"
                ></i>
                Signing
                <span
                  class="
                    badge
                    bg-light-danger
                    text-danger
                    font-weight-medium
                    px-3
                    rounded-pill
                    ms-auto
                  "
                  >{{$count_signing?: 0}}</span
                ></a
              >
            </li>
            <li class="list-group-item border-0 p-0">
              <a
                href="javascript:void(0)" onclick="load('sent_mail', null, null, null)"
                class="list-group-item-action d-block"
              >
                <i
                  data-feather="mail"
                  class="feather-sm fill-white me-2"
                ></i>
                Sent Mail
              </a>
            </li>
            <li class="list-group-item border-0 p-0">
              <hr />
            </li>
            <li>
              <small
                class="
                  p-3
                  d-block
                  text-uppercase text-dark
                  font-weight-medium
                "
                >Labels</small
              >
            </li>
            <li class="list-group-item border-0 p-0">
              <a
                href="javascript:void(0)"
                class="
                  d-flex
                  align-items-center
                  list-group-item-action
                  d-block
                "
                ><i
                  class="text-warning ri-checkbox-blank-circle-fill mx-1"
                ></i>
                On Process
              </a>
            </li>
            <li class="list-group-item border-0 p-0">
              <a
                href="javascript:void(0)"
                onclick="load('signed', null, null, null)"
                class="
                  d-flex
                  align-items-center
                  list-group-item-action
                  d-block
                "
                ><i
                  class="text-success ri-checkbox-blank-circle-fill mx-1"
                ></i>
                Signed
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- ============================================================= -->
      <!-- Right Part -->
      <!-- ============================================================= -->
      <div class="right-part mail-list bg-white">
        <div class="p-3 border-bottom">
            <div class="col-md-12">
              <form id="searchForm" style="all: unset">
              <div class="row">
                <div class="col-md-3">
                  <h3>Forms</h3>
                  <p>Here is the list of forms</p>
                </div>
                  <div class="col-md-2">
                    <label for="search">Keyword</label>
                    <input name="keyword" type="text" class="form-control" placeholder="Enter keyword">
                  </div>
                  <div class="col-md-2">
                    <label for="">Type of Search</label>
                    <select name="type" class="form-select" id="">
                      <option value="maker">Maker</option>
                      <option value="subject">Subject</option>
                    </select>
                  </div>
                  <div class="col-md-3">
                    <label for="">Letter Types</label>
                    <select name="letter_type" class="form-select" id="">
                      <option value="">-- Select --</option>
                      @foreach ($letter_types as $item)
                        <option value="{{$item->id}}">{{$item->nama}}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-md-1">
                    <button class="btn btn-primary mt-3" type="submit">Search</button>
                  </div>
              </div>
            </form>
            </div>
        </div>
        <!-- Action part -->
        <div>
          <!-- Button group part -->
          <div id="actionMultiple" >
            <div class="border-bottom p-3 d-md-flex align-items-center">
              <div class="btn-group mt-1 mb-1" >
                <div class="form-check">
                  <input
                    type="checkbox"
                    class="sl-all form-check-input danger check-light-danger"
                    id="cstall"
                  />
                  <label class="form-check-label" for="cstall"
                    >Check All</label
                  >
                </div>
              </div>
              <div class="ms-auto">
                <div
                  class="btn-group me-2"
                  role="group"
                  aria-label="Button group with nested dropdown"
                >
                  <button
                    type="button"
                    class="btn btn-outline-secondary fs-5"
                    onclick="deleteMultiple()"
                  >
                    <i class="ri-delete-bin-7-line"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- Action part -->
          <!-- Mail list-->
          <div
            class="table-responsive scrollable position-relative"
            style="height: calc(100vh - 340px)"
          >
            <table class="table email-table no-wrap table-hover v-middle">
              <tbody id="mail-list">
                
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
@endsection
@section('js')
    <script>
        $(function () {
        "use strict";

        var mail = $(".email-table .max-texts a");

        // Highlight row when checkbox is checked
        $(".email-table")
            .find("tr > td:first-child")
            .find("input[type=checkbox]")
            .on("change", function () {
            if ($(this).is(":checked")) {
                $(this).parents("tr").addClass("selected");
            } else {
                $(this).parents("tr").removeClass("selected");
            }
            });

        $(".sl-all").on("click", function () {
            $(".email-table input:checkbox").not(this).prop("checked", this.checked);
            if ($(".email-table input:checkbox").is(":checked")) {
            $(".email-table input:checkbox").parents("tr").addClass("selected");
            } else {
            $(".email-table input:checkbox").parents("tr").removeClass("selected");
            }
        });

        $("#compose_mail").on("click", function () {
            $(".right-part.mail-list").fadeOut("fast");
            $(".right-part.mail-details").fadeOut("fast");
            $(".right-part.mail-compose").fadeIn("fast");
        });

        $("#cancel_compose").on("click", function () {
            $(".right-part.mail-compose").fadeOut("fast");
            $(".right-part.mail-list").fadeIn("fast");
        });

        $(mail).on("click", function () {
            $(".right-part.mail-list").fadeOut("fast");
            $(".right-part.mail-details").fadeIn("fast");
        });

        $("#back_to_inbox").on("click", function () {
            $(".right-part.mail-details").fadeOut("fast");
            $(".right-part.mail-list").fadeIn("fast");
        });
        });
    </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>

      load();

      let id_pegawai = "{{Auth::user()->pegawai ? Auth::user()->pegawai->id : 0}}";
      var form_type_fix = 'inbox';
      
      function load(form_type = 'inbox', keyword = null, type = null, letter_type = null) {

          form_type_fix = form_type;

          const fields = {
            _token: "{{csrf_token()}}",
            keyword: keyword,
            type: type,
            form_type: form_type,
            letter_type: letter_type
          }

          fetch("{{route('forms.load')}}", {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(fields)
          })
          .then(response => response.json())
          .then(resp => {
            var data = resp.data;
            var html = '';
            var route_detail = '';
            
            // if (form_type == 'signing') {
            //   $('#actionMultiple').hide();
            // }else{
            //   $('#actionMultiple').show();
            // }

            data.forEach((e,i) => {
              var is_read = ''

              if (form_type == 'inbox') {
                let arrReceiver = e.receiver;
                let arrPegawai = [];
                arrReceiver.forEach((e1,i1) => {
                    if (e1.id_pegawai == id_pegawai && e1.is_read == 0) {
                      is_read = 'unread'
                    }
                });
              }

              if (form_type == 'disposition') {
                  let arrDisposition = e.dispositions;
                  let arrPegawai = [];
                  arrDisposition.forEach((e1,i1) => {
                    arrPegawai = e1.pegawai;
                     arrPegawai.forEach((e2,i2) => {
                      if (e2.id_pegawai == id_pegawai && e2.is_read == 0) {
                        is_read = 'unread'
                      }
                     });
                  });
              }

              if (form_type == 'signing') {
                let arrSigner = e.signer;
                let arrPegawai = [];
                arrSigner.forEach((e1,i1) => {
                    if (e1.id_pegawai == id_pegawai && e1.is_read == 0) {
                      is_read = 'unread'
                    }
                });
              }

              route_detail = "{{url('forms/detail')}}/"+e.hash_id;

                html += `<tr class="${is_read}">
                  <!-- label -->
                  <td class="chb">
                    <div class="form-check">
                      <input
                        type="checkbox"
                        class="form-check-input"
                        name="check[]"
                        value="${e.id}"
                        id="cst1"
                      />
                      <label class="form-check-label" for="cst1"
                        >&nbsp;</label
                      >
                    </div>
                  </td>
                  <!-- User -->
                  <td class="user-image">
                    <img
                      src="${e.makers.photos_storage}"
                      alt="user"
                      class="rounded-circle"
                      width="30"
                      height="30"
                    />
                  </td>
                  <td class="user-name">
                    <h5 class="mb-0">${e.makers.name}</h5>
                  </td>
                  <!-- Message -->
                  <td class="max-texts text-truncate px-1 py-3 no-wrap">
                    <a class="link" href="${route_detail}"
                      >${e.form_status}
                      <span class="blue-grey-text text-darken-4"
                        >${e.ref_form.nama} -</span
                      >
                      ${e.subject}</a
                    >
                  </td>
                  <!-- Attachment -->
                  <td class="clip"></td>
                  <!-- Time -->
                  <td class="time">${e.time_mail}</td>
                </tr>`
            });

            $('#mail-list').html(html);
          })
      }

      let searchForm = document.getElementById('searchForm')

      searchForm.addEventListener('submit', function(e){
          e.preventDefault()
          
          const formData = new FormData(searchForm);
          let data = [];

          for (const [key, value] of formData.entries()) {
             data[key] = value;
          }

          load(form_type_fix, data['keyword'], data['type'], data['letter_type']);
      })

      function deleteMultiple() {
          Swal.fire({
              title: 'Are you sure to delete this data?',
              icon: 'question',
              confirmButtonText: `Yes, delete it !`,
          }).then((result) => {
              var checked = $('input[name="check[]"]:checked');
              if (checked.length > 0) {
                  let id = [];
                  checked.each(function() {
                      id.push($(this).val());
                  });
                  if (result.isConfirmed) {
                      $.ajax({
                          url: "{{ route('forms.destroyMultiple') }}",
                          method: "POST",
                          data: {
                              "_token": "{{ csrf_token() }}",
                              "form_type": form_type_fix,
                              "forms": id
                          },

                          success: function(result) {
                              setInterval(() => {
                                  window.location.reload()
                              }, 1000);

                              Swal.fire({
                                  title: 'Forms deleted!',
                                  icon: 'success'
                              });
                          }
                      });
                  }
              }else{
                Swal.close()
                Swal.fire({
                    title: 'Select at least one form ',
                    icon: 'warning'
                })
              }
          });
      }
    </script>
@endsection