@extends('layouts.admin')

@section('title', 'Reports & Financial Analytics - Orange Groceries Admin')
@section('header_title', 'Business Reports & Financial Analytics')

@section('content')
<div class="space-y-8">
    
    <!-- Timeframe Filter Buttons -->
    <div class="bg-white p-4 rounded-3xl border border-slate-200/80 shadow-sm flex items-center justify-between">
        <div class="flex items-center gap-2 text-xs font-bold">
            <a href="{{ route('admin.reports.index', ['type' => 'daily']) }}" class="px-4 py-2 rounded-xl transition {{ $type === 'daily' ? 'bg-brand-600 text-white' : 'bg-slate-100 text-slate-700' }}">Daily Sales</a>
            <a href="{{ route('admin.reports.index', ['type' => 'weekly']) }}" class="px-4 py-2 rounded-xl transition {{ $type === 'weekly' ? 'bg-brand-600 text-white' : 'bg-slate-100 text-slate-700' }}">Weekly Sales</a>
            <a href="{{ route('admin.reports.index', ['type' => 'monthly']) }}" class="px-4 py-2 rounded-xl transition {{ $type === 'monthly' ? 'bg-brand-600 text-white' : 'bg-slate-100 text-slate-700' }}">Monthly Sales</a>
        </div>
    </div>

    <!-- Summary KPI Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-3xl border border-slate-200/80 shadow-sm space-y-2">
            <div class="text-xs font-extrabold uppercase text-slate-400">Total Store Revenue</div>
            <div class="text-3xl font-black text-brand-700">₹{{ number_format($totalRevenue, 2) }}</div>
        </div>

        <div class="bg-white p-6 rounded-3xl border border-slate-200/80 shadow-sm space-y-2">
            <div class="text-xs font-extrabold uppercase text-slate-400">Delivered Orders Count</div>
            <div class="text-3xl font-black text-slate-900">{{ $totalOrdersCount }} Orders</div>
        </div>

        <div class="bg-white p-6 rounded-3xl border border-slate-200/80 shadow-sm space-y-2">
            <div class="text-xs font-extrabold uppercase text-slate-400">Total GST Collected</div>
            <div class="text-3xl font-black text-indigo-700">₹{{ number_format($totalGst, 2) }}</div>
        </div>
    </div>

    <!-- Reports Tables -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        
        <!-- Sales Breakdown -->
        <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
            <h3 class="font-extrabold text-slate-900 text-base border-b border-slate-100 pb-3">Sales Summary Breakdown</h3>
            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead>
                        <tr class="text-slate-400 uppercase font-extrabold border-b border-slate-100">
                            <th class="pb-3">Date / Period</th>
                            <th class="pb-3">Orders Count</th>
                            <th class="pb-3 text-right">Total Revenue</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 font-medium text-slate-800">
                        @foreach($salesData as $row)
                            <tr>
                                <td class="py-3 font-mono font-bold text-slate-900">{{ $row->date }}</td>
                                <td class="py-3 font-bold text-slate-700">{{ $row->count }} Orders</td>
                                <td class="py-3 text-right font-black text-brand-700">₹{{ number_format($row->total, 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Top Selling Products -->
        <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
            <h3 class="font-extrabold text-slate-900 text-base border-b border-slate-100 pb-3">Top 10 Selling Products</h3>
            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead>
                        <tr class="text-slate-400 uppercase font-extrabold border-b border-slate-100">
                            <th class="pb-3">Product Name</th>
                            <th class="pb-3">Units Sold</th>
                            <th class="pb-3 text-right">Total Sales</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 font-medium text-slate-800">
                        @foreach($topProducts as $top)
                            <tr>
                                <td class="py-3 font-bold text-slate-900">{{ $top->product_name }}</td>
                                <td class="py-3 font-extrabold text-indigo-700">{{ $top->total_qty }} units</td>
                                <td class="py-3 text-right font-black text-slate-900">₹{{ number_format($top->total_revenue, 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
@endsection