@extends('layouts.admin')

@section('title', 'Tambah Pegawai')
@section('page_title', 'Tambah Pegawai Baru')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-user-plus"></i> Form Tambah Pegawai</h5>
            </div>
            <div class="card-body">
                <form id="pegawaiCreateForm" action="{{ route('admin.pegawai.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <h6 class="mb-3 pb-2 border-bottom">Data Pribadi</h6>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="nip" class="form-label">NIP <span style="color: red;">*</span></label>
                            <input type="text" id="nip" name="nip" class="form-control @error('nip') is-invalid @enderror"
                                value="{{ old('nip') }}" required minlength="18" maxlength="18" pattern="[0-9]{18}"
                                placeholder="18 digit angka">
                            <small class="text-muted">Harus 18 digit angka</small>
                            @error('nip')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="nama_lengkap" class="form-label">Nama Lengkap <span style="color: red;">*</span></label>
                            <input type="text" id="nama_lengkap" name="nama_lengkap"
                                class="form-control @error('nama_lengkap') is-invalid @enderror"
                                value="{{ old('nama_lengkap') }}" required>
                            @error('nama_lengkap')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="tempat_lahir" class="form-label">Tempat Lahir <span style="color: red;">*</span></label>
                            <input type="text" id="tempat_lahir" name="tempat_lahir"
                                class="form-control @error('tempat_lahir') is-invalid @enderror"
                                value="{{ old('tempat_lahir') }}" required>
                            @error('tempat_lahir')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="tanggal_lahir" class="form-label">Tanggal Lahir <span style="color: red;">*</span></label>
                            <input type="date" id="tanggal_lahir" name="tanggal_lahir"
                                class="form-control @error('tanggal_lahir') is-invalid @enderror"
                                value="{{ old('tanggal_lahir') }}" required>
                            @error('tanggal_lahir')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="jenis_kelamin" class="form-label">Jenis Kelamin <span style="color: red;">*</span></label>
                            <select id="jenis_kelamin" name="jenis_kelamin"
                                class="form-select @error('jenis_kelamin') is-invalid @enderror" required>
                                <option value="">-- Pilih --</option>
                                <option value="Laki-laki" @selected(old('jenis_kelamin') === 'Laki-laki')>Laki-laki</option>
                                <option value="Perempuan" @selected(old('jenis_kelamin') === 'Perempuan')>Perempuan</option>
                            </select>
                            @error('jenis_kelamin')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="email" class="form-label">Email <span style="color: red;">*</span></label>
                            <input type="email" id="email" name="email"
                                class="form-control @error('email') is-invalid @enderror"
                                value="{{ old('email') }}" required>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="no_hp" class="form-label">No. Telepon <span style="color: red;">*</span></label>
                            <input type="tel" id="no_hp" name="no_hp"
                                class="form-control @error('no_hp') is-invalid @enderror"
                                value="{{ old('no_hp') }}" required minlength="10" maxlength="13" pattern="[0-9]{10,13}"
                                placeholder="10-13 digit angka">
                            <small class="text-muted">Harus 10-13 digit angka</small>
                            @error('no_hp')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="pendidikan_terakhir" class="form-label">Pendidikan Terakhir <span style="color: red;">*</span></label>
                            <select id="pendidikan_terakhir" name="pendidikan_terakhir"
                                class="form-select @error('pendidikan_terakhir') is-invalid @enderror" required>
                                <option value="">-- Pilih Pendidikan --</option>
                                @foreach ($pendidikanList as $pendidikan)
                                    <option value="{{ $pendidikan }}" @selected(old('pendidikan_terakhir') === $pendidikan)>
                                        {{ $pendidikan }}
                                    </option>
                                @endforeach
                            </select>
                            @error('pendidikan_terakhir')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="golongan" class="form-label">Golongan <span style="color: red;">*</span></label>
                            <select id="golongan" name="golongan"
                                class="form-select @error('golongan') is-invalid @enderror" required>
                                <option value="">-- Pilih Golongan --</option>
                                @foreach ($golonganList as $golongan)
                                    <option value="{{ $golongan }}" @selected(old('golongan') === $golongan)>
                                        {{ $golongan }}
                                    </option>
                                @endforeach
                            </select>
                            @error('golongan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="alamat" class="form-label">Alamat Lengkap <span style="color: red;">*</span></label>
                        <textarea id="alamat" name="alamat" rows="3"
                            class="form-control @error('alamat') is-invalid @enderror" required>{{ old('alamat') }}</textarea>
                        @error('alamat')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <h6 class="mb-3 pb-2 border-bottom">Data Jabatan</h6>

                    @php
                        $selectedJabatanId = old('jabatan_fungsional_id');
                        $selectedJabatan = $jabatanList->firstWhere('id', (int) $selectedJabatanId);
                    @endphp

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="unit_kerja" class="form-label">Unit Kerja <span style="color: red;">*</span></label>
                            <select id="unit_kerja" name="unit_kerja"
                                class="form-select @error('unit_kerja') is-invalid @enderror" required>
                                <option value="">-- Pilih Unit Kerja --</option>
                                @foreach ($unitKerjaList as $unitKerja)
                                    <option value="{{ $unitKerja->nama_unit }}" data-id="{{ $unitKerja->id }}" @selected(old('unit_kerja', $unitKerjaList->count() === 1 ? $unitKerja->nama_unit : null) === $unitKerja->nama_unit)>
                                        {{ $unitKerja->nama_unit }}
                                    </option>
                                @endforeach
                            </select>
                            @error('unit_kerja')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="nama_jabatan_select" class="form-label">Nama Jabatan <span style="color: red;">*</span></label>
                            <select id="nama_jabatan_select" class="form-select" required>
                                <option value="">-- Pilih Jabatan --</option>
                                @foreach ($jabatanList->pluck('nama_jabatan')->unique()->sort() as $namaJabatan)
                                    <option value="{{ $namaJabatan }}" @selected(optional($selectedJabatan)->nama_jabatan === $namaJabatan)>
                                        {{ $namaJabatan }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="jabatan_fungsional_id" class="form-label">Jenjang <span style="color: red;">*</span></label>
                            <select id="jabatan_fungsional_id" name="jabatan_fungsional_id"
                                class="form-select @error('jabatan_fungsional_id') is-invalid @enderror" required disabled>
                                <option value="">-- Pilih Jenjang --</option>
                            </select>
                            @error('jabatan_fungsional_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="tanggal_mulai_jabatan" class="form-label">Tanggal Mulai Jabatan <span style="color: red;">*</span></label>
                        <input type="date" id="tanggal_mulai_jabatan" name="tanggal_mulai_jabatan"
                            class="form-control @error('tanggal_mulai_jabatan') is-invalid @enderror"
                            value="{{ old('tanggal_mulai_jabatan') }}" required>
                        @error('tanggal_mulai_jabatan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <h6 class="mb-3 pb-2 border-bottom">Dokumen Tambahan (Opsional)</h6>

                    <div class="mb-3">
                        <label for="dokumen_tambahan" class="form-label">Upload Dokumen SK Pengangkatan Terbaru (Wajib PDF)</label>
                        <input type="file" id="dokumen_tambahan" name="dokumen_tambahan" accept=".pdf"
                            class="form-control @error('dokumen_tambahan') is-invalid @enderror">
                        <small class="text-muted">Hanya menerima format PDF. Maksimal 1MB.</small>
                        @error('dokumen_tambahan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <h6 class="mb-3 pb-2 border-bottom">Status Validasi</h6>

                    <div class="mb-3">
                        <label for="status_validasi" class="form-label">Status <span style="color: red;">*</span></label>
                        <select id="status_validasi" name="status_validasi"
                            class="form-select @error('status_validasi') is-invalid @enderror" required>
                            <option value="pending" @selected(old('status_validasi') === 'pending')>Pending</option>
                            <option value="disetujui" @selected(old('status_validasi') === 'disetujui')>Disetujui</option>
                            <option value="ditolak" @selected(old('status_validasi') === 'ditolak')>Ditolak</option>
                        </select>
                        @error('status_validasi')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Simpan
                        </button>
                        <a href="{{ route('admin.pegawai.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Kembali
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    const jabatanOptions = @json($jabatanOptions);
    const selectedJabatanId = @json((string) old('jabatan_fungsional_id', ''));
    const selectedNamaJabatan = @json(optional($selectedJabatan)->nama_jabatan);

    const unitKerjaSelect = document.getElementById('unit_kerja');
    const namaJabatanSelect = document.getElementById('nama_jabatan_select');
    const jenjangSelect = document.getElementById('jabatan_fungsional_id');

    function selectedUnitKerjaId() {
        return unitKerjaSelect.options[unitKerjaSelect.selectedIndex]?.dataset.id || '';
    }

    function availableJabatanOptions() {
        const unitKerjaId = selectedUnitKerjaId();

        return jabatanOptions.filter((jabatan) => String(jabatan.unit_kerja_id) === String(unitKerjaId));
    }

    function renderNamaJabatanOptions(selectedName = '') {
        const currentOptions = availableJabatanOptions();
        const namaJabatanList = [...new Set(currentOptions.map((jabatan) => jabatan.nama_jabatan))].sort();

        namaJabatanSelect.innerHTML = '<option value="">-- Pilih Jabatan --</option>';

        namaJabatanList.forEach((namaJabatan) => {
            const option = document.createElement('option');
            option.value = namaJabatan;
            option.textContent = namaJabatan;
            option.selected = namaJabatan === selectedName;
            namaJabatanSelect.appendChild(option);
        });
    }

    function renderJenjangOptions(selectedId = '') {
        const namaJabatan = namaJabatanSelect.value;
        const options = availableJabatanOptions().filter((jabatan) => jabatan.nama_jabatan === namaJabatan);

        jenjangSelect.innerHTML = '<option value="">-- Pilih Jenjang --</option>';
        jenjangSelect.disabled = options.length === 0;

        options.forEach((jabatan) => {
            const option = document.createElement('option');
            option.value = jabatan.id;
            option.textContent = jabatan.jenjang_label;
            option.selected = String(jabatan.id) === String(selectedId);
            jenjangSelect.appendChild(option);
        });
    }

    unitKerjaSelect.addEventListener('change', () => {
        renderNamaJabatanOptions();
        renderJenjangOptions();
    });
    namaJabatanSelect.addEventListener('change', () => renderJenjangOptions());
    renderNamaJabatanOptions(selectedNamaJabatan);
    renderJenjangOptions(selectedJabatanId);

    const pegawaiCreateForm = document.getElementById('pegawaiCreateForm');
    if (pegawaiCreateForm) {
        pegawaiCreateForm.addEventListener('submit', function(e) {
            e.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Simpan',
                text: "Apakah Anda yakin ingin menambahkan data pegawai ini?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#4a3728',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Simpan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Memproses...',
                        html: 'Sedang menyimpan data dan mengirim email pemberitahuan.<br>Mohon tunggu sebentar.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    pegawaiCreateForm.submit();
                }
            });
        });
    }
</script>
@endsection