@extends('layouts.admin')

@section('title', 'Monthly Sales Report')
@section('subtitle', \Carbon\Carbon::parse($month . '-01')->format('F Y'))

@section('actions')
    <input type="month" value="{{ $month }}" onchange="window.location.href='?month=' + this.value"
        class="px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
@endsection

@section('content')
    <div class="space-y-6">
        {{-- Summary Cards --}}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 text-center">
                <p class="text-sm text-slate-500 mb-1">Total Sales</p>
                <p class="text-2xl font-bold text-slate-800">LKR {{ number_format($summary['total_sales'], 2) }}</p>
            </div>
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 text-center">
                <p class="text-sm text-slate-500 mb-1">Total Invoices</p>
                <p class="text-2xl font-bold text-slate-800">{{ number_format($summary['total_invoices']) }}</p>
            </div>
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 text-center">
                <p class="text-sm text-slate-500 mb-1">Total Refunds</p>
                <p class="text-2xl font-bold text-red-500">LKR {{ number_format($summary['total_refunds'] ?? 0, 2) }}</p>
            </div>
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 text-center">
                <p class="text-sm text-slate-500 mb-1">Average Daily Sales</p>
                <p class="text-2xl font-bold text-slate-800">LKR {{ number_format($summary['avg_daily'], 2) }}</p>
            </div>
        </div>

        {{-- Daily Chart --}}
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
            <h3 class="text-lg font-semibold text-slate-800 mb-4">Daily Sales Trend</h3>

            @if($dailySales->count() > 0)
                @php $maxSale = $dailySales->max('total') ?: 1; @endphp
                <div class="h-64 flex items-end gap-1 overflow-x-auto pb-4">
                    @foreach($dailySales as $day)
                        <div class="flex flex-col items-center gap-2 min-w-[30px]">
                            <div class="w-6 bg-slate-100 rounded-t" style="height: 200px; position: relative;">
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-blue-600 to-blue-400 rounded-t"
                                    style="height: {{ ($day->total / $maxSale) * 100 }}%"
                                    title="LKR {{ number_format($day->total, 2) }}"></div>
                            </div>
                            <span class="text-xs text-slate-500">{{ \Carbon\Carbon::parse($day->date)->format('d') }}</span>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-8 text-slate-400">
                    <p>No data for this month</p>
                </div>
            @endif
        </div>

        {{-- Daily Table --}}
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200">
            <div class="p-4 border-b border-slate-200">
                <h3 class="text-lg font-semibold text-slate-800">Daily Breakdown</h3>
            </div>

            @if($dailySales->count() > 0)
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="text-left text-sm text-slate-500 border-b border-slate-200">
                                <th class="px-6 py-3 font-medium">Date</th>
                                <th class="px-6 py-3 font-medium text-center">Invoices</th>
                                <th class="px-6 py-3 font-medium text-right">Total Sales</th>
                            </tr>
                        </thead>
                        <tbody class="text-sm">
                            @foreach($dailySales as $day)
                                <tr class="border-b border-slate-100 hover:bg-slate-50">
                                    <td class="px-6 py-3">
                                        <a href="{{ route('admin.reports.daily', ['date' => $day->date]) }}"
                                            class="text-blue-600 hover:underline">
                                            {{ \Carbon\Carbon::parse($day->date)->format('D, M d') }}
                                        </a>
                                    </td>
                                    <td class="px-6 py-3 text-center">{{ number_format($day->invoices) }}</td>
                                    <td class="px-6 py-3 text-right font-semibold">LKR {{ number_format($day->total, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="p-12 text-center text-slate-400">
                    <p class="text-4xl mb-2">📊</p>
                    <p>No sales data for this month</p>
                </div>
            @endif
        </div>
    </div>
@endsection