@extends('layouts.dashboard')

@section('title', trans('dashboard.nav_reports'))
@section('header_title', trans('dashboard.nav_reports'))

@section('content')
<div class="space-y-6">
    <form method="GET" class="p-4 rounded-2xl bg-navy-900 border border-slate-800 flex flex-wrap items-end gap-3 text-xs">
        <div>
            <label class="block text-slate-400 mb-1">{{ trans('dashboard.from_date') }}</label>
            <input type="date" name="from" value="{{ $from->toDateString() }}" class="rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2">
        </div>
        <div>
            <label class="block text-slate-400 mb-1">{{ trans('dashboard.to_date') }}</label>
            <input type="date" name="to" value="{{ $to->toDateString() }}" class="rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2">
        </div>
        <button class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-white font-bold">{{ trans('dashboard.filter_btn') }}</button>
        <a href="{{ route('dashboard.reports.export', ['from' => $from->toDateString(), 'to' => $to->toDateString()]) }}" class="px-4 py-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold">{{ trans('dashboard.export_csv') }}</a>
    </form>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800">
            <div class="text-xs text-slate-400">{{ trans('dashboard.total_invoices') }}</div>
            <div class="text-2xl font-black text-white mt-2">{{ $stats['count'] }}</div>
        </div>
        <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800">
            <div class="text-xs text-slate-400">{{ trans('dashboard.total_sales_label') }}</div>
            <div class="text-2xl font-black text-white mt-2">{{ number_format($stats['sales'], 2) }}</div>
        </div>
        <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800">
            <div class="text-xs text-slate-400">{{ trans('dashboard.th_vat') }}</div>
            <div class="text-2xl font-black text-emerald-400 mt-2">{{ number_format($stats['vat'], 2) }}</div>
        </div>
        <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800">
            <div class="text-xs text-slate-400">{{ trans('dashboard.failed_invoices') }}</div>
            <div class="text-2xl font-black text-white mt-2">{{ $stats['failed'] }}</div>
        </div>
    </div>

    <div class="bg-navy-900 border border-slate-800 rounded-2xl overflow-hidden">
        <table class="w-full text-xs">
            <thead class="bg-navy-950/60 text-slate-400 border-b border-slate-800">
                <tr>
                    <th class="p-4 text-start">{{ trans('dashboard.th_buyer') }}</th>
                    <th class="p-4 text-start">{{ trans('dashboard.total_invoices') }}</th>
                    <th class="p-4 text-start">{{ trans('dashboard.total_sales_label') }}</th>
                    <th class="p-4 text-start">{{ trans('dashboard.th_vat') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800/60 text-slate-300">
                @forelse($byCustomer as $row)
                    <tr>
                        <td class="p-4 text-white">{{ $row->buyer_name }}</td>
                        <td class="p-4">{{ $row->invoices_count }}</td>
                        <td class="p-4 text-emerald-400 font-bold">{{ number_format($row->sales_total, 2) }}</td>
                        <td class="p-4">{{ number_format($row->vat_total, 2) }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center py-12 text-slate-500">{{ trans('dashboard.no_invoices_found') }}</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection