@extends('layouts.app')

@section('content')
<div class="card mb-3">
    <div class="card-body">
        <!-- Filter Bulan, Tahun & Unit -->
        <form method="GET" class="row g-2 align-items-center">
            <div class="col-md-3">
                <label class="form-label fs-12px mb-1 text-muted">Bulan</label>
                <select name="bulan" class="form-select">
                    @for($i = 1; $i <= 12; $i++)
                    <option value="{{ sprintf('%02d',$i) }}" {{ $bulan == sprintf('%02d',$i) ? 'selected' : '' }}>
                        {{ DateTime::createFromFormat('!m', $i)->format('F') }}
                    </option>
                    @endfor
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label fs-12px mb-1 text-muted">Tahun</label>
                <input type="number" name="tahun" value="{{ $tahun }}" class="form-control" placeholder="Tahun">
            </div>

            @if($isYayasan ?? true)
            <div class="col-md-4">
                <label class="form-label fs-12px mb-1 text-muted">Unit Asal</label>
                <select name="unit_id" class="form-select">
                    <option value="all" {{ ($selectedUnit ?? 'all') == 'all' ? 'selected' : '' }}>— Semua Unit Sekolah / Lembaga —</option>
                    @foreach($units as $u)
                        <option value="{{ $u->kode_unit }}" {{ ($selectedUnit ?? '') == $u->kode_unit ? 'selected' : '' }}>
                            {{ $u->nama_unit }} (Kode: {{ $u->kode_unit }})
                        </option>
                    @endforeach
                </select>
            </div>
            @endif

            <div class="col-md-3 d-flex align-items-end gap-1" style="margin-top: auto;">
                <button class="btn btn-primary">
                     <em class="icon ni ni-filter"></em> Filter
                </button>
                <a href="{{ route('yayasan.transaksi.penerimaan-kas.exportExcel', ['bulan' => $bulan, 'tahun' => $tahun, 'unit_id' => $selectedUnit ?? 'all']) }}" class="btn btn-success">
                     <em class="icon ni ni-file-excel"></em> Export
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Widget Rekapitulasi per Unit -->
@if(isset($summaryPerUnit) && $summaryPerUnit->count() > 0)
<div class="card mb-3 border-0 shadow-sm" style="background: #f8fafc; border-left: 4px solid #388bfd !important;">
    <div class="card-body p-3">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="fw-bold text-dark fs-14px">
                📊 Rekapitulasi Penerimaan per Unit — {{ DateTime::createFromFormat('!m', (int)$bulan)->format('F') }} {{ $tahun }}
            </span>
            <span class="badge bg-success fs-13px px-3 py-1">
                Total Masuk: Rp {{ number_format($totalPenerimaanBulan ?? 0, 0, ',', '.') }}
            </span>
        </div>
        <div class="row g-2">
            @foreach($summaryPerUnit as $su)
            <div class="col-md-3 col-sm-6">
                <a href="?bulan={{ $bulan }}&tahun={{ $tahun }}&unit_id={{ $su->kode_unit }}" class="text-decoration-none">
                    <div class="p-2 border rounded bg-white h-100 d-flex flex-column justify-content-between {{ ($selectedUnit ?? '') == $su->kode_unit ? 'border-primary shadow-sm bg-primary-soft' : '' }}">
                        <div class="d-flex justify-content-between align-items-start">
                            <span class="fw-bold text-dark text-truncate" style="max-width: 140px;" title="{{ $su->nama_unit }}">{{ $su->nama_unit }}</span>
                            <span class="badge bg-light text-muted border">{{ $su->jml_tx }} tx</span>
                        </div>
                        <div class="text-primary fw-bold fs-13px mt-1">
                            Rp {{ number_format($su->total_nominal, 0, ',', '.') }}
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif

