@extends('layouts.app')

@section('page_title','Reports')

@section('content')

<div class="flex flex-col md:flex-row justify-between gap-3 mb-4">

    <div>
        <h2 class="text-[18px] font-semibold">
            Financial Reports
        </h2>

        <p class="fp-muted text-[11px] mt-1">
            Monthly, yearly or any custom date range.
            Print or download the filtered report.
        </p>
    </div>

    <div class="flex flex-wrap gap-2">

        <a
            target="_blank"
            href="{{ route('reports.print', [
                'from' => now()->startOfMonth()->toDateString(),
                'to'   => now()->endOfMonth()->toDateString()
            ]) }}"
            class="fp-btn fp-soft"
        >
            🖨 This Month
        </a>

        <a
            target="_blank"
            href="{{ route('reports.print', [
                'from' => now()->startOfYear()->toDateString(),
                'to'   => now()->endOfYear()->toDateString()
            ]) }}"
            class="fp-btn fp-soft"
        >
            🖨 This Year
        </a>

    </div>

</div>


{{-- =========================================================
     REPORT FILTERS
     ========================================================= --}}

<form class="fp-card p-4 flex flex-wrap gap-3 mb-4">

    <div>

        <label class="text-[10px] font-semibold">
            From
        </label>

        <input
            type="date"
            name="from"
            value="{{ $from->toDateString() }}"
            class="fp-input mt-1"
        >

    </div>


    <div>

        <label class="text-[10px] font-semibold">
            To
        </label>

        <input
            type="date"
            name="to"
            value="{{ $to->toDateString() }}"
            class="fp-input mt-1"
        >

    </div>


    <button
        class="fp-btn fp-primary self-end"
    >
        Run Report
    </button>


    <div class="self-end flex gap-2">

        <a
            target="_blank"
            href="{{ route('reports.print', [
                'from' => $from->toDateString(),
                'to'   => $to->toDateString()
            ]) }}"
            class="fp-btn fp-soft"
        >
            🖨 Print
        </a>

        <a
            href="{{ route('reports.pdf', [
                'from' => $from->toDateString(),
                'to'   => $to->toDateString()
            ]) }}"
            class="fp-btn fp-soft"
        >
            PDF
        </a>

        <a
            href="{{ route('reports.xlsx', [
                'from' => $from->toDateString(),
                'to'   => $to->toDateString()
            ]) }}"
            class="fp-btn fp-soft"
        >
            Excel
        </a>

        <a
            href="{{ route('reports.csv', [
                'from' => $from->toDateString(),
                'to'   => $to->toDateString()
            ]) }}"
            class="fp-btn fp-soft"
        >
            CSV
        </a>

    </div>

</form>


{{-- =========================================================
     SUMMARY
     ========================================================= --}}

<div class="grid md:grid-cols-4 gap-4 mb-4">

    @foreach([
        ['Income', $summary['income']],
        ['Expense', $summary['expense']],
        ['Savings', $summary['savings']],
        ['Net Cash Flow', $summary['net']]
    ] as $item)

        <div class="fp-card p-4">

            <div class="fp-muted text-[10px] uppercase">
                {{ $item[0] }}
            </div>

            <div class="text-[20px] font-semibold mt-2">
                &#2547; {{ number_format($item[1], 2) }}
            </div>

        </div>

    @endforeach

</div>


{{-- =========================================================
     TRANSACTION REPORT
     ========================================================= --}}

<div class="fp-card overflow-x-auto">

    <table class="fp-table w-full min-w-[1050px]">

        <thead>

            <tr>

                <th>
                    Date
                </th>

                <th>
                    Type
                </th>

                <th>
                    Category
                </th>

                <th>
                    Account
                </th>

                <th>
                    Description
                </th>

                <th>
                    Notes
                </th>

                <th>
                    Amount
                </th>

            </tr>

        </thead>


        <tbody>

            @forelse($tx as $t)

                <tr>

                    <td class="whitespace-nowrap">
                        {{ $t->transaction_date->format('d M Y') }}
                    </td>


                    <td class="whitespace-nowrap">
                        {{ ucfirst($t->type) }}
                    </td>


                    <td>
                        {{ $t->category?->name ?? '—' }}
                    </td>


                    <td>
                        {{ $t->account?->name ?? '—' }}
                    </td>


                    <td class="min-w-[220px]">
                        {{ $t->description ?? '—' }}
                    </td>

                    <td class="min-w-[180px]">
                        {{ $t->notes ?? '—' }}
                    </td>


                    <td class="whitespace-nowrap">
                        &#2547; {{ number_format($t->amount, 2) }}
                    </td>

                </tr>

            @empty

                <tr>

                    <td
                        colspan="8"
                        class="text-center fp-muted py-12"
                    >
                        No transactions in this period.
                    </td>

                </tr>

            @endforelse

        </tbody>

    </table>

</div>

@endsection