@extends('layouts.app')

@section('title', 'Dashboard')

@push('styles')
    <style>
        .dashboard-top-row {
            --bs-gutter-y: 1rem;
        }

        .dashboard-summary-card {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 15px;
            padding: .75rem 1rem;
            min-height: 80px;
            border-radius: 14px;
            border-left: 4px solid;
            background: #fff;
            box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
            transition: .25s ease;
        }

        .dashboard-summary-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(15, 23, 42, .12);
        }

        .dashboard-summary-content {
            flex: 1;
        }

        .dashboard-summary-card .summary-label {
            font-size: .78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .03em;
            line-height: 1.2;
            margin-bottom: .25rem;
        }

        .dashboard-summary-card .summary-value {
            font-size: 1.45rem;
            line-height: 1.15;
            letter-spacing: -0.01em;
            font-variant-numeric: tabular-nums;
        }

        .dashboard-summary-icon {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 48px;
            height: 48px;
            border-radius: 12px;

            color: #fff;
            flex-shrink: 0;
        }

        /* =========================
           PEMASUKAN
        ========================= */

        .dashboard-summary-card-income {
            background: #fefefe;
            border-left-color: #0E703C;
        }

        .dashboard-summary-card-income .summary-label {
            color: #0B5D33;
        }

        .dashboard-summary-card-income .dashboard-summary-icon {
            background: #0E703C;
            box-shadow: 0 8px 20px rgba(14, 112, 60, .25);
        }

        /* =========================
           PENGELUARAN
        ========================= */

        .dashboard-summary-card-expense {
            background: #fefefe;
            border-left-color: #C46A00;
        }

        .dashboard-summary-card-expense .summary-label {
            color: #A45700;
        }

        .dashboard-summary-card-expense .dashboard-summary-icon {
            background: #D97706;
            box-shadow: 0 8px 20px rgba(217, 119, 6, .25);
        }

        /* =========================
           SALDO
        ========================= */

        .dashboard-summary-card-balance {
            background: #fefefe;
            border-left-color: #2563EB;
        }

        .dashboard-summary-card-balance .summary-label {
            color: #1D4ED8;
        }

        .dashboard-summary-card-balance .dashboard-summary-icon {
            background: #2563EB;
            box-shadow: 0 8px 20px rgba(37, 99, 235, .25);
        }

        /* =========================
           PANEL
        ========================= */

        .dashboard-panel {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
        }

        .dashboard-panel .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: 1.25rem;
            background: #fff;
            border-bottom: 1px solid #f1f5f9;
        }

        .dashboard-panel-title {
            margin: 0;
            font-size: 1.05rem;
            font-weight: 700;
            color: #3f3f46;
            line-height: 1.25;
        }

        .dashboard-panel-subtitle {
            margin-top: .3rem;
            font-size: .9rem;
            color: #71717a;
            line-height: 1.35;
        }

        .dashboard-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: .45rem .9rem;
            border-radius: 8px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #64748b;
            font-size: .8rem;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: .01em;
        }

        .dashboard-chart-wrap {
            position: relative;
            height: 320px;
        }

        .dashboard-panel .card-body {
            padding: 1.25rem;
        }

        .dashboard-table-wrap {
            padding: 0;
        }

        .dashboard-summary-table thead th {
            white-space: nowrap;
            font-size: .85rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .dashboard-summary-table th,
        .dashboard-summary-table td {
            vertical-align: middle;
        }

        .dashboard-summary-table tbody td {
            padding: .75rem .8rem;
            line-height: 1.25;
        }

        .dashboard-summary-table tbody td:first-child {
            font-weight: 600;
            color: #44403c;
        }

        .dashboard-month-badge {
            background: transparent;
            border: none;
            padding: 0;
        }

        .dashboard-amount {
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        .dashboard-amount-income {
            color: #15803d;
        }

        .dashboard-amount-expense {
            color: #dc2626;
        }

        .dashboard-amount-balance {
            color: #2563eb;
        }

        .dashboard-amount-balance.negative {
            color: #dc2626;
        }

        .dashboard-empty-state {
            padding: 1.5rem;
            text-align: center;
            color: #6b7280;
        }

        @media (max-width:991.98px) {
            .dashboard-chart-wrap {
                height: 260px;
            }

            .dashboard-panel .card-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .dashboard-summary-table th,
            .dashboard-summary-table td {
                white-space: normal;
            }
        }

        @media (max-width:767.98px) {
            .dashboard-summary-card {
                padding: .95rem;
            }

            .dashboard-summary-card .summary-value {
                font-size: 1.35rem;
            }

            .dashboard-summary-icon {
                width: 46px;
                height: 46px;
                font-size: 1.3rem;
            }

            .dashboard-panel .card-header,
            .dashboard-panel .card-body {
                padding: 1rem;
            }

            .dashboard-badge {
                font-size: .75rem;
            }

            .dashboard-summary-table tbody td {
                font-size: .88rem;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $saldo = $totalPemasukan - $totalPengeluaran;
    @endphp

    <div class="page-header">
        <div>
            <h1 class="page-title">Dashboard</h1>
        </div>
    </div>

    <div class="section-stack">

        <div class="row g-3 dashboard-top-row">

            <div class="col-md-4">
                <div class="summary-card dashboard-summary-card dashboard-summary-card-income">
                    <div class="dashboard-summary-content">
                        <div class="summary-label">Total Pemasukan</div>
                        <p class="summary-value fw-bold mb-0">
                            Rp {{ number_format($totalPemasukan, 0, ',', '.') }}
                        </p>
                    </div>
                    <span class="dashboard-summary-icon">
                        <i class="bi bi-graph-up-arrow"></i>
                    </span>
                </div>
            </div>

            <div class="col-md-4">
                <div class="summary-card dashboard-summary-card dashboard-summary-card-expense">
                    <div class="dashboard-summary-content">
                        <div class="summary-label">
                            Total Pengeluaran
                        </div>

                        <p class="summary-value fw-bold mb-0">
                            Rp {{ number_format($totalPengeluaran, 0, ',', '.') }}
                        </p>
                    </div>
                    <span class="dashboard-summary-icon">
                        <i class="bi bi-wallet2"></i>
                    </span>
                </div>
            </div>

            <div class="col-md-4">
                <div class="summary-card dashboard-summary-card dashboard-summary-card-balance">
                    <div class="dashboard-summary-content">
                        <div class="summary-label">
                            Saldo (Pemasukan - Pengeluaran)
                        </div>

                        <p class="summary-value fw-bold mb-0">
                            Rp {{ number_format($saldo, 0, ',', '.') }}
                        </p>
                    </div>
                    <span class="dashboard-summary-icon">
                        <i class="bi bi-cash-stack"></i>
                    </span>
                </div>
            </div>

        </div>

        <div class="dashboard-panel">

            <div class="card-header d-flex justify-content-between align-items-center">

                <h3 class="dashboard-panel-title mb-0">
                    Grafik Pengeluaran dan Pemasukan
                </h3>

                <form method="GET" class="d-flex align-items-center gap-2">
                    <label for="tahun" class="mb-0 fw-semibold text-muted">
                        Tahun
                    </label>

                    <select id="tahun" name="tahun" class="form-select form-select-sm" style="width:110px"
                        onchange="this.form.submit()">

                        @foreach($tahunList as $th)
                            <option value="{{ $th }}" {{ $tahunDipilih == $th ? 'selected' : '' }}>
                                {{ $th }}
                            </option>
                        @endforeach

                    </select>
                </form>

            </div>

            <div class="card-body">

                @if(count($chartData) == 0)

                    <div class="dashboard-empty-state">
                        Belum ada data transaksi.
                    </div>

                @else

                    <div class="dashboard-chart-wrap">
                        <canvas id="chart"></canvas>
                    </div>

                @endif

            </div>

        </div>

        @if (count($chartData) > 0)

            <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>

            <script>
                const data = @json($chartData);

                const labels = data.map(x => x.bulan);
                const pemasukan = data.map(x => x.pemasukan);
                const pengeluaran = data.map(x => x.pengeluaran);

                new Chart(document.getElementById('chart'), {
                    type: 'bar',
                    data: {
                        labels,
                        datasets: [
                            {
                                label: 'Pemasukan',
                                data: pemasukan,
                                backgroundColor: 'rgba(59, 130, 246, .82)'
                            },
                            {
                                label: 'Pengeluaran',
                                data: pengeluaran,
                                backgroundColor: 'rgba(245, 158, 11, .82)'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });

            </script>

        @endif


@endsection