<div class="card card-preview">
    <div class="card-inner border-bottom">
        <div class="card-title-group">
            <div class="card-title">
                <h5 class="title">Riwayat Penerimaan Kas</h5>
            </div>
            <div class="card-tools me-n1">
                <ul class="btn-toolbar gx-1">
                    <li>
                         <a href="{{ route('yayasan.transaksi.penerimaan-kas.sync') }}" class="btn btn-info" id="syncButton" aria-label="Synchronize receipt data from server">
                            <em class="icon ni ni-reload"></em>
                            <span>Sync Data</span>
                        </a>
                    </li>
                    <li>
                         <a href="{{ route('yayasan.transaksi.penerimaan-kas.create') }}" class="btn btn-primary-custom">
                            <em class="icon ni ni-plus"></em>
                            <span>Tambah Transaksi</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="table-responsive">
        <table class="table table-custom">
            <thead>
                <tr>
                    <th width="4%" class="text-center">No</th>
                    <th>Tanggal</th>
                    <th>Unit Asal</th>
                    <th>Akun Kas Penerima</th>
                    <th>Akun Pendapatan</th>
                    <th>Keterangan</th>
                    <th class="text-end">Total</th>
                    <th width="12%" class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody id="table-body">
                <tr>
                    <td colspan="8" class="text-center p-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div class="mt-2 text-muted">Sedang mengambil data penerimaan kas, mohon tunggu...</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableBody = document.getElementById('table-body');
    const url = new URL(window.location.href);
    
    fetch(url.toString(), {
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.text())
    .then(html => {
        tableBody.innerHTML = html;
    })
    .catch(error => {
        tableBody.innerHTML = '<tr><td colspan="7" class="text-center text-danger p-4">Gagal memuat data. Silakan refresh halaman.</td></tr>';
    });

    const syncButton = document.getElementById('syncButton');
    const previewSyncButton = document.getElementById('previewSyncButton');
    
    if (syncButton) {
        syncButton.addEventListener('click', function(e) {
            e.preventDefault();
            
            Swal.fire({
                title: 'Sinkronisasi Data Penerimaan?',
                text: 'Proses ini akan mengambil data terbaru dari server dan mungkin memakan waktu beberapa menit.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Sync Sekarang',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#5ce0aa'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading state
                    Swal.fire({
                        title: 'Sedang Sinkronisasi...',
                        html: 'Mohon tunggu, sedang mengambil dan memproses data dari server.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    
                    // Trigger sync via fetch
                    fetch(syncButton.href)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('HTTP error! status: ' + response.status);
                            }
                            return response.json();
                        })
                        .then(data => {
                            Swal.close();
                            
                            if (data.status === 'success') {
                                let message = data.message || 'Sinkronisasi berhasil!';
                                
                                // Format detail message - escape values to prevent XSS
                                if (data.data) {
                                    message += '<br><br>';
                                    message += '<div class="text-start">';
                                    if (data.data.inserted) {
                                        const inserted = parseInt(data.data.inserted) || 0;
                                        message += '✓ Data baru: ' + inserted + '<br>';
                                    }
                                    if (data.data.updated) {
                                        const updated = parseInt(data.data.updated) || 0;
                                        message += '✓ Data diupdate: ' + updated + '<br>';
                                    }
                                    if (data.data.skipped) {
                                        const skipped = parseInt(data.data.skipped) || 0;
                                        message += '✓ Data dilewati: ' + skipped + '<br>';
                                    }
                                    if (data.data.total_processed) {
                                        const total = parseInt(data.data.total_processed) || 0;
                                        message += '<strong>Total diproses: ' + total + '</strong>';
                                    }
                                    message += '</div>';
                                }
                                
                                Swal.fire({
                                    title: 'Sinkronisasi Berhasil!',
                                    html: message,
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                }).then(() => {
                                    // Reload page to show updated data
                                    window.location.reload();
                                });
                            } else {
                                Swal.fire({
                                    title: 'Sinkronisasi Gagal',
                                    text: data.message || 'Terjadi kesalahan saat sinkronisasi data.',
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            }
                        })
                        .catch(error => {
                            Swal.close();
                            console.error('Sync error:', error);
                            Swal.fire({
                                title: 'Kesalahan',
                                text: 'Gagal melakukan sinkronisasi. Periksa koneksi dan coba lagi.',
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        });
                }
            });
        });
    }

    if (previewSyncButton) {
        previewSyncButton.addEventListener('click', function(e) {
            e.preventDefault();

            Swal.fire({
                title: 'Cek Endpoint Baru?',
                text: 'Data hanya dipreview dan tidak disimpan ke database.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Tampilkan Preview',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#f4bd0e'
            }).then((result) => {
                if (!result.isConfirmed) {
                    return;
                }

                Swal.fire({
                    title: 'Mengambil data endpoint...',
                    html: 'Mohon tunggu sebentar.',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                fetch(previewSyncButton.href)
                    .then(async (response) => {
                        const data = await response.json().catch(() => null);

                        // Fallback aman: jika payload JSON menyatakan sukses, lanjutkan sebagai sukses
                        // meskipun status HTTP bukan 2xx.
                        if (data && data.status === 'success') {
                            return data;
                        }

                        if (!response.ok) {
                            const errorMessage = (data && data.message)
                                ? data.message
                                : ('HTTP error! status: ' + response.status);
                            const error = new Error(errorMessage);
                            error.payload = data || {};
                            throw error;
                        }

                        if (!data) {
                            throw new Error('Respons preview tidak valid (bukan JSON).');
                        }

                        return data;
                    })
                    .then(data => {
                        Swal.close();

                        const summary = data.summary || {};
                        const analyzedRows = Array.isArray(data.analyzed_rows) ? data.analyzed_rows : [];
                        const escapeHtml = (value) => {
                            const str = String(value ?? '');
                            return str
                                .replace(/&/g, '&amp;')
                                .replace(/</g, '&lt;')
                                .replace(/>/g, '&gt;')
                                .replace(/"/g, '&quot;')
                                .replace(/'/g, '&#039;');
                        };

                        const rowsHtml = analyzedRows.map((row) => {
                            const reasonText = String(row.reason || '').toLowerCase();
                            const isUpToDate = row.status === 'SKIP' && reasonText.includes('up-to-date');

                            let badgeClass = 'badge badge-secondary';
                            let rowStyle = '';

                            if (isUpToDate) {
                                badgeClass = 'badge badge-success';
                                rowStyle = 'background:#eafaf1;';
                            } else if (row.status === 'INSERT' || row.status === 'UPDATE') {
                                badgeClass = 'badge badge-warning';
                                rowStyle = 'background:#fff8e1;';
                            } else if (row.status === 'SKIP') {
                                badgeClass = 'badge badge-danger';
                                rowStyle = 'background:#fdecea;';
                            }

                            const statusLabel = isUpToDate ? 'UP TO DATE' : row.status;

                            return '<tr style="' + rowStyle + '">'
                                + '<td>' + escapeHtml(row.no) + '</td>'
                                + '<td><span class="' + badgeClass + '">' + escapeHtml(statusLabel) + '</span></td>'
                                + '<td>' + escapeHtml(row.kodejenjang || '-') + '</td>'
                                + '<td>' + escapeHtml(row.unit || '-') + '</td>'
                                + '<td>' + escapeHtml((row.bulan || '-') + '/' + (row.tahun || '-')) + '</td>'
                                + '<td class="text-end">' + escapeHtml((Number(row.nominal_preview || 0)).toLocaleString('id-ID')) + '</td>'
                                + '<td>' + escapeHtml(row.reason || '-') + '</td>'
                                + '</tr>';
                        }).join('');

                        const html = '<div class="text-start" style="max-height:520px;overflow:auto;">'
                            + '<p><strong>Endpoint:</strong> ' + (summary.endpoint || '-') + '</p>'
                            + '<p><strong>Pola Request:</strong> ' + (summary.attempt_used || '-') + '</p>'
                            + '<p><strong>Total Data:</strong> ' + (summary.total_records || 0) + ' baris</p>'
                            + '<p><strong>Insert:</strong> ' + (summary.insert_count || 0)
                            + ' &nbsp; <strong>Update:</strong> ' + (summary.update_count || 0)
                            + ' &nbsp; <strong>Skip:</strong> ' + (summary.skip_count || 0) + '</p>'
                            + '<p><span class="badge badge-success">HIJAU</span> up-to-date'
                            + ' &nbsp; <span class="badge badge-warning">KUNING</span> perlu insert/update'
                            + ' &nbsp; <span class="badge badge-danger">MERAH</span> skip bermasalah</p>'
                            + '<hr>'
                            + '<p><strong>Semua Data (dengan status preview):</strong></p>'
                            + '<div style="max-height:360px;overflow:auto;border:1px solid #e5e9f2;border-radius:6px;">'
                            + '<table class="table table-sm table-bordered mb-0">'
                            + '<thead style="position:sticky;top:0;background:#f7f9fc;z-index:1;">'
                            + '<tr>'
                            + '<th>No</th><th>Status</th><th>Kode Jenjang</th><th>Unit</th><th>Periode</th><th class="text-end">Nominal</th><th>Alasan</th>'
                            + '</tr>'
                            + '</thead><tbody>'
                            + rowsHtml
                            + '</tbody></table></div>'
                            + '</div>';

                        Swal.fire({
                            title: 'Preview Endpoint Baru',
                            html: html,
                            width: 900,
                            icon: 'info',
                            confirmButtonText: 'Tutup'
                        });
                    })
                    .catch(error => {
                        Swal.close();

                        const payload = error.payload || {};
                        const upstreamStatus = payload.upstream_status || '-';
                        const upstreamBody = payload.upstream_body || '(kosong)';
                        const debugInfo = payload.debug || {};
                        const debugAttempts = payload.debug_attempts || [];

                        Swal.fire({
                            title: 'Gagal Ambil Preview',
                            html: '<div class="text-start" style="max-height:420px;overflow:auto;">'
                                + '<p><strong>Pesan:</strong> ' + (error.message || 'Terjadi kesalahan saat mengambil data endpoint.') + '</p>'
                                + '<p><strong>Upstream Status:</strong> ' + upstreamStatus + '</p>'
                                + '<p><strong>Debug:</strong></p>'
                                + '<pre style="white-space:pre-wrap;word-break:break-word;background:#f8f9fa;padding:8px;border-radius:6px;">'
                                + JSON.stringify(debugInfo, null, 2)
                                + '</pre>'
                                + '<p><strong>Upstream Body:</strong></p>'
                                + '<pre style="white-space:pre-wrap;word-break:break-word;background:#f8f9fa;padding:8px;border-radius:6px;">'
                                + upstreamBody
                                + '</pre>'
                                + '<p><strong>Debug Attempts:</strong></p>'
                                + '<pre style="white-space:pre-wrap;word-break:break-word;background:#f8f9fa;padding:8px;border-radius:6px;">'
                                + JSON.stringify(debugAttempts, null, 2)
                                + '</pre>'
                                + '</div>',
                            icon: 'error',
                            width: 900,
                            confirmButtonText: 'OK'
                        });
                    });
            });
        });
    }
});
</script>
@endpush
@endsection