@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- Button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        {{-- Check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- Button save --}}
                            <button class="btn btn-primary mb-0" onclick="event.preventDefault(); validateForm();">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="container-fluid py-4">
                            <div class="form-group">
                                <label for="nama" class="form-label">Nama<span class="text-danger">*</span></label>
                                <select name="nama_karyawan" id="nama" class="form-select form-select-lg mb-3"
                                    aria-label="Nama" required>
                                    <option value="" selected disabled>Pilih Karyawan</option>
                                    @foreach ($karyawan as $karyawan)
                                        <option value="{{ $karyawan->nik }}">{{ $karyawan->nik }} -
                                            {{ $karyawan->nama }} - {{ $karyawan->id_departemen }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="role">Role</label>
                                <select class="form-select" name="role" id="role" required>
                                    @if ($roles == 'admins')
                                        <option selected>Pilih role</option>
                                        @foreach($users as $usr)
                                            <option value="{{ $usr->id }}">{{ $usr->firstname }} {{ $usr->lastname }}</option>
                                        @endforeach
                                    @else
                                        <option value="{{ $users_roles->id }}" selected>{{ $users_roles->firstname }}
                                            {{ $users_roles->lastname }}</option>
                                    @endif

                                </select>
                                <div class="invalid-feedback">Role tidak boleh kosong</div>
                            </div>

                            {{-- <div class="form-group">
                                <label for="statuskaryawan">Status Karyawan</label>
                                <select class="form-select" name="statuskaryawan" id="statuskaryawan" required>
                                    <option selected>Pilih Status Karyawan</option>
                                    <option value="Organik">Organik</option>
                                    <option value="OS BAP">Outsourcing BAP</option>
                                    <option value="OS CMM">Outsourcing CMM</option>
                                </select>
                                <div class="invalid-feedback">Status Karyawan tidak boleh kosong</div>
                            </div>
                            <div class="form-group">
                                <label for="iduser">Role</label>
                                <select class="form-select" name="iduser" id="iduser" required>
                                    <option selected>Pilih Role</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->username }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Role tidak boleh kosong</div>
                            </div> --}}
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        function validateForm() {
            let isValid = true;

            // Loop untuk validasi setiap input dan select di dalam form
            $('#{{ $dmenu }}-form select, #{{ $dmenu }}-form input').each(function() {
                // Khusus untuk 'idlokasi' bisa kosong
                if ($(this).attr('name') === 'idlokasi') {
                    return true; // Lewatkan validasi jika ini adalah kolom 'idlokasi'
                }

                // Jika kolom lain kosong
                if ($(this).val() === '' || $(this).val() === null) {
                    $(this).next('.invalid-feedback').show(); // Tampilkan pesan error
                    isValid = false;
                } else {
                    // Validasi khusus untuk kode lemari
                    if ($(this).attr('name') === 'kode_lemari' && !/^[A-Z0-9]{4}$/.test($(this).val())) {
                        $(this).next('.invalid-feedback').text(
                            'Kode Lemari harus terdiri dari 4 karakter alfanumerik').show();
                        isValid = false;
                    } else {
                        // Sembunyikan pesan error jika valid
                        $(this).next('.invalid-feedback').hide();
                    }
                }
            });

            // Jika semua valid, submit form
            if (isValid) {
                document.getElementById('{{ $dmenu }}-form').submit();
            }
        }

        // Menghapus kelas is-invalid ketika pengguna mengisi input atau select
        $(document).ready(function() {
            $('#{{ $dmenu }}-form select, #{{ $dmenu }}-form input').on('input change', function() {
                if ($(this).val() !== '') {
                    $(this).next('.invalid-feedback').hide(); // Sembunyikan pesan error saat input diisi
                }
            });
            $('#nama').select2({
                placeholder: "Cari dan pilih nama",
                allowClear: true
            });
        });
    </script>
@endpush