@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card mx-4 shadow-lg">
        <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</button>
                        {{-- check authorize add --}}
                        @if ($authorize && $authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" id="empmaster-save"
                                onclick="event.preventDefault(); document.getElementById('empmaster-form').submit();"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <form role="form" method="POST" action="{{ url($url_menu) }}" enctype="multipart/form-data"
                    id="empmaster-form">
                    @csrf

                    {{-- Employee Data Card --}}
                    <div class="card mb-4">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Data Karyawan</p>
                            <hr class="horizontal dark mt-0">
                            {{-- alert --}}
                            @include('components.alert')

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="nama" class="form-control-label">Nama Lengkap <span
                                                class="text-danger">*</span></label>
                                        <input class="form-control" type="text" name="nama" id="nama"
                                            value="{{ old('nama') }}" required>
                                        @error('nama')
                                            <p class='text-danger pt-1 text-xs'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="nik" class="form-control-label">NIK <span
                                                class="text-danger">*</span></label>
                                        <input class="form-control" type="text" name="nik" id="nik"
                                            value="{{ old('nik') }}" required maxlength="20">
                                        <p class='text-secondary px-1 pt-1 text-xs'>*) Masukkan NIK unik karyawan (nik tidak
                                            dapat diubah setelah dibuat)</p>
                                        @error('nik')
                                            <p class='text-danger pt-1 text-xs'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_departemen" class="form-control-label">Departemen</label>
                                        <select class="form-control" name="id_departemen" id="id_departemen">
                                            <option value="">Pilih Departemen</option>
                                            @foreach ($departments as $dept)
                                                <option value="{{ $dept->id }}"
                                                    {{ old('id_departemen') == $dept->id ? 'selected' : '' }}>
                                                    {{ $dept->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('id_departemen')
                                            <p class='text-danger pt-1 text-xs'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_jabatan" class="form-control-label">Jabatan</label>
                                        <select class="form-control" name="id_jabatan" id="id_jabatan">
                                            <option value="">Pilih Jabatan</option>
                                            @foreach ($job_titles as $jt)
                                                <option value="{{ $jt->id }}"
                                                    {{ old('id_jabatan') == $jt->id ? 'selected' : '' }}>
                                                    {{ $jt->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('id_jabatan')
                                            <p class='text-danger pt-1 text-xs'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- User Account Data Card --}}
                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Data Akun User</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="username" class="form-control-label">Username</label>
                                        <input class="form-control" type="text" name="username" id="username"
                                            value="{{ old('nik') }}" readonly>
                                        <p class='text-secondary px-1 pt-1 text-xs'> {{-- Username otomatis sama dengan NIK --}}
                                        </p>
                                        @error('username')
                                            <p class='text-danger pt-1 text-xs'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="password" class="form-control-label">Password</label>
                                        <div class="input-group pass mb-2 flex flex-col">
                                            <input class="form-control" type="password" name="password" id="password">
                                            <span class="input-group-text" id="button-addon" onclick="togglePassword()"
                                                style="border-color:#d2d6da;"><i class="fas fa-eye showpass"
                                                    style="cursor: pointer;"></i></span>
                                        </div>
                                        <p class='text-secondary px-1 pt-1 text-xs'>*) Kosongkan untuk menggunakan password
                                            default sistem</p>
                                        @error('password')
                                            <p class='text-danger pt-1 text-xs'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="user_active" class="form-control-label">Status Akun User</label>
                                        <select class="form-control" name="user_active" id="user_active">
                                            <option value="1" {{ old('user_active') == '1' ? 'selected' : '' }}>
                                                Aktif</option>
                                            <option value="0" {{ old('user_active') == '0' ? 'selected' : '' }}
                                                selected>
                                                Tidak Aktif</option>
                                        </select>
                                        @error('user_active')
                                            <p class='text-danger pt-1 text-xs'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <hr class="horizontal dark">
                            <div class="card-footer align-items-center pb-2 pt-0">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            // Auto-update username when NIK changes
            $('#nik').on('input', function() {
                $('#username').val($(this).val());
            });

            // Form validation with SweetAlert
            $('#empmaster-form').on('submit', function(e) {
                const nikValue = $('#nik').val().trim();

                // Validate NIK length (max 20 characters)
                if (nikValue.length > 20) {
                    e.preventDefault();
                    Swal.fire({
                        title: 'NIK Terlalu Panjang',
                        html: `NIK maksimal 20 karakter.<br>NIK yang Anda masukkan: <strong>${nikValue.length} karakter</strong>`,
                        icon: 'warning',
                        confirmButtonColor: '#028284',
                        confirmButtonText: 'OK'
                    });
                    return false;
                }
            });
        });

        // Toggle password visibility
        function togglePassword() {
            const passwordField = document.getElementById('password');
            const toggleIcon = document.querySelector('.showpass');

            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                toggleIcon.classList.remove('fa-eye');
                toggleIcon.classList.add('fa-eye-slash');
            } else {
                passwordField.type = 'password';
                toggleIcon.classList.remove('fa-eye-slash');
                toggleIcon.classList.add('fa-eye');
            }
        }
    </script>
@endpush