@extends('layouts.app')

@section('title', 'Detail Realisasi Anggaran: ' . $realisasiAnggaran->no_referensi)

@section('content')

<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-xl">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">Realisasi Anggaran: {{ $realisasiAnggaran->no_referensi }}</h3>
                            <div class="nk-block-des text-soft">
                                <p>Informasi lengkap realisasi anggaran.</p>
                            </div>
                        </div>
                        <div class="nk-block-head-content">
                            <a href="{{ route('yayasan.transaksi.realisasi-anggaran.index') }}" class="btn btn-outline-light bg-white d-sm-inline-flex">
                                <em class="icon ni ni-arrow-left"></em>
                                <span>Kembali ke Daftar Realisasi Anggaran</span>
                            </a>
                            @if ($realisasiAnggaran->status == 'draft' || $realisasiAnggaran->status == 'revision')
                            <a href="javascript:void(0)" class="btn btn-outline-light bg-primary d-none d-sm-inline-flex text-white" onclick="event.preventDefault();
                            Swal.fire({
                                title: 'Submit Transaksi?',
                                text: 'Apakah Anda yakin ingin mengajukan transaksi ini?',
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: 'Ya, ajukan!',
                                cancelButtonText: 'Batal'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    document.getElementById('submit-form-{{ $realisasiAnggaran->id }}').submit();
                                }
                            });
                            ">
                            <em class="icon ni ni-telegram"></em><span>Submit Transaksi</span>
                        </a>
                        <form id="submit-form-{{ $realisasiAnggaran->id }}" action="{{ route('yayasan.transaksi.realisasi-anggaran.approval-process', $realisasiAnggaran->id) }}" method="POST" class="d-none">
                            @csrf
                        </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Notif --}}
        @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
        @elseif (session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        <div class="nk-block">
            <div class="card card-bordered">
                <div class="card-inner">
                    <h5 class="card-title">Informasi Transaksi</h5>
                    <hr>
                    <div class="row gy-4">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Tanggal Transaksi:</label>
                                <div class="form-control-plaintext">{{ $realisasiAnggaran->tanggal ? $realisasiAnggaran->tanggal->format('d F Y') : '-' }}</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Nomor Referensi:</label>
                                <div class="form-control-plaintext">{{ $realisasiAnggaran->no_referensi ?? '-' }}</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Unit Terkait:</label>
                                <div class="form-control-plaintext">{{ $realisasiAnggaran->unit->nama_unit ?? '-' }}</div>
                            </div>
                        </div>
                            <!-- <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label">Metode Pembayaran:</label>
                                    <div class="form-control-plaintext">{{ $realisasiAnggaran->metode_pembayaran ?? '-' }}</div>
                                </div>
                            </div> -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label">Jenis Pengeluaran:</label>
                                    <div class="form-control-plaintext">{{ $realisasiAnggaran->jenis_transaksi ?? '-' }}</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label">Deskripsi Transaksi:</label>
                                    <div class="form-control-plaintext">{{ $realisasiAnggaran->deskripsi }}</div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <br><br>
                        <div class="mt-4 md-12">
                            @if ($realisasiAnggaran->status === 'approval')
                            <div class="alert alert-success mb-2 py-2 px-3" role="alert">
                                Transaksi telah <strong>disetujui</strong> pada {{ $realisasiAnggaran->updated_at ? $realisasiAnggaran->updated_at->format('d F Y') : '-' }} oleh {{ $lastRiwayat->created_by ?? '' }}
                            </div>
                            @elseif ($realisasiAnggaran->status === 'draft')
                            <div class="alert alert-secondary mb-2 py-2 px-3" role="alert">
                                Transaksi masih dalam <strong>draft</strong>
                            </div>
                            @elseif ($realisasiAnggaran->status === 'process')
                            <div class="alert alert-info mb-2 py-2 px-3" role="alert">
                                Transaksi sedang dalam <strong>proses</strong> pada {{ $realisasiAnggaran->updated_at ? $realisasiAnggaran->updated_at->format('d F Y') : '-' }} oleh {{ $lastRiwayat->created_by ?? '' }}
                            </div>
                            @elseif ($realisasiAnggaran->status === 'reject')
                            <div class="alert alert-danger mb-2 py-2 px-3" role="alert">
                                Transaksi telah <strong>ditolak</strong> pada {{ $realisasiAnggaran->updated_at ? $realisasiAnggaran->updated_at->format('d F Y') : '-' }} oleh {{ $lastRiwayat->created_by ?? '' }}
                            </div>
                            @elseif ($realisasiAnggaran->status === 'revision')
                            <div class="alert alert-warning mb-2 py-2 px-3" role="alert">
                                Transaksi menunggu <strong>revisi</strong> pada {{ $realisasiAnggaran->updated_at ? $realisasiAnggaran->updated_at->format('d F Y') : '-' }} oleh {{ $lastRiwayat->created_by ?? '' }}
                            </div>
                            @else
                            <div class="alert alert-dark mb-2 py-2 px-3" role="alert">
                                <strong>Status tidak diketahui</strong>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</div>

<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-xl">
        <div class="nk-content-inner">
            <div class="nk-content-body">

                <form method="GET" action="{{ route('yayasan.transaksi.realisasi-anggaran.show', $realisasiAnggaran->id) }}" class="mb-3">
                    <div class="row g-3 align-items-center justify-content-end">
                        <div class="col-md-3">
                            <input type="text" id="deskripsi_item" name="deskripsi_item" class="form-control float-end" placeholder="Cari Deskripsi Item" value="{{ request('deskripsi_item') }}" autocomplete="off">
                        </div>
                        <div class="col-md-2">
                            <input type="text" id="periode" name="periode" class="form-control float-end" placeholder="Pilih Bulan & Tahun" value="{{ request('periode') }}" autocomplete="off">
                        </div>
                        <div class="col-md-2">
                            <a href="{{ route('yayasan.transaksi.realisasi-anggaran.show', $realisasiAnggaran->id) }}" class="btn btn-secondary float-end me-2">Reset</a>
                            <button type="submit" class="btn btn-primary float-end me-2">Cari</button>
                        </div>
                    </div>
                </form>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
                <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
                <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js"></script>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css">
                <script>
                    document.addEventListener('DOMContentLoaded', function () {
                        if (window.flatpickr) {
                            flatpickr("#periode", {
                                plugins: [
                                new monthSelectPlugin({
                                    shorthand: true,
                                    dateFormat: "m-Y",
                                    altFormat: "F Y"
                                })
                                ],
                                allowInput: true
                            });
                        }
                    });
                </script>
                

                <div class="nk-block">
                    <div class="card card-bordered">
                        <div class="card-inner">
                            <h5 class="card-title">Detail Transaksi</h5>
                            <hr>
                            <div class="nk-tb-list nk-tb-ulog">
                                <div class="nk-tb-item nk-tb-head">
                                    <div class="nk-tb-col"><span><strong>No</strong></span></div>
                                    <!-- <div class="nk-tb-col"><span><strong>Periode</strong></span></div> -->
                                    <!--  <div class="nk-tb-col"><span><strong>Akun COA</strong></span></div> -->
                                    <div class="nk-tb-col"><span><strong>Deskripsi Item</strong></span></div>
                                    <!--  <div class="nk-tb-col"><span><strong>Catatan</strong></span></div> -->
                                    <div class="nk-tb-col tb-col-md"><span><strong>Unit & Pendanaan</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-center"><span><strong>Vol, Satuan & Harga</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-end"><span><strong>Nominal</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-end"><span><strong>Nominal Realisasi</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-end"><span><strong>Tanggal Realisasi</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-end"><span><strong>Revisi</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-center"><span><strong>Upload / Download</strong></span></div>
                                    <div class="nk-tb-col"><span>Detail Catatan</span></div>
                                </div>
                                @foreach ($detailTransaksi as $detail)
                                @php 
                                    $hasRiwayat = $detail->riwayat_realisasi && $detail->riwayat_realisasi->count() > 0;
                                    $totalRealisasi = 0;
                                    
                                    if (!$hasRiwayat) {
                                        $totalRealisasi = $detail->nominal_realisasi > 0 ? $detail->nominal_realisasi : $detail->jurnalEntry->sum('debit');
                                    }
                                    
                                    if ($detail->riwayat_realisasi) {
                                        foreach($detail->riwayat_realisasi as $riwayat) {
                                            $totalRealisasi += $riwayat->nominal_realisasi > 0 ? $riwayat->nominal_realisasi : $riwayat->jurnalEntry->sum('debit');
                                        }
                                    }
                                @endphp
                                <div class="nk-tb-item {{ $hasRiwayat ? 'bg-lighter' : '' }}">
                                    <div class="nk-tb-col">
                                        <span>{{ ($detailTransaksi->currentPage() - 1) * $detailTransaksi->perPage() + $loop->iteration }}</span>
                                    </div>
                                        <div class="nk-tb-col">
                                            <span>{{ $detail->deskripsi_item ?? '-' }}</span>
                                            @if($hasRiwayat)
                                                <div class="mt-2">
                                                    <button class="btn btn-xs btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#riwayat-{{ $detail->id }}">
                                                        <em class="icon ni ni-list"></em> <span>Riwayat Realisasi ({{ $detail->riwayat_realisasi->count() }})</span>
                                                    </button>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="nk-tb-col tb-col-md">
                                            <div>
                                                <strong>Unit:</strong> {{ $detail->unit->nama_unit ?? '-' }}
                                            </div>
                                        </div>
                                        <div class="nk-tb-col tb-col-md text-center">
                                            <div>
                                                <strong>Vol:</strong> {{ $detail->vol ?? '-' }}
                                            </div>
                                            <div>
                                                <strong>Satuan:</strong> {{ $detail->satuan ?? '-' }}
                                            </div>
                                            <div>
                                                <strong>Harga:</strong> {{ $detail->harga_satuan ? 'Rp ' . number_format($detail->harga_satuan, 0, ',', '.') : '-' }}
                                            </div>
                                        </div>
                                        <div class="nk-tb-col tb-col-md text-end">
                                            @php
                                                $nomTampil = ($detail->nominal && $detail->nominal > 0) 
                                                    ? $detail->nominal 
                                                    : (($detail->nominal_diajukan && $detail->nominal_diajukan > 0) 
                                                        ? $detail->nominal_diajukan 
                                                        : (($detail->vol && $detail->harga_satuan) ? ($detail->vol * $detail->harga_satuan) : 0));
                                            @endphp
                                            <span><strong>{{ $nomTampil > 0 ? 'Rp ' . number_format($nomTampil, 0, ',', '.') : '-' }}</strong></span>
                                        </div>
                                        <div class="nk-tb-col tb-col-md text-end">
                                            <span class="{{ $totalRealisasi > 0 ? 'text-success fw-bold' : '' }}">
                                                {{ $totalRealisasi > 0 ? 'Rp ' . number_format($totalRealisasi, 0, ',', '.') : '-' }}
                                            </span>
                                        </div>
                                        <div class="nk-tb-col tb-col-md text-end">
                                         @if($detail->tanggal_realisasi && $detail->tanggal_realisasi->year > 1900) 
                                         {{ $detail->tanggal_realisasi->format('d M Y') }}
                                         @else
                                         -
                                         @endif
                                     </div>
                                     @if ($detail->is_revisi == '1')
                                     <div class="nk-tb-col tb-col-md">
                                        <span>
                                            @if ($detail->revisi_vol)
                                            <strong>Vol:</strong> {{ $detail->revisi_vol ?? '0' }} <br>
                                            @endif

                                            @if ($detail->revisi_satuan)
                                            <strong>Satuan:</strong> {{ $detail->revisi_satuan ?? '' }} <br>
                                            @endif

                                            @if ($detail->revisi_harga_satuan)
                                            <strong>Harga Satuan:</strong> {{ number_format($detail->revisi_harga_satuan ?? 0, 0, ',', '.') }} <br>
                                            @endif

                                            @if ($detail->revisi_nominal)
                                            <strong>Nominal:</strong> {{ number_format($detail->revisi_nominal ?? 0, 0, ',', '.') }}
                                            @endif
                                        </span>
                                    </div>
                                    @else
                                    <div class="nk-tb-col tb-col-md text-center">
                                        <span>-</span>
                                    </div>
                                    @endif
                                    <div class="nk-tb-col tb-col-md text-center">
                                        @if($detail->is_revisi)
                                        <a href="javascript:void(0)" class="upload-btn" data-bs-toggle="modal" data-bs-target="#uploadModal" data-detail-id="{{ $detail->id }}">
                                            <em class="icon ni ni-upload" style="font-size: 24px; color: #FFA500;"></em>
                                        </a>
                                        @else
                                        @if($detail->file)
                                        @php
                                        $fileUrl = $detail->file;
                                        $isExternal = Str::startsWith($fileUrl, ['http://', 'https://']);
                                        $fileExtension = strtolower(pathinfo($fileUrl, PATHINFO_EXTENSION));
                                        $isImage = in_array($fileExtension, ['jpg', 'jpeg', 'png', 'gif']);
                                        $isPdf = $fileExtension === 'pdf';
                                        $previewUrl = route('yayasan.transaksi.realisasi-anggaran.preview', $detail->id);
                                        @endphp

                                        {{-- Jika URL eksternal (hasil sinkron) --}}
                                        @if($isExternal)
                                        <a href="{{ $fileUrl }}" target="_blank" class="btn btn-sm btn-outline-success">
                                            <em class="icon ni ni-eye"></em> Lihat
                                        </a>
                                        @else
                                        {{-- File lokal --}}
                                        @if($isImage)
                                        <a href="javascript:void(0)" class="preview-btn text-success" data-bs-toggle="modal" data-bs-target="#imagePreviewModal" data-image-url="{{ $previewUrl }}" data-file-name="{{ $fileUrl }}" title="Preview">
                                            <em class="icon ni ni-eye" style="font-size: 20px;"></em>
                                        </a>
                                        @elseif($isPdf)
                                        <a href="javascript:void(0)" class="preview-btn text-success" data-bs-toggle="modal" data-bs-target="#pdfPreviewModal" data-pdf-url="{{ $previewUrl }}" data-file-name="{{ $fileUrl }}" title="Preview">
                                            <em class="icon ni ni-eye" style="font-size: 20px;"></em>
                                        </a>
                                        @endif
                                        <a href="{{ route('yayasan.transaksi.realisasi-anggaran.download', $detail->id) }}" class="download-btn text-primary ms-1" title="Download">
                                            <em class="icon ni ni-download" style="font-size: 20px;"></em>
                                        </a>
                                        @endif
                                        @else
                                        <a href="javascript:void(0)" class="upload-btn" data-bs-toggle="modal" data-bs-target="#uploadModal" data-detail-id="{{ $detail->id }}">
                                            <em class="icon ni ni-upload" style="font-size: 24px; color: #FFA500;"></em>
                                        </a>
                                        @endif
                                        @endif
                                    </div>

                                    <div class="nk-tb-col text-center">
                                        <span>
                                            <a type="button" class="btn btn-xs btn-primary" onclick="showRincian({{ $detail->id }})">
                                                <em class="icon ni ni-eye"></em>
                                            </a>
                                        </span>
                                        <div class="modal fade" id="rincianModal{{ $detail->id }}" tabindex="-1" aria-labelledby="rincianModalLabel{{ $detail->id }}" aria-hidden="true">
                                            <div class="modal-dialog modal-lg text-start">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="rincianModalLabel{{ $detail->id }}">Detail Catatan</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <span name="catatan" id="catatan{{ $detail->id }}" rows="10" class="form-control">{!! $detail->catatan !!}</span>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                {{-- ACCORDION SUB-TABEL RIWAYAT REALISASI --}}
                                @if($hasRiwayat)
                                <div class="collapse" id="riwayat-{{ $detail->id }}">
                                    <div class="p-3 bg-white border-bottom border-start border-end border-primary" style="border-left-width: 4px !important;">
                                        <h6 class="title mb-2 text-primary"><em class="icon ni ni-history"></em> Rincian Riwayat Realisasi</h6>
                                        <table class="table table-sm table-bordered table-striped">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Tgl Realisasi</th>
                                                    <th>Deskripsi</th>
                                                    <th class="text-end">Nominal Realisasi</th>
                                                    <th class="text-center">Bukti Nota</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($detail->riwayat_realisasi as $riwayat)
                                                @php $rDebit = $riwayat->jurnalEntry->sum('debit'); @endphp
                                                <tr>
                                                    <td>{{ $riwayat->tanggal_realisasi && $riwayat->tanggal_realisasi->year > 1900 ? $riwayat->tanggal_realisasi->format('d M Y') : '-' }}</td>
                                                    <td>{{ $riwayat->deskripsi_item ?? '-' }}</td>
                                                    <td class="text-end fw-bold text-success">
                                                        {{ ($riwayat->nominal_realisasi && $riwayat->nominal_realisasi > 0) ? 'Rp ' . number_format($riwayat->nominal_realisasi, 0, ',', '.') : ($rDebit > 0 ? 'Rp ' . number_format($rDebit, 0, ',', '.') : '-') }}
                                                    </td>
                                                    <td class="text-center">
                                                        @if($riwayat->file)
                                                            @php
                                                            $isExt = Str::startsWith($riwayat->file, ['http://', 'https://']);
                                                            @endphp
                                                            @if($isExt)
                                                            <a href="{{ $riwayat->file }}" target="_blank" class="btn btn-xs btn-success"><em class="icon ni ni-eye"></em> Lihat</a>
                                                            @else
                                                            <a href="{{ route('yayasan.transaksi.realisasi-anggaran.download', $riwayat->id) }}" class="btn btn-xs btn-primary"><em class="icon ni ni-download"></em> Unduh</a>
                                                            @endif
                                                        @else
                                                            <span class="text-muted small">-</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                @endif
                                {{-- END ACCORDION --}}
                                @endforeach
                            </div>
                            <hr>
                            <div class="d-flex justify-content-end mt-3">
                                {{ $detailTransaksi->links('pagination::bootstrap-4') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="uploadForm" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="detail_id" id="detail_id" value="">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadModalLabel">Form Upload Realisasi Anggaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <h6>Detail ID: <span id="detailIdDisplay" class="badge badge-primary"></span></h6>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="formFile" class="form-label">Pilih File Bukti</label>
                                <input class="form-control" type="file" id="formFile" name="file" accept=".pdf,.jpeg,.png,.gif,.jpg">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="nominalRealisasi" class="form-label">Nominal Realisasi <span class="text-danger">*</span></label>
                                <input class="form-control" type="number" id="nominalRealisasi" name="nominal_realisasi" placeholder="Masukkan nominal" min="0" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="tanggalRealisasi" class="form-label">Tanggal Realisasi <span class="text-danger">*</span></label>
                                <input class="form-control" type="date" id="tanggalRealisasi" name="tanggal_realisasi" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="akunSumberDana" class="form-label">Akun Sumber Dana <span class="text-danger">*</span></label>
                                <select class="form-select" id="akunSumberDana" name="akun_sumber_dana" required>
                                    <option value="">-- Pilih Akun Sumber Dana --</option>
                                    @foreach ($akunSumberDana as $akun)
                                    <option value="{{ $akun->kode_akun ?? ''}}">{{ $akun->kode_akun ?? '' }} - {{ $akun->nama_akun ?? '' }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-labelledby="imagePreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imagePreviewModalLabel">Preview Gambar</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>
            <div class="modal-body text-center">
                <img id="previewImage" src="" alt="Preview" class="img-fluid" style="max-height: 500px;">
                <div class="mt-3">
                    <small class="text-muted" id="fileName"></small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="pdfPreviewModal" tabindex="-1" aria-labelledby="pdfPreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pdfPreviewModalLabel">Preview PDF</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>
            <div class="modal-body">
                <iframe id="pdfPreviewFrame" src="" width="100%" height="600px" frameborder="0"></iframe>
                <div class="mt-3">
                    <small class="text-muted" id="pdfFileName"></small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<script>
    function showRincian(id) {
        const rincianModal = document.getElementById('rincianModal' + id);
        const textarea = rincianModal.querySelector('.modal-body textarea');
    // Set the modal body content with the catatan value (HTML)
    const catatanSpan = document.getElementById('catatan' + id);
    if (catatanSpan) {
        rincianModal.querySelector('.modal-body').innerHTML = catatanSpan.innerHTML;
    }

    const modal = new bootstrap.Modal(rincianModal);
    modal.show();
}
document.addEventListener('DOMContentLoaded', function () {
    var uploadModal = document.getElementById('uploadModal');
    var imagePreviewModal = document.getElementById('imagePreviewModal');
    var pdfPreviewModal = document.getElementById('pdfPreviewModal');

    uploadModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var detailId = button.getAttribute('data-detail-id');
        document.getElementById('detail_id').value = detailId;
        document.getElementById('detailIdDisplay').textContent = detailId;

            // Clear previous form inputs
            document.getElementById('formFile').value = '';
            document.getElementById('nominalRealisasi').value = '';
            document.getElementById('akunSumberDana').value = '';
        });

    imagePreviewModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var imageUrl = button.getAttribute('data-image-url');
        var fileName = button.getAttribute('data-file-name');

        document.getElementById('previewImage').src = imageUrl;
        document.getElementById('fileName').textContent = fileName;
    });

    pdfPreviewModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var pdfUrl = button.getAttribute('data-pdf-url');
        var fileName = button.getAttribute('data-file-name');

        document.getElementById('pdfPreviewFrame').src = pdfUrl;
        document.getElementById('pdfFileName').textContent = fileName;
    });

        // Set default date to today
        document.getElementById('tanggalRealisasi').value = new Date().toISOString().split('T')[0];
        
        document.getElementById('uploadForm').addEventListener('submit', function (e) {
            e.preventDefault();

            const fileInput = document.getElementById('formFile');
            const nominalInput = document.getElementById('nominalRealisasi');
            const nominalValue = nominalInput.value;
            const tanggalRealisasi = document.getElementById('tanggalRealisasi').value;
            const akunSumberDana = document.getElementById('akunSumberDana').value;

            // Validasi data yang WAJIB
            if (!nominalValue || isNaN(nominalValue) || parseFloat(nominalValue) < 0) {
                Swal.fire({ icon: 'warning', title: 'Oops!', text: 'Nominal realisasi harus berupa angka dan minimal 0.' });
                return;
            }
            if (!tanggalRealisasi) {
                Swal.fire({ icon: 'warning', title: 'Oops!', text: 'Silakan pilih tanggal realisasi.' });
                return;
            }
            if (!akunSumberDana) {
                Swal.fire({ icon: 'warning', title: 'Oops!', text: 'Silakan pilih akun sumber dana.' });
                return;
            }

            // Periksa dan validasi file hanya jika ada
            if (fileInput.files.length > 0) {
                const file = fileInput.files[0];
                const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png', 'image/gif', 'image/jpg'];
                
                if (!allowedTypes.includes(file.type)) {
                    Swal.fire({ icon: 'warning', title: 'Oops!', text: 'Hanya file PDF atau gambar (JPG, PNG, GIF) yang diperbolehkan.' });
                    return;
                }
                
                if (file.size > 5 * 1024 * 1024) {
                    Swal.fire({ icon: 'warning', title: 'Oops!', text: 'Ukuran file maksimal 5MB.' });
                    return;
                }
            }

            // Siapkan FormData
            const formData = new FormData();
            
            // Tambahkan file HANYA jika file ada
            if (fileInput.files.length > 0) {
                formData.append('file', fileInput.files[0]);
            }
            
            // Tambahkan semua data lainnya
            formData.append('detail_id', document.getElementById('detail_id').value);
            formData.append('nominal_realisasi', nominalValue);
            formData.append('tanggal_realisasi', tanggalRealisasi);
            formData.append('akun_sumber_dana', akunSumberDana);
            formData.append('_token', '{{ csrf_token() }}');

            // Tampilkan loading
            Swal.fire({
                title: 'Mengunggah Data...',
                text: 'Mohon tunggu sebentar',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            // Submit form
            fetch('{{ route("yayasan.transaksi.realisasi-anggaran.upload") }}', {
                method: 'POST',
                body: formData,
            })
            .then(response => {
                // Periksa apakah respons OK (status 200-299)
                if (!response.ok) {
                    // Jika tidak OK, parse JSON error dan lempar ke blok catch
                    return response.json().then(errorData => {
                        throw new Error(errorData.message || 'Gagal menyimpan realisasi.');
                    });
                }
                // Jika OK, lanjutkan dengan parsing JSON
                return response.json();
            })
            .then(data => {
                Swal.close();
                // Tampilkan pesan sukses dari server
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: data.message, // Menggunakan pesan dari respons server
                }).then(() => {
                    var modal = bootstrap.Modal.getInstance(uploadModal);
                    modal.hide();
                    document.getElementById('uploadForm').reset();
                    location.reload();
                });
            })
            .catch(error => {
                Swal.close();
                console.error('Terjadi kesalahan:', error);
                // Tangani kesalahan, termasuk pesan dari server jika ada
                Swal.fire({
                    icon: 'error',
                    title: 'Kesalahan!',
                    text: error.message || 'Terjadi kesalahan saat mengunggah data.', // Menggunakan pesan dari objek Error
                });
            });
        });
});
</script>

