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

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

    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-lg mx-4 mt-top-menu">
                <div class="card-body p-3">
                    <div class="row gx-4">
                        <div class="col-auto my-auto">
                            <div class="h-100">
                                <h5 class="mb-1">
                                    Tambah {{ $title_menu ?? 'Auditor' }}
                                </h5>
                                <p class="mb-0 font-weight-bold text-sm">
                                    Module Tambah {{ $title_menu ?? 'Auditor' }}
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
                            <div class="nav-wrapper position-relative inset-e-0">
                                <ul class="nav nav-pills nav-fill p-1 gap-2" role="tablist">
                                    <li class="nav-item">
                                        <h4 class="mb-0">
                                            <button class="btn btn-secondary mb-0 w-100"
                                                onclick="window.location='{{ URL::to($url_menu) }}'">
                                                <i class="fas fa-backward"></i>
                                                <span class="ms-1">Kembali</span>
                                            </button>
                                        </h4>
                                    </li>
                                    <li class="nav-item">
                                        <h4 class="mb-0">
                                            @if (isset($authorize) && $authorize->add == '1')
                                                <button type="submit" class="btn btn-primary mb-0 w-100" form="form-add">
                                                    <i class="fas fa-save"></i>
                                                    <span class="ms-1">Simpan</span>
                                                </button>
                                            @endif
                                        </h4>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        @include('components.alert')

                        <form action="{{ url($url_menu) }}" method="POST" id="form-add">
                            @csrf

                            <h6 class="text-uppercase text-body text-xs font-weight-bolder mb-3">Pilih Karyawan</h6>
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">Cari Karyawan (NIK) <span
                                                class="text-danger">*</span></label>
                                        <select name="nik" id="nikSelect" class="form-control select2" required>
                                            <option value="">-- Pilih NIK / Nama Karyawan --</option>
                                            @foreach ($hris as $emp)
                                                <option value="{{ $emp->nik }}" data-nama="{{ $emp->nama }}"
                                                    data-email="{{ $emp->email }}" data-jabatan="{{ $emp->jabatan }}"
                                                    data-dept="{{ $emp->ncr_department_id }}">
                                                    {{ $emp->nik }} - {{ $emp->nama }} ({{ $emp->dept_name }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <hr class="horizontal dark">
                            <h6 class="text-uppercase text-body text-xs font-weight-bolder mb-3">Informasi Akun (Login)</h6>
                            <p class="text-xs text-secondary mb-3">Password default: <strong>MSJncr123.</strong></p>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">Username <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="username" id="usernameInput"
                                            class="form-control bg-light" placeholder="Otomatis dari NIK" readonly
                                            style="cursor: not-allowed;">
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">Email <span
                                                class="text-danger">*</span></label>
                                        <input type="email" name="email" class="form-control"
                                            placeholder="nama@email.com" required>
                                    </div>
                                </div>
                            </div>

                            <hr class="horizontal dark">
                            <h6 class="text-uppercase text-body text-xs font-weight-bolder mb-3">Profil Auditor</h6>

                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">Nama Lengkap</label>
                                        <input type="text" name="name" id="namaInput" class="form-control bg-light"
                                            placeholder="-" readonly style="cursor: not-allowed;">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">Departemen</label>
                                        <select name="iddepartments" id="deptSelect" class="form-control bg-light" readonly
                                            style="pointer-events: none; cursor: not-allowed;" tabindex="-1">
                                            <option value="">-</option>
                                            @foreach ($departments as $dept)
                                                <option value="{{ $dept->iddepartments }}">
                                                    {{ $dept->department_label ?? \App\Helpers\DepartmentHelper::label($dept) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">Jabatan</label>
                                        <input type="text" name="jabatan" id="jabatanInput" class="form-control bg-light"
                                            placeholder="-" readonly style="cursor: not-allowed;">
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">No. Telepon / WhatsApp</label>
                                        <input type="text" name="phone" class="form-control"
                                            placeholder="08123xxxx">
                                    </div>
                                </div>
                            </div>


                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {

            $('#nikSelect').select2({
                width: '100%',
                placeholder: '-- Cari & Pilih NIK / Nama Karyawan --',
                allowClear: true
            });

            $('#nikSelect').on('change', function() {

                var selected = $(this).find(':selected');

                $('#namaInput').val(selected.data('nama') || '');
                $('#usernameInput').val(selected.val() || '');
                $('#jabatanInput').val(selected.data('jabatan') || '');
                $('input[name="email"]').val(selected.data('email') || '');

                $('#deptSelect')
                    .val(selected.data('dept'))
                    .trigger('change');

            });

        });
    </script>
@endpush