@extends('layouts.mainframe')

{{-- styles --}}
@section('page-styles')
  <link href="{{ asset('css/pristine.css') }}" rel="stylesheet">
  <link href="{{ asset('css/choices.min.css') }}" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <style>
    .flatpickr-input.flatpickr-input.active {
      border-color: transparent;
      box-shadow: none;
    }
    .calendar {
      border-top-style: none;
      border-left-style: none;
      border-right-style: none;
      border-radius: 0;
      border-bottom-width: 2px;
      border-color: #edf2f7;
      font-size: 1rem;
    }
    :focus {
      outline: none;
    }
  </style>
  <livewire:styles />
@endsection

{{-- title --}}
@section('title', 'Maklumat Staf')

{{-- contents --}}
@section('content')
  <div class="content">
    @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">
      <form id="form1" action="{{ !isset($pengguna) ? route('maklumat_staf.store') : route('maklumat_staf.update', $pengguna->id) }}" class="px-3" method="POST">
        @csrf
        @isset($pengguna) @method('PATCH') @endisset
        <div class="card rounded-xl shadow-lg">
          <div class="border-b border-gray-300">
            <div class="flex items-center h-16">
              <div class="text-lg font-bold tracking-normal leading-none px-4">
                @isset($pengguna) KEMASKINI STAF @else KEMASUKAN BARU STAF @endisset<br>
              </div>
            </div>
          </div>
          <div class="text-sm font-bold tracking-wide h-12 px-4 flex items-center border-b border-gray-300 bg-gray-200">
            MAKLUMAT AKSES SISTEM
          </div>
          <div class="flex flex-col md:flex-row">
            <div class="w-full border-r border-gray-300 md:border-transparent md:w-1/2">
              <div class="px-4 pt-4 pb-0 md:pb-0">
                <livewire:input-elem
                  :label="'NO MYKAD'" :post="'no_mykad'" :required="true" :autocomplete="'off'"
                  :value="$pengguna->no_mykad ?? ''" :err_message="'Sila masukkan no kad pengenalan'"/>

                {{--                <input-elem--}}
                {{--                  label="NO MYKAD" type="text" post="no_mykad" required="true" autocomplete="off"--}}
                {{--                  value="{{ $pengguna->no_mykad ?? '' }}"--}}
                {{--                  err-message="Sila masukkan no kad pengenalan"></input-elem>--}}
              </div>
            </div>
            <div class="w-full md:w-1/2">
              <div class="p-4 border-r border-gray-300">
                @isset($pengguna)
                  <livewire:input-elem
                    :label="'KEMASKINI KATA LALUAN'" :type="'password'" :post="'password'"
                    :autocomplete="'off'"/>
                @else
                  <livewire:input-elem
                    :label="'KATA LALUAN'" :type="'password'" :post="'password'"
                    :required="true" :err_message="'Sila masukkan kata laluan'" :autocomplete="'off'"/>
                @endisset
                {{--                <input-elem--}}
                {{--                  label="@isset($pengguna) KEMASKINI KATA LALUAN @else KATA LALUAN @endisset" type="password" post="password" autocomplete="off"--}}
                {{--                  @isset($pengguna) @else required="true" err-message="Sila masukkan kata laluan" @endisset--}}
                {{--                ></input-elem>--}}
              </div>
            </div>
          </div>
          <div class="flex flex-col md:flex-row">
            <div class="w-full border-r border-gray-300 md:border-transparent md:w-1/2">
              <div class="p-4">
                <livewire:dropdown
                  :datalist="$user_groups" :label="'KUMPULAN PENGGUNA'" :initial-label="'Sila pilih kumpulan pengguna'"
                  :post="'user_group'" :value="$pengguna->group_id ?? ''"
                  :required="true" :err_message="'Sila pilih kumpulan pengguna'"/>
                {{-- :datalist="$user_groups" --}}
                {{-- :mastercode="'10001'" --}}
{{--                <dropdown--}}
{{--                  datalist="{{ $user_groups }}" label="KUMPULAN PENGGUNA" initial-label="Sila pilih kumpulan pengguna"--}}
{{--                  post="user_group" should-sort=false value="{{ $pengguna->group_id ?? '' }}"--}}
{{--                  required="true" err-message="Sila pilih kumpulan pengguna"--}}
{{--                ></dropdown>--}}
              </div>
            </div>
          </div>
          <div class="text-sm font-bold tracking-wide h-12 px-4 flex items-center border-b border-t border-gray-300 bg-gray-200">
            MAKLUMAT STAF
          </div>
          <div class="flex flex-col md:flex-row">
            <div class="w-full md:w-1/2 border-r border-gray-300 md:border-transparent">
              <div class="px-4 pt-4 pb-0 md:pb-0">
                <div class="pb-4">
                  <livewire:input-elem
                    :label="'NO PEKERJA'" :sub-label="'(6 aksara)'" :post="'no_pekerja'" :required="true" :autocomplete="'off'"
                    :value="$pengguna->no_pekerja ?? ''" :err_message="'Sila masukkan no pekerja'"/>
{{--                  <input-elem--}}
{{--                    label="NO PEKERJA" sub-label="(6 aksara)" type="text" post="no_pekerja" required="true"--}}
{{--                    autocomplete="off" value="{{ $pengguna->no_pekerja ?? '' }}"--}}
{{--                    err-message="Sila masukkan no pekerja"></input-elem>--}}
                </div>
                <div class="pb-4">
                  <livewire:input-elem
                    :label="'NAMA'" :post="'nama'" :required="true" :autocomplete="'off'"
                    :value="$pengguna->nama ?? ''" :err_message="'Sila masukkan nama'"/>
{{--                  <input-elem--}}
{{--                    label="NAMA" type="text" post="nama" required="true" autocomplete="off"--}}
{{--                    value="{{ $pengguna->nama ?? '' }}"--}}
{{--                    err-message="Sila masukkan nama"></input-elem>--}}
                </div>
                <div class="pb-4">
                  <livewire:datepicker
                    :label="'TARIKH LAHIR'" :post="'tarikh_lahir'" :required="true" :autocomplete="'off'"
                    :value="$pengguna->tarikh_lahir ?? ''" :err_message="'Sila masukkan tarikh lahir'"/>
{{--                  <Datepicker--}}
{{--                    label="TARIKH LAHIR" type="text" post="tarikh_lahir" required="true" autocomplete="off"--}}
{{--                    value="{{ $pengguna->tarikh_lahir ?? '' }}"--}}
{{--                    err-message="Sila masukkan tarikh lahir"></Datepicker>--}}
                </div>
                <div class="pb-4">
                  <livewire:input-elem
                    :label="'UMUR'" :post="'umur'" :required="true"
                    :value="$pengguna->umur ?? ''" :err_message="'Sila masukkan umur'"/>
{{--                  <input-elem--}}
{{--                    label="UMUR" type="text" post="umur" required="true"--}}
{{--                    value="{{ $pengguna->umur ?? '' }}" err-message="Sila masukkan umur"></input-elem>--}}
                </div>
                <div class="pb-4">
                  <livewire:input-elem
                    :label="'JANTINA'" :post="'jantina'" :required="true" autocomplete="off"
                    :value="$pengguna->jantina ?? ''" :err_message="'Sila masukkan jantina'"/>
{{--                  <input-elem--}}
{{--                    label="JANTINA" type="text" post="jantina" required="true" autocomplete="off"--}}
{{--                    value="{{ $pengguna->jantina ?? '' }}"--}}
{{--                    err-message="Sila masukkan jantina"></input-elem>--}}
                </div>
                <div class="pb-4">
                  <livewire:dropdown
                    :mastercode="'10001'" :label="'BANGSA'" :initial-label="'Sila pilih bangsa'"
                    :post="'bangsa'" :value="$pengguna->bangsa ?? ''"
                    :required="true" :err_message="'Sila pilih bangsa'"/>
{{--                  <dropdown--}}
{{--                    mastercode="10001" label="BANGSA" initial-label="Sila pilih bangsa" post="bangsa" should-sort=false--}}
{{--                    required="true" err-message="Sila pilih bangsa" value="{{ $pengguna->bangsa ?? '' }}"--}}
{{--                  ></dropdown>--}}
                </div>
              </div>
            </div>
            <div class="w-full md:w-1/2">
              <div class="p-4">
                <livewire:textarea-elem
                  :label="'ALAMAT SURAT MENYURAT'" :rows="3"
                  :post="'alamat_pengguna'" :value="$pengguna->alamat_pengguna ?? ''"
                  :required="true" :err_message="'Sila masukkan alamat'"/>
{{--                <textarea-elem--}}
{{--                  label="ALAMAT SURAT MENYURAT" post="alamat_pengguna" required="true" rows="3" autocomplete="off" value="{{ $pengguna->alamat_pengguna ?? '' }}"--}}
{{--                  err-message="Sila masukkan alamat">--}}
{{--                </textarea-elem>--}}
                <div class="pb-4">
                  <livewire:datepicker
                    :label="'TARIKH BERSARA'" :post="'tarikh_bersara'" :required="true" :autocomplete="'off'"
                    :value="$pengguna->tarikh_bersara ?? ''" :err_message="'Sila pilih tarikh bersara'"/>
{{--                  <Datepicker--}}
{{--                    label="TARIKH BERSARA" type="text" post="tarikh_bersara" required="true" autocomplete="off"--}}
{{--                    value="{{ isset($pengguna->tarikh_bersara) ?? '' }}"--}}
{{--                    err-message="Sila masukkan tarikh bersara"></Datepicker>--}}
                </div>
                <div class="pb-4">
                  <livewire:dropdown
                    :mastercode="'10002'" :label="'TARAF PERKAHWINAN'" :initial-label="'Sila pilih taraf perkahwinan'"
                    :post="'taraf_perkahwinan'" :value="$pengguna->taraf_perkahwinan ?? ''"
                    :required="true" :err_message="'Sila pilih taraf perkahwinan'"/>
{{--                  <dropdown--}}
{{--                    mastercode="10002" label="TARAF PERKAHWINAN" initial-label="Sila pilih taraf perkahwinan" post="taraf_perkahwinan" should-sort=false--}}
{{--                    required="true" err-message="Sila pilih bangsa" value="{{ $pengguna->taraf_perkahwinan ?? '' }}"--}}
{{--                  ></dropdown>--}}
                </div>
                <div class="pb-4">
                  <livewire:input-elem
                    :label="'NO TELEFON (BIMBIT)'" :post="'no_telefon_bimbit'" :required="true" autocomplete="off"
                    :value="$pengguna->no_telefon_bimbit ?? ''" :err_message="'Sila masukkan no telefon (bimbit)'"/>
{{--                  <input-elem--}}
{{--                    label="NO TELEFON (BIMBIT)" type="text" post="no_telefon_bimbit" required="true" autocomplete="off"--}}
{{--                    value="{{ $pengguna->no_telefon_bimbit ?? '' }}"--}}
{{--                    err-message="Sila masukkan no telefon (bimbit)"></input-elem>--}}
                </div>
                <div class="pb-4">
                  <livewire:input-elem
                    :label="'NO TELEFON (RUMAH)'" :post="'no_telefon_rumah'" :required="true" autocomplete="off"
                    :value="$pengguna->no_telefon_rumah ?? ''" :err_message="'Sila masukkan no telefon (rumah)'"/>
{{--                  <input-elem--}}
{{--                    label="NO TELEFON (RUMAH)" type="text" post="no_telefon_rumah" required="true" autocomplete="off"--}}
{{--                    value="{{ $pengguna->no_telefon_rumah ?? '' }}"--}}
{{--                    err-message="Sila masukkan no telefon (rumah)"></input-elem>--}}
                </div>
              </div>
            </div>
          </div>
          <div class="text-sm font-bold tracking-wide h-12 px-4 flex items-center border-b border-t border-gray-300 bg-gray-200">
            MAKLUMAT PENJAWATAN
          </div>
          <div class="flex flex-col md:flex-row">
            <div class="w-full md:w-1/2 border-r border-gray-300 md:border-transparent">
              <div class="px-4 pt-4 pb-0 md:pb-0">
                <div class="pb-4">
                  <livewire:dropdown
                    :mastercode="'10004'" :label="'JABATAN'" :initial-label="'Sila pilih jabatan'"
                    :post="'jabatan'" :value="$pengguna->jabatan ?? ''"
                    :required="true" :err_message="'Sila pilih jabatan'"/>
{{--                  <dropdown--}}
{{--                    mastercode="10004" label="JABATAN" initial-label="Sila pilih jabatan" post="jabatan" should-sort=false--}}
{{--                    required="true" err-message="Sila pilih jabatan" value="{{ $pengguna->jabatan ?? '' }}"--}}
{{--                  ></dropdown>--}}
                </div>
                <div class="pb-4">
                  <livewire:dropdown
                    :mastercode="'10003'" :label="'GRED'" :initial-label="'Sila pilih gred'"
                    :post="'gred'" :value="$pengguna->gred ?? ''"
                    :required="true" :err_message="'Sila pilih gred'"/>
{{--                  <dropdown--}}
{{--                    mastercode="10003" label="GRED" initial-label="Sila pilih gred" post="gred" should-sort=false--}}
{{--                    required="true" err-message="Sila pilih gred" value="{{ $pengguna->gred ?? '' }}"--}}
{{--                  ></dropdown>--}}
                </div>
                <div class="pb-4">
                  <livewire:input-elem
                    :label="'WARGANEGARA'" :post="'warganegara'" :required="true" autocomplete="off"
                    :value="$pengguna->warganegara ?? ''" :err_message="'Sila masukkan warganegara'"/>
{{--                  <input-elem--}}
{{--                    label="WARGANEGARA" type="text" post="warganegara" required="true" autocomplete="off"--}}
{{--                    value="{{ $pengguna->warganegara ?? '' }}"--}}
{{--                    err-message="Sila masukkan warganegara"></input-elem>--}}
                </div>
              </div>
            </div>
            <div class="w-full md:w-1/2">
              <div class="px-4 pt-4 pb-0 md:pb-0">
                <div class="pb-4">
                  <livewire:input-elem
                    :label="'JAWATAN'" :post="'jawatan'" :required="true" autocomplete="off"
                    :value="$pengguna->jawatan ?? ''" :err_message="'Sila masukkan jawatan'"/>
{{--                  <input-elem--}}
{{--                    label="JAWATAN" type="text" post="jawatan" required="true" autocomplete="off"--}}
{{--                    value="{{ $pengguna->jawatan ?? '' }}"--}}
{{--                    err-message="Sila masukkan jawatan"></input-elem>--}}
                </div>
                <div class="pb-4">
                  <livewire:dropdown
                    :mastercode="'10005'" :label="'TARAF JAWATAN'" :initial-label="'Sila pilih taraf jawatan'"
                    :post="'taraf_jawatan'" :value="$pengguna->taraf_jawatan ?? ''"
                    :required="true" :err_message="'Sila pilih taraf jawatan'"/>
{{--                  <dropdown--}}
{{--                    mastercode="10005" label="TARAF JAWATAN" initial-label="Sila pilih taraf jawatan" post="taraf_jawatan" should-sort=false--}}
{{--                    required="true" err-message="Sila pilih taraf jawatan" value="{{ $pengguna->taraf_jawatan ?? '' }}"--}}
{{--                  ></dropdown>--}}
                </div>
                <div class="pb-4">
                  <livewire:datepicker
                    :label="'TARIKH MULA BERKHIDMAT'" :post="'tarikh_mula_berkhidmat'" :required="true" :autocomplete="'off'"
                    :value="$pengguna->tarikh_mula_berkhidmat ?? ''" :err_message="'Sila pilih tarikh mula berkhidmat'"/>
{{--                  <Datepicker--}}
{{--                    label="TARIKH MULA BERKHIDMT" type="text" post="tarikh_mula_berkhidmat" required="true" autocomplete="off"--}}
{{--                    value="{{ $pengguna->tarikh_mula_berkhidmat ?? '' }}"--}}
{{--                    err-message="Sila masukkan tarikh mula berkhidmat"></Datepicker>--}}
                </div>
                <div class="pb-4">
                  @php
                    $status_aktif = collect([
                      ['referencecode' => 'Aktif', 'description1' => 'Aktif'],
                      ['referencecode' => 'Tidak Aktif', 'description1' => 'Tidak Aktif'],
                    ]);
                  @endphp
                  <livewire:dropdown
                    :datalist="$status_aktif" :label="'STATUS AKTIF'" :initial-label="'Sila pilih status aktif'"
                    :post="'status_aktif'" :value="$pengguna->status_aktif ?? ''"
                    :required="true" :err_message="'Sila pilih status aktif'"/>
{{--                  <dropdown--}}
{{--                    datalist="{{ $status_aktif }}" label="STATUS AKTIF" initial-label="Sila pilih status aktif" post="status_aktif" should-sort=false--}}
{{--                    required="true" err-message="Sila pilih status aktif" value="{{ $pengguna->status_aktif ?? '' }}"--}}
{{--                  ></dropdown>--}}
                </div>
              </div>
            </div>
          </div>
          <div class="px-4 py-4 -mt-4">
            <button id="submit" name="submit" type="submit" class="py-2 px-5 bg-space-gray hover:bg-gray-700 text-gray-300 rounded-lg text-center tracking-wide font-semibold">
              @isset($pengguna) KEMASKINI @else SIMPAN @endisset
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
@endsection

