@extends('layouts.app')

@section('content')
<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">Daftar Nota Pengeluaran Kas</h3>
            <div class="nk-block-des text-soft">
                <p>Manajemen nota pengeluaran kas.</p>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <!-- Filter Bulan & Tahun -->
        <form method="GET" class="row g-2 align-items-center">
            <div class="col-md-3">
                <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-3">
                <input type="number" name="tahun" value="{{ $tahun }}" class="form-control" placeholder="Tahun">
            </div>
            <div class="col-md-3">
                <button class="btn btn-primary">
                     <em class="icon ni ni-filter"></em> Filter
                </button>
                <a href="{{ route('yayasan.transaksi.exportExcel', ['bulan' => $bulan, 'tahun' => $tahun]) }}" class="btn btn-success">
                     <em class="icon ni ni-file-excel"></em> Export
                </a>
            </div>
        </form>
    </div>
</div>

<div class="card card-preview">
    <div class="card-inner border-bottom">
        <div class="card-title-group">
            <div class="card-title">
                <h5 class="title">Riwayat Nota</h5>
            </div>
            <div class="card-tools me-n1">
                <ul class="btn-toolbar gx-1">
                    <li>
                         <a href="{{ route('nota.create') }}" class="btn btn-primary-custom">
                            <em class="icon ni ni-plus"></em>
                            <span>Tambah Nota</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="table-responsive">
        <table class="table table-custom">
            <thead>
                <tr>
                    <th width="5%" class="text-center">No</th>
                    <th>Tanggal</th>
                    <th>Keterangan</th>
                    <th>Item</th>
                    <th class="text-end">Total</th>
                    <th width="15%" class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody id="table-body">
                <tr>
                    <td colspan="6" 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 nota, mohon tunggu...</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
@endsection

@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="6" class="text-center text-danger p-4">Gagal memuat data. Silakan refresh halaman.</td></tr>';
        });
    });

    function hapusNota(id) {
        Swal.fire({
            title: 'Hapus Nota?',
            text: "Data yang dihapus tidak bisa dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Ya, hapus!'
        }).then((result) => {
            if (result.isConfirmed) {
                // Use POST with _method override to avoid 403 blocks on DELETE verb
                let formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('_method', 'DELETE');

                fetch(`/yayasan/transaksi/nota/${id}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: formData
                })
                .then(async res => {
                     if (!res.ok) {
                        // Log raw response for debugging if not OK
                        const text = await res.text();
                        console.error('Delete response:', text);
                        throw new Error(res.status + ' ' + res.statusText);
                     }
                     return res.json();
                })
                .then(data => {
                    if (data.status === 'success') {
                        Swal.fire('Terhapus!', data.message, 'success').then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire('Gagal!', data.message, 'error');
                    }
                })
                .catch(err => {
                    Swal.fire('Gagal!', 'Terjadi kesalahan sistem: ' + err.message, 'error');
                });
            }
        })
    }
</script>
@endpush