@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('search-anggaran');
            const select = document.getElementById('anggaran-select');
            const options = Array.from(select.options);

            searchInput.addEventListener('input', function() {
                const keyword = this.value.toLowerCase();

                options.forEach(option => {
                    if (option.value === "") return;

                    const text = option.text.toLowerCase();
                    option.hidden = !text.includes(keyword);
                });
            });
        });
    </script>
@endpush

<div class="max-w-6xl mx-auto">
    @include('livewire.global-loading')

    <!-- Card Form -->
    <div class="overflow-hidden bg-white border border-gray-200 shadow-lg rounded-xl">
        <!-- Progress Steps -->
        @if (!$spp->exists)
            <div class="px-8 py-4 border-b bg-gray-50">
                <div class="flex items-center justify-between max-w-md">
                    <div class="flex flex-col items-center">
                        <div
                            class="flex items-center justify-center w-8 h-8 font-semibold text-white bg-blue-600 rounded-full">
                            1
                        </div>
                        <span class="mt-2 text-xs font-medium text-blue-600">Informasi Dasar</span>
                    </div>
                    <div class="flex-1 h-1 mx-4 bg-gray-300"></div>
                    <div class="flex flex-col items-center">
                        <div
                            class="flex items-center justify-center w-8 h-8 font-semibold text-gray-600 bg-gray-300 rounded-full">
                            2
                        </div>
                        <span class="mt-2 text-xs font-medium text-gray-500">Detail Pembayaran</span>
                    </div>
                    <div class="flex-1 h-1 mx-4 bg-gray-300"></div>
                    <div class="flex flex-col items-center">
                        <div
                            class="flex items-center justify-center w-8 h-8 font-semibold text-gray-600 bg-gray-300 rounded-full">
                            3
                        </div>
                        <span class="mt-2 text-xs font-medium text-gray-500">Dokumen Pendukung</span>
                    </div>
                </div>
            </div>
        @endif

        <!-- Form Container -->
        <form wire:submit.prevent="save" class="p-8 space-y-8">
            <!-- Bagian 1: Informasi Dasar -->
            <div class="space-y-6">
                <div class="flex items-center mb-2">
                    <div class="w-1 h-6 mr-3 bg-blue-600 rounded-r"></div>
                    <h3 class="text-lg font-semibold text-gray-900">Informasi Dasar SPP</h3>
                </div>

                <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                    <!-- Tanggal -->
                    <div>
                        <label for="tanggal" class="block mb-2 text-sm font-medium text-gray-700">
                            Tanggal SPP <span class="text-red-500">*</span>


                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                </svg>
                            </div>
                            <input type="date" id="tanggal" wire:model="form.tanggal"
                                class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm @error('form.tanggal') border-red-300 @enderror"
                                required>
                        </div>
                        @error('form.tanggal')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Jenis SPP -->
                    <div>
                        <label for="jenis" class="block mb-2 text-sm font-medium text-gray-700">
                            Jenis SPP <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <select id="jenis" wire:model="form.jenis"
                                class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm @error('form.jenis') border-red-300 @enderror"
                                required>
                                <option value="" class="text-gray-500">-- Pilih Jenis SPP --</option>
                                <option value="GU" class="text-gray-700">Ganti Uang (GU)</option>
                                <option value="TU" class="text-gray-700">Tunjangan Uang (TU)</option>
                                <option value="LS" class="text-gray-700">Langsung (LS)</option>
                                <option value="UP" class="text-gray-700">Uang Persediaan (UP)</option>
                            </select>
                            <div
                                class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7" />
                                </svg>
                            </div>
                        </div>
                        @error('form.jenis')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Nomor Kontrak/SPK -->
                    <div>
                        <label for="nomor_kontrak_spk" class="block mb-2 text-sm font-medium text-gray-700">
                            Nomor Kontrak/SPK <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="nomor_kontrak_spk" wire:model="form.nomor_kontrak_spk"
                            placeholder="SPK/XXXX/XXX/XXXX"
                            class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm @error('form.nomor_kontrak_spk') border-red-300 @enderror"
                            required>
                        @error('form.nomor_kontrak_spk')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Pilih Rekanan -->
                    <div class="md:col-span-2">
                        <label for="rekanan_id" class="block mb-2 text-sm font-medium text-gray-700">
                            Pilih Rekanan <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <select id="rekanan_id" wire:model="form.rekanan_id"
                                class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm @error('form.rekanan_id') border-red-300 @enderror"
                                required>
                                <option value="" class="text-gray-500">-- Pilih Rekanan --</option>
                                @foreach ($rekanans as $rekanan)
                                    <option value="{{ $rekanan->id }}" class="text-gray-700">
                                        {{ $rekanan->nama_perusahaan }} -
                                        (Direktur: {{ $rekanan->nama_direktur }},
                                        NIK: {{ $rekanan->nik_direktur }},
                                        NPWP: {{ $rekanan->npwpFormatted }},
                                        Rek: {{ $rekanan->rekening }},
                                        Bank: {{ $rekanan->nama_bank }})
                                    </option>
                                @endforeach
                            </select>
                            <div
                                class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7" />
                                </svg>
                            </div>
                        </div>
                        @error('form.rekanan_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Bagian 2: Kegiatan dan Sub Kegiatan -->
            <div class="space-y-6">
                {{-- <div class="flex items-center mb-2">
                    <div class="w-1 h-6 mr-3 bg-blue-600 rounded-r"></div>
                    <h3 class="text-lg font-semibold text-gray-900">Kegiatan dan Sub Kegiatan</h3>
                </div> --}}

                <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                    <!-- Kegiatan -->
                    <div>
                        <label for="kegiatan" class="block mb-2 text-sm font-medium text-gray-700">
                            Pilih Kegiatan <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <select id="kegiatan" disabled wire:model.live="form.kegiatan"
                                class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm @error('form.kegiatan') border-red-300 @enderror"
                                required>
                                {{-- <option value="" class="text-gray-500">-- Pilih Kegiatan --</option> --}}
                                @foreach ($kegiatanOptions as $key => $label)
                                    <option value="{{ $key }}" class="text-gray-700">{{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            <div
                                class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7" />
                                </svg>
                            </div>
                        </div>
                        @error('form.kegiatan')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Sub Kegiatan -->
                    <div>
                        <label for="sub_kegiatan" class="block mb-2 text-sm font-medium text-gray-700">
                            Sub Kegiatan <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <select disabled id="sub_kegiatan" wire:model="form.sub_kegiatan"
                                class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm @error('form.sub_kegiatan') border-red-300 @enderror"
                                {{ empty($subKegiatanOptions) ? 'disabled' : 'required' }}>
                                <option value="" class="text-gray-500">
                                    {{ empty($subKegiatanOptions) ? '-- Pilih Kegiatan terlebih dahulu --' : '-- Pilih Sub Kegiatan --' }}
                                </option>
                                @foreach ($subKegiatanOptions as $key => $label)
                                    <option value="{{ $key }}" class="text-gray-700">{{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            <div
                                class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7" />
                                </svg>
                            </div>
                        </div>
                        @error('form.sub_kegiatan')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
            <div class="space-y-6">

                <div class="flex items-center mb-2">
                    <div class="w-1 h-6 mr-3 bg-blue-600 rounded-r"></div>
                    <h3 class="text-lg font-semibold text-gray-900">Detail Pembayaran</h3>
                </div>


                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-700">
                        Pilih Anggaran <span class="text-red-500">*</span>
                    </label>

                    <!-- SEARCH -->
                    <input type="text" id="search-anggaran" placeholder="Cari kode / nama anggaran..."
                        class="w-full mb-2 border-gray-300 rounded-lg shadow-sm sm:text-sm">

                    <!-- SELECT BIASA -->
                    <select wire:model.live="form.anggaran_id" id="anggaran-select"
                        class="relative w-full border-gray-300 rounded-lg shadow-sm sm:text-sm" required>


                        <option value="">-- Pilih Anggaran --</option>

                        @foreach ($anggarans as $anggaran)
                            <option value="{{ $anggaran->id }}">
                                [{{ $anggaran->kode_rekening }}]
                                {{ $anggaran->nama_anggaran }}
                                - Rp {{ number_format($anggaran->sisa_anggaran, 0, ',', '.') }}
                            </option>
                        @endforeach
                    </select>

                    @error('form.anggaran_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Informasi Anggaran yang Dipilih -->
                @if ($selectedAnggaran)
                    <div class="p-4 -mt-3 border border-blue-200 rounded-lg bg-blue-50">
                        <h4 class="text-xs text-blue-800">Informasi Anggaran Terpilih</h4>
                        <div class="grid grid-cols-1 gap-3 mt-3 sm:grid-cols-2 md:grid-cols-3">
                            <div>
                                <p class="text-[9px] text-blue-600">Kode Rekening</p>
                                <p class="text-xs text-blue-800">{{ $selectedAnggaran->kode_rekening }}</p>
                            </div>
                            <div>
                                <p class="text-[9px] text-blue-600">Nama Anggaran</p>
                                <p class="text-xs text-blue-800">{{ $selectedAnggaran->nama_anggaran }}</p>
                            </div>
                            <div>
                                <p class="text-[9px] text-blue-600">Jenis Belanja</p>
                                <p class="text-xs text-blue-800">{{ $selectedAnggaran->jenis_belanja }}</p>
                            </div>
                            <div>
                                <p class="text-[9px] text-blue-600">Pagu Anggaran</p>
                                <p class="text-xs text-blue-800">Rp
                                    {{ number_format($selectedAnggaran->pagu_anggaran, 0, ',', '.') }}</p>
                            </div>
                            <div>
                                <p class="text-[9px] text-blue-600">Realisasi</p>
                                <p class="text-xs text-blue-800">Rp
                                    {{ number_format($selectedAnggaran->realisasi, 0, ',', '.') }}</p>
                            </div>
                            <div>
                                <p class="text-[9px] text-blue-600">Sisa Anggaran</p>
                                <p class="text-xs text-blue-800">Rp
                                    {{ number_format($selectedAnggaran->sisa_anggaran, 0, ',', '.') }}</p>
                            </div>
                            <div class="">
                                <p class="text-[9px] text-blue-600">Tahun Anggaran</p>
                                <p class="text-xs text-blue-800">{{ $selectedAnggaran->tahun_anggaran }}</p>
                            </div>
                            @if ($selectedAnggaran->keterangan)
                                <div class="">
                                    <p class="text-[9px] text-blue-600">Keterangan</p>
                                    <p class="text-xs text-blue-800">{{ $selectedAnggaran->keterangan }}</p>
                                </div>
                            @endif
                        </div>

                        <!-- Progress Bar -->
                        <div class="mt-4">
                            <div class="flex justify-between mb-1 text-xs">
                                <span class="text-blue-600">Penggunaan Anggaran</span>
                                <span class="text-xs text-blue-800">
                                    {{ number_format(($selectedAnggaran->realisasi / $selectedAnggaran->pagu_anggaran) * 100, 1) }}%
                                </span>
                            </div>
                            <div class="w-full bg-blue-200 rounded-full h-2.5">
                                <div class="bg-blue-600 h-2.5 rounded-full"
                                    style="width: {{ min(100, ($selectedAnggaran->realisasi / $selectedAnggaran->pagu_anggaran) * 100) }}%">
                                </div>
                            </div>
                            <div class="flex justify-between mt-1 text-xs text-blue-600">
                                <span>Digunakan: Rp
                                    {{ number_format($selectedAnggaran->realisasi, 0, ',', '.') }}</span>
                                <span>Sisa: Rp
                                    {{ number_format($selectedAnggaran->sisa_anggaran, 0, ',', '.') }}</span>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Bagian Detail Pembayaran (update bagian nilai) -->
            <div class="space-y-6">

                <div class="grid grid-cols-2">

                    <!-- Nilai dengan validasi anggaran -->
                    <div class="max-w-md ">
                        <label for="nilai" class="block mb-2 text-sm font-medium text-gray-700">
                            Nilai Pembayaran (Rp) <span class="text-red-500">*</span>
                        </label>
                        <div class="relative rounded-lg shadow-sm">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <span class="text-gray-500 sm:text-sm">Rp</span>
                            </div>
                            <input type="text" id="nilai" wire:model.live="formattedNilai"
                                x-data="{}" x-on:input="$wire.updateNilai($event.target.value)"
                                placeholder="0"
                                class="pl-12 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm @error('form.nilai') border-red-300 @enderror"
                                {{ $selectedAnggaran ? '' : 'disabled' }} required>
                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                <span class="text-gray-500 sm:text-sm">IDR</span>
                            </div>
                        </div>

                        @error('form.nilai')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror

                        @if ($selectedAnggaran && $form['nilai'])
                            @php
                                $nilai = (int) str_replace(['.', ','], '', $form['nilai']);

                                $sisaSetelah = $selectedAnggaran->sisa_anggaran - $nilai;
                                $persentasePenggunaanSetelah =
                                    (($selectedAnggaran->realisasi + $nilai) / $selectedAnggaran->pagu_anggaran) * 100;
                            @endphp

                            <div class="mt-2 space-y-2">
                                <p class="text-sm text-gray-600">
                                    Terbilang: <span class="font-medium text-gray-800">{{ terbilang($nilai) }}
                                        rupiah</span>
                                </p>

                            </div>
                        @elseif(!$selectedAnggaran && $form['nilai'])
                            <p class="mt-2 text-sm text-yellow-600">
                                Pilih anggaran terlebih dahulu untuk validasi nilai
                            </p>
                        @endif
                    </div>
                    @if ($selectedAnggaran && $form['nilai'])
                        @php
                            $nilai = (int) str_replace(['.', ','], '', $form['nilai']);

                            $sisaSetelah = $selectedAnggaran->sisa_anggaran - $nilai;
                            $persentasePenggunaanSetelah =
                                (($selectedAnggaran->realisasi + $nilai) / $selectedAnggaran->pagu_anggaran) * 100;
                        @endphp

                        @if ($nilai > 0)
                            <div class="p-3 rounded-lg bg-gray-50">
                                <div class="mb-3">
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-sm text-gray-600">Sisa anggaran setelah transaksi:
                                        </span>
                                        <span
                                            class="font-medium @if ($sisaSetelah < 0) text-red-600 @elseif($sisaSetelah < 100000) text-yellow-600 @else text-green-600 @endif">
                                            Rp {{ number_format($sisaSetelah, 0, ',', '.') }}
                                        </span>
                                    </div>
                                    <div class="flex justify-between text-xs text-gray-500">
                                        <span>Penggunaan:
                                            {{ number_format($persentasePenggunaanSetelah, 1) }}%</span>
                                        <span>Kapasitas:
                                            {{ 100 - number_format($persentasePenggunaanSetelah, 1) }}%</span>
                                    </div>
                                    <div class="w-full h-2 mt-1 bg-gray-200 rounded-full">
                                        <div class="h-2 rounded-full @if ($persentasePenggunaanSetelah > 90) bg-red-500 @elseif($persentasePenggunaanSetelah > 75) bg-yellow-500 @else bg-green-500 @endif"
                                            style="width: {{ min(100, $persentasePenggunaanSetelah) }}%">
                                        </div>
                                    </div>
                                </div>

                                @if ($sisaSetelah < 0)
                                    <div class="p-2 border border-red-200 rounded bg-red-50">
                                        <p class="flex items-center text-xs text-red-600">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            </svg>
                                            Nilai melebihi sisa anggaran!
                                        </p>
                                    </div>
                                @elseif($sisaSetelah < $selectedAnggaran->pagu_anggaran * 0.1)
                                    <div class="p-2 border border-yellow-200 rounded bg-yellow-50">
                                        <p class="flex items-center text-xs text-yellow-600">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.998-.833-2.732 0L4.342 16.5c-.77.833.192 2.5 1.732 2.5z" />
                                            </svg>
                                            Anggaran hampir habis! Sisa hanya
                                            {{ number_format(($sisaSetelah / $selectedAnggaran->pagu_anggaran) * 100, 1) }}%
                                        </p>
                                    </div>
                                @elseif($persentasePenggunaanSetelah > 90)
                                    <div class="p-2 border border-yellow-200 rounded bg-yellow-50">
                                        <p class="flex items-center text-xs text-yellow-600">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.998-.833-2.732 0L4.342 16.5c-.77.833.192 2.5 1.732 2.5z" />
                                            </svg>
                                            Penggunaan anggaran mencapai
                                            {{ number_format($persentasePenggunaanSetelah, 1) }}%
                                        </p>
                                    </div>
                                @endif
                            </div>
                        @endif
                    @endif
                </div>
                <!-- Uraian -->
                <div>
                    <label for="uraian" class="block mb-2 text-sm font-medium text-gray-700">
                        Uraian Kegiatan <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <textarea id="uraian" wire:model="form.uraian" rows="4"
                            placeholder="Jelaskan detail kegiatan atau barang/jasa yang dibiayai..."
                            class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm @error('form.uraian') border-red-300 @enderror"
                            required></textarea>
                        <div class="mt-1 text-xs text-gray-500">
                            Panjang karakter: {{ strlen($form['uraian'] ?? '') }}/500
                        </div>
                    </div>
                    @error('form.uraian')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            @if ($form['nilai'])
                <!-- Bagian 4: Pajak dan Potongan -->
                <div class="space-y-6">
                    <div class="flex items-center mb-2">
                        <div class="w-1 h-6 mr-3 bg-blue-600 rounded-r"></div>
                        <h3 class="text-lg font-semibold text-gray-900">Pajak dan Potongan</h3>
                    </div>

                    <!-- Ringkasan Total -->
                    <div class="p-6 border border-gray-200 rounded-lg bg-gray-50">
                        <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
                            <!-- Belanja Pegawai BLUD -->
                            <div>
                                <h4 class="mb-1 text-xs font-medium text-gray-700">Belanja Pegawai BLUD</h4>
                                <div class="text-sm font-semibold text-gray-900 ">
                                    Rp {{ number_format($form['nilai'], 0, ',', '.') }}
                                </div>
                                <p class="mt-1 text-[10px] text-gray-500">
                                    Anggaran / Nilai Maksimal
                                </p>
                            </div>

                            <!-- Total Potongan -->
                            <div>
                                <h4 class="mb-1 text-xs font-medium text-gray-700">Total Potongan</h4>
                                <div class="text-sm font-semibold text-red-600 ">
                                    Rp {{ number_format($totalPotongan, 0, ',', '.') }}
                                </div>
                                <p class="mt-1 text-[10px] text-gray-500">
                                    Total Pajak
                                </p>
                            </div>

                            <!-- Nilai yang dikeluarkan -->
                            <div>
                                <h4 class="mb-1 text-xs font-medium text-gray-700">Nilai yang dikeluarkan</h4>
                                <div class="text-sm font-semibold text-green-600 ">
                                    Rp {{ number_format($nilaiDibayarkan, 0, ',', '.') }}
                                </div>
                                <p class="mt-1 text-[10px] text-gray-500">
                                    Setelah dipotong pajak
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Daftar Pajak -->
                    @foreach ($pajakItems as $index => $pajak)
                        <div class="p-6 border border-gray-200 rounded-lg" wire:key="pajak-{{ $index }}">
                            <div class="flex items-center justify-between mb-4">
                                <h4 class="font-medium text-gray-900">Pajak {{ $index + 1 }}</h4>
                                @if (count($pajakItems) > 1)
                                    <button type="button" wire:click="removePajakItem({{ $index }})"
                                        class="text-sm font-medium text-red-600 hover:text-red-800">
                                        Hapus
                                    </button>
                                @endif
                            </div>

                            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                                <!-- Jenis Pajak -->
                                <div>
                                    <label for="pajakItems.{{ $index }}.jenis_pajak"
                                        class="block mb-2 text-sm font-medium text-gray-700">
                                        Jenis Pajak
                                    </label>
                                    <select wire:model.live="pajakItems.{{ $index }}.jenis_pajak"
                                        class="block w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                                        <option value="">-- Pilih Jenis Pajak --</option>
                                        @foreach ($jenisPajakOptions as $key => $label)
                                            <option value="{{ $key }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Persentase -->
                                <div>
                                    <label for="pajakItems.{{ $index }}.persentase"
                                        class="block mb-2 text-sm font-medium text-gray-700">
                                        Persentase (%)
                                    </label>
                                    <div class="relative rounded-lg shadow-sm">
                                        <input type="text"
                                            wire:model.live="pajakItems.{{ $index }}.persentase"
                                            placeholder="0"
                                            class="block w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                                        <div
                                            class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                            <span class="text-gray-500 sm:text-sm">%</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- ID Billing -->
                                <div>
                                    <label for="pajakItems.{{ $index }}.id_billing"
                                        class="block mb-2 text-sm font-medium text-gray-700">
                                        ID Billing (15 Digit)
                                    </label>
                                    <input type="text" wire:model.live="pajakItems.{{ $index }}.id_billing"
                                        placeholder="Masukkan id billing disini"
                                        class="block w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                                </div>

                                <!-- NTPN -->
                                <div>
                                    <label for="pajakItems.{{ $index }}.ntpn"
                                        class="block mb-2 text-sm font-medium text-gray-700">
                                        NTPN
                                    </label>
                                    <input type="text" wire:model.live="pajakItems.{{ $index }}.ntpn"
                                        placeholder="0"
                                        class="block w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                                </div>

                                <!-- Tanggal Billing -->
                                <div>
                                    <label for="pajakItems.{{ $index }}.tanggal_billing"
                                        class="block mb-2 text-sm font-medium text-gray-700">
                                        Tanggal Billing
                                    </label>
                                    <div class="relative">
                                        <div
                                            class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                            <svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                            </svg>
                                        </div>
                                        <input type="date"
                                            wire:model.live="pajakItems.{{ $index }}.tanggal_billing"
                                            class="block w-full pl-10 border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                                            placeholder="Pilih tanggal disini">
                                    </div>
                                </div>

                                <!-- Tanggal NTPN -->
                                <div>
                                    <label for="pajakItems.{{ $index }}.tanggal_ntpn"
                                        class="block mb-2 text-sm font-medium text-gray-700">
                                        Tanggal NTPN
                                    </label>
                                    <div class="relative">
                                        <div
                                            class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                            <svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                            </svg>
                                        </div>
                                        <input type="date"
                                            wire:model.live="pajakItems.{{ $index }}.tanggal_ntpn"
                                            class="block w-full pl-10 border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                                            placeholder="Pilih tanggal disini">
                                    </div>
                                </div>

                                <!-- Nilai Pajak dengan Format Rupiah -->
                                <div class="md:col-span-2">
                                    <label for="displayPajakNilai.{{ $index }}"
                                        class="block mb-2 text-sm font-medium text-gray-700">
                                        Nilai Pajak (Rp)
                                    </label>
                                    <div class="relative rounded-lg shadow-sm">
                                        <div
                                            class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                            <span class="text-gray-500 sm:text-sm">Rp</span>
                                        </div>
                                        <input type="text" wire:model.live="displayPajakNilai.{{ $index }}"
                                            placeholder="0"
                                            class="block w-full pl-12 border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                                    </div>
                                    <p class="mt-2 text-sm text-gray-600">
                                        @php
                                            $nilaiPokok = $form['nilai'];
                                            $persentase = isset($pajak['persentase'])
                                                ? (float) $pajak['persentase']
                                                : 0;
                                            $nilaiPajak = isset($pajak['nilai']) ? (int) $pajak['nilai'] : 0;
                                        @endphp
                                        Nilai diatas merupakan
                                        <span class="font-medium">{{ number_format($persentase, 2) }}%</span> dari
                                        Rp {{ number_format($nilaiPokok, 0, ',', '.') }}
                                        (anggaran yang akan dikeluarkan)
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <!-- Tombol Tambah Pajak Lainnya -->
                    <div class="flex justify-center">
                        <button type="button" wire:click="addPajakItem"
                            class="inline-flex items-center px-4 py-2 text-sm font-medium text-blue-600 border border-blue-200 rounded-lg bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                            Tambah Pajak Lainnya
                        </button>
                    </div>

                    <!-- Ringkasan Persentase -->
                    @if (count(array_filter($pajakItems, function ($item) {
                                return !empty($item['jenis_pajak']);
                            })) > 0)
                        <div class="p-6 border border-gray-200 rounded-lg bg-blue-50">
                            <h4 class="mb-4 font-medium text-blue-800">Ringkasan Persentase</h4>
                            <div class="space-y-3">
                                @foreach ($pajakItems as $index => $pajak)
                                    @if (!empty($pajak['jenis_pajak']))
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm text-blue-700">
                                                {{ $jenisPajakOptions[$pajak['jenis_pajak']] ?? $pajak['jenis_pajak'] }}
                                            </span>
                                            <span class="text-sm font-medium text-blue-800">
                                                {{ number_format((float) $pajak['persentase'], 2) }}%
                                            </span>
                                        </div>
                                    @endif
                                @endforeach
                                <div class="pt-3 border-t border-blue-200">
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm font-medium text-blue-800">Total Potongan</span>
                                        <span class="text-sm font-medium text-red-600">
                                            @php
                                                $totalPersentase = ($totalPotongan / $form['nilai']) * 100;
                                            @endphp
                                            {{ number_format($totalPersentase, 2) }}%
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            @endif
            <!-- Bagian 4: Dokumen Pendukung -->
            <div class="space-y-6">
                <div class="flex items-center mb-2">
                    <div class="w-1 h-6 mr-3 bg-blue-600 rounded-r"></div>
                    <h3 class="text-lg font-semibold text-gray-900">Dokumen Pendukung</h3>
                </div>

                <div class="">
                    <!-- Bukti Pembayaran -->
                    <div>
                        <label for="bukti_pembayaran" class="block mb-2 text-sm font-medium text-gray-700">
                            Bukti Pembayaran/Resume Kontrak
                        </label>
                        <input type="file" id="bukti_pembayaran" wire:model="bukti_pembayaran"
                            class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        @error('bukti_pembayaran')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-xs text-gray-500">PDF, JPG, PNG (max 2MB)</p>

                        @if ($spp->exists && $spp->bukti_pembayaran)
                            <div class="mt-2">
                                <a href="{{ $spp->getFileUrl('bukti_pembayaran') }}" target="_blank"
                                    class="inline-flex items-center text-sm text-blue-600 hover:text-blue-800">
                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                    Lihat dokumen
                                </a>
                            </div>
                        @endif
                    </div>


                </div>
            </div>

            <!-- Tombol Aksi -->
            <div class="pt-6 border-t border-gray-200">
                <div class="flex flex-col-reverse items-center justify-between space-y-4 sm:flex-row sm:space-y-0">
                    <div class="w-full sm:w-auto">
                        <a href="{{ route('dashboard') }}"
                            class="inline-flex items-center justify-center w-full sm:w-auto px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                            </svg>
                            Kembali ke Daftar
                        </a>
                    </div>

                    <div class="flex flex-col w-full space-y-3 sm:flex-row sm:space-y-0 sm:space-x-3 sm:w-auto">
                        <!-- Tombol Simpan sebagai Draft -->
                        <button type="submit" wire:loading.attr="disabled"
                            class="inline-flex items-center justify-center w-full sm:w-auto px-5 py-2.5 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50">
                            <svg wire:loading.remove wire:target="save" class="w-4 h-4 mr-2" fill="none"
                                stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
                            </svg>
                            <svg wire:loading wire:target="save" class="w-4 h-4 mr-2 animate-spin" fill="none"
                                viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10"
                                    stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor"
                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                </path>
                            </svg>
                            {{ $spp->exists ? 'Perbarui Data' : 'Simpan sebagai Draft' }}
                        </button>

                        <!-- Tombol Ajukan (hanya untuk draft) -->
                        @if ($spp->exists && $spp->status == 'draft')
                            <button type="button" wire:loading.attr="disabled" onclick="ajukan()"
                                class="inline-flex items-center justify-center w-full sm:w-auto px-5 py-2.5 text-sm font-medium text-white bg-green-600 border border-transparent rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50">
                                <svg wire:loading.remove wire:target="ajukan" class="w-4 h-4 mr-2" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                <svg wire:loading wire:target="ajukan" class="w-4 h-4 mr-2 animate-spin"
                                    fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10"
                                        stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor"
                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                    </path>
                                </svg>
                                Ajukan untuk Verifikasi
                            </button>
                        @endif
                        @push('scripts-bottom')
                            <script>
                                function ajukan() {
                                    Swal.fire({
                                        title: 'Yakin?',
                                        text: 'Data tidak bisa dikembalikan!',
                                        icon: 'warning',
                                        showCancelButton: true,
                                        confirmButtonText: 'Ya, Ajukan',
                                        cancelButtonText: 'Batal',
                                    }).then((result) => {
                                        if (result.isConfirmed) {
                                            @this.ajukan()
                                        }
                                    })
                                }
                            </script>
                        @endpush
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


@push('scripts-bottom')
    <script>
        function ajukan() {
            Swal.fire({
                title: 'Yakin?',
                text: 'Data tidak bisa dikembalikan!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Ajukan',
                cancelButtonText: 'Batal',
            }).then((result) => {
                if (result.isConfirmed) {
                    @this.ajukan()
                }
            })
        }
    </script>
@endpush

@push('scripts')
    <script>
        // Format rupiah untuk input pajak
        document.addEventListener('livewire:init', () => {
            // Format input pajak saat halaman load
            formatPajakInputs();

            // Format input pajak saat ada perubahan
            Livewire.hook('element.updated', (el, component) => {
                setTimeout(() => {
                    formatPajakInputs();
                }, 50);
            });
        });

        function formatPajakInputs() {
            document.querySelectorAll('input[wire\\:model^="displayPajakNilai"]').forEach(input => {
                formatRupiahInput(input);

                // Tambahkan event listener untuk format saat input
                input.addEventListener('input', function(e) {
                    formatRupiahInput(this);
                });

                // Format saat blur
                input.addEventListener('blur', function(e) {
                    formatRupiahInput(this);
                });
            });
        }

        function formatRupiahInput(input) {
            // Simpan cursor position
            let cursorPosition = input.selectionStart;
            let originalLength = input.value.length;

            // Format nilai
            let value = input.value.replace(/[^0-9]/g, '');

            if (value) {
                // Format dengan titik sebagai pemisah ribuan
                let formatted = new Intl.NumberFormat('id-ID').format(parseInt(value));
                input.value = formatted;

                // Hitung cursor position baru
                let newLength = input.value.length;
                let lengthDiff = newLength - originalLength;
                let newCursorPosition = cursorPosition + lengthDiff;

                // Set cursor position kembali
                input.setSelectionRange(newCursorPosition, newCursorPosition);
            }
        }

        // Set tanggal default ke hari ini
        document.addEventListener('DOMContentLoaded', function() {
            const tanggalInput = document.getElementById('tanggal');
            if (tanggalInput && !tanggalInput.value) {
                const today = new Date().toISOString().split('T')[0];
                tanggalInput.value = today;
            }

            // Inisialisasi format pajak
            formatPajakInputs();
        });
    </script>
@endpush

@push('styles')
    <style>
        /* Style untuk input number tanpa spinner */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }

        /* Style untuk border yang konsisten */
        .border-gray-200 {
            border-color: #e5e7eb;
        }

        /* Style untuk card pajak */
        .pajak-card {
            transition: all 0.3s ease;
        }

        .pajak-card:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        /* Style untuk input rupiah */
        input[data-rupiah] {
            text-align: right;
            font-family: 'Courier New', monospace;
            letter-spacing: 0.5px;
        }

        /* Style untuk input yang sedang aktif */
        input:focus[wire\:model*="displayPajakNilai"] {
            background-color: #f8fafc;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        /* Loading indicator untuk perubahan pajak */
        .loading-pajak {
            opacity: 0.7;
            pointer-events: none;
        }

        /* Style untuk persentase input */
        input[wire\:model*="persentase"] {
            text-align: right;
        }

        /* Animasi untuk perubahan nilai */
        @keyframes highlightChange {
            0% {
                background-color: rgba(59, 130, 246, 0.1);
            }

            100% {
                background-color: transparent;
            }
        }

        .highlight-change {
            animation: highlightChange 1s ease;
        }
    </style>
@endpush
@php
    // Helper function untuk terbilang
    function terbilang($nilai)
    {
        if ($nilai < 0) {
            return 'minus ' . terbilang(abs($nilai));
        }
        if ($nilai == 0) {
            return '';
        }

        $bilangan = [
            '',
            'satu',
            'dua',
            'tiga',
            'empat',
            'lima',
            'enam',
            'tujuh',
            'delapan',
            'sembilan',
            'sepuluh',
            'sebelas',
        ];

        if ($nilai < 12) {
            return $bilangan[$nilai];
        }
        if ($nilai < 20) {
            return terbilang($nilai - 10) . ' belas';
        }
        if ($nilai < 100) {
            $hasil_bagi = floor($nilai / 10);
            $hasil_mod = $nilai % 10;
            return trim(sprintf('%s puluh %s', $bilangan[$hasil_bagi], $bilangan[$hasil_mod]));
        }
        if ($nilai < 200) {
            return 'seratus ' . terbilang($nilai - 100);
        }
        if ($nilai < 1000) {
            $hasil_bagi = floor($nilai / 100);
            $hasil_mod = $nilai % 100;
            return trim(sprintf('%s ratus %s', $bilangan[$hasil_bagi], terbilang($hasil_mod)));
        }
        if ($nilai < 2000) {
            return 'seribu ' . terbilang($nilai - 1000);
        }
        if ($nilai < 1000000) {
            $hasil_bagi = floor($nilai / 1000);
            $hasil_mod = $nilai % 1000;
            return trim(sprintf('%s ribu %s', terbilang($hasil_bagi), terbilang($hasil_mod)));
        }
        if ($nilai < 1000000000) {
            $hasil_bagi = floor($nilai / 1000000);
            $hasil_mod = $nilai % 1000000;
            return trim(sprintf('%s juta %s', terbilang($hasil_bagi), terbilang($hasil_mod)));
        }
        if ($nilai < 1000000000000) {
            $hasil_bagi = floor($nilai / 1000000000);
            $hasil_mod = $nilai % 1000000000;
            return trim(sprintf('%s milyar %s', terbilang($hasil_bagi), terbilang($hasil_mod)));
        }
        if ($nilai < 1000000000000000) {
            $hasil_bagi = floor($nilai / 1000000000000);
            $hasil_mod = fmod($nilai, 1000000000000);
            return trim(sprintf('%s triliun %s', terbilang($hasil_bagi), terbilang($hasil_mod)));
        }
        return 'Angka terlalu besar';
    }
@endphp