{{-- resources/views/reports/revenue.blade.php --}}
@extends('layouts.app')
@section('title', 'Revenue Report')
@section('page_title', 'Revenue Report')
@section('page_subtitle', $from->format('d M Y') . ' — ' . $to->format('d M Y'))

@section('content')

@include('reports.partials.nav')
@include('reports.partials.filters', [
    'route'      => 'reports.revenue',
    'showExport' => true,
    'reportName' => 'revenue',
])

{{-- Stats --}}
<div class="row g-3 mb-3">
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-success">
                <i class="bi bi-cash-coin"></i>
            </div>
            <div>
                <div class="stat-value">
                    ${{ number_format($total, 0) }}
                </div>
                <div class="stat-label">Total Revenue</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-info">
                <i class="bi bi-receipt"></i>
            </div>
            <div>
                <div class="stat-value">{{ number_format($count) }}</div>
                <div class="stat-label">Payments</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-clay">
                <i class="bi bi-calculator"></i>
            </div>
            <div>
                <div class="stat-value">
                    ${{ number_format($average, 0) }}
                </div>
                <div class="stat-label">Avg per Payment</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-muted">
                <i class="bi bi-calendar-day"></i>
            </div>
            <div>
                <div class="stat-value">
                    ${{ $from->diffInDays($to) > 0
                        ? number_format($total / $from->diffInDays($to), 0)
                        : number_format($total, 0) }}
                </div>
                <div class="stat-label">Avg per Day</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">

    {{-- Chart --}}
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-graph-up me-2" style="color:var(--clay)"></i>
                    Daily Revenue
                </span>
            </div>
            <div class="card-body">
                <canvas id="revenueChart" height="100"></canvas>
            </div>
        </div>
    </div>

    {{-- By Method --}}
    <div class="col-xl-4">
        <div class="card">
            <div class="card-header">
                <span class="card-title">By Payment Method</span>
            </div>
            <div class="card-body">
                @php
                    $methodTotal = $by_method->sum();
                @endphp
                @forelse($by_method as $method => $amount)
                    <div style="margin-bottom:12px;">
                        <div style="display:flex;justify-content:space-between;
                                    font-size:.8rem;margin-bottom:4px;">
                            <span class="fw-semibold">
                                {{ ucfirst(str_replace('_', ' ', $method)) }}
                            </span>
                            <span>
                                ${{ number_format($amount, 0) }}
                                <span style="color:var(--muted);font-size:.72rem;">
                                    ({{ $methodTotal > 0 ? round(($amount / $methodTotal) * 100, 0) : 0 }}%)
                                </span>
                            </span>
                        </div>
                        <div style="background:var(--border);border-radius:3px;
                                    height:7px;overflow:hidden;">
                            <div style="height:100%;
                                        width:{{ $methodTotal > 0 ? ($amount / $methodTotal) * 100 : 0 }}%;
                                        background:var(--clay);border-radius:3px;">
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="text-muted text-center mb-0"
                       style="font-size:.8rem;">No data</p>
                @endforelse
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const daily = @json($daily);

new Chart(document.getElementById('revenueChart'), {
    type: 'bar',
    data: {
        labels: daily.map(d => d.date),
        datasets: [{
            label: 'Revenue',
            data: daily.map(d => d.revenue),
            backgroundColor: 'rgba(196,98,45,.2)',
            borderColor: '#C4622D',
            borderWidth: 2,
            borderRadius: 4,
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false },
            tooltip: { callbacks: { label: c => '$' + c.parsed.y.toFixed(2) } }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: { color: '#f1f5f9' },
                ticks: { callback: v => '$' + v, font: { size: 11 } }
            },
            x: {
                grid: { display: false },
                ticks: { font: { size: 11 }, maxTicksLimit: 15 }
            }
        }
    }
});
</script>
@endpush