@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 Permohonan')

{{-- contents --}}
@section('content')
  <div class="content">
    <div class="container-xl">
      <form id="form1" action="{{ !isset($permit) ? route('permit.store') : route('permit.update', $permit->id) }}" class="px-3" method="POST">
        @csrf
        @isset($permit) @method('PATCH') @endisset
        <div class="card rounded-xl shadow-lg">
          <div class="border-b border-gray-300 flex flex-col lg:flex-row">
            <div class="w-2/4 flex items-center">
              <div class="flex items-center h-16">
                <div class="text-lg font-bold tracking-normal leading-none px-4">
                  @isset($permit) KEMASKINI PERMOHONAN @else PERMOHONAN BARU @endisset<br>
                </div>
              </div>
            </div>
          </div>
          @if( session('user_group') === 'PENGARAH')
            <div class="w-full border-r border-gray-300 md:border-transparent">
              <div class="text-sm font-bold tracking-wide h-12 px-4 flex items-center border-b border-gray-300 bg-gray-200">
                STATUS PERMOHONAN
              </div>
              <div class="px-4 pt-4 pb-0 md:pb-0">
                <div class="pb-4">
                  @php
                    $status_permohonan = collect([
                      ['referencecode' => 'PROSES', 'description1' => 'PROSES'],
                      ['referencecode' => 'LULUS', 'description1' => 'LULUS'],
                      ['referencecode' => 'TIDAK LULUS', 'description1' => 'TIDAK LULUS'],
                    ]);
                  @endphp
                  <livewire:dropdown
                    :datalist="$status_permohonan" :label="'STATUS PERMOHONAN'" :initial-label="'Sila pilih status permohonan'"
                    :post="'status_permohonan_2'" :value="$permit->status ?? ''"
                    :required="true" :err_message="'Sila pilih status permohonan'"/>
{{--                  <dropdown--}}
{{--                    datalist="{{ $status_permohonan }}" label="STATUS PERMOHONAN" initial-label="Sila pilih status permohonan" post="status_permohonan_2" should-sort=false--}}
{{--                    required="true" err-message="Sila pilih status permohonan" value="{{ $permit->status ?? '' }}"--}}
{{--                  ></dropdown>--}}
                </div>
              </div>
            </div>
          @endif
          <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="text-sm font-bold tracking-wide h-12 px-4 flex items-center border-b border-gray-300 bg-gray-200">
                MAKLUMAT PEMOHON
              </div>
              <div class="px-4 pt-4 pb-0 md:pb-0">
                <div class="pb-4">
                  <livewire:input-elem
                    :label="'NAMA'" :post="'nama'" :required="true" :autocomplete="'off'"
                    :value="$permit->nama ?? ( session('user_group') === 'AWAM' ? Auth::user()->nama : '' )" :err_message="'Sila masukkan nama'"/>
{{--                  <input-elem--}}
{{--                    label="NAMA" type="text" post="nama" required="true" autocomplete="off"--}}
{{--                    value="{{ $permit->nama ?? ( session('user_group') === 'AWAM' ? Auth::user()->nama : '' ) }}"--}}
{{--                    err-message="Sila masukkan nama"></input-elem>--}}
                </div>
                <div class="pb-4">
                  <livewire:input-elem
                    :label="'NO KAD PENGENALAN'" :post="'no_kp'" :required="true" :autocomplete="'off'"
                    :value="$permit->no_kp ?? ( session('user_group') === 'AWAM' ? Auth::user()->no_mykad : '' )" :err_message="'Sila masukkan no kad pengenalan'"/>
{{--                  <input-elem--}}
{{--                    label="NO KAD PENGENALAN" type="text" post="no_kp" required="true" autocomplete="off"--}}
{{--                    value="{{ $permit->no_kp ?? ( session('user_group') === 'AWAM' ? Auth::user()->no_mykad : '' ) }}"--}}
{{--                    err-message="Sila masukkan no kad pengenalan"></input-elem>--}}
                </div>
                <div class="pb-4">
                  <livewire:textarea-elem
                    :label="'ALAMAT'" :rows="2"
                    :post="'alamat_pemohon'" :value="$permit->alamat_pemohon ?? ''"
                    :required="true" :err_message="'Sila masukkan alamat'"/>
{{--                  <textarea-elem--}}
{{--                    label="ALAMAT" post="alamat_pemohon" required="true" rows="2" autocomplete="off"--}}
{{--                    value="{{ $permit->alamat_pemohon ?? '' }}"--}}
{{--                    err-message="Sila masukkan alamat"></textarea-elem>--}}
                </div>
                <div class="pb-4">
                  <livewire:input-elem
                    :label="'NO TELEFON'" :post="'no_telefon'" :required="true" :autocomplete="'off'"
                    :value="$permit->no_telefon ?? ( session('user_group') === 'AWAM' ? Auth::user()->no_telefon_bimbit : '' )"
                    :err_message="'Sila masukkan no telefon'"/>
{{--                  <input-elem--}}
{{--                    label="NO TELEFON" type="text" post="no_telefon" required="true" autocomplete="off"--}}
{{--                    value="{{ $permit->no_telefon ?? ( session('user_group') === 'AWAM' ? Auth::user()->no_telefon_bimbit : '' ) }}"--}}
{{--                    err-message="Sila masukkan no telefon"></input-elem>--}}
                </div>
                <div class="pb-4">
                  <livewire:datepicker
                    :label="'TARIKH PERMOHONAN'" :post="'tarikh_permohonan'" :required="true" :autocomplete="'off'"
                    :value="isset($permit->tarikh_permohonan) ? $permit->tarikh_permohonan :  date('d/m/Y')" :err_message="'Sila pilih tarikh'"/>
{{--                  <Datepicker--}}
{{--                    label="TARIKH PERMOHONAN" type="text" post="tarikh_permohonan" required="true" autocomplete="off"--}}
{{--                    value="{{ isset($permit->tarikh_permohonan) ? $permit->tarikh_permohonan :  date('d/m/Y') }}"--}}
{{--                    err-message="Sila masukkan tarikh"></Datepicker>--}}
                </div>
              </div>
            </div>
            <div class="w-full md:w-1/2">
              <div class="text-sm tracking-wide h-12 font-bold h-5 px-4 flex items-center border-b border-gray-300 bg-gray-200">
                MAKLUMAT PERMOHONAN
              </div>
              <div class="p-4">
                <div class="pb-4">
                  <div class="form-group">
                    <div class="block font-bold text-gray-600 tracking-widest mb-0">JENIS PERMOHONAN</div>
                    <div class="w-full flex flex-row items-center rounded-lg bg-white p-4 border-2 border-gray-300 text-gray-700 my-3">
                      <div class="relative flex items-center mr-4">
                        <input id="check_petak" type="checkbox" name="jenis[]" value="PETAK" {{ isset($permit->jenis) && $permit->jenis == 'PETAK' ? 'checked' : (isset($permit->jenis) && $permit->jenis == 'PETAK_TUTUP' ? 'checked' : '') }}
                        class="appearance-none h-5 w-5 border border-gray-300 rounded-md checked:bg-gray-600 checked:border-transparent focus:outline-none"/>
                        <svg class="absolute absolute-center h-3 w-3 top-0 pointer-events-none" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M10.2588 1.04175L3.97311 6.93905L1.11597 4.25846" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </div>
                      <label for="check_petak" class="text-base">Petak Sementara</label>
                    </div>
                    <div class="w-full flex flex-row items-center rounded-lg bg-white p-4 border-2 border-gray-300 text-gray-700 my-3">
                      <div class="relative flex items-center mr-4">
                        <input id="check_tutup" type="checkbox" name="jenis[]" value="TUTUP" {{ isset($permit->jenis) && $permit->jenis == 'TUTUP' ? 'checked' : (isset($permit->jenis) && $permit->jenis == 'PETAK_TUTUP' ? 'checked' : '') }}
                        class="appearance-none h-5 w-5 border border-gray-300 rounded-md checked:bg-gray-600 checked:border-transparent focus:outline-none"/>
                        <svg class="absolute absolute-center h-3 w-3 top-0 pointer-events-none" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M10.2588 1.04175L3.97311 6.93905L1.11597 4.25846" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </div>
                      <label for="check_tutup" class="text-base">Penutupan Jalan</label>
                    </div>
                  </div>
                </div>
                <div class="pb-4">
                  <livewire:input-elem
                    :label="'TUJUAN'" :post="'tujuan'" :required="true" :autocomplete="'off'"
                    :value="$permit->tujuan ?? ''"
                    :err_message="'Sila masukkan tujuan'"/>
{{--                  <input-elem--}}
{{--                    label="TUJUAN" type="text" post="tujuan" required="true" autocomplete="off"--}}
{{--                    value="{{ $permit->tujuan ?? '' }}"--}}
{{--                    err-message="Sila masukkan tujuan"></input-elem>--}}
                </div>
                <div class="pb-4">
                  <livewire:textarea-elem
                    :label="'DI ALAMAT'" :rows="2"
                    :post="'alamat_tempat'" :value="$permit->alamat_tempat ?? ''"
                    :required="true" :err_message="'Sila masukkan alamat'"/>
{{--                  <textarea-elem--}}
{{--                    label="DI ALAMAT" post="alamat_tempat" required="true" rows="2" autocomplete="off"--}}
{{--                    value="{{ $permit->alamat_tempat ?? '' }}"--}}
{{--                    err-message="Sila masukkan alamat"></textarea-elem>--}}
                </div>
                <div class="pb-4">
                  <div class="flex flex-row">
                    <div class="w-1/2">
                      <livewire:datepicker
                        :label="'TARIKH MULA'" :post="'tarikh_mula'" :required="true" :autocomplete="'off'"
                        :value="$permit->tarikh_mula ?? ''" :err_message="'Sila pilih tarikh mula'"/>
{{--                      <Datepicker--}}
{{--                        label="TARIKH MULA" type="text" post="tarikh_mula" required="true" autocomplete="off"--}}
{{--                        value="{{ $permit->tarikh_mula ?? '' }}"--}}
{{--                        err-message="Sila masukkan tarikh mula"></Datepicker>--}}
                    </div>
                    <div class="w-1/2">
                      <livewire:timepicker
                        :label="'JAM MULA'" :post="'jam_mula'" :required="true" :autocomplete="'off'"
                        :value="$permit->jam_mula ?? ''" :err_message="'Sila pilih jam mula'"/>
{{--                      <Timepicker--}}
{{--                        label="JAM MULA" type="text" post="jam_mula" required="true" autocomplete="off"--}}
{{--                        value="{{ $permit->jam_mula ?? '' }}"--}}
{{--                        err-message="Sila masukkan jam mula"></Timepicker>--}}
                    </div>
                  </div>
                </div>
                <div class="pb-4">
                  <div class="flex flex-row">
                    <div class="w-1/2">
                      <livewire:datepicker
                        :label="'TARIKH TAMAT'" :post="'tarikh_tamat'" :required="true" :autocomplete="'off'"
                        :value="$permit->tarikh_tamat ?? ''" :err_message="'Sila pilih tarikh tamat'"/>
{{--                      <Datepicker--}}
{{--                        label="TARIKH TAMAT" type="text" post="tarikh_tamat" required="true" autocomplete="off"--}}
{{--                        value="{{ $permit->tarikh_tamat ?? '' }}"--}}
{{--                        err-message="Sila masukkan tarikh tamat"></Datepicker>--}}
                    </div>
                    <div class="w-1/2">
                      <livewire:timepicker
                        :label="'JAM TAMAT'" :post="'jam_tamat'" :required="true" :autocomplete="'off'"
                        :value="$permit->jam_tamat ?? ''" :err_message="'Sila pilih jam tamat'"/>
{{--                      <Timepicker--}}
{{--                        label="JAM TAMAT" type="text" post="jam_tamat" required="true" autocomplete="off"--}}
{{--                        value="{{ $permit->jam_tamat ?? '' }}"--}}
{{--                        err-message="Sila masukkan jam tamat"></Timepicker>--}}
                    </div>
                  </div>
                </div>

                @if( session('user_group') !== 'AWAM')
                  <div class="pb-4">
                    <livewire:input-elem
                      :label="'BAYARAN (RM)'" :post="'bayaran'" :required="true" :autocomplete="'off'"
                      :value="$permit->bayaran ?? ''"
                      :err_message="'Sila masukkan bayaran'"/>
{{--                    <input-elem--}}
{{--                      label="BAYARAN (RM)" type="text" post="bayaran" required="true" value="{{ $permit->bayaran ?? '' }}"--}}
{{--                      err-message="Sila masukkan bayaran">--}}
{{--                      <div class="text-base font-semibold text-gray-600 px-3">RM</div>--}}
{{--                    </input-elem>--}}
                  </div>

                  <div class="alert bg-gray-200">
                    <div class="text-sm font-bold tracking-wide pb-1">DISEDIAKAN OLEH</div>
                    <div class="flex flex-row items-center">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md mr-4" 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><circle cx="12" cy="7" r="4"></circle><path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2"></path></svg>
                      <div>{{ $permit->nama_staf ?? Auth::user()->nama }}</div>
                    </div>
                  </div>
                @endif
              </div>
            </div>
          </div>
          <div class="px-4 pb-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($permit) 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",
      });

      //Timepicker
      flatpickr(".timepicker-flatpickr", {
        dateFormat: "h:i K",
        enableTime : true,
        noCalendar : true,
      });

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

      vanillaTextMask.maskInput({
        inputElement: document.querySelector('#bayaran'),
        mask: [/\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