{{-- scripts --}}
@section('page-scripts')
  <script src="{{ asset('js/pristine.min.js') }}"></script>
  <script src="{{ asset('js/vanillaTextMask.js') }}"></script>
  <script src="{{ asset('js/choices.min.js') }}"></script>
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  <livewire:scripts />
  <script>
    window.onload = function () {
      //Dropdown
      let dropdown_choices = document.querySelectorAll(".select-choices"), dropdown_choices_i;
      for (dropdown_choices_i = 0; dropdown_choices_i < dropdown_choices.length; ++dropdown_choices_i) {
        new Choices(dropdown_choices[dropdown_choices_i], {
          itemSelectText: '',
          silent: true,
          searchEnabled: false,
          classNames: {
            itemSelectable: 'hover:bg-gray-200',
            containerInner: '-mt-2 text-base font-semibold appearance-none border-b-2 focus:outline-none border-gray-200 focus:border-space-gray w-full transition duration-500 ease-in-out',
          }
        });
      }

      //Datepicker
      flatpickr(".datepicker-flatpickr", {
        dateFormat: "d/m/Y",
      });

      document.getElementById('no_mykad').addEventListener('change', function (){
        // get jantina
        let last_num = document.getElementById('no_mykad').value.substr(-1, 1);
        document.getElementById('jantina').value = ((last_num) % 2 === 0 ? 'PEREMPUAN' : 'LELAKI');

        // get 6 first num from ic and split into array
        let arr_date = document.getElementById('no_mykad').value.substr(0,6).match(/.{1,2}/g);

        // get date of birth
        let tahun = parseInt(arr_date[0]) > 50 ? '19' + arr_date[0] : '20' + arr_date[0];
        document.getElementById('tarikh_lahir').value = arr_date[2] + '/' + arr_date[1] + '/' + tahun;

        // get age
        let current_year = new Date().getFullYear();
        document.getElementById('umur').value = current_year - parseInt(tahun);
      });

      vanillaTextMask.maskInput({
        inputElement: document.querySelector('#no_mykad'),
        mask: [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/]
      })

      document.getElementById("submit").addEventListener('click', function (e) {
        let pristine = new Pristine( document.getElementById("form1"), {
          classTo: 'form-group',
          errorClass: 'has-danger',
          successClass: 'has-success',
          errorTextParent: 'form-group',
          errorTextTag: 'div',
          errorTextClass: 'badge bg-white text-bittersweet font-semibold mt-2'
        });

        if(!pristine.validate()){
          e.preventDefault();
        }
      });
    };
  </script>
@endsection