{{-- filepath: resources/views/master-usulan/usulan-permohonan-show.blade.php --}}
@extends('layouts.user_type.auth')

@section('content')
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">

        <div class="card card-success">
          <div class="card-header">
            <h3 class="card-title">Detail Usulan Permohonan Pembayaran</h3>
          </div>

          @if (session('success'))
            <div class="card-body">
              <x-alert type="success" message="{{ session('success') }}" />
            </div>
          @endif

          <div class="card-body">
            <div class="col-md-12">
              {{-- STEP 1: Form Input Detail --}}
              <div id="step-input-detail" class="step-container">
                <h5 class="mb-4">
                  <span class="badge badge-sm bg-gradient-faded-success">Step 1 || Input Detail</span>
                </h5>
                <form id="form-detail" enctype="multipart/form-data" onsubmit="return false;">
                  <div class="row">
                    {{-- Form untuk Premi --}}
                    @if ($kategori && $kategori->nama_kategori_usulan === 'Premi')
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">Nomor Rekening</label>
                          <input type="text" class="form-control" id="nomor_rekening">
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">Nama Rekening</label>
                          <input type="text" class="form-control" id="nama_rekening">
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">Bank</label>
                          <input type="text" class="form-control" id="bank">
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">Jumlah Bruto</label>
                          <input type="text" class="form-control" id="jumlah_bruto" placeholder="Rp 0">
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="mb-3">
                          <label class="form-label">PPh</label>
                          <input type="text" class="form-control" id="pph" placeholder="Rp 0">
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="mb-3">
                          <label class="form-label">PPN</label>
                          <input type="text" class="form-control" id="ppn" placeholder="Rp 0">
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="mb-3">
                          <label class="form-label">Jumlah Netto</label>
                          <input type="text" class="form-control" id="jumlah_netto" placeholder="Rp 0">
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">Kode Billing PPh</label>
                          <input type="text" class="form-control" id="kode_billing_pph">
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">Kode Billing PPN</label>
                          <input type="text" class="form-control" id="kode_billing_ppn">
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="mb-3">
                          <label class="form-label">NPWP</label>
                          <input type="text" class="form-control" id="npwp">
                        </div>
                      </div>
                    @else
                      {{-- Form untuk Pra Bencana dan Pasca Bencana --}}
                      <div class="col-md-12">
                        <div class="mb-3">
                          <label class="form-label">Deskripsi</label>
                          <textarea class="form-control" id="deskripsi" rows="2" placeholder="e.g Pembayaran Belanja Barang sesuai" required></textarea>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">Nominal Usulan</label>
                          <input type="text" class="form-control" id="nominal_usulan" required>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">Nomor SP2D</label>
                          <input type="number" class="form-control" id="nomor_sp2d" required>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">Tanggal SP2D</label>
                          <input type="date" class="form-control" id="tanggal_sp2d" required>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">Nomor SPM</label>
                          <input type="text" class="form-control" id="nomor_spm">
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">Tanggal SPM</label>
                          <input type="date" class="form-control" id="tanggal_spm">
                        </div>
                      </div>
                    @endif
                  </div>
                  <div class="mb-3">
                    <button type="button" class="btn btn-info" onclick="goToFileUpload()">
                      <i class="fas fa-arrow-right"></i> Selanjutnya (Upload File)
                    </button>
                    <a href="{{ route('usulan-permohonan') }}" class="btn btn-secondary">Kembali</a>
                  </div>
                </form>
              </div>

              {{-- STEP 2: Upload File --}}
              @if ($kategori && !in_array(strtolower($kategori->nama_kategori_usulan) == 'non premi', ['Pra Bencana', 'Pasca Bencana']))
                <div id="step-upload-file" class="step-container" style="display: none;">
                  <h5 class="mb-4">
                    <span class="badge badge-sm bg-gradient-faded-success">Step 2 || Upload File</span>
                  </h5>
                  <form id="form-file" enctype="multipart/form-data" onsubmit="return false;">
                    <div class="row">
                      @if ($kategori && $kategori->nama_kategori_usulan === 'Premi')
                        <div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label">Upload Salinan Polis Asuransi</label>
                            <div class="custom-file">
                              <input type="file" class="form-control" id="file_polis_asuransi"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                              <small class="form-text text-muted">Format: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG (Max 5MB)</small>
                            </div>
                            <div id="preview-polis-asuransi" class="mt-2"></div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label">Upload Salinan DIPA Petikan Surat DJKN</label>
                            <div class="custom-file">
                              <input type="file" class="form-control" id="file_dipa_petikan"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                              <small class="form-text text-muted">Format: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG (Max 5MB)</small>
                            </div>
                            <div id="preview-dipa-petikan" class="mt-2"></div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label">Upload File Surat Permohonan KPA</label>
                            <div class="custom-file">
                              <input type="file" class="form-control" id="file_surat_permohonan_kpa"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                              <small class="form-text text-muted">Format: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG (Max 5MB)</small>
                            </div>
                            <div id="preview-surat-permohonan-kpa" class="mt-2"></div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label">Upload File SP2D</label>
                            <div class="custom-file">
                              <input type="file" class="form-control" id="file_sp2d"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                              <small class="form-text text-muted">Format: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG (Max 5MB)</small>
                            </div>
                            <div id="preview-sp2d" class="mt-2"></div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label">Upload File SPM</label>
                            <div class="custom-file">
                              <input type="file" class="form-control" id="file_spm"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                              <small class="form-text text-muted">Format: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG (Max 5MB)</small>
                            </div>
                            <div id="preview-spm" class="mt-2"></div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label">Upload File Dokumen Pendukung</label>
                            <div class="custom-file">
                              <input type="file" class="form-control" id="file_dokumen_pendukung"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                              <small class="form-text text-muted">Format: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG (Max 5MB)</small>
                            </div>
                            <div id="preview-dokumen" class="mt-2"></div>
                          </div>
                        </div>
                      @else
                        <div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label">Upload File Surat Permohonan</label>
                            <div class="custom-file">
                              <input type="file" class="form-control" id="file_surat_permohonan"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                              <small class="form-text text-muted">Format: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG (Max 5MB)</small>
                            </div>
                            <div id="preview-surat-permohonan" class="mt-2"></div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label">Upload File SP2D</label>
                            <div class="custom-file">
                              <input type="file" class="form-control" id="file_sp2d"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                              <small class="form-text text-muted">Format: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG (Max 5MB)</small>
                            </div>
                            <div id="preview-sp2d" class="mt-2"></div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label">Upload File SPM</label>
                            <div class="custom-file">
                              <input type="file" class="form-control" id="file_spm"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                              <small class="form-text text-muted">Format: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG (Max 5MB)</small>
                            </div>
                            <div id="preview-spm" class="mt-2"></div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label">Upload File Dokumen Pendukung</label>
                            <div class="custom-file">
                              <input type="file" class="form-control" id="file_dokumen_pendukung"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                              <small class="form-text text-muted">Format: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG (Max 5MB)</small>
                            </div>
                            <div id="preview-dokumen" class="mt-2"></div>
                          </div>
                        </div>
                      @endif
                    </div>
                    <div class="mb-3">
                      <button type="button" class="btn btn-primary" onclick="submitDetail()">
                        <i class="fas fa-check"></i> Simpan Detail
                      </button>
                      <button type="button" class="btn btn-secondary" onclick="backToDetail()">
                        <i class="fas fa-arrow-left"></i> Kembali
                      </button>
                    </div>
                  </form>
                </div>
              @endif
              </div>
            </div>
          </div>

          <div class="card-body">
            <div class="col-md-12">
              {{-- Tabel Detail Data --}}
              <h5 class="mb-3">
                <i class="fas fa-list"></i> Detail Data
              </h5>
              <div class="table-responsive">
                <table class="table table-bordered table-sm" id="tabel-detail">
                  <thead>
                    <tr>
                      <th style="min-width: 50px;">No</th>
                      @if ($kategori && $kategori->nama_kategori_usulan === 'Premi')
                        <th style="min-width: 120px;">Nomor Rekening</th>
                        <th style="min-width: 120px;">Nama Rekening</th>
                        <th style="min-width: 100px;">Bank</th>
                        <th style="min-width: 120px;">Jumlah Bruto</th>
                        <th style="min-width: 100px;">PPh</th>
                        <th style="min-width: 100px;">PPN</th>
                        <th style="min-width: 120px;">Jumlah Netto</th>
                        <th style="min-width: 120px;">NPWP</th>
                      @else
                        <th style="min-width: 150px;">Deskripsi</th>
                        <th style="min-width: 120px;">Nominal</th>
                        <th style="min-width: 100px;">Nomor SP2D</th>
                        <th style="min-width: 100px;">Tanggal SP2D</th>
                        <th style="min-width: 100px;">Nomor SPM</th>
                        <th style="min-width: 100px;">Tanggal SPM</th>
                      @endif
                      <th style="min-width: 80px;">Aksi</th>
                    </tr>
                  </thead>
                  <tbody>
                    {{-- Data akan diisi oleh JS --}}
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="card-body">
            <div class="col-md-12">
              {{-- Tabel File --}}
              <h5 class="mb-3">
                <i class="fas fa-file-upload"></i> Upload File
              </h5>
              <div class="table-responsive">
                <table class="table table-bordered table-sm" id="tabel-file">
                  <thead>
                    <tr>
                      <th style="min-width: 50px;">No</th>
                      <th style="min-width: 200px;">File SP2D</th>
                      <th style="min-width: 200px;">File SPM</th>
                      <th style="min-width: 250px;">File Dokumen Pendukung</th>
                      <th style="min-width: 100px;">Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {{-- Data akan diisi oleh JS --}}
                  </tbody>
                </table>
              </div>
              {{-- Button Aksi --}}
              <div class="mb-3">
                <button type="button" class="btn btn-primary" id="btn-kirim-usulan" onclick="kirimSemuaDetail()" disabled>
                  <i class="fas fa-paper-plane"></i> Kirim Usulan
                </button>
                <a href="{{ route('usulan-permohonan') }}" class="btn btn-secondary">Batal</a>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  {{-- SweetAlert2 CDN --}}
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <script>
    let currentDetail = {};
    let details = [];
    const kategori = @json($kategori);
    const isPremi = kategori && kategori.nama_kategori_usulan === 'Premi';

    function goToFileUpload() {
      let detail = {};
      let isValid = true;

      if (isPremi) {
        detail.nomor_rekening = document.getElementById('nomor_rekening').value;
        detail.nama_rekening = document.getElementById('nama_rekening').value;
        detail.bank = document.getElementById('bank').value;
        detail.jumlah_bruto = document.getElementById('jumlah_bruto').value.replace(/[^0-9]/g, '');
        detail.pph = document.getElementById('pph').value.replace(/[^0-9]/g, '') || 0;
        detail.ppn = document.getElementById('ppn').value.replace(/[^0-9]/g, '') || 0;
        detail.jumlah_netto = document.getElementById('jumlah_netto').value.replace(/[^0-9]/g, '');
        detail.kode_billing_pph = document.getElementById('kode_billing_pph').value;
        detail.kode_billing_ppn = document.getElementById('kode_billing_ppn').value;
        detail.npwp = document.getElementById('npwp').value;

        if (!detail.nomor_rekening || !detail.nama_rekening || !detail.bank || !detail.jumlah_bruto || !detail
          .jumlah_netto) {
          Swal.fire({
            icon: 'error',
            title: 'Kolom Tidak Lengkap!',
            html: 'Kolom wajib diisi:<br>• Nomor Rekening<br>• Nama Rekening<br>• Bank<br>• Jumlah Bruto<br>• Jumlah Netto',
            confirmButtonText: 'Oke'
          });
          isValid = false;
        }
      } else {
        detail.deskripsi = document.getElementById('deskripsi').value;
        detail.nominal_usulan = document.getElementById('nominal_usulan').value.replace(/[^0-9]/g, '');
        detail.nomor_sp2d = document.getElementById('nomor_sp2d').value;
        detail.tanggal_sp2d = document.getElementById('tanggal_sp2d').value;
        detail.nomor_spm = document.getElementById('nomor_spm').value || '';
        detail.tanggal_spm = document.getElementById('tanggal_spm').value || '';

        if (!detail.deskripsi || !detail.nominal_usulan || !detail.nomor_sp2d || !detail.tanggal_sp2d) {
          Swal.fire({
            icon: 'error',
            title: 'Kolom Tidak Lengkap!',
            html: 'Kolom wajib diisi:<br>• Deskripsi<br>• Nominal<br>• Nomor SP2D<br>• Tanggal SP2D',
            confirmButtonText: 'Oke'
          });
          isValid = false;
        }
      }

      if (!isValid) return;

      currentDetail = detail;

      document.getElementById('step-input-detail').style.display = 'none';
      document.getElementById('step-upload-file').style.display = 'block';

      document.getElementById('file_surat_permohonan').value = '';
      document.getElementById('file_sp2d').value = '';
      document.getElementById('file_spm').value = '';
      document.getElementById('file_dokumen_pendukung').value = '';
    }

    function backToDetail() {
      document.getElementById('step-input-detail').style.display = 'block';
      document.getElementById('step-upload-file').style.display = 'none';
    }

    function submitDetail() {
      let detail = currentDetail;

      detail.file_surat_permohonan = document.getElementById('file_surat_permohonan').files[0] || null;
      detail.file_sp2d = document.getElementById('file_sp2d').files[0] || null;
      detail.file_spm = document.getElementById('file_spm').files[0] || null;
      detail.file_dokumen_pendukung = document.getElementById('file_dokumen_pendukung').files[0] || null;

      details.push(detail);
      renderTable();
      resetForm();

      backToDetail();

      Swal.fire({
        icon: 'success',
        title: 'Detail Berhasil Ditambahkan!',
        confirmButtonText: 'Oke'
      });
    }

    function resetForm() {
      if (isPremi) {
        document.getElementById('nomor_rekening').value = '';
        document.getElementById('nama_rekening').value = '';
        document.getElementById('bank').value = '';
        document.getElementById('jumlah_bruto').value = '';
        document.getElementById('pph').value = '';
        document.getElementById('ppn').value = '';
        document.getElementById('jumlah_netto').value = '';
        document.getElementById('kode_billing_pph').value = '';
        document.getElementById('kode_billing_ppn').value = '';
        document.getElementById('npwp').value = '';
      } else {
        document.getElementById('deskripsi').value = '';
        document.getElementById('nominal_usulan').value = '';
        document.getElementById('nomor_sp2d').value = '';
        document.getElementById('tanggal_sp2d').value = '';
        document.getElementById('nomor_spm').value = '';
        document.getElementById('tanggal_spm').value = '';
      }
    }

    function hapusDetail(idx) {
      Swal.fire({
        icon: 'warning',
        title: 'Konfirmasi Hapus',
        text: 'Yakin ingin menghapus detail ini?',
        showCancelButton: true,
        confirmButtonText: 'Hapus',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#dc3545'
      }).then((result) => {
        if (result.isConfirmed) {
          details.splice(idx, 1);
          renderTable();
          Swal.fire({
            icon: 'success',
            title: 'Detail Dihapus!',
            confirmButtonText: 'Oke'
          });
        }
      });
    }

    function renderTable() {
      const tbodyDetail = document.querySelector('#tabel-detail tbody');
      tbodyDetail.innerHTML = '';
      
      const tbodyFile = document.querySelector('#tabel-file tbody');
      tbodyFile.innerHTML = '';

      details.forEach((item, idx) => {
        let rowDetail = `<tr><td>${idx + 1}</td>`;

        if (isPremi) {
          rowDetail += `
            <td>${item.nomor_rekening}</td>
            <td>${item.nama_rekening}</td>
            <td>${item.bank}</td>
            <td>Rp ${formatRupiah(item.jumlah_bruto)}</td>
            <td>Rp ${formatRupiah(item.pph)}</td>
            <td>Rp ${formatRupiah(item.ppn)}</td>
            <td>Rp ${formatRupiah(item.jumlah_netto)}</td>
            <td>${item.npwp || '-'}</td>
          `;
        } else {
          rowDetail += `
            <td>${item.deskripsi}</td>
            <td>Rp ${formatRupiah(item.nominal_usulan)}</td>
            <td>${item.nomor_sp2d}</td>
            <td>${item.tanggal_sp2d}</td>
            <td>${item.nomor_spm || '-'}</td>
            <td>${item.tanggal_spm || '-'}</td>
          `;
        }

        rowDetail += `
          <td>
            <button type="button" class="btn btn-danger btn-sm" onclick="hapusDetail(${idx})" title="Hapus">
              <i class="fas fa-trash"></i> Hapus
            </button>
          </td>
        </tr>
        `;
        tbodyDetail.innerHTML += rowDetail;

        const fileSuratPermohonanName = item.file_surat_permohonan ? item.file_surat_permohonan.name : '-';
        const fileSp2dName = item.file_sp2d ? item.file_sp2d.name : '-';
        const fileSpmName = item.file_spm ? item.file_spm.name : '-';
        const fileDokumenName = item.file_dokumen_pendukung ? item.file_dokumen_pendukung.name : '-';
        
        const allFilesUploaded = item.file_surat_permohonan && item.file_spm && item.file_dokumen_pendukung;
        const statusBadge = allFilesUploaded 
          ? '<span class="badge bg-success">Lengkap</span>' 
          : '<span class="badge bg-danger">Optional</span>';

        let rowFile = `
          <tr>
            <td>${idx + 1}</td>
            <td><small>${fileSuratPermohonanName}</small></td> 
            <td><small>${fileSp2dName}</small></td> 
            <td><small>${fileSpmName}</small></td>
            <td><small>${fileDokumenName}</small></td>
            <td>${statusBadge}</td>
          </tr>
        `;
        tbodyFile.innerHTML += rowFile;
      });

      // Enable/Disable button Kirim Usulan
      const btnKirim = document.getElementById('btn-kirim-usulan');
      if (details.length > 0) {
        btnKirim.disabled = false;
        btnKirim.classList.remove('disabled');
      } else {
        btnKirim.disabled = true;
        btnKirim.classList.add('disabled');
      }
    }

    function kirimSemuaDetail() {
      if (details.length === 0) {
        Swal.fire({
          icon: 'warning',
          title: 'Tidak Ada Detail!',
          text: 'Tidak ada detail yang akan dikirim!',
          confirmButtonText: 'Oke'
        });
        return;
      }

      // let belumLengkap = details.filter(d => !(d.file_sp2d && d.file_spm && d.file_dokumen_pendukung)).length;
      // if (belumLengkap > 0) {
      //   Swal.fire({
      //     icon: 'error',
      //     title: 'File Belum Lengkap!',
      //     html: `Ada <strong>${belumLengkap}</strong> detail yang file-nya belum lengkap!<br><br>Pastikan semua file (SP2D, SPM, Dokumen Pendukung) sudah diupload.`,
      //     confirmButtonText: 'Oke'
      //   });
      //   return;
      // }

      Swal.fire({
        icon: 'info',
        title: 'Konfirmasi Pengiriman',
        text: 'Yakin ingin mengirim semua detail?',
        showCancelButton: true,
        confirmButtonText: 'Kirim',
        cancelButtonText: 'Batal'
      }).then((result) => {
        if (result.isConfirmed) {
          kirimDetail();
        }
      });
    }

    function kirimDetail() {
      let successCount = 0;

      details.forEach((item, index) => {
        let formData = new FormData();

        if (isPremi) {
          formData.append('nomor_rekening', item.nomor_rekening);
          formData.append('nama_rekening', item.nama_rekening);
          formData.append('bank', item.bank);
          formData.append('jumlah_bruto', item.jumlah_bruto);
          formData.append('pph', item.pph);
          formData.append('ppn', item.ppn);
          formData.append('jumlah_netto', item.jumlah_netto);
          formData.append('kode_billing_pph', item.kode_billing_pph);
          formData.append('kode_billing_ppn', item.kode_billing_ppn);
          formData.append('npwp', item.npwp);
        } else {
          formData.append('deskripsi', item.deskripsi);
          formData.append('nominal_usulan', item.nominal_usulan);
          formData.append('nomor_sp2d', item.nomor_sp2d);
          formData.append('tanggal_sp2d', item.tanggal_sp2d);
          formData.append('nomor_spm', item.nomor_spm);
          formData.append('tanggal_spm', item.tanggal_spm);
        }

        if (item.file_sp2d) {
          formData.append('file_sp2d', item.file_sp2d);
        }
        if (item.file_spm) {
          formData.append('file_spm', item.file_spm);
        }
        if (item.file_dokumen_pendukung) {
          formData.append('file_dokumen_pendukung', item.file_dokumen_pendukung);
        }

        fetch('/usulan-permohonan/{{ $usulan->id }}/detail', {
            method: 'POST',
            headers: {
              'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: formData
          })
          .then(async res => {
            let text = await res.text();
            try {
              let data = JSON.parse(text);
              if (data.success) {
                successCount++;
                if (successCount === details.length) {
                  Swal.fire({
                    icon: 'success',
                    title: 'Sukses!',
                    text: 'Semua detail berhasil dikirim!',
                    confirmButtonText: 'Oke'
                  }).then(() => {
                    window.location.href = '{{ route("usulan-permohonan") }}';
                  });
                }
              } else {
                Swal.fire({
                  icon: 'error',
                  title: 'Gagal!',
                  text: 'Gagal mengirim detail ' + (index + 1) + ': ' + (data.message || 'Error'),
                  confirmButtonText: 'Oke'
                });
              }
            } catch (e) {
              Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: 'Response error: ' + text,
                confirmButtonText: 'Oke'
              });
            }
          });
      });
    }

    document.addEventListener('DOMContentLoaded', function() {
      if (!isPremi) {
        const nominalInput = document.getElementById('nominal_usulan');
        if (nominalInput) {
          nominalInput.addEventListener('input', function(e) {
            formatInputRupiah(nominalInput);
          });
        }
      } else {
        const inputs = ['jumlah_bruto', 'pph', 'ppn', 'jumlah_netto'];
        inputs.forEach(id => {
          const input = document.getElementById(id);
          if (input) {
            input.addEventListener('input', function() {
              formatInputRupiah(input);
            });
          }
        });
      }
    });

    function formatInputRupiah(input) {
      let value = input.value.replace(/[^0-9]/g, '');
      if (!value) {
        input.value = '';
        return;
      }
      input.value = formatRupiah(value, 'Rp ');
    }

    function formatRupiah(angka, prefix) {
      let number_string = angka.toString().replace(/[^,\d]/g, ''),
        split = number_string.split(','),
        sisa = split[0].length % 3,
        rupiah = split[0].substr(0, sisa),
        ribuan = split[0].substr(sisa).match(/\d{3}/gi);

      if (ribuan) {
        let separator = sisa ? '.' : '';
        rupiah += separator + ribuan.join('.');
      }

      rupiah = split[1] !== undefined ? rupiah + ',' + split[1] : rupiah;
      return prefix === undefined ? rupiah : (rupiah ? prefix + rupiah : '');
    }
  </script>
@endpush