@extends('layouts.app')

@section('title', 'Laporan')

@push('styles')
    <style>
        .report-page {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .report-filter-card,
        .report-table-card,
        .report-stat-card {
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            background: var(--surface-card);
            box-shadow: var(--shadow-sm);
        }

        .report-print-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            min-width: 170px;
            height: 48px;
        }

        .report-export-actions {
            display: flex;
            justify-content: flex-end;
            gap: .75rem;
            flex-wrap: wrap;
        }

        .report-filter-card,
        .report-table-card {
            padding: 1.4rem;
        }

        .report-section-head,
        .report-table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .report-section-head h3,
        .report-table-header h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 700;
        }

        .report-badge {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .45rem .8rem;
            border-radius: 999px;
            background: var(--surface-soft);
            border: 1px solid var(--border);
            color: var(--text-soft);
            font-size: .82rem;
            font-weight: 600;
        }

        .report-filter-card .form-control,
        .report-filter-card .form-select {
            min-height: 48px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-strong);
            background: #ffffff;
            color: var(--text);
        }

        .report-filter-actions {
            display: grid;
            gap: .75rem;
        }

        .report-tag {
            display: inline-flex;
            padding: .35rem .7rem;
            border-radius: 999px;
            background: var(--surface-muted);
            color: var(--text);
        }

        .report-amount-income {
            color: #15803d;
            font-weight: 400;
        }

        .report-amount-expense {
            color: #b91c1c;
            font-weight: 400;
        }

        .report-filter-card .row {
            align-items: end;
        }

        .report-filter-card .btn {
            height: 48px;
        }

        .report-pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

        .report-pagination .pagination {
            margin-bottom: 0;
        }

        .report-table {
            width: 100%;
        }

        .report-pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .report-pagination .pagination {
            margin-bottom: 0;
        }

        .report-pagination .text-muted {
            font-size: 14px;
        }

        .report-pagination nav {
            margin-left: auto;
        }

        .report-table th {
            white-space: nowrap;
        }

        @media(max-width:992px) {

            .report-section-head,
            .report-table-header {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        .report-table th,
        .report-table td {
            text-align: center !important;
            vertical-align: middle;
        }
    </style>
@endpush

@section('content')

    @php
        $periode = $filters['periode'] ?? 'bulanan';
        $jumlahBaris = $rows->total();
        $saldoClass = $saldo < 0 ? 'text-danger' : 'text-primary';
    @endphp
    <div>
        <h1 class="page-title">Laporan</h1>
    </div>

    <div class="report-page">
        <div class="report-export-actions mb-3">
            <a href="{{ route('laporan.excel', request()->query()) }}" class="btn btn-success report-print-btn">
                <i class="bi bi-file-earmark-excel me-2"></i>
                Export Excel
            </a>

            <a href="{{ route('laporan.print', request()->query()) }}" target="_blank"
                class="btn btn-danger report-print-btn">
                <i class="bi bi-filetype-pdf me-2"></i>
                Print PDF
            </a>
        </div>

        <section class="report-filter-card">

            <form method="GET" action="{{ route('laporan.index') }}">
                <div class="row g-3 align-items-end">

                    <div class="col-md-4">
                        <label for="bulan" class="form-label">Bulan</label>
                        <input type="month" class="form-control" id="bulan" name="bulan"
                            value="{{ $filters['bulan'] ?? '' }}">
                    </div>

                    <div class="col-md-4">
                        <label for="tipe" class="form-label">Jenis Transaksi</label>
                        <select class="form-select" id="tipe" name="tipe">
                            <option value="semua" {{ ($filters['tipe'] ?? 'semua') == 'semua' ? 'selected' : '' }}>Semua
                            </option>
                            <option value="pemasukan" {{ ($filters['tipe'] ?? '') == 'pemasukan' ? 'selected' : '' }}>
                                Pemasukan</option>
                            <option value="pengeluaran" {{ ($filters['tipe'] ?? '') == 'pengeluaran' ? 'selected' : '' }}>
                                Pengeluaran</option>
                        </select>
                    </div>

                    <div class="col-md-4">
                        <button type="submit" class="btn btn-brand w-100">
                            <i class="bi bi-search me-1"></i>
                            Tampilkan
                        </button>
                    </div>

                </div>
            </form>
        </section>

        <section class="report-table-card">

            <div class="report-table-header">
                <h3>Laporan Transaksi</h3>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered align-middle report-table text-center w-100">
                    <thead>
                        <tr>
                            <th class="text-center">Tanggal</th>
                            <th class="text-center">Nama Kategori</th>
                            <th class="text-center">Kuantitas</th>
                            <th class="text-center">Satuan</th>
                            <th class="text-center">Nominal</th>
                            <th class="text-center">Kategori</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse($rows as $row)
                            <tr>
                                <td class="text-center">{{ $row['tanggal'] }}</td>

                                <td class="text-center">{{ $row['nama_kategori'] }}</td>

                                <td class="text-center">{{ $row['kuantitas'] }}</td>

                                <td class="text-center">{{ $row['satuan'] }}</td>

                                <td
                                    class="text-center {{ strtolower($row['kategori']) == 'pemasukan' ? 'report-amount-income' : 'report-amount-expense' }}">
                                    Rp {{ number_format((float) $row['nominal'], 0, ',', '.') }}
                                </td>
                                <td class="text-center">
                                    <span class="role-badge {{ strtolower($row['kategori']) }}">
                                        {{ $row['kategori'] }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-4">
                                    Belum ada data laporan.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="report-pagination">
                <small class="text-muted">
                    Menampilkan {{ $rows->firstItem() ?? 0 }}
                    sampai {{ $rows->lastItem() ?? 0 }}
                    dari {{ $rows->total() }} data
                </small>

                {{ $rows->onEachSide(2)->links('pagination::bootstrap-5') }}
            </div>

        </section>
    </div>
@endsection