@extends('layouts.mainframe')

{{-- styles --}}
@section('page-styles')
  <link href="{{ asset('css/micromodal.css') }}" rel="stylesheet">
@endsection

{{-- title --}}
@section('title', 'Dashboard')

{{-- 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">
              SENARAI STAF
            </h2>
          </div>
        </div>
      </div>
      <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">{{ $penggunas->total() }}</div>
              <div class="text-muted mb-3">Jumlah Pengguna</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 STAF</div>
              <div class="flex flex-row justify-end">
                <a href="{{ route('maklumat_staf.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>
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table card-table table-vcenter">
              <thead>
              <tr>
                <td class="font-semibold text-gray-600 tracking-wider">BIL</td>
                <td class="font-semibold text-gray-600 tracking-wider">NO MYKAD</td>
                <td class="font-semibold text-gray-600 tracking-wider">NO PEKERJA</td>
                <td class="font-semibold text-gray-600 tracking-wider">NAMA</td>
                <td class="font-semibold text-gray-600 tracking-wider">KUMPULAN PENGGUNA</td>
                <td class="font-semibold text-gray-600 tracking-wider">TINDAKAN</td>
              </tr>
              </thead>
              <tbody>
              @isset($penggunas)
                @foreach($penggunas as $key => $pengguna)
                  <tr>
                    <td class="font-semibold">{{ ($penggunas->firstItem() ?? 0) + $key }}</td>
                    <td class="font-semibold">{{ $pengguna->no_mykad }}</td>
                    <td class="font-semibold leading-normal">{{ $pengguna->no_pekerja }}</td>
                    <td class="font-semibold">{{ $pengguna->nama }}</td>
                    <td class="font-semibold">{{ $pengguna->group_code }}</td>
                    <td>
                      <div class="flex flex-row items-center">
                        <a href="{{ route('maklumat_staf.edit', $pengguna->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-6 rounded-lg">KEMASKINI</span>
                        </a>

                        <button type="button" class="modal-delete tooltip-tail" onclick="del(this)"
                                data-link-delete="{{ route('maklumat_staf.destroy', $pengguna->id) }}">
                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md h-5 w-5 text-gray-600 pointer-events-none" 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>
                      </div>
                    </td>
                  </tr>
                @endforeach
              @endisset
              </tbody>
            </table>
          </div>
          @if($penggunas->hasPages())
            <div class="border-t border-gray-200 px-4 py-3">
              {{ $penggunas->withQueryString()->links() }}
            </div>
          @endif
        </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');
    }

    document.addEventListener('DOMContentLoaded', function () {
      MicroModal.init();
    });
  </script>
@endsection