@extends('layouts.mainframe')

{{-- styles --}}
@section('page-styles')
  <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
  <link href="{{ asset('css/micromodal.css') }}" rel="stylesheet">

  <style>
    .dataTable-input {
      outline: none;
      background-color: #edf2f7;
    }
    .dataTable-selector {
      outline: none;
    }
    .dataTable-top, .dataTable-bottom {
      padding: 8px 1rem;
    }
    .dataTable-info {
      margin: 7px 1rem;
    }
  </style>
@endsection

{{-- title --}}
@section('title', 'Paparan Utama')

{{-- contents --}}
@section('content')
  <div class="content relative">
    @if(session('status_class') && session('status_message'))
      <div class='banner-notification-{{ session('status_class') }} slide-out-top font-semibold tracking-wide'>
        {{ session('status_message') }}
      </div>
    @endif
    <div class="container-xl">
      <!-- Page title -->
      <div class="page-header">
        <div class="row align-items-center">
          <div class="col-auto">
            <h2 class="font-bold text-xl tracking-wide">
              PAPARAN UTAMA
            </h2>
          </div>
        </div>
      </div>
      @if( session('user_group') === 'PENGARAH')
        <div class="mb-5" style="background-image: linear-gradient(120deg, #cf556c 0%, #ff8177 100%)">
          <div class="p-4">
            <div class="font-semibold text-white flex flex-row items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md h-5 w-5 text-white mr-1"  viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M12 9v2m0 4v.01" />
                <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
              </svg>
              <span>Terdapat {{ $count_proses }} permohonan baru menanti untuk proses semakan.</span>
            </div>
          </div>
        </div>
      @endif
      <div class="row row-deck row-cards">
        <div class="col-sm-3">
          <div class="card rounded-xl shadow-md">
            <div class="card-body p-2 text-center">
              <div class="h1 m-0">{{ $count_petak }}</div>
              <div class="text-muted mb-3">Petak Sementara</div>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="card rounded-xl shadow-md">
            <div class="card-body p-2 text-center">
              <div class="h1 m-0">{{ $count_tutup }}</div>
              <div class="text-muted mb-3">Penutupan Jalan</div>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="card rounded-xl shadow-md">
            <div class="card-body p-2 text-center">
              <div class="h1 m-0">{{ $count_petak_tutup }}</div>
              <div class="text-muted mb-3">Kedua-dua</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-12">
        <div class="card rounded-xl shadow-md">
          <div class="border-b border-gray-300 px-4 py-3">
            <div class="flex flex-row items-center justify-between">
              <div class="text-sm font-bold tracking-wide">SENARAI PERMOHONAN</div>
              <div class="flex flex-row justify-end">
                <select onchange="location = this.value;" class="text-sm text-gray-600 font-bold tracking-wide mr-3 outline-none">
                  @php
                    $jenis = app('request')->input('jenis');
                  @endphp
                  <option value="{{ route('home') }}">SEMUA</option>
                  <option value="{{ route('home',['jenis=petak']) }}" @if($jenis !== '' && $jenis == 'petak') selected @endif>PETAK SEMENTARA</option>
                  <option value="{{ route('home',['jenis=tutup']) }}" @if($jenis !== '' && $jenis == 'tutup') selected @endif>PENUTUPAN JALAN</option>
                  <option value="{{ route('home',['jenis=petak_tutup']) }}" @if($jenis !== '' && $jenis == 'petak_tutup') selected @endif>KEDUA-DUA</option>
                </select>
                @if( session('user_group') === 'STAF' || session('user_group') === 'AWAM' )
                  <a href="{{ route('permit.create') }}" class="flex flex-row items-center text-white hover:text-white transition duration-500 ease-in-out bg-space-gray hover:bg-gray-700 px-3 py-1 rounded-lg">
                    <div class="text-sm font-bold tracking-wide mr-1">BARU</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md h-3 w-3" viewBox="0 0 24 24"
                         stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z"></path>
                      <line x1="12" y1="5" x2="12" y2="19"></line>
                      <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
                  </a>
                @endif
              </div>
            </div>
          </div>
          <table id="table" class="table card-table table-vcenter">
            <thead>
            <tr>
              <td class="font-semibold text-gray-600 tracking-wider">BIL</td>
              <td class="text-center font-semibold text-gray-600 tracking-wider">TARIKH MOHON</td>
              <td class="font-semibold text-gray-600 tracking-wider">JENIS</td>
              <td class="font-semibold text-gray-600 tracking-wider">PEMOHON</td>
              <td class="font-semibold text-gray-600 tracking-wider">TEMPOH</td>
              <td class="font-semibold text-gray-600 tracking-wider">STATUS</td>
              <td class="font-semibold text-gray-600 tracking-wider">TINDAKAN</td>
            </tr>
            </thead>
            <tbody>
            @foreach($permits as $key => $permit)
              <tr style="@if( session('user_group') === 'PENGARAH' && $permit->status === 'PROSES') background-color: #fae1dd; @endif">
                <td class="text-center font-semibold">{{ ($permits->currentPage() - 1) * $permits->perPage() + $loop->iteration }}</td>
                <td class="text-center font-semibold">{{ $permit->tarikh_permohonan }}</td>
                <td class="font-semibold leading-normal">{{ $permit->jenis }}<br>
                <td class="font-semibold leading-normal">{{ $permit->nama }}<br>
                  <span class="text-gray-500">{{ $permit->no_kp }}</span>
                </td>
                <td class="font-semibold">
                  <div class="flex flex-row items-center mx-auto">
                    <span class="rounded-l-md bg-gray-200 px-1">{{ $permit->tarikh_mula }}</span>
                    <span class="rounded-r-md bg-gray-600 text-white px-1 whitespace-no-wrap">{{ $permit->jam_mula }}</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md mx-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"></path><line x1="5" y1="12" x2="19" y2="12"></line><line x1="15" y1="16" x2="19" y2="12"></line><line x1="15" y1="8" x2="19" y2="12"></line></svg>
                    <span class="rounded-l-md bg-gray-200 px-1">{{ $permit->tarikh_tamat }}</span>
                    <span class="rounded-r-md bg-gray-600 text-white px-1 whitespace-no-wrap">{{ $permit->jam_tamat }}</span></div>
                </td>
                <td class="font-semibold">{{ $permit->status }}</td>
                <td>
                  <div class="flex flex-row items-center">
                    <a href="{{ route('permit.edit', $permit->id) }}" class="tooltip-tail relative">
                      <svg xmlns="http://www.w3.org/2000/svg"
                           class="icon icon-md h-5 w-5 text-gray-600 mr-1" viewBox="0 0 24 24"
                           stroke-width="1.3" stroke="currentColor" fill="none" stroke-linecap="round"
                           stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z"></path>
                        <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3"></path>
                        <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3"></path>
                        <line x1="16" y1="5" x2="19" y2="8"></line>
                      </svg>
                      <span class="tooltip-text text-xs font-semibold tracking-wide text-space-gray bg-white shadow-lg py-1 px-2 mt-1 -ml-4 rounded-lg">KEMASKINI</span>
                    </a>
                    @if($permit->status === 'PROSES')
                      <button type="button" class="modal-delete tooltip-tail relative" onclick="del(this)"
                              data-link-delete="{{ route('permit.destroy', $permit->id) }}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md h-5 w-5 text-gray-600 pointer-events-none mr-1" viewBox="0 0 24 24" stroke-width="1.3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"></path><line x1="4" y1="7" x2="20" y2="7"></line><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path></svg>
                        <span class="tooltip-text text-xs font-semibold tracking-wide text-space-gray bg-white shadow-lg py-1 px-2 mt-1 -ml-4 rounded-lg">HAPUS</span>
                      </button>
                    @endif
                    @if($permit->status === 'LULUS')
                      <a href="{{ route('surat_kelulusan', $permit->id) }}" target="_blank" class="tooltip-tail relative">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md h-5 w-5 text-gray-600 mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
                        <span class="tooltip-text text-xs font-semibold tracking-wide text-space-gray bg-white shadow-lg py-1 px-2 mt-1 -ml-4 rounded-lg">SURAT KELULUSAN</span>
                      </a>
                    @elseif($permit->status === 'TIDAK LULUS')
                      <a href="{{ route('surat_tidak_lulus', $permit->id) }}" target="_blank" class="tooltip-tail relative">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md h-5 w-5 text-gray-600 mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
                        <span class="tooltip-text text-xs font-semibold tracking-wide text-space-gray bg-white shadow-lg py-1 px-2 mt-1 -ml-4 rounded-lg">SURAT TIDAK LULUS</span>
                      </a>
                    @endif
                  </div>
                </td>
              </tr>
            @endforeach
            </tbody>
          </table>
          <div class="card-footer d-flex align-items-center">
            <div class="d-flex justify-content-center w-100">
              {{ $permits->appends(request()->query())->links() }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal micromodal-slide" id="modal-delete" aria-hidden="true">
    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
      <div class="modal__container" role="dialog" aria-modal="true">
        <form id="form-modal-delete" action="" method="POST">
          @csrf
          @method('DELETE')
          <header class="modal__header">
            <div class="text-xl font-bold text-crimson">
              Adakah anda pasti untuk menghapuskan rekod ini?
            </div>
            <button type="button" class="modal__close" aria-label="Close modal" data-micromodal-close></button>
          </header>
          <main class="py-2">
          </main>
          <footer class="modal__footer">
            <button type="submit" class="text-sm font-bold tracking-widest btn bg-bittersweet text-white hover:text-white mr-2">HAPUS</button>
            <button type="button" class="text-sm font-bold tracking-widest btn bg-gray-300 text-space-gray" data-micromodal-close>BATAL</button>
          </footer>
        </form>
      </div>
    </div>
  </div>
@endsection

{{-- scripts --}}
@section('page-scripts')
  <script src="{{ asset('js/micromodal.min.js') }}"></script>
  <script>
    function del(e){
      document.getElementById('form-modal-delete').action = e.getAttribute("data-link-delete");
      MicroModal.show('modal-delete');
    }

    window.onload = function () {
      // const dataTable = new simpleDatatables.DataTable("#table", {
      //   labels: {
      //     placeholder: "Carian...",
      //     // perPage: "{select} entries per page",
      //     noRows: "Tiada rekod",
      //     info: "Paparan {start} hingga {end} daripada {rows} rekod",
      //   }
      // });
      //
      // document.querySelector('table').parentNode.classList.add('table-responsive');

      MicroModal.init();
    };
  </script>
@endsection