@extends('layouts.admin')

@section('title', 'Reports')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Reports</h1>
        <p class="page-subtitle">Generate and view comprehensive reports</p>
    </div>
</div>

<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-header">
        <h3 class="card-title">Date Range</h3>
    </div>
    <div class="card-body">
        <form method="GET" action="" class="filter-bar">
            <div class="filter-group">
                <label class="form-label">From</label>
                <input type="date" name="date_from" value="{{ request('date_from', now()->startOfMonth()->format('Y-m-d')) }}" class="form-input">
            </div>
            <div class="filter-group">
                <label class="form-label">To</label>
                <input type="date" name="date_to" value="{{ request('date_to', now()->format('Y-m-d')) }}" class="form-input">
            </div>
            <div class="filter-group" style="align-self: flex-end;">
                <button type="submit" class="btn btn-primary btn-sm">Apply</button>
            </div>
        </form>
    </div>
</div>

<div class="reports-grid">
    <a href="{{ route('admin.reports.daily', request()->query()) }}" class="report-card">
        <div class="report-card-icon report-card-icon-blue">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M6 24V10l5-4 5 4 5-5 5 5v14H6z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M6 18h20" stroke="currentColor" stroke-width="1.5"/></svg>
        </div>
        <h3 class="report-card-title">Daily Transactions</h3>
        <p class="report-card-desc">View transactions breakdown by day</p>
    </a>

    <a href="{{ route('admin.reports.monthly', request()->query()) }}" class="report-card">
        <div class="report-card-icon report-card-icon-green">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><rect x="4" y="6" width="24" height="22" rx="3" stroke="currentColor" stroke-width="1.5"/><path d="M4 12h24" stroke="currentColor" stroke-width="1.5"/><path d="M10 4v4M22 4v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </div>
        <h3 class="report-card-title">Monthly Transactions</h3>
        <p class="report-card-desc">Monthly transaction summaries</p>
    </a>

    <a href="{{ route('admin.reports.deposits', request()->query()) }}" class="report-card">
        <div class="report-card-icon report-card-icon-purple">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M16 6v20M10 12l6-6 6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 24h20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </div>
        <h3 class="report-card-title">Deposits Report</h3>
        <p class="report-card-desc">All deposit transactions</p>
    </a>

    <a href="{{ route('admin.reports.withdrawals', request()->query()) }}" class="report-card">
        <div class="report-card-icon report-card-icon-orange">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M16 26V6M10 20l6 6 6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 6h20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </div>
        <h3 class="report-card-title">Withdrawals Report</h3>
        <p class="report-card-desc">All withdrawal transactions</p>
    </a>

    <a href="{{ route('admin.reports.transfers', request()->query()) }}" class="report-card">
        <div class="report-card-icon report-card-icon-blue">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M6 12h20M20 8l6 4-6 4M26 20H6M12 16l-6 4 6 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <h3 class="report-card-title">Transfers Report</h3>
        <p class="report-card-desc">All transfer transactions</p>
    </a>

    <a href="{{ route('admin.reports.fees', request()->query()) }}" class="report-card">
        <div class="report-card-icon report-card-icon-green">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="12" stroke="currentColor" stroke-width="1.5"/><path d="M16 10v12M12 12h8c1.3 0 2.5 1.1 2.5 2.5S21.3 17 20 17h-8M12 20h8c1.3 0 2.5 1.1 2.5 2.5S21.3 25 20 25h-8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </div>
        <h3 class="report-card-title">Fee Report</h3>
        <p class="report-card-desc">Fees collected summary</p>
    </a>

    <a href="{{ route('admin.reports.customers', request()->query()) }}" class="report-card">
        <div class="report-card-icon report-card-icon-purple">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><circle cx="12" cy="10" r="4" stroke="currentColor" stroke-width="1.5"/><path d="M4 28c0-4.4 3.6-8 8-8s8 3.6 8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="22" cy="11" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M22 18c2.2 0 6 1.6 6 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </div>
        <h3 class="report-card-title">Customer Report</h3>
        <p class="report-card-desc">Customer growth & activity</p>
    </a>

    <a href="{{ route('admin.reports.cards', request()->query()) }}" class="report-card">
        <div class="report-card-icon report-card-icon-orange">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><rect x="4" y="8" width="24" height="16" rx="3" stroke="currentColor" stroke-width="1.5"/><path d="M4 14h24" stroke="currentColor" stroke-width="1.5"/><path d="M10 20h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </div>
        <h3 class="report-card-title">Card Report</h3>
        <p class="report-card-desc">Card issuance & usage stats</p>
    </a>
</div>

<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <h3 class="card-title">Export Options</h3>
    </div>
    <div class="card-body">
        <div class="btn-group">
            <a href="{{ route('admin.reports.export', array_merge(request()->query(), ['format' => 'csv'])) }}" class="btn btn-outline">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 11v2a1 1 0 001 1h8a1 1 0 001-1v-2M8 3v8M5 8l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Export CSV
            </a>
            <a href="{{ route('admin.reports.export', array_merge(request()->query(), ['format' => 'excel'])) }}" class="btn btn-outline">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 11v2a1 1 0 001 1h8a1 1 0 001-1v-2M8 3v8M5 8l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Export Excel
            </a>
            <a href="{{ route('admin.reports.export', array_merge(request()->query(), ['format' => 'pdf'])) }}" class="btn btn-outline">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 11v2a1 1 0 001 1h8a1 1 0 001-1v-2M8 3v8M5 8l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Export PDF
            </a>
        </div>
    </div>
</div>
@endsection