@extends('layouts.mainframe')

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

{{-- title --}}
@section('title', 'Tukar Kata Laluan')

{{-- 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="{{ route('update.change_password', auth()->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">
                TUKAR KATA LALUAN
              </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 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="'KATA NAMA'" :post="'kata_nama'" :required="true" :autocomplete="'off'"
                                       :value="$pengguna->kata_nama ?? ''" :err_message="'Sila masukkan kata nama'"/>
                </div>
              </div>
            </div>
          </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="'KEMASKINI KATA LALUAN'" :type="'password'" :post="'password'" :required="true"
                                       :err_message="'Sila masukkan kata laluan'"
                                       :autocomplete="'off'"/>
                </div>
              </div>
            </div>
            <div class="w-full md:w-1/2">
              <div class="p-4">
                <livewire:input-elem :label="'ULANG KATA LALUAN'" :type="'password'" :pwd-equals="'#password'"
                                     :autocomplete="'off'"/>
              </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">
              KEMASKINI
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
@endsection

{{-- scripts --}}
@section('page-scripts')
  <script src="{{ asset('js/pristine.min.js') }}"></script>
  <livewire:scripts />
  <script>
    window.onload = function () {
      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