@extends('layouts.app')
@section('title', __('Revenue'))

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
    <h1 class="h4 fw-bold mb-0">📈 {{ __('Revenue') }}</h1>
    <form class="d-flex gap-2" method="GET">
        <input type="date" name="from" value="{{ $from->toDateString() }}" class="form-control form-control-sm">
        <input type="date" name="to" value="{{ $to->toDateString() }}" class="form-control form-control-sm">
        <button class="btn mb-btn-primary btn-sm">{{ __('Apply') }}</button>
    </form>
</div>

<div class="row g-3 mb-3">
    <div class="col-md-4">
        <div class="mb-card p-3">
            <div class="mb-muted small">💵 {{ __('Collected in period') }}</div>
            <div class="kpi-value" dir="ltr">{{ number_format($collected) }} <span class="fs-6 mb-muted">IQD</span></div>
        </div>
    </div>
    @foreach($byMethod as $m)
        <div class="col-6 col-md-2">
            <div class="mb-card p-3">
                <div class="mb-muted small">{{ \App\Enums\PaymentMethod::from($m->method)->icon() }} {{ \App\Enums\PaymentMethod::from($m->method)->label() }}</div>
                <div class="fw-bold" dir="ltr">{{ number_format($m->total) }}</div>
                <div class="mb-muted small">{{ $m->count }} {{ __('payments') }}</div>
            </div>
        </div>
    @endforeach
</div>

<div class="row g-3">
    <div class="col-lg-7">
        <div class="mb-card p-4 mb-3">
            <h2 class="h6 fw-semibold mb-3">{{ __('Collected — last 30 days') }}</h2>
            <canvas id="revChart" height="110"></canvas>
        </div>

        <div class="mb-card p-3">
            <h2 class="h6 fw-semibold px-2 pt-2">🏆 {{ __('Top performing services') }} <span class="mb-muted small">({{ __('billed') }})</span></h2>
            <table class="table mb-table align-middle mb-0">
                <thead><tr><th>#</th><th>{{ __('Procedure') }}</th><th>{{ __('Category') }}</th><th>{{ __('Qty') }}</th><th>{{ __('Revenue') }}</th></tr></thead>
                <tbody>
                @forelse($byProcedure as $i => $row)
                    <tr>
                        <td class="mb-muted">{{ $i + 1 }}</td>
                        <td>{{ app()->getLocale() === 'ar' ? $row->name_ar : $row->name_en }}</td>
                        <td><span class="badge text-bg-light">{{ __(ucfirst($row->category)) }}</span></td>
                        <td>{{ $row->qty }}</td>
                        <td dir="ltr" class="fw-semibold">{{ number_format($row->total) }} IQD</td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="mb-muted py-4 text-center">{{ __('No billed procedures in this period.') }}</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="col-lg-5">
        <div class="mb-card p-4">
            <h2 class="h6 fw-semibold mb-3">{{ __('Revenue by category') }} <span class="mb-muted small">({{ __('billed') }})</span></h2>
            <canvas id="catChart" height="200"></canvas>
            <table class="table mb-table table-sm align-middle mt-3 mb-0">
                <tbody>
                @foreach($byCategory as $row)
                    <tr>
                        <td>{{ __(ucfirst($row->category)) }}</td>
                        <td class="mb-muted">{{ $row->count }} {{ __('items') }}</td>
                        <td dir="ltr" class="fw-semibold">{{ number_format($row->total) }} IQD</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('page-scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
const brand = getComputedStyle(document.documentElement).getPropertyValue('--mb-primary');
new Chart(document.getElementById('revChart'), {
    type: 'bar',
    data: {
        labels: @json($daily->pluck('label')),
        datasets: [{ data: @json($daily->pluck('total')), backgroundColor: brand, borderRadius: 6 }],
    },
    options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } },
});
new Chart(document.getElementById('catChart'), {
    type: 'doughnut',
    data: {
        labels: @json($byCategory->map(fn ($r) => __(ucfirst($r->category)))),
        datasets: [{ data: @json($byCategory->pluck('total')),
            backgroundColor: ['#0EA5E9','#8B5CF6','#22C55E','#F5A524','#EC4899','#14B8A6','#6366F1','#EF4444','#64748B'] }],
    },
    options: { plugins: { legend: { position: 'bottom' } } },
});
</script>
@endpush
@endsection