@extends('layouts.admin')

@section('title', 'Daily 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">Daily Transactions Report</h1>
    </div>
    <div class="page-actions">
        <a href="{{ route('admin.reports.export', array_merge(request()->query(), ['format' => 'csv', 'report' => 'daily'])) }}" 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
        </a>
    </div>
</div>

<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-body">
        <form method="GET" action="{{ route('admin.reports.daily') }}" class="filter-bar">
            <div class="filter-group">
                <label class="form-label">Date</label>
                <input type="date" name="date" value="{{ request('date', 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="Total Transactions" value="{{ number_format($totalTransactions ?? 0) }}" color="blue">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Total Volume" value="{{ $currency ?? '₦' }}{{ number_format($totalVolume ?? 0, 2) }}" color="green">
        <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>
    <x-stat-card title="Deposits" value="{{ $currency ?? '₦' }}{{ number_format($totalDeposits ?? 0, 2) }}" color="purple">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M7 10l5-5 5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Withdrawals" value="{{ $currency ?? '₦' }}{{ number_format($totalWithdrawals ?? 0, 2) }}" color="orange">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 19V5M7 14l5 5 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
</div>

<div class="grid-2" style="margin-top: 1.5rem;">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Hourly Distribution</h3>
        </div>
        <div class="card-body">
            <canvas id="hourlyChart" height="280"></canvas>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Breakdown by Type</h3>
        </div>
        <div class="card-body">
            <canvas id="typeBreakdownChart" height="280"></canvas>
        </div>
    </div>
</div>

<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <h3 class="card-title">Transaction List</h3>
    </div>
    <x-data-table :emptyMessage="'No transactions for this date.'">
        <x-slot:thead>
            <th>Reference</th>
            <th>Customer</th>
            <th>Type</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Time</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($transactions ?? [] as $transaction)
            <tr>
                <td><span class="text-mono">{{ $transaction->reference }}</span></td>
                <td>{{ $transaction->user->name ?? 'N/A' }}</td>
                <td><span class="badge badge-{{ $transaction->type === 'credit' || $transaction->type === 'deposit' ? 'green' : 'blue' }}">{{ ucfirst($transaction->type) }}</span></td>
                <td class="text-semibold">{{ $currency ?? '₦' }}{{ number_format($transaction->amount, 2) }}</td>
                <td><span class="badge badge-{{ $transaction->status === 'completed' ? 'green' : ($transaction->status === 'pending' ? 'orange' : 'red') }}">{{ ucfirst($transaction->status) }}</span></td>
                <td>{{ $transaction->created_at->format('H:i:s') }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="6">
                    <div class="data-table-empty-content">
                        <p>No transactions for this date.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>
@endsection

@push('scripts')
@php
    $chartHourlyLabels = $hourlyLabels ?? collect()->range(0, 23)->map(fn ($h) => sprintf('%02d:00', $h))->toArray();
    $chartHourlyData = $hourlyData ?? array_fill(0, 24, 0);
    $chartTypeBreakdown = $typeBreakdown ?? [0, 0, 0, 0, 0];
@endphp
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var hourlyCtx = document.getElementById('hourlyChart');
    if (hourlyCtx) {
        new Chart(hourlyCtx.getContext('2d'), {
            type: 'bar',
            data: {
                labels: @json($chartHourlyLabels),
                datasets: [{
                    label: 'Transactions',
                    data: @json($chartHourlyData),
                    backgroundColor: 'rgba(13, 107, 88, 0.7)',
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { grid: { display: false } },
                    y: { grid: { color: '#f0f0f0' }, beginAtZero: true }
                }
            }
        });
    }

    var typeCtx = document.getElementById('typeBreakdownChart');
    if (typeCtx) {
        new Chart(typeCtx.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ['Deposits', 'Withdrawals', 'Transfers', 'Bill Payments', 'Airtime'],
                datasets: [{
                    data: @json($chartTypeBreakdown),
                    backgroundColor: ['#0D6B58', '#F59E0B', '#3B82F6', '#8B5CF6', '#EC4899'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { position: 'bottom', labels: { padding: 15 } } },
                cutout: '60%'
            }
        });
    }
});
</script>
@endpush