@extends('layouts.app')

@section('title', 'Cetak C5 & Kwitansi')

@section('content')
<style>
    .c5-period-filters {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 1rem;
    }

    .c5-period-group { min-width: 0; }
    .c5-period-group--years { flex: 0 0 auto; }
    .c5-period-group--months { flex: 1 1 auto; }
    .c5-period-options { display: flex; flex-wrap: wrap; gap: .5rem; }

    .pkbm-master-page .c5-filter-link {
        display: inline-flex;
        min-height: 2.4rem;
        align-items: center;
        justify-content: center;
        border: 1px solid #dbe3ee;
        border-radius: .65rem;
        background: #fff;
        padding: .5rem .85rem;
        color: #475569;
        font-size: .78rem;
        font-weight: 600;
        line-height: 1.25;
        text-decoration: none;
        transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    }

    .pkbm-master-page .c5-filter-link:hover {
        border-color: #86efac;
        background: #f0fdf4;
        color: #166534;
    }

    .pkbm-master-page .c5-filter-link.is-active {
        gap: .4rem;
        border-color: #ccebdc;
        background: #eafaf2;
        color: #08764f;
        box-shadow: none;
    }

    .c5-filter-link__active-dot {
        width: .4rem;
        height: .4rem;
        flex: 0 0 auto;
        border-radius: 999px;
        background: #078354;
    }

    .c5-filter-link:not(.is-active) .c5-filter-link__active-dot { display: none; }

    .c5-month-options {
        border: 1px solid #e2e8f0;
        border-radius: .85rem;
        background: #f8fafc;
        padding: .65rem;
    }

    .pkbm-master-page .c5-print-button {
        min-height: 2.3rem;
        padding: .4rem .7rem;
        font-size: .76rem;
    }

    .c5-print-button__icon {
        display: inline-grid;
        width: 1.5rem;
        height: 1.5rem;
        place-items: center;
        border-radius: .4rem;
        background: #eff6ff;
        color: #1769d2;
        font-size: .85rem;
    }
    .c5-print-button--c5 .c5-print-button__icon { background: #fff1f2; color: #be123c; }
    .c5-print-button--receipt .c5-print-button__icon { background: #ecfdf5; color: #047857; }

    @media (max-width: 900px) {
        .c5-period-filters { flex-direction: column; gap: 1rem; }
        .c5-period-group--years, .c5-period-group--months { width: 100%; }
    }
</style>
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Manajemen SPJ</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Cetak C5 & Kwitansi</p>
            <h1 class="pkbm-dashboard__title">Cetak C5 & Kwitansi</h1>
            <p class="pkbm-dashboard__subtitle">Cetak formulir C.5 dan kwitansi untuk transaksi BKU.</p>
        </div>
    </header>
    @include('pkbm.spj.partials.navigation', ['menus' => $menus])
    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><div><p class="font-semibold">Terjadi kesalahan.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>
    @endif

    <section class="sp-card overflow-hidden">
        <div class="c5-period-filters">
            <div class="c5-period-group c5-period-group--years">
                <p class="mb-2 flex items-center gap-2 text-xs font-bold uppercase tracking-wide text-slate-500"><i class="bi bi-bookmark-fill" aria-hidden="true"></i>Tahun anggaran</p>
                <div class="c5-period-options">
                    @foreach ($years as $year)
                        <a href="{{ route('pkbm.spj.documents', ['tahun' => $year, 'bulan' => $filters['bulan']]) }}" class="c5-filter-link {{ (int) $filters['tahun'] === (int) $year ? 'is-active' : '' }}" aria-current="{{ (int) $filters['tahun'] === (int) $year ? 'true' : 'false' }}">
                            <span class="c5-filter-link__active-dot" aria-hidden="true"></span>{{ $year }}
                        </a>
                    @endforeach
                </div>
            </div>
            <div class="c5-period-group c5-period-group--months">
                <p class="mb-2 flex items-center gap-2 text-xs font-bold uppercase tracking-wide text-slate-500"><i class="bi bi-calendar-month" aria-hidden="true"></i>Bulan</p>
                <div class="c5-period-options c5-month-options">
                    <a href="{{ route('pkbm.spj.documents', ['tahun' => $filters['tahun'], 'bulan' => '']) }}" class="c5-filter-link {{ ! $filters['bulan'] ? 'is-active' : '' }}" aria-current="{{ ! $filters['bulan'] ? 'true' : 'false' }}">
                        <span class="c5-filter-link__active-dot" aria-hidden="true"></span>Sepanjang Tahun
                    </a>
                    @foreach (range(1, 12) as $month)
                        <a href="{{ route('pkbm.spj.documents', ['tahun' => $filters['tahun'], 'bulan' => $month]) }}" class="c5-filter-link {{ (int) $filters['bulan'] === $month ? 'is-active' : '' }}" aria-current="{{ (int) $filters['bulan'] === $month ? 'true' : 'false' }}">
                            <span class="c5-filter-link__active-dot" aria-hidden="true"></span>{{ \Carbon\Carbon::createFromDate(now()->year, $month, 1)->locale('id')->translatedFormat('F') }}
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="sp-card-header"><h2 class="sp-section-title">Daftar pengeluaran BKU @if ($filters['bulan'])— {{ \Carbon\Carbon::createFromDate(now()->year, $filters['bulan'], 1)->locale('id')->translatedFormat('F') }} @else— sepanjang tahun @endif ({{ $filters['tahun'] }})</h2><p class="mt-1 text-xs text-slate-500">Cetak C5 dan kwitansi untuk transaksi yang dipilih.</p></div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[62rem]">
            <thead><tr><th class="w-14 text-center">No.</th><th>No. bukti / tanggal</th><th>Uraian kegiatan</th><th>Kode rekening</th><th class="text-right">Jumlah</th><th class="text-center">Opsi cetak</th></tr></thead>
                <tbody>
                    @forelse ($records as $record)
                        <tr>
                            <td class="text-center">{{ $records->firstItem() + $loop->index }}</td>
                        <td><span class="block font-semibold">{{ $record->no_bukti }}</span><span class="mt-1 block text-xs text-slate-500">{{ \Carbon\Carbon::parse($record->tanggal)->format('d/m/Y') }}</span></td>
                        <td><span class="block">{{ $record->uraian }}</span><span class="mt-1 block text-xs italic text-slate-500">{{ $record->kode_kegiatan ?: '—' }}</span></td>
                        <td>{{ $record->kode_rekening ?: '—' }}</td>
                        <td class="text-right font-semibold">Rp {{ number_format($record->pengeluaran, 0, ',', '.') }}</td>
                        <td class="text-center"><div class="flex justify-center gap-2"><a href="{{ route('pkbm.spj.print.c5', $record->id) }}" target="_blank" rel="noopener" class="sp-btn-secondary c5-print-button c5-print-button--c5"><span class="c5-print-button__icon"><i class="bi bi-file-earmark-text" aria-hidden="true"></i></span>Cetak C5</a><a href="{{ route('pkbm.spj.print.receipt', $record->id) }}" target="_blank" rel="noopener" class="sp-btn-secondary c5-print-button c5-print-button--receipt"><span class="c5-print-button__icon"><i class="bi bi-receipt-cutoff" aria-hidden="true"></i></span>Kwitansi</a></div></td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="py-8 text-center text-sm text-slate-500">Tidak ada transaksi BKU pada periode ini.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($records->hasPages())<div class="p-4">{{ $records->links() }}</div>@endif
    </section>
</div>
@endsection