@extends('layouts.app')
@section('title', 'Database Transaksi')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span><i class="bi bi-database-fill text-hijau"></i> Master Database Transaksi</span>
        <div class="d-flex gap-2">
            <a href="{{ route('payments.backup') }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-download"></i> Backup Transaksi (CSV)</a>
            <a href="{{ route('payments.backup.full') }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-file-earmark-zip"></i> Backup Lengkap (JSON)</a>
            <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#modalKosongkan"><i class="bi bi-trash3"></i> Kosongkan Data</button>
        </div>
    </div>
    <div class="card-body">
        <form class="row g-2 mb-3" method="GET">
            <div class="col-md-4"><input type="text" name="q" value="{{ $q }}" class="form-control" placeholder="Cari no transaksi / siswa..."></div>
            <div class="col-md-3"><input type="date" name="dari" value="{{ $dari }}" class="form-control" title="Dari tanggal"></div>
            <div class="col-md-3"><input type="date" name="sampai" value="{{ $sampai }}" class="form-control" title="Sampai tanggal"></div>
            <div class="col-md-2 d-grid"><button class="btn btn-primary"><i class="bi bi-funnel"></i> Filter</button></div>
        </form>

        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead><tr><th>No Transaksi</th><th>Tanggal</th><th>Siswa</th><th>Rincian</th><th class="text-end">Total</th><th class="text-end">Aksi</th></tr></thead>
                <tbody>
                @forelse($payments as $p)
                    <tr>
                        <td class="fw-semibold">{{ $p->no_transaksi }}</td>
                        <td>{{ $p->tanggal->translatedFormat('d M Y') }}</td>
                        <td>{{ $p->student->nama ?? '-' }}<br><small class="text-muted">{{ $p->student->no_induk ?? '' }} · {{ $p->student->kelas ?? '' }}</small></td>
                        <td><small class="text-muted">{{ $p->items->pluck('nama_jenis')->take(3)->implode(', ') }}{{ $p->items->count()>3?'…':'' }}</small></td>
                        <td class="text-end fw-bold text-hijau">{{ rp($p->total) }}</td>
                        <td class="text-end text-nowrap">
                            <a href="{{ route('payments.kwitansi', $p) }}" class="btn btn-sm btn-outline-primary" title="Kwitansi"><i class="bi bi-receipt"></i></a>
                            <form action="{{ route('payments.destroy', $p) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus transaksi {{ $p->no_transaksi }}?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger" title="Hapus"><i class="bi bi-trash"></i></button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="text-center text-muted py-4">Belum ada transaksi.</td></tr>
                @endforelse
                </tbody>
                @if($payments->count())
                <tfoot><tr class="table-light"><th colspan="4" class="text-end">Total halaman ini</th><th class="text-end text-hijau">{{ rp($totalTampil) }}</th><th></th></tr></tfoot>
                @endif
            </table>
        </div>
        {{ $payments->links() }}
    </div>
</div>

{{-- Modal Kosongkan --}}
<div class="modal fade" id="modalKosongkan" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content rounded-soft">
            <form method="POST" action="{{ route('payments.clear') }}">
                @csrf
                <div class="modal-header"><h5 class="modal-title text-danger"><i class="bi bi-exclamation-triangle"></i> Kosongkan Semua Transaksi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <p>Fitur ini untuk <b>memulai tahun ajaran baru</b>. Seluruh data transaksi akan dihapus permanen (data siswa &amp; setelan tetap aman).</p>
                    <p class="text-danger small"><b>Disarankan klik "Backup (CSV)" terlebih dahulu.</b></p>
                    <label class="form-label">Ketik <b>KOSONGKAN</b> untuk konfirmasi:</label>
                    <input type="text" name="konfirmasi" class="form-control" placeholder="KOSONGKAN" required>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Batal</button>
                    <button class="btn btn-danger"><i class="bi bi-trash3"></i> Kosongkan Sekarang</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection