{{-- resources/views/yayasan/transaksi/revisi-ajuan/show.blade.php --}}

@extends('layouts.app')

@section('title', 'Detail Ajuan Revisi Ajuan: ' . $revisiAjuan->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">Detail Revisi Ajuan: {{ $revisiAjuan->no_referensi }}</h3>
                            <div class="nk-block-des text-soft">
                                <p>Informasi lengkap transaksi Revisi Ajuan.</p>
                            </div>
                        </div>
                        <div class="nk-block-head-content">
                            @if (!$revisiAjuan->is_revisi)
                                <a  class="btn btn-outline-light bg-white d-sm-inline-flex" href="javascript:void(0)" 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-{{ $revisiAjuan->id }}').submit();
                                    }
                                });
                                ">
                                <em class="icon ni ni-telegram"></em><span>Submit Transaksi</span>
                            </a>
                            <form id="submit-form-{{ $revisiAjuan->id }}" action="{{ route('yayasan.transaksi.revisi-ajuan.submit-revisi', $revisiAjuan->id) }}" method="POST" class="d-none">
                                @csrf
                                @method('PUT')
                                @csrf
                            </form>
                            @endif
                            <a href="{{ route('yayasan.transaksi.revisi-ajuan.index') }}" class="btn btn-outline-light bg-white d-sm-inline-flex">
                                <em class="icon ni ni-arrow-left"></em>
                                <span>Kembali ke Daftar Revisi Ajuan</span>
                            </a>
                            <button id="btnSyncRkas" class="btn btn-outline-light bg-primary d-sm-inline-flex text-white ms-2">
                                <em class="icon ni ni-sync"></em>
                                <span>Sync RKAS</span>
                            </button>
                            <span id="syncStatus" class="text-muted ms-2" style="display:none;"></span>
                            @if ($revisiAjuan->status == 'draft' || $revisiAjuan->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-{{ $revisiAjuan->id }}').submit();
                                }
                            });
                            ">
                            <em class="icon ni ni-telegram"></em><span>Submit Transaksi</span>
                        </a>
                        <form id="submit-form-{{ $revisiAjuan->id }}" action="{{ route('yayasan.transaksi.revisi-ajuan.approval-process', $revisiAjuan->id) }}" method="POST" class="d-none">
                            @csrf
                        </form>
                        @endif
                    </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">{{ $revisiAjuan->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">{{ $revisiAjuan->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">{{ $revisiAjuan->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">{{ $revisiAjuan->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">{{ $revisiAjuan->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">{{ $revisiAjuan->deskripsi }}</div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <br><br>
                        <div class="mt-4 md-12">
                            @if ($revisiAjuan->status === 'approval')
                            <div class="alert alert-success mb-2 py-2 px-3" role="alert">
                                Transaksi telah <strong>disetujui</strong> pada {{ $revisiAjuan->updated_at ? $revisiAjuan->updated_at->format('d F Y') : '-' }} oleh {{ $lastRiwayat->created_by ?? '' }}
                            </div>
                            @elseif ($revisiAjuan->status === 'draft')
                            <div class="alert alert-secondary mb-2 py-2 px-3" role="alert">
                                Transaksi masih dalam <strong>draft</strong>
                            </div>
                            @elseif ($revisiAjuan->status === 'process')
                            <div class="alert alert-info mb-2 py-2 px-3" role="alert">
                                Transaksi sedang dalam <strong>proses</strong> pada {{ $revisiAjuan->updated_at ? $revisiAjuan->updated_at->format('d F Y') : '-' }} oleh {{ $lastRiwayat->created_by ?? '' }}
                            </div>
                            @elseif ($revisiAjuan->status === 'reject')
                            <div class="alert alert-danger mb-2 py-2 px-3" role="alert">
                                Transaksi telah <strong>ditolak</strong> pada {{ $revisiAjuan->updated_at ? $revisiAjuan->updated_at->format('d F Y') : '-' }} oleh {{ $lastRiwayat->created_by ?? '' }}
                            </div>
                            @elseif ($revisiAjuan->status === 'revision')
                            <div class="alert alert-warning mb-2 py-2 px-3" role="alert">
                                Transaksi menunggu <strong>revisi</strong> pada {{ $revisiAjuan->updated_at ? $revisiAjuan->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.revisi-ajuan.show', $revisiAjuan->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.revisi-ajuan.show', $revisiAjuan->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>

                <script>
                    document.addEventListener('DOMContentLoaded', function () {
                        if (window.flatpickr) {
                            flatpickr("#periode", {
                                plugins: [
                                new monthSelectPlugin({
                                    shorthand: true,
                                    dateFormat: "m-Y",
                                    altFormat: "F Y"
                                })
                                ],
                                allowInput: true
                            });
                        }
                    });
                </script>
                <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">

                <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</strong></span></div>
                                    <div class="nk-tb-col tb-col-md"><span><strong>Pendanaan</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-center"><span><strong>Vol</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-center"><span><strong>Satuan</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-end"><span><strong>Harga Satuan</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-end"><span><strong>Nominal</strong></span></div>
                                    @if ($revisiAjuan->status === 'draft')
                                    <div class="nk-tb-col tb-col-md text-center"><span><strong>Edit Catatan</strong></span></div>
                                    @else
                                    <div class="nk-tb-col tb-col-md text-center"><span><strong>Detail Catatan</strong></span></div>
                                    @endif
                                    <div class="nk-tb-col tb-col-md text-center"><span><strong>Edit</strong></span></div>

                                </div>
                                @foreach ($detailTransaksi as $detail)
                                <div class="nk-tb-item">
                                    <div class="nk-tb-col">
                                        <span>{{ ($detailTransaksi->currentPage() - 1) * $detailTransaksi->perPage() + $loop->iteration }}</span>
                                    </div>
                                    <div class="nk-tb-col">
                                        <span>{{ $detail->bulan ?? '' }} - {{ $detail->periode ?? '' }}</span>
                                    </div>
                                    <div class="nk-tb-col">
                                        <span>{{ $detail->akun->kode_akun }} - {{ $detail->akun->nama_akun }}</span>
                                    </div>
                                    <div class="nk-tb-col">
                                        <span>{{ $detail->deskripsi_item ?? '-' }}</span>
                                    </div>
                                    <div class="nk-tb-col">
                                        <span>
                                            {!! \Illuminate\Support\Str::limit(strip_tags($detail->catatan ?? '-'), 20, '...') !!}
                                        </span>
                                    </div>
                                    <div class="nk-tb-col tb-col-md">
                                        <span>{{ $detail->unit->nama_unit ?? '-' }}</span>
                                    </div>
                                    <div class="nk-tb-col tb-col-md">
                                        <span>{{ $detail->jenisPendanaan->nama ?? '-' }}</span>
                                    </div>
                                    <div class="nk-tb-col tb-col-md text-center">
                                        <span>{{ $detail->vol ?? '-' }}</span>
                                    </div>
                                    <div class="nk-tb-col tb-col-md text-center">
                                        <span>{{ $detail->satuan ?? '-' }}</span>
                                    </div>
                                    <div class="nk-tb-col tb-col-md text-end">
                                        <span>{{ $detail->harga_satuan ? 'Rp. ' . number_format($detail->harga_satuan, 0, ',', '.') : '-' }}</span>
                                    </div>
                                    <div class="nk-tb-col tb-col-md text-end">
                                        <span>Rp. {{ number_format($detail->nominal, 0, ',', '.') }}</span>
                                    </div>
                                    <div class="nk-tb-col tb-col-md text-end">
                                        <span>
                                        @if ($revisiAjuan->status === 'draft')
                                        <a type="button" class="btn btn-xs btn-primary" onclick="editRincian({{ $detail->id }})">
                                            <em class="icon ni ni-edit" style="font-size: 12px;"></em>
                                        </a>
                                        @else 
                                        <a type="button" class="btn btn-xs btn-primary" onclick="editRincian({{ $detail->id }})">
                                            <em class="icon ni ni-eye" style="font-size: 12px;"></em>
                                        </a>
                                        @endif
                                        <!-- modal rincian -->
                                        <div class="modal fade" id="rincianModal{{ $detail->id }}" tabindex="-1" aria-labelledby="rincianModalLabel{{ $detail->id }}" aria-hidden="true">
                                            <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        @if ($revisiAjuan->status === 'draft')
                                                        <h5 class="modal-title" id="rincianModalLabel{{ $detail->id }}">Edit Catatan</h5>
                                                        @else
                                                        <h5 class="modal-title" id="rincianModalLabel{{ $detail->id }}">Detail Catatan</h5>
                                                        @endif
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <textarea name="catatan" id="catatan{{ $detail->id }}" rows="10" class="form-control">{{ $detail->catatan }}</textarea>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                                                        @if ($revisiAjuan->status === 'draft')
                                                        <button type="button" class="btn btn-primary" onclick="saveRincian({{ $detail->id }})">Simpan</button>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        </span>
                                    </div>
                                    <div class="nk-tb-col tb-col-md text-end">
                                            <a href="javascript:void(0)" class="btn btn-xs btn-info me-1" onclick="editDetail({{ $detail->id }})">
                                                <em class="icon ni ni-edit" style="font-size: 12px;"></em>
                                            </a>
                                    </div>
                            </div>
                            @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>

<!-- Upload Modal -->
<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">Unggah File</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="formFile" class="form-label">Pilih file</label>
                        <input class="form-control" type="file" id="formFile" name="file" accept=".pdf,image/*">
                    </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">Unggah</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Image Preview Modal -->
<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>

<!-- PDF Preview Modal -->
<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>

<!-- edit modal  -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="editForm">
                @csrf
                <input type="hidden" name="detail_id" id="edit_detail_id" value="">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Edit Detail Transaksi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_deskripsi_item" class="form-label">Deskripsi Item</label>
                        <input type="text" class="form-control" id="edit_deskripsi_item" name="deskripsi_item" disabled>
                    </div>
                    <div class="mb-3">
                        <label for="edit_vol" class="form-label">Volume</label>
                        <input type="number" class="form-control" id="edit_vol" name="vol" min="1" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit_satuan" class="form-label">Satuan</label>
                        <input type="text" class="form-control" id="edit_satuan" name="satuan" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit_harga_satuan" class="form-label">Harga Satuan</label>
                        <input type="number" class="form-control" id="edit_harga_satuan" name="harga_satuan" min="0" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit_nominal" class="form-label">Nominal</label>
                        <input type="text" class="form-control" id="edit_nominal" name="nominal" disabled>
                        <small class="text-muted">Nominal akan dihitung otomatis</small>
                    </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 Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
    // edit detail
    function editDetail(id) {
        fetch("{{ url('yayasan/transaksi/revisi-ajuan') }}/" + id + "/edit-detail")
        .then(response => response.json())
        .then(responseData => {
            const data = responseData.data;

            document.getElementById('edit_detail_id').value = data.id;
            document.getElementById('edit_deskripsi_item').value = data.deskripsi_item;
            document.getElementById('edit_vol').value = data.revisi_vol ?? data.vol;
            document.getElementById('edit_satuan').value = data.revisi_satuan ?? data.satuan;
            // Show harga_satuan as plain number, no Rp formatting for input ease
            document.getElementById('edit_harga_satuan').value = data.revisi_harga_satuan ?? data.harga_satuan;
            // Show nominal formatted with Rp
            document.getElementById('edit_nominal').value = Number(data.revisi_nominal ?? data.nominal).toLocaleString('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 });

            var editModal = new bootstrap.Modal(document.getElementById('editModal'));
            editModal.show();
        })
        .catch(error => {
            console.error('Error fetching detail data:', error);
            Swal.fire('Gagal!', 'Terjadi kesalahan saat mengambil data detail.', 'error');
        });
    }

    // Update nominal when vol or harga_satuan changes
    document.getElementById('edit_vol').addEventListener('input', updateNominal);
    document.getElementById('edit_harga_satuan').addEventListener('input', updateNominal);

    function updateNominal() {
        const vol = parseFloat(document.getElementById('edit_vol').value) || 0;
        const hargaSatuan = parseFloat(document.getElementById('edit_harga_satuan').value) || 0;
        const nominal = vol * hargaSatuan;

        // Format nominal with Rp for display, and set it
        document.getElementById('edit_nominal').value = nominal.toLocaleString('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 });
    }


    // Handle form submit for edit detail
    document.getElementById('editForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const id = document.getElementById('edit_detail_id').value;
        const edit_deskripsi_item = document.getElementById('edit_deskripsi_item').value;
        const edit_vol = document.getElementById('edit_vol').value;
        const edit_satuan = document.getElementById('edit_satuan').value;
        const edit_harga_satuan = document.getElementById('edit_harga_satuan').value;
        const edit_nominal = document.getElementById('edit_nominal').value;
        fetch("{{ url('yayasan/transaksi/revisi-ajuan') }}/" + id + "/update-detail", {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                edit_deskripsi_item,
                edit_vol,
                edit_satuan,
                edit_harga_satuan,
                edit_nominal
            })
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                Swal.fire('Berhasil!', 'Detail transaksi berhasil diperbarui.', 'success')
                    .then(() => location.reload());
            } else {
                Swal.fire('Gagal!', result.message || 'Gagal memperbarui detail transaksi.', 'error');
            }
        })
        .catch(() => {
            Swal.fire('Gagal!', 'Terjadi kesalahan saat memperbarui detail.', 'error');
        });

        var modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
        modal.hide();
        // Sinkronisasi RKAS per-chunk tanpa job
        const btnSync = document.getElementById('btnSyncRkas');
        const statusEl = document.getElementById('syncStatus');
        if (btnSync) {
            btnSync.addEventListener('click', async function () {
                const csrf = '{{ csrf_token() }}';
                const url = '{{ route('yayasan.transaksi.revisi-ajuan.sync') }}';
                let limit = 200;
                let offset = 0;
                btnSync.disabled = true;
                statusEl.style.display = 'inline';
                statusEl.textContent = 'Memulai sinkronisasi...';

                try {
                    while (true) {
                        statusEl.textContent = `Memproses offset ${offset} (limit ${limit})...`;
                        const resp = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': csrf,
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify({ limit, offset })
                        });
                        const data = await resp.json();
                        if (!resp.ok || data.success === false) {
                            throw new Error(data.message || 'Gagal sinkronisasi');
                        }
                        const total = data.total ?? 0;
                        const processed = data.processed ?? 0;
                        const nextOffset = data.next_offset;
                        statusEl.textContent = `Total: ${total}, Diproses: ${processed}, Next Offset: ${nextOffset ?? '-'}.`;
                        if (nextOffset === null) break;
                        offset = nextOffset;
                    }
                    statusEl.textContent = 'Sinkronisasi selesai.';
                } catch (e) {
                    statusEl.textContent = `Error: ${e.message}`;
                } finally {
                    btnSync.disabled = false;
                }
            });
        }
    });


    function editRincian(id) {
        const rincianModal = document.getElementById('rincianModal' + id);
        const textarea = rincianModal.querySelector('.modal-body textarea');
        textarea.value = document.getElementById('catatan' + id).value;

        const modal = new bootstrap.Modal(rincianModal);
        modal.show();

        // Destroy old editor if exists
        if (textarea._ckeditorInstance) {
            textarea._ckeditorInstance.destroy();
        }

        // Initialize CKEditor 5
        ClassicEditor.create(textarea, {
            height: '200px'
        }).then(editor => {
            textarea._ckeditorInstance = editor;
        }).catch(error => {
            console.error(error);
        });
    }

    // saveRincian
    function saveRincian(id) {
        const rincianModal = document.getElementById('rincianModal' + id);
        const textarea = rincianModal.querySelector('.modal-body textarea');
        let data;

        if (textarea._ckeditorInstance) {
            data = textarea._ckeditorInstance.getData();
        } else {
            data = textarea.value;
        }

        // AJAX update to server
        fetch("{{ url('yayasan/transaksi/revisi-ajuan/update-rincian') }}/" + id, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ catatan: data })
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                document.getElementById('catatan' + id).value = data;
                Swal.fire('Berhasil!', 'Rincian item berhasil diperbarui.', 'success');
                //reload
                location.reload();
            } else {
                Swal.fire('Gagal!', 'Gagal memperbarui rincian item.', 'error');
                location.reload();
            }
        })
        .catch(() => {
            Swal.fire('Gagal!', 'Terjadi kesalahan saat memperbarui rincian.', 'error');
            location.reload();
        });

        const modal = bootstrap.Modal.getInstance(rincianModal);
        modal.hide();
    }

    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; // Button that triggered the modal
        var detailId = button.getAttribute('data-detail-id');
        document.getElementById('detail_id').value = detailId;
        // Clear previous file input
        document.getElementById('formFile').value = '';
    });

        imagePreviewModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget; // Button that triggered the modal
        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; // Button that triggered the modal
        var pdfUrl = button.getAttribute('data-pdf-url');
        var fileName = button.getAttribute('data-file-name');
        
        document.getElementById('pdfPreviewFrame').src = pdfUrl;
        document.getElementById('pdfFileName').textContent = fileName;
    });

        document.getElementById('uploadForm').addEventListener('submit', function (e) {
            e.preventDefault();

            const fileInput = document.getElementById('formFile');
            const file = fileInput.files[0];

            if (!file) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops!',
                    text: 'Silakan pilih file terlebih dahulu.',
                });
                return;
            }


            const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png', 'image/gif'];
            if (!allowedTypes.includes(file.type)) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops!',
                    text: 'Hanya file PDF atau gambar (JPG, PNG, GIF) yang diperbolehkan.',
                });
                return;
            }

            const formData = new FormData();
            formData.append('file', file);
            formData.append('detail_id', document.getElementById('detail_id').value);
            formData.append('_token', '{{ csrf_token() }}');
            fetch('{{ route("yayasan.transaksi.revisi-ajuan.upload") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => {
                if (response.ok) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: 'File berhasil diunggah!',
                    }).then(() => {
                        var modal = bootstrap.Modal.getInstance(uploadModal);
                        modal.hide();
                        fileInput.value = '';
                        location.reload(); // or update UI dynamically here instead
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: 'Gagal mengunggah file.',
                    });
                }
            })
            .catch(error => {
                console.error('Terjadi kesalahan:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Kesalahan!',
                    text: 'Terjadi kesalahan saat mengunggah file.',
                });
            });

        });
    });
</script>

@endsection