@extends('layouts.admin')

@section('title', 'Fee Report')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <a href="{{ route('admin.reports.index') }}" class="btn-back">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Back to Reports
        </a>
        <h1 class="page-title">Fee Report</h1>
    </div>
</div>

<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-body">
        <form method="GET" action="{{ route('admin.reports.fees') }}" class="filter-bar">
            <div class="filter-group">
                <label class="form-label">From</label>
                <input type="date" name="from" value="{{ request('from', optional(now()->startOfMonth())->format('Y-m-d')) }}" class="form-input">
            </div>
            <div class="filter-group">
                <label class="form-label">To</label>
                <input type="date" name="to" value="{{ request('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">Load Report</button>
            </div>
        </form>
    </div>
</div>

<div class="stats-grid stats-grid-4">
    <x-stat-card title="Transfer Fees" value="{{ $currency ?? '₦' }}{{ number_format($data['transfer_fees'] ?? 0, 2) }}" color="blue">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 12h14M14 8l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Bill Fees" value="{{ $currency ?? '₦' }}{{ number_format($data['bill_fees'] ?? 0, 2) }}" color="green">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 3h12v18l-2-1-2 1-2-1-2 1-2-1-2 1V3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M9 8h6M9 12h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Airtime Fees" value="{{ $currency ?? '₦' }}{{ number_format($data['airtime_fees'] ?? 0, 2) }}" color="purple">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 18h.01M8 15a5 5 0 018 0M5 12a9 9 0 0114 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Total Fees" value="{{ $currency ?? '₦' }}{{ number_format($data['total_fees'] ?? 0, 2) }}" color="orange">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M12 7v10M9 9h6c1.1 0 2 .9 2 2s-.9 2-2 2H9M9 13h6c1.1 0 2 .9 2 2s-.9 2-2 2H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
</div>
@endsection