<!-- Modal Update Pengembalian Kas Bon -->
<div class="modal fade" id="updatePengembalianModal" tabindex="-1" aria-labelledby="updatePengembalianModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updatePengembalianModalLabel">Update Pengembalian Kas Bon</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="updatePengembalianForm" method="POST">
                @csrf
                <div class="modal-body">
                    <input type="hidden" id="detail_id" name="detail_id" value="{{ $detail->id }}">
                    
                    <div class="mb-3">
                        <label for="nominal_pengembalian" class="form-label">Nominal Pengembalian <span class="text-danger">*</span></label>
                        <input type="text" class="form-control currency-input" id="nominal_pengembalian" name="nominal_pengembalian" 
                        placeholder="Masukkan nominal pengembalian" required>
                        <div class="invalid-feedback"></div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="tanggal_pengembalian" class="form-label">Tanggal Pengembalian <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="tanggal_pengembalian" name="tanggal_pengembalian" 
                        placeholder="dd/mm/yyyy" required>
                        <div class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
    const currencyInputs = document.querySelectorAll('.currency-input');
    function formatRupiahValue(str) {
        if (!str) return '';
        let s = String(str).replace(/[^\d,]/g, '');
        const parts = s.split(',');
        let intPart = parts[0].replace(/^0+/, '') || '0';
        let decPart = parts[1] ? parts[1].slice(0, 2) : '';
        let rgx = /(\d+)(\d{3})/;
        let out = intPart;
        while (rgx.test(out)) {
            out = out.replace(rgx, '$1' + '.' + '$2');
        }
        return decPart ? out + ',' + decPart : out;
    }
    currencyInputs.forEach(input => {
        input.addEventListener('input', function(e) {
            e.target.value = formatRupiahValue(e.target.value);
            e.target.setSelectionRange(e.target.value.length, e.target.value.length);
        });
    });

    // Date picker initialization
    if (typeof flatpickr !== 'undefined') {
        flatpickr('.date-picker', {
            dateFormat: 'd/m/Y',
            locale: 'id'
        });
    }

    // Handle modal show event
    const updatePengembalianModal = document.getElementById('updatePengembalianModal');
    updatePengembalianModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const detailId = button.getAttribute('data-detail-id');
        const nominal = button.getAttribute('data-nominal');
        const tanggal = button.getAttribute('data-tanggal');
        
        document.getElementById('detail_id').value = detailId;
        document.getElementById('nominal_pengembalian').value = nominal;
        document.getElementById('tanggal_pengembalian').value = tanggal;
    });

    // Handle form submission
    document.getElementById('updatePengembalianForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const detailId = formData.get('detail_id');
        
        const nominalInput = document.getElementById('nominal_pengembalian');
        if (nominalInput.value) {
            let v = nominalInput.value.replace(/\./g, '');
            let num = v.replace(',', '.');
            formData.set('nominal_pengembalian', num);
        }
        
        Swal.fire({
            title: 'Memproses...',
            text: 'Sedang menyimpan data pengembalian...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        fetch(`/yayasan/transaksi/realisasi-anggaran/update-pengembalian/${detailId}`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            Swal.close();
            if (data.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: data.message,
                }).then(() => {
                    var modal = bootstrap.Modal.getInstance(updatePengembalianModal);
                    modal.hide();
                    document.getElementById('updatePengembalianForm').reset();
                    location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Kesalahan!',
                    text: data.message || 'Terjadi kesalahan saat menyimpan data.',
                });
            }
        })
        .catch(error => {
            Swal.close();
            console.error('Terjadi kesalahan:', error);
            Swal.fire({
                icon: 'error',
                title: 'Kesalahan!',
                text: 'Terjadi kesalahan saat menyimpan data.',
            });
        });
    });
});
</script>

@endsection