@extends('layouts.app')

@section('title', 'Pendataan Pegawai - Sistem Informasi Pegawai Jabatan Fungsional')

@section('style')
<style>
    body {
        background: #e8e4d9; /* Slate 900 */
        color: #f8fafc;
    }

    .container-main {
        display: block;
        padding: 3rem 0;
    }

    /* Background blobs */
    .bg-glow-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.08;
        z-index: 0;
        pointer-events: none;
    }

    .blob-form-1 {
        top: 15%;
        left: 5%;
        width: 500px;
        height: 500px;
        background: #d4a017;
    }

    .blob-form-2 {
        bottom: 15%;
        right: 5%;
        width: 600px;
        height: 600px;
        background: #c9930a;
    }

    /* Card Styling */
    .card-form {
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(212, 160, 23, 0.2) !important;
        border-radius: 24px !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
        overflow: hidden;
        position: relative;
        z-index: 5;
    }

    .card-header {
        background: linear-gradient(135deg, #e6ddc5 0%, #f6e5b3 100%) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        padding: 2.5rem 2rem !important;
        text-align: center;
        color: #4a3728 !important;
    }

    .card-header h2 {
        font-weight: 800;
        font-size: 1.85rem;
        margin: 0;
        letter-spacing: -0.02em;
    }

    .card-header h2 i {
        color: #f0c040;
    }

    .card-header p {
        color: #6c757d !important;
        font-size: 0.925rem;
    }

    .card-body {
        padding: 3rem 2.5rem !important;
        color: #4a3728 !important;
    }

    /* Section Titles */
    .section-title {
        color: #d4a017 !important;
        font-weight: 700 !important;
        font-size: 1.15rem !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid rgba(56, 189, 248, 0.2) !important;
        padding-bottom: 0.5rem !important;
        margin-top: 2.5rem !important;
        margin-bottom: 1.5rem !important;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .section-title i {
        font-size: 1.1rem;
    }

    /* Labels and Input Control */
    .form-label {
        font-weight: 600 !important;
        color: #4a3728 !important;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .form-control, .form-select {
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        color: #4a3728 !important;
        border-radius: 10px !important;
        padding: 0.75rem 1rem !important;
        transition: all 0.3s ease !important;
    }

    .form-control:focus, .form-select:focus {
        background-color: #ffffff !important;
        border-color: #d4a017 !important;
        box-shadow: 0 0 0 0.25rem rgba(32, 95, 150, 0.2) !important;
        color: #4a3728 !important;
    }

    .form-control:disabled, .form-select:disabled, .form-control[readonly] {
        background-color: #e9ecef !important;
        cursor: not-allowed !important;
        opacity: 1 !important;
    }

    .form-control::placeholder {
        color: #adb5bd !important;
    }

    .form-select option {
        background-color: #f4f1e9;
        color: #4a3728;
    }

    textarea.form-control {
        resize: vertical;
    }

    /* Custom Input Validation styling */
    .form-control.is-invalid, .form-select.is-invalid {
        border-color: #ef4444 !important;
        box-shadow: none !important;
    }

    .invalid-feedback {
        color: #dc3545 !important;
        font-size: 0.825rem;
        font-weight: 500;
    }

    /* Custom Alerts */
    .alert-info {
        background-color: #e6f1fa !important;
        border: 1px solid rgba(32, 95, 150, 0.2) !important;
        color: #4a3728 !important;
        border-radius: 12px !important;
        padding: 1rem 1.25rem !important;
    }

    .alert-info strong {
        color: #f0c040;
    }

    .alert-warning {
        background-color: #fff7e6 !important;
        border: 1px solid rgba(217, 144, 25, 0.2) !important;
        color: #4a3728 !important;
        border-radius: 12px !important;
        padding: 1.25rem !important;
    }

    .alert-warning strong {
        color: #fbbf24;
    }

    /* List Groups for Files */
    .list-group-item {
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        border-radius: 8px !important;
        padding: 1rem !important;
        color: #4a3728 !important;
        margin-bottom: 0.5rem;
    }

    .list-group-item a {
        color: #d4a017 !important;
        text-decoration: none;
        font-weight: 600;
    }

    .list-group-item a:hover {
        color: #b8860b !important;
        text-decoration: underline;
    }

    /* Required asterisk styling */
    .required::after {
        content: "*";
        color: #ef4444 !important;
        margin-left: 0.25rem;
    }

    /* Buttons */
    .btn-submit {
        background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%) !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 0.85rem 2rem !important;
        font-weight: 700 !important;
        color: #4a3728 !important;
        box-shadow: 0 8px 20px rgba(14, 165, 233, 0.25) !important;
        transition: all 0.3s ease !important;
    }

    .btn-submit:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 12px 25px rgba(14, 165, 233, 0.45) !important;
        color: #4a3728 !important;
    }

    .btn-submit:active {
        transform: translateY(0) !important;
    }

    .btn-outline-secondary {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        color: #4a3728 !important;
        border-radius: 12px !important;
        padding: 0.85rem 2rem !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }

    .btn-outline-secondary:hover {
        background: rgba(0, 0, 0, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: #4a3728 !important;
        transform: translateY(-2px) !important;
    }

    .alert-info .btn-outline-secondary {
        border-radius: 8px !important;
        padding: 0.4rem 1rem !important;
        font-size: 0.85rem !important;
    }

    .text-muted {
        color: #6c757d !important;
    }

    /* File badge */
    .badge.bg-secondary {
        background-color: rgba(148, 163, 184, 0.15) !important;
        border: 1px solid rgba(148, 163, 184, 0.2) !important;
        color: #4a3728 !important;
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
    }

    @media (max-width: 768px) {
        .card-body {
            padding: 2rem 1.5rem !important;
        }
    }
</style>
@endsection

@section('content')
<div class="bg-glow-blob blob-form-1"></div>
<div class="bg-glow-blob blob-form-2"></div>

<div class="row justify-content-center position-relative w-100 py-3" style="z-index: 10;">
    <div class="col-lg-8 col-md-10">
        <div class="card card-form">
            <div class="card-header">
                <h2>
                    <i class="fas fa-file-contract"></i>
                    {{ $isCorrection ? 'Formulir Perbaikan Data Pegawai' : 'Formulir Pendataan Pegawai' }}
                </h2>
                <p class="mb-0 mt-2">Sistem Informasi Pendataan Pegawai Jabatan Fungsional Pemerintah Kabupaten Sukabumi</p>
            </div>

            <div class="card-body">
                @if ($isCorrection)
                    <div class="alert alert-warning" role="alert">
                        <strong><i class="fas fa-exclamation-circle"></i> Catatan Admin:</strong><br>
                        {{ $pegawai->catatan_penolakan }}
                    </div>
                    <p class="text-muted mb-3">
                        Silakan perbaiki data sesuai catatan admin. Setelah dikirim, status pendataan akan kembali menjadi menunggu validasi.
                    </p>
                @else
                    @if (isset($kodeAkses))
                        <div class="alert alert-info d-flex justify-content-between align-items-center gap-3 flex-wrap">
                            <div>
                                <strong><i class="fas fa-building"></i> {{ $kodeAkses->unitKerja->nama_unit }}</strong><br>
                                <small>Kode kantor terverifikasi. Unit kerja formulir dikunci sesuai kode.</small>
                            </div>
                            <form action="{{ route('pegawai.access.clear') }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-outline-secondary">
                                    <i class="fas fa-key"></i> Ganti Kode
                                </button>
                            </form>
                        </div>
                    @endif
                    <p class="text-muted mb-3">
                        <i class="fas fa-info-circle"></i>
                        Silakan isi formulir di bawah dengan data yang akurat. Semua field yang ditandai dengan
                        <span class="required"></span>
                        wajib diisi.
                    </p>
                @endif

                <form action="{{ $formAction }}" method="POST" enctype="multipart/form-data" id="formPegawai">
                    @csrf

                    <!-- SECTION 1: DATA PRIBADI -->
                    <h5 class="section-title"><i class="fas fa-user"></i> Data Pribadi</h5>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="nip" class="form-label required">NIP</label>
                            <input type="text" id="nip" name="nip" class="form-control @error('nip') is-invalid @enderror"
                                placeholder="Nomor Induk Pegawai (18 digit)" value="{{ old('nip', $pegawai?->nip) }}"
                                required minlength="18" maxlength="18" pattern="[0-9]{18}">
                            <small class="text-muted">Harus 18 digit angka</small>
                            @error('nip')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="nama_lengkap" class="form-label required">Nama Lengkap</label>
                            <input type="text" id="nama_lengkap" name="nama_lengkap"
                                class="form-control @error('nama_lengkap') is-invalid @enderror"
                                placeholder="Masukkan nama lengkap" value="{{ old('nama_lengkap', $pegawai?->nama_lengkap) }}" required>
                            @error('nama_lengkap')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="tempat_lahir" class="form-label required">Tempat Lahir</label>
                            <input type="text" id="tempat_lahir" name="tempat_lahir"
                                class="form-control @error('tempat_lahir') is-invalid @enderror"
                                placeholder="Kota/Kabupaten" value="{{ old('tempat_lahir', $pegawai?->tempat_lahir) }}" required>
                            @error('tempat_lahir')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="tanggal_lahir" class="form-label required">Tanggal Lahir</label>
                            <input type="date" id="tanggal_lahir" name="tanggal_lahir"
                                class="form-control @error('tanggal_lahir') is-invalid @enderror"
                                value="{{ old('tanggal_lahir', $pegawai?->tanggal_lahir?->format('Y-m-d')) }}" required>
                            @error('tanggal_lahir')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="jenis_kelamin" class="form-label required">Jenis Kelamin</label>
                            <select id="jenis_kelamin" name="jenis_kelamin"
                                class="form-select @error('jenis_kelamin') is-invalid @enderror" required>
                                <option value="">-- Pilih Jenis Kelamin --</option>
                                <option value="Laki-laki" @selected(old('jenis_kelamin', $pegawai?->jenis_kelamin) === 'Laki-laki')>Laki-laki
                                </option>
                                <option value="Perempuan" @selected(old('jenis_kelamin', $pegawai?->jenis_kelamin) === 'Perempuan')>Perempuan</option>
                            </select>
                            @error('jenis_kelamin')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="email" class="form-label required">Email</label>
                            <input type="email" id="email" name="email"
                                class="form-control @error('email') is-invalid @enderror"
                                placeholder="nama@example.com" value="{{ old('email', $pegawai?->email) }}" required>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="no_hp" class="form-label required">Nomor Telepon</label>
                            <input type="tel" id="no_hp" name="no_hp"
                                class="form-control @error('no_hp') is-invalid @enderror"
                                placeholder="08xxxxxxxxxx" value="{{ old('no_hp', $pegawai?->no_hp) }}"
                                required minlength="10" maxlength="13" pattern="[0-9]{10,13}">
                            <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 mb-3">
                            <label for="pendidikan_terakhir" class="form-label required">Pendidikan Terakhir</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', $pegawai?->pendidikan_terakhir) === $pendidikan)>
                                        {{ $pendidikan }}
                                    </option>
                                @endforeach
                            </select>
                            @error('pendidikan_terakhir')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="golongan" class="form-label required">Golongan</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', $pegawai?->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 required">Alamat Lengkap</label>
                        <textarea id="alamat" name="alamat" rows="3"
                            class="form-control @error('alamat') is-invalid @enderror"
                            placeholder="Jalan, No., RT/RW, Kelurahan/Desa, Kecamatan, Kabupaten/Kota" required>{{ old('alamat', $pegawai?->alamat) }}</textarea>
                        @error('alamat')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- SECTION 2: DATA JABATAN -->
                    <h5 class="section-title"><i class="fas fa-briefcase"></i> Data Jabatan</h5>

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

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="unit_kerja" class="form-label required">Unit Kerja</label>
                            <select id="unit_kerja" name="unit_kerja"
                                class="form-select @error('unit_kerja') is-invalid @enderror" required
                                {{ $lockedUnitKerja ? 'disabled' : '' }}>
                                <option value="">-- Pilih Unit Kerja --</option>
                                @foreach ($unitKerjaList as $unitKerja)
                                    <option value="{{ $unitKerja->nama_unit }}" data-id="{{ $unitKerja->id }}" @selected(old('unit_kerja', $pegawai?->unit_kerja ?? $lockedUnitKerja?->nama_unit) === $unitKerja->nama_unit)>
                                        {{ $unitKerja->nama_unit }}
                                    </option>
                                @endforeach
                            </select>
                            @if ($lockedUnitKerja)
                                <input type="hidden" name="unit_kerja" value="{{ $lockedUnitKerja->nama_unit }}">
                            @endif
                            @error('unit_kerja')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="nama_jabatan_select" class="form-label required">Nama Jabatan</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">
                        <div class="col-md-6 mb-3">
                            <label for="jabatan_fungsional_id" class="form-label required">Jenjang</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 required">Tanggal Mulai Jabatan</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', $pegawai?->tanggal_mulai_jabatan?->format('Y-m-d')) }}" required>
                        @error('tanggal_mulai_jabatan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- SECTION 3: UPLOAD BERKAS -->
                    <h5 class="section-title"><i class="fas fa-file-upload"></i> Upload SK Pengangkatan Terbaru</h5>

                    @if ($isCorrection && $pegawai->files->count() > 0)
                        <div class="mb-3">
                            <label class="form-label">SK Pengangkatan Sebelumnya</label>
                            <div class="list-group">
                                @foreach ($pegawai->files as $file)
                                    <div class="list-group-item">
                                        <div class="d-flex justify-content-between align-items-start gap-3">
                                            <div>
                                                <i class="fas fa-file"></i>
                                                <a href="{{ URL::temporarySignedRoute('pegawai.files.show', now()->addHours(2), ['file' => $file->id]) }}" target="_blank">
                                                    {{ $file->nama_file }}
                                                </a>
                                                <br>
                                                <small class="text-muted">
                                                    Diunggah pada {{ $file->created_at->format('d-m-Y') }}
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <small class="text-muted d-block mt-2">
                                Jika mengunggah dokumen baru, dokumen sebelumnya otomatis diganti.
                            </small>
                        </div>
                    @endif

                    <div class="mb-3">
                        <label for="file" class="form-label required">SK Pengangkatan Terbaru (PDF - Max 1MB)</label>
                        <div class="input-group">
                            <input type="file" id="file" name="file" class="form-control @error('file') is-invalid @enderror"
                                accept=".pdf" required>
                        </div>
                        <small class="text-muted d-block mt-2">
                            Unggah dokumen SK Pengangkatan Terbaru dalam format PDF (maksimal 1MB).
                            Sistem menyimpan satu dokumen; unggahan baru akan mengganti dokumen sebelumnya.
                        </small>
                        @error('file')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <div id="filePreview" class="mb-3"></div>

                    <!-- SUBMIT -->
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-submit btn-primary">
                            <i class="fas fa-paper-plane"></i> {{ $isCorrection ? 'Kirim Perbaikan Data' : 'Kirim Data Pendataan' }}
                        </button>
                        <a href="{{ route('pegawai.form') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-redo"></i> Reset
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    const jabatanOptions = @json($jabatanOptions);
    const selectedJabatanId = @json((string) old('jabatan_fungsional_id', $pegawai?->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);

    // Preview selected file
    document.getElementById('file').addEventListener('change', function(e) {
        const preview = document.getElementById('filePreview');
        preview.innerHTML = '';

        if (this.files.length > 0) {
            const fileList = document.createElement('div');
            fileList.innerHTML = '<small class="text-muted">File terpilih:</small>';

            const file = this.files[0];
            const fileItem = document.createElement('div');
            fileItem.className = 'badge bg-secondary me-2 mb-2';
            fileItem.textContent = file.name + ' (' + (file.size / 1024).toFixed(2) + ' KB)';
            fileList.appendChild(fileItem);

            preview.appendChild(fileList);
        }
    });

    // Form validation and SweetAlert2
    document.getElementById('formPegawai').addEventListener('submit', function(e) {
        if (!this.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
            this.classList.add('was-validated');
            return;
        }

        e.preventDefault();
        
        Swal.fire({
            title: 'Konfirmasi Pengiriman',
            text: "Apakah Anda yakin data yang diisi sudah benar dan ingin mengirimkannya?",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#4a3728',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Kirim!',
            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();
                    }
                });
                
                this.submit();
            }
        });
    }, false);
</script>
@endsection