@php
    $dosen = $dosen ?? null;
    $suratDownloadUrl = $dosen?->suratDownloadUrl();
    $tanggalLahirRawValue = old('tanggal_lahir', $dosen->tanggal_lahir ?? '');
    $tanggalLahirValue = \App\Support\DateInputNormalizer::normalize($tanggalLahirRawValue) ?? $tanggalLahirRawValue;
    $tanggalLahirDisplay = '';

    if (!empty($tanggalLahirValue)) {
        try {
            $tanggalLahirDisplay = \Illuminate\Support\Carbon::parse($tanggalLahirValue)->locale('id')->translatedFormat('d F Y');
        } catch (\Throwable $exception) {
            $tanggalLahirDisplay = $tanggalLahirValue;
        }
    }
@endphp

<div class="profile-form">
    <div class="profile-form__section">
        <div class="profile-form__section-head">
            <span class="profile-form__eyebrow">Identitas</span>
            <h4>Informasi Personal Dosen</h4>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="nama_lengkap">Nama Lengkap</label>
                    <input type="text" id="nama_lengkap" name="nama_lengkap" class="form-control @error('nama_lengkap') is-invalid @enderror" value="{{ old('nama_lengkap', $dosen->nama_lengkap ?? '') }}" placeholder="Masukkan nama lengkap dosen">
                    @error('nama_lengkap')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="nidn_nuptk">NIDN / NUPTK</label>
                    <input type="text" id="nidn_nuptk" name="nidn_nuptk" class="form-control @error('nidn_nuptk') is-invalid @enderror" value="{{ old('nidn_nuptk', $dosen->nidn_nuptk ?? '') }}" placeholder="Contoh: 0123456789">
                    @error('nidn_nuptk')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="tempat_lahir">Tempat Lahir</label>
                    <input type="text" id="tempat_lahir" name="tempat_lahir" class="form-control @error('tempat_lahir') is-invalid @enderror" value="{{ old('tempat_lahir', $dosen->tempat_lahir ?? '') }}" placeholder="Kota kelahiran">
                    @error('tempat_lahir')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="tanggal_lahir_display">Tanggal Lahir</label>
                    <div
                        class="input-group date birthdate-picker"
                        id="dosen-tanggal-lahir-picker"
                        data-target-input="nearest"
                        data-birthdate-picker="true"
                        data-hidden-target="#dosen_tanggal_lahir"
                    >
                        <input
                            type="text"
                            id="tanggal_lahir_display"
                            class="form-control datetimepicker-input @error('tanggal_lahir') is-invalid @enderror"
                            data-target="#dosen-tanggal-lahir-picker"
                            value="{{ $tanggalLahirDisplay }}"
                            placeholder="Pilih tanggal lahir"
                            autocomplete="off"
                            readonly
                        >
                        <input type="hidden" id="dosen_tanggal_lahir" name="tanggal_lahir" value="{{ $tanggalLahirValue }}">
                        <div class="input-group-append" data-target="#dosen-tanggal-lahir-picker" data-toggle="datetimepicker">
                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                        </div>
                    </div>
                    <small class="form-text text-muted">Pilih tanggal dari kalender dengan format hari bulan tahun.</small>
                    @error('tanggal_lahir')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="jenis_kelamin">Jenis Kelamin</label>
                    <select id="jenis_kelamin" name="jenis_kelamin" class="form-control @error('jenis_kelamin') is-invalid @enderror">
                        <option value="">Pilih jenis kelamin</option>
                        <option value="Laki-laki" {{ old('jenis_kelamin', $dosen->jenis_kelamin ?? '') == 'Laki-laki' ? 'selected' : '' }}>Laki-laki</option>
                        <option value="Perempuan" {{ old('jenis_kelamin', $dosen->jenis_kelamin ?? '') == 'Perempuan' ? 'selected' : '' }}>Perempuan</option>
                    </select>
                    @error('jenis_kelamin')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group mb-md-0">
                    <label for="daerah_asal">Daerah Asal</label>
                    <input type="text" id="daerah_asal" name="daerah_asal" class="form-control @error('daerah_asal') is-invalid @enderror" value="{{ old('daerah_asal', $dosen->daerah_asal ?? '') }}" placeholder="Kabupaten / Kota asal">
                    @error('daerah_asal')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group mb-md-0">
                    <label for="no_hp">No WhatsApp / No HP</label>
                    <input type="text" id="no_hp" name="no_hp" class="form-control @error('no_hp') is-invalid @enderror" value="{{ old('no_hp', $dosen->no_hp ?? '') }}" placeholder="08xxxxxxxxxx">
                    @error('no_hp')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>
    </div>

    <div class="profile-form__section">
        <div class="profile-form__section-head">
            <span class="profile-form__eyebrow">Akademik</span>
            <h4>Informasi Institusi</h4>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="master_perguruan_tinggi_id">Perguruan Tinggi</label>
                    @php
                        $selectedPerguruanTinggiId = old('master_perguruan_tinggi_id', $dosen->master_perguruan_tinggi_id ?? null);
                    @endphp
                    @if(auth()->user()?->isOperator())
                        <input type="hidden" name="master_perguruan_tinggi_id" value="{{ old('master_perguruan_tinggi_id', $lockedPerguruanTinggi->id ?? $selectedPerguruanTinggiId) }}">
                        <div class="profile-form__locked-field @error('master_perguruan_tinggi_id') is-invalid @enderror">
                            <div class="profile-form__locked-value">
                                {{ $lockedPerguruanTinggi->nama_perguruan_tinggi ?? 'Perguruan tinggi operator belum disetel' }}
                                @if(!empty($lockedPerguruanTinggi?->singkatan))
                                    <span>({{ $lockedPerguruanTinggi->singkatan }})</span>
                                @endif
                            </div>
                            <small class="text-muted">Operator hanya bisa menambahkan dosen dari perguruan tinggi yang terhubung ke akunnya.</small>
                        </div>
                    @else
                        <select
                            id="master_perguruan_tinggi_id"
                            name="master_perguruan_tinggi_id"
                            class="form-control @error('master_perguruan_tinggi_id') is-invalid @enderror"
                            data-searchable-select="true"
                            data-search-placeholder="Cari perguruan tinggi..."
                        >
                            <option value="">Pilih perguruan tinggi</option>
                            @foreach(($perguruanTinggiOptions ?? collect()) as $perguruanTinggi)
                                <option value="{{ $perguruanTinggi->id }}" {{ (int) $selectedPerguruanTinggiId === (int) $perguruanTinggi->id ? 'selected' : '' }}>
                                    {{ $perguruanTinggi->nama_perguruan_tinggi }}@if($perguruanTinggi->singkatan) ({{ $perguruanTinggi->singkatan }})@endif
                                </option>
                            @endforeach
                        </select>
                    @endif
                    @error('master_perguruan_tinggi_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    @if(!empty($dosen->nama_perguruan_tinggi) && empty($dosen->master_perguruan_tinggi_id))
                        <small class="form-text text-warning">Data lama masih memakai nama kampus manual: {{ $dosen->nama_perguruan_tinggi }}. Pilih master perguruan tinggi agar relasinya tersambung.</small>
                    @endif
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="nama_program_studi">Nama Program Studi</label>
                    <input type="text" id="nama_program_studi" name="nama_program_studi" class="form-control @error('nama_program_studi') is-invalid @enderror" value="{{ old('nama_program_studi', $dosen->nama_program_studi ?? '') }}" placeholder="Nama program studi">
                    @error('nama_program_studi')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group mb-md-0">
                    <label for="fakultas">Fakultas</label>
                    <input type="text" id="fakultas" name="fakultas" class="form-control @error('fakultas') is-invalid @enderror" value="{{ old('fakultas', $dosen->fakultas ?? '') }}" placeholder="Nama fakultas">
                    @error('fakultas')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>
    </div>

    <div class="profile-form__section">
        <div class="profile-form__section-head">
            <span class="profile-form__eyebrow">Dokumen</span>
            <h4>Lampiran Pendukung</h4>
        </div>

        <div class="row">
            <div class="col-lg-6">
                <div class="upload-card">
                    <label for="foto">Foto Dosen</label>
                    <input type="file" id="foto" name="foto" class="form-control-file @error('foto') is-invalid @enderror" accept=".jpg,.jpeg,.png">
                    <div class="upload-card__meta">
                        <span class="upload-card__file-chip d-none" data-file-chip-for="foto"></span>
                    </div>
                    <small class="form-text text-muted">Format JPG atau PNG, maksimal 2MB.</small>
                    @error('foto')<div class="text-danger small mt-2">{{ $message }}</div>@enderror
                    @if(!empty($dosen->foto))
                        <div class="upload-card__preview mt-3">
                            <span class="upload-card__caption">Foto saat ini</span>
                            <img src="{{ asset($dosen->foto) }}" alt="Foto dosen" class="img-fluid rounded">
                        </div>
                    @endif
                </div>
            </div>
            <div class="col-lg-6">
                <div class="upload-card">
                    <label for="surat">Surat Pernyataan Pimpinan</label>
                    <input type="file" id="surat" name="surat" class="form-control-file @error('surat') is-invalid @enderror" accept=".pdf,.doc,.docx">
                    <div class="upload-card__meta">
                        <span class="upload-card__file-chip d-none" data-file-chip-for="surat"></span>
                    </div>
                    <small class="form-text text-muted">Format PDF, DOC, atau DOCX, maksimal 5MB.</small>
                    @error('surat')<div class="text-danger small mt-2">{{ $message }}</div>@enderror
                    @if(!empty($suratDownloadUrl))
                        <div class="upload-card__preview mt-3">
                            <span class="upload-card__caption">Dokumen saat ini</span>
                            <a href="{{ $suratDownloadUrl }}" class="btn btn-outline-primary btn-sm rounded-pill">
                                <i class="fas fa-file-alt mr-1"></i> Lihat Surat
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@once
    @push('styles')
        <link rel="stylesheet" href="{{ asset('adminlte/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') }}">
        <style>
            .birthdate-picker .input-group-text {
                min-height: 48px;
                border-color: #d8e2ee;
                border-top-right-radius: 14px;
                border-bottom-right-radius: 14px;
                background: #f8fbff;
                color: #118ab2;
            }

            .birthdate-picker .form-control[readonly] {
                background: #fff;
                cursor: pointer;
            }

            .bootstrap-datetimepicker-widget {
                border: 1px solid #dbe7f1;
                border-radius: 18px;
                box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
            }

            .bootstrap-datetimepicker-widget table td.active,
            .bootstrap-datetimepicker-widget table td.active:hover,
            .bootstrap-datetimepicker-widget table td span.active {
                background: linear-gradient(135deg, #118ab2 0%, #0f9f7a 100%);
            }
        </style>
    @endpush

    @push('scripts')
        <script src="{{ asset('adminlte/plugins/moment/moment-with-locales.min.js') }}"></script>
        <script src="{{ asset('adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                moment.locale('id');

                const indonesianTooltips = {
                    today: 'Hari ini',
                    clear: 'Hapus pilihan',
                    close: 'Tutup',
                    selectMonth: 'Pilih bulan',
                    prevMonth: 'Bulan sebelumnya',
                    nextMonth: 'Bulan berikutnya',
                    selectYear: 'Pilih tahun',
                    prevYear: 'Tahun sebelumnya',
                    nextYear: 'Tahun berikutnya',
                    selectDecade: 'Pilih dekade',
                    prevDecade: 'Dekade sebelumnya',
                    nextDecade: 'Dekade berikutnya',
                    prevCentury: 'Abad sebelumnya',
                    nextCentury: 'Abad berikutnya',
                    pickHour: 'Pilih jam',
                    incrementHour: 'Tambah jam',
                    decrementHour: 'Kurangi jam',
                    pickMinute: 'Pilih menit',
                    incrementMinute: 'Tambah menit',
                    decrementMinute: 'Kurangi menit',
                    pickSecond: 'Pilih detik',
                    incrementSecond: 'Tambah detik',
                    decrementSecond: 'Kurangi detik',
                    togglePeriod: 'Ubah periode',
                    selectTime: 'Pilih waktu',
                    selectDate: 'Pilih tanggal'
                };

                document.querySelectorAll('[data-birthdate-picker="true"]').forEach(function (pickerElement) {
                    if (pickerElement.dataset.birthdateReady === 'true') {
                        return;
                    }

                    const hiddenInput = document.querySelector(pickerElement.dataset.hiddenTarget);
                    const displayInput = pickerElement.querySelector('.datetimepicker-input');
                    const initialValue = hiddenInput ? hiddenInput.value : '';
                    const $picker = window.jQuery(pickerElement);

                    $picker.datetimepicker({
                        format: 'LL',
                        locale: 'id',
                        useCurrent: false,
                        ignoreReadonly: true,
                        buttons: {
                            showClear: true,
                            showClose: true
                        },
                        icons: {
                            time: 'far fa-clock',
                            date: 'far fa-calendar-alt',
                            up: 'fas fa-chevron-up',
                            down: 'fas fa-chevron-down',
                            previous: 'fas fa-chevron-left',
                            next: 'fas fa-chevron-right',
                            today: 'far fa-calendar-check',
                            clear: 'far fa-trash-alt',
                            close: 'fas fa-times'
                        },
                        tooltips: indonesianTooltips
                    });

                    if (initialValue) {
                        $picker.datetimepicker('date', moment(initialValue, 'YYYY-MM-DD'));
                    }

                    $picker.on('change.datetimepicker', function (event) {
                        if (!hiddenInput) {
                            return;
                        }

                        if (!event.date) {
                            hiddenInput.value = '';
                            if (displayInput) {
                                displayInput.value = '';
                            }
                            return;
                        }

                        hiddenInput.value = event.date.format('YYYY-MM-DD');

                        if (displayInput) {
                            displayInput.value = event.date.locale('id').format('LL');
                        }
                    });

                    pickerElement.dataset.birthdateReady = 'true';
                });
            });
        </script>
    @endpush
@endonce