@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection

@php
    $hasMemo = false;
    try {
        $memoPath = $persetujuanPenawaran->noc->memo_penyelesaian ?? null;
        $hasMemo = isset($memoPath) && !empty($memoPath) && Storage::disk('public')->exists($memoPath);
    } catch (Exception $e) {
        // Jika terjadi error, $hasMemo tetap false
    }
@endphp

@section('content')
    <div class="grid gap-5 mx-auto w-full lg:gap-7.5">
        <div class="pb-2.5 border card border-agi-100">
            <div class="card-header bg-agi-50" id="basic_settings">
                <div class="flex flex-row gap-1.5 card-title">
                    {{ $hasMemo ? 'Proses Penyelesaian NOC' : 'NOC' }}
                </div>
                <div class="flex gap-2 items-center">
                    <a href="{{ route('noc.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i>
                        Back</a>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ !$hasMemo ? route('noc.store') : route('noc.update', $persetujuanPenawaran) }}"
                    method="POST" class="grid gap-5" enctype="multipart/form-data">
                    @csrf
                    @if ($hasMemo)
                        @method('PUT')
                    @endif
                    <input type="hidden" name="penawaran_id"
                        value="{{ $persetujuanPenawaran->penawaran_id ?? old('penawaran_id') }}">
                    <input type="hidden" name="persetujuan_penawaran_id"
                        value="{{ $persetujuanPenawaran->id ?? old('persetujuan_penawaran_id') }}">
                    <input type="hidden" name="permohonan_id"
                        value="{{ $persetujuanPenawaran?->penawaran?->permohonan?->id ?? $persetujuanPenawaran?->permohonan?->id }}">

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Status Bayar
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <select
                                class="input tomselect w-full @error('status_pembayar') border-danger bg-danger-light @enderror"
                                name="status_pembayar" id="status_pembayar" {{ $hasMemo ? 'disabled' : '' }}>
                                <option value="">Pilih Status Bayar</option>
                                <option value="sudah_bayar"
                                    {{ old('status_pembayar') == 'sudah_bayar' ||
                                    $persetujuanPenawaran?->penawaran?->permohonan?->status_bayar == 'sudah_bayar' ||
                                    $persetujuanPenawaran?->nomor_tiket
                                        ? 'selected'
                                        : '' }}>
                                    Sudah Bayar</option>
                                <option value="belum_bayar"
                                    {{ old('status_pembayar') == 'belum_bayar' ||
                                    ($persetujuanPenawaran?->penawaran?->permohonan?->status_bayar == 'belum_bayar' && !$persetujuanPenawaran?->nomor_tiket)
                                        ? 'selected'
                                        : '' }}>
                                    Belum Bayar</option>
                            </select>
                            @error('status_bayar')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Bukti Pembayaran
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            @if (!empty($persetujuanPenawaran->bukti_bayar))
                                <div class="flex items-center mt-2">
                                    <a href="{{ Storage::url($persetujuanPenawaran->bukti_bayar) }}" target="_blank"
                                        class="badge badge-sm badge-outline badge-warning">
                                        <i class="mr-2 ki-filled ki-eye"></i> Lihat File
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Jumlah Yang Harus Disetor
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="number" name="total_harus_bayar" id="total_harus_bayar"
                                class="input w-full @error('total_harus_bayar') border-danger bg-danger-light @enderror"
                                value="{{ old('total_harus_bayar', $persetujuanPenawaran->nominal_bayar ?? '') }}"
                                readonly>
                            @error('total_harus_bayar')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Jumlah Yang Disetor
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="number" name="nominal_bayar" id="nominal_bayar"
                                class="input w-full @error('nominal_bayar') border-danger bg-danger-light @enderror"
                                value="{{ old('nominal_bayar', $persetujuanPenawaran->noc->nominal_bayar ?? '') }}"
                                placeholder="Masukkan nominal bayar" {{ $hasMemo ? 'readonly' : '' }}>
                            @error('nominal_bayar')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Jumlah Pembukuan
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="number" name="total_pembukuan" id="total_pembukuan"
                                class="input w-full @error('total_pembukuan') border-danger bg-danger-light @enderror"
                                value="{{ old('total_pembukuan', $persetujuanPenawaran->noc->total_pembukuan ?? '') }}"
                                placeholder="Masukkan total pembukuan" {{ $hasMemo ? 'readonly' : '' }}>
                            @error('total_pembukuan')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Tanggal Pembayaran
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="date" name="tanggal_pembayaran" id="tanggal_pembayaran"
                                class="input w-full @error('tanggal_pembayaran') border-danger bg-danger-light @enderror"
                                value="{{ old('tanggal_pembayaran', isset($persetujuanPenawaran->noc->tanggal_pembayaran) ? date('Y-m-d', strtotime($persetujuanPenawaran->noc->tanggal_pembayaran)) : '') }}"
                                {{ $hasMemo ? 'readonly' : '' }}>
                            @error('tanggal_pembayaran')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>


                    <!-- Field Status Kurang Bayar -->
                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Status Kurang Bayar
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <div class="flex gap-4 items-center">
                                <label class="checkbox-group">
                                    <input class="checkbox checkbox-sm" name="status_kurang_bayar" id="status_kurang_bayar"
                                        value="1" type="checkbox"
                                        {{ old('status_kurang_bayar', $persetujuanPenawaran->noc->status_kurang_bayar ?? false) ? 'checked' : '' }}
                                        {{ $hasMemo ? 'disabled' : '' }}>
                                    <span class="checkbox-label">
                                        Ya, ada kurang bayar
                                    </span>
                                </label>
                            </div>
                            @error('status_kurang_bayar')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <!-- Field Nominal Kurang Bayar -->
                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" id="nominal_kurang_bayar_section"
                        style="display: none;">
                        <label class="form-label max-w-56">
                            Nominal Kurang Bayar
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="number" name="nominal_kurang_bayar" id="nominal_kurang_bayar"
                                class="input w-full @error('nominal_kurang_bayar') border-danger bg-danger-light @enderror"
                                value="{{ old('nominal_kurang_bayar', $persetujuanPenawaran->noc->nominal_kurang_bayar ?? '') }}"
                                placeholder="Masukkan nominal kurang bayar" {{ $hasMemo ? 'readonly' : '' }}>
                            @error('nominal_kurang_bayar')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <!-- Field Status Lebih Bayar -->
                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Status Lebih Bayar
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <div class="flex gap-4 items-center">
                                <label class="checkbox-group">
                                    <input class="checkbox checkbox-sm" name="status_lebih_bayar" id="status_lebih_bayar"
                                        value="1" type="checkbox"
                                        {{ old('status_lebih_bayar', $persetujuanPenawaran->noc->status_lebih_bayar ?? false) ? 'checked' : '' }}
                                        {{ $hasMemo ? 'disabled' : '' }}>
                                    <span class="checkbox-label">Ya, ada lebih bayar </span>
                                </label>
                            </div>
                            @error('status_lebih_bayar')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <!-- Field Nominal Lebih Bayar -->
                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" id="nominal_lebih_bayar_section"
                        style="display: none;">
                        <label class="form-label max-w-56">
                            Nominal Lebih Bayar
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="number" name="nominal_lebih_bayar" id="nominal_lebih_bayar"
                                class="input w-full @error('nominal_lebih_bayar') border-danger bg-danger-light @enderror"
                                value="{{ old('nominal_lebih_bayar', $persetujuanPenawaran->noc->nominal_lebih_bayar ?? '') }}"
                                placeholder="Masukkan nominal lebih bayar" {{ $hasMemo ? 'readonly' : '' }}>
                            @error('nominal_lebih_bayar')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <!-- Field Nominal Lebih Bayar -->
                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" id="nomor_rekening_lebih_bayar_section"
                        style="display: none;">
                        <label class="form-label max-w-56">
                            Nomor Rekening Lebih Bayar
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="number" name="nomor_rekening_lebih_bayar" id="nomor_rekening_lebih_bayar"
                                class="input w-full @error('nomor_rekening_lebih_bayar') border-danger bg-danger-light @enderror"
                                value="{{ old('nomor_rekening_lebih_bayar', $persetujuanPenawaran->noc->nomor_rekening_lebih_bayar ?? '') }}"
                                placeholder="Masukkan nominal lebih bayar" {{ $hasMemo ? 'readonly' : '' }}>
                            @error('nomor_rekening_lebih_bayar')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <!-- Field Bukti Pengembalian -->
                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" id="bukti_pengembalian_section"
                        style="display: none;">
                        <label class="form-label max-w-56">
                            Bukti Pengembalian
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            @if (!$hasMemo)
                                <input type="file" name="bukti_pengembalian" id="bukti_pengembalian"
                                    class="file-input w-full @error('bukti_pengembalian') border-danger bg-danger-light @enderror"
                                    accept=".pdf,.jpg,.jpeg,.png">
                                @error('bukti_pengembalian')
                                    <em class="text-sm alert text-danger">{{ $message }}</em>
                                @enderror
                            @endif

                            @if (isset($persetujuanPenawaran->noc->bukti_pengembalian) && !empty($persetujuanPenawaran->noc->bukti_pengembalian))
                                <div class="flex items-center mt-2">
                                    <a href="{{ Storage::url($persetujuanPenawaran->noc->bukti_pengembalian) }}"
                                        target="_blank" class="badge badge-sm badge-outline badge-warning">
                                        <i class="mr-2 ki-filled ki-eye"></i> Lihat File
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>


                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Bukti KSL
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            @if (!$hasMemo)
                                <input type="file" name="bukti_ksl" id="bukti_ksl"
                                    class="file-input w-full @error('bukti_ksl') border-danger bg-danger-light @enderror"
                                    accept=".pdf,.jpg,.jpeg,.png">
                                @error('bukti_ksl')
                                    <em class="text-sm alert text-danger">{{ $message }}</em>
                                @enderror
                            @endif

                            @if (isset($persetujuanPenawaran->noc->bukti_ksl) && !empty($persetujuanPenawaran->noc->bukti_ksl))
                                <div class="flex items-center mt-2">
                                    <a href="{{ Storage::url($persetujuanPenawaran->noc->bukti_ksl) }}" target="_blank"
                                        class="badge badge-sm badge-outline badge-warning">
                                        <i class="mr-2 ki-filled ki-eye"></i> Lihat File
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>

                    @if ($hasMemo)
                        <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                            <label class="form-label max-w-56">
                                Memo Penyelesaian
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <div class="flex items-center">
                                    <a href="{{ Storage::url($persetujuanPenawaran->noc->memo_penyelesaian) }}"
                                        target="_blank" class="badge badge-sm badge-outline badge-warning">
                                        <i class="mr-2 ki-filled ki-eye"></i> Lihat File
                                    </a>
                                    <input type="hidden" name="memo_penyelesaian_existing"
                                        value="{{ $persetujuanPenawaran->noc->memo_penyelesaian }}">
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                            <label class="form-label max-w-56">
                                Bukti Penyelesaian
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <input type="file" name="bukti_penyelesaian" id="bukti_penyelesaian"
                                    class="file-input w-full @error('bukti_penyelesaian') border-danger bg-danger-light @enderror"
                                    accept=".pdf,.jpg,.jpeg,.png">
                                @error('bukti_penyelesaian')
                                    <em class="text-sm alert text-danger">{{ $message }}</em>
                                @enderror

                                @if (isset($persetujuanPenawaran->noc->bukti_penyelesaian) && !empty($persetujuanPenawaran->noc->bukti_penyelesaian))
                                    <div class="flex items-center mt-2">
                                        <a href="{{ Storage::url($persetujuanPenawaran->noc->bukti_penyelesaian) }}"
                                            target="_blank" class="badge badge-sm badge-outline badge-warning">
                                            <i class="mr-2 ki-filled ki-eye"></i> Lihat File
                                        </a>
                                        <input type="hidden" name="bukti_penyelesaian_existing"
                                            value="{{ $persetujuanPenawaran->noc->bukti_penyelesaian }}">
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                            <label class="form-label max-w-56">
                                Nominal Penyelesaian
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <input type="number" name="nominal_penyelesaian" id="nominal_penyelesaian"
                                    class="input w-full @error('nominal_penyelesaian') border-danger bg-danger-light @enderror"
                                    value="{{ old('nominal_penyelesaian', $persetujuanPenawaran->noc->nominal_penyelesaian ?? '') }}"
                                    placeholder="Masukkan nominal penyelesaian">
                                @error('nominal_penyelesaian')
                                    <em class="text-sm alert text-danger">{{ $message }}</em>
                                @enderror
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                            <label class="form-label max-w-56">
                                Tanggal Penyelesaian
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <input type="date" name="tanggal_penyelesaian" id="tanggal_penyelesaian"
                                    class="input w-full @error('tanggal_penyelesaian') border-danger bg-danger-light @enderror"
                                    value="{{ old('tanggal_penyelesaian', isset($persetujuanPenawaran->noc->tanggal_penyelesaian) ? date('Y-m-d', strtotime($persetujuanPenawaran->noc->tanggal_penyelesaian)) : '') }}">
                                @error('tanggal_penyelesaian')
                                    <em class="text-sm alert text-danger">{{ $message }}</em>
                                @enderror
                            </div>
                        </div>
                    @endif

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Catatan
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <textarea name="catatan" id="catatan" rows="4"
                                class="textarea w-full @error('catatan') border-danger bg-danger-light @enderror" readonly
                                placeholder="Masukkan catatan">{{ old('catatan', $persetujuanPenawaran->catatan ?? '') }}</textarea>
                            @error('catatan')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Catatan NOC
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <textarea name="catatan_noc" id="catatan_noc" rows="4"
                                class="textarea w-full @error('catatan_noc') border-danger bg-danger-light @enderror"
                                placeholder="Masukkan catatan noc">{{ old('catatan_noc', $persetujuanPenawaran->noc->catatan_noc ?? '') }}</textarea>
                            @error('catatan_noc')
                                <em class="text-sm alert text-danger">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex justify-end">
                        <button type="submit" class="btn btn-primary">
                            Proses
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            /**
             * Fungsi untuk mengelola mutual exclusive selection antara kurang bayar dan lebih bayar
             * Hanya satu status yang bisa dipilih pada satu waktu
             */
            const statusKurangBayar = document.getElementById('status_kurang_bayar');
            const statusLebihBayar = document.getElementById('status_lebih_bayar');
            const nominalKurangBayarSection = document.getElementById('nominal_kurang_bayar_section');
            const nominalLebihBayarSection = document.getElementById('nominal_lebih_bayar_section');
            const buktiPengembalianSection = document.getElementById('bukti_pengembalian_section');

            // Field untuk perbandingan nilai
            const totalHarusBayar = document.getElementById('total_harus_bayar');
            const nominalBayar = document.getElementById('nominal_bayar');
            const totalPembukuan = document.getElementById('total_pembukuan');

            /**
             * Fungsi untuk mengatur enable/disable status checkbox berdasarkan perbandingan nilai
             * Logika:
             * - Jika semua nilai sama: kedua checkbox disabled
             * - Jika nominal_bayar/total_pembukuan < total_harus_bayar: hanya status_kurang_bayar enabled
             * - Jika nominal_bayar/total_pembukuan > total_harus_bayar: hanya status_lebih_bayar enabled
             */
            function updateCheckboxStatus() {
                const totalHarus = parseFloat(totalHarusBayar.value) || 0;
                const nominal = parseFloat(nominalBayar.value) || 0;
                const pembukuan = parseFloat(totalPembukuan.value) || 0;

                console.log('Updating checkbox status:', {
                    totalHarus,
                    nominal,
                    pembukuan
                });

                // Reset checkbox states
                statusKurangBayar.disabled = false;
                statusLebihBayar.disabled = false;

                // Jika semua nilai sama, disable kedua checkbox
                if (totalHarus === nominal && nominal === pembukuan && totalHarus > 0) {
                    statusKurangBayar.disabled = true;
                    statusLebihBayar.disabled = true;
                    statusKurangBayar.checked = false;
                    statusLebihBayar.checked = false;
                    nominalKurangBayarSection.style.display = 'none';
                    nominalLebihBayarSection.style.display = 'none';
                    buktiPengembalianSection.style.display = 'none';
                    console.log('Semua nilai sama, kedua checkbox disabled');
                }
                // Jika nominal/pembukuan kurang dari total harus bayar
                else if ((nominal > 0 && nominal < totalHarus) || (pembukuan > 0 && pembukuan < totalHarus)) {
                    statusLebihBayar.disabled = true;
                    statusLebihBayar.checked = false;
                    statusKurangBayar.checked = true;
                    nominalKurangBayarSection.style.display = '';
                    nominalLebihBayarSection.style.display = 'none';
                    buktiPengembalianSection.style.display = 'none';
                    console.log('Kurang bayar, hanya status_kurang_bayar enabled');
                }
                // Jika nominal/pembukuan lebih dari total harus bayar
                else if ((nominal > 0 && nominal > totalHarus) || (pembukuan > 0 && pembukuan > totalHarus)) {
                    statusKurangBayar.disabled = true;
                    statusKurangBayar.checked = false;
                    statusLebihBayar.checked = true;
                    nominalLebihBayarSection.style.display = '';
                    nominalKurangBayarSection.style.display = 'none';
                    console.log('Lebih bayar, hanya status_lebih_bayar enabled');
                }
            }

            // Event listeners untuk update otomatis saat nilai berubah
            if (nominalBayar) {
                nominalBayar.addEventListener('input', updateCheckboxStatus);
                nominalBayar.addEventListener('change', updateCheckboxStatus);
            }

            if (totalPembukuan) {
                totalPembukuan.addEventListener('input', updateCheckboxStatus);
                totalPembukuan.addEventListener('change', updateCheckboxStatus);
            }

            // Initial check saat halaman dimuat
            updateCheckboxStatus();

            /**
             * Fungsi untuk reset field dan section visibility
             * @param {string} type - 'kurang' atau 'lebih'
             */
            function resetFields(type) {
                if (type === 'kurang') {
                    // Reset field lebih bayar
                    statusLebihBayar.checked = false;
                    nominalLebihBayarSection.style.display = 'none';
                    buktiPengembalianSection.style.display = 'none';
                    document.getElementById('nominal_lebih_bayar').value = '';
                    document.getElementById('bukti_pengembalian').value = '';
                } else if (type === 'lebih') {
                    // Reset field kurang bayar
                    statusKurangBayar.checked = false;
                    nominalKurangBayarSection.style.display = 'none';
                    document.getElementById('nominal_kurang_bayar').value = '';
                }
            }

            /**
             * Event handler untuk status kurang bayar
             * Menampilkan field nominal kurang bayar dan menyembunyikan field lebih bayar
             */
            if (statusKurangBayar) {
                // Set initial state
                if (statusKurangBayar.checked) {
                    nominalKurangBayarSection.style.display = 'flex';
                    resetFields('kurang');
                }

                statusKurangBayar.addEventListener('change', function() {
                    // Cek apakah checkbox tidak disabled sebelum memproses
                    if (this.disabled) {
                        this.checked = false;
                        return;
                    }

                    if (this.checked) {
                        nominalKurangBayarSection.style.display = 'flex';
                        resetFields('kurang');
                        console.log('Status kurang bayar dipilih, field lebih bayar direset');
                    } else {
                        nominalKurangBayarSection.style.display = 'none';
                        document.getElementById('nominal_kurang_bayar').value = '';
                        console.log('Status kurang bayar dibatalkan');
                    }
                });
            }

            /**
             * Event handler untuk status lebih bayar
             * Menampilkan field nominal dan bukti pengembalian, menyembunyikan field kurang bayar
             */
            if (statusLebihBayar) {
                // Set initial state
                if (statusLebihBayar.checked) {
                    nominalLebihBayarSection.style.display = 'flex';
                    buktiPengembalianSection.style.display = 'flex';
                    resetFields('lebih');
                }

                statusLebihBayar.addEventListener('change', function() {
                    // Cek apakah checkbox tidak disabled sebelum memproses
                    if (this.disabled) {
                        this.checked = false;
                        return;
                    }

                    if (this.checked) {
                        nominalLebihBayarSection.style.display = 'flex';
                        buktiPengembalianSection.style.display = 'flex';
                        resetFields('lebih');
                        console.log('Status lebih bayar dipilih, field kurang bayar direset');
                    } else {
                        nominalLebihBayarSection.style.display = 'none';
                        buktiPengembalianSection.style.display = 'none';
                        document.getElementById('nominal_lebih_bayar').value = '';
                        document.getElementById('bukti_pengembalian').value = '';
                        console.log('Status lebih bayar dibatalkan');
                    }
                });
            }
        });
    </script>
@endpush
