@extends('layouts.app')

@section('title', 'Top Sales Report')

@push('styles')
<style>
h1 { color: var(--text-primary); }
p.text-secondary { color: var(--text-secondary); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }
.btn-ghost:hover { background: var(--accent-light); color: var(--text-primary); }
</style>
@endpush

@section('content')
@can('view_top_sales')

@php
$itemCount = $topSales->count();
$grandTotal = $grandTotal ?? $topSales->sum('total_revenue');
$totalQty = $totalQty ?? $topSales->sum('total_quantity');
@endphp

<div class="mb-8 fade-in">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="h-14 w-1 bg-gradient-to-b from-indigo-400 to-indigo-600 rounded-full"></div>
            <div>
                <h1 class="text-3xl font-bold tracking-tight">Top Sales</h1>
                <p class="text-secondary mt-1">Best-selling products ranked by revenue</p>
            </div>
        </div>
        <div class="flex gap-2">
            <button onclick="window.print()" class="btn-ghost px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm font-bold">
                <i class="fas fa-print"></i> Print
            </button>
            <a href="{{ route('reports.top-sales.pdf', request()->query()) }}" class="btn-primary px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm font-bold">
                <i class="fas fa-file-pdf"></i> PDF
            </a>
        </div>
    </div>
</div>

<div class="table-container rounded-2xl p-4 mb-8 fade-in">
    <form method="GET" class="space-y-4">
        <div class="flex flex-wrap gap-2">
            <button type="button" onclick="setRange('today')" class="btn-ghost px-3 py-1.5 text-xs font-medium rounded-lg">Today</button>
            <button type="button" onclick="setRange('yesterday')" class="btn-ghost px-3 py-1.5 text-xs font-medium rounded-lg">Yesterday</button>
            <button type="button" onclick="setRange('this-week')" class="btn-ghost px-3 py-1.5 text-xs font-medium rounded-lg">This Week</button>
            <button type="button" onclick="setRange('last-week')" class="btn-ghost px-3 py-1.5 text-xs font-medium rounded-lg">Last Week</button>
            <button type="button" onclick="setRange('this-month')" class="btn-ghost px-3 py-1.5 text-xs font-medium rounded-lg">This Month</button>
            <button type="button" onclick="setRange('last-month')" class="btn-ghost px-3 py-1.5 text-xs font-medium rounded-lg">Last Month</button>
            <button type="button" onclick="setRange('this-year')" class="btn-ghost px-3 py-1.5 text-xs font-medium rounded-lg">This Year</button>
            <button type="button" onclick="setRange('last-year')" class="btn-ghost px-3 py-1.5 text-xs font-medium rounded-lg">Last Year</button>
        </div>
        <div class="flex flex-wrap items-end gap-4">
            <div>
                <label class="block text-xs text-slate-500 mb-1">From</label>
                <input type="date" id="dateFrom" name="date_from" value="{{ $dateFrom }}" class="input-modern">
            </div>
            <div>
                <label class="block text-xs text-slate-500 mb-1">To</label>
                <input type="date" id="dateTo" name="date_to" value="{{ $dateTo }}" class="input-modern">
            </div>
            @include('reports.partials.branch-filter')
            <div>
                <label class="block text-xs text-slate-500 mb-1">Per Page</label>
                <select name="per_page" class="input-modern">
                    <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                    <option value="20" {{ request('per_page') == 20 || !request('per_page') ? 'selected' : '' }}>20</option>
                    <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                </select>
            </div>
            <button type="submit" class="btn-primary px-5 py-2 rounded-lg text-sm font-medium">View Report</button>
        </div>
    </form>
</div>

<script>
function formatDate(d) { const yyyy = d.getFullYear(); const mm = String(d.getMonth() + 1).padStart(2, '0'); const dd = String(d.getDate()).padStart(2, '0'); return `${yyyy}-${mm}-${dd}`; }
function setRange(preset) {
    const today = new Date(); let from, to;
    switch (preset) {
        case 'today': from = to = new Date(today); break;
        case 'yesterday': from = new Date(today); from.setDate(today.getDate() - 1); to = new Date(today); to.setDate(today.getDate() - 1); break;
        case 'this-week': from = new Date(today); from.setDate(today.getDate() - ((today.getDay() + 6) % 7)); to = new Date(today); break;
        case 'last-week': from = new Date(today); from.setDate(today.getDate() - ((today.getDay() + 6) % 7) - 7); to = new Date(today); to.setDate(today.getDate() - ((today.getDay() + 6) % 7) - 1); break;
        case 'this-month': from = new Date(today.getFullYear(), today.getMonth(), 1); to = new Date(today); break;
        case 'last-month': from = new Date(today.getFullYear(), today.getMonth() - 1, 1); to = new Date(today.getFullYear(), today.getMonth(), 0); break;
        case 'this-year': from = new Date(today.getFullYear(), 0, 1); to = new Date(today); break;
        case 'last-year': from = new Date(today.getFullYear() - 1, 0, 1); to = new Date(today.getFullYear() - 1, 11, 31); break;
    }
    document.getElementById('dateFrom').value = formatDate(from); document.getElementById('dateTo').value = formatDate(to); document.getElementById('dateFrom').closest('form').submit();
}
</script>

<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
    <div class="stat-card rounded-2xl p-5 fade-in">
        <p class="text-sm text-slate-400 mb-1">Products</p>
        <p class="text-2xl font-extrabold text-white">{{ $itemCount }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <p class="text-sm text-slate-400 mb-1">Total Qty Sold</p>
        <p class="text-2xl font-extrabold text-white">{{ number_format($totalQty) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <p class="text-sm text-slate-400 mb-1">Total Revenue</p>
        <p class="text-2xl font-extrabold text-white">${{ number_format($grandTotal, 2) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <p class="text-sm text-slate-400 mb-1">Avg Revenue/Item</p>
        <p class="text-2xl font-extrabold text-white">${{ $itemCount > 0 ? number_format($grandTotal / $itemCount, 2) : '0.00' }}</p>
    </div>
</div>

@if($grandTotal > 0)
<div class="table-container rounded-2xl p-5 mb-8 fade-in">
    <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
        <div class="w-8 h-8 rounded-lg bg-indigo-500/20 flex items-center justify-center">
            <i class="fas fa-chart-bar text-indigo-400 text-sm"></i>
        </div>
        Revenue Share by Product
    </h3>
    <div class="space-y-3">
        @foreach($topSales as $item)
        @php $pct = $grandTotal > 0 ? ($item->total_revenue / $grandTotal) * 100 : 0; @endphp
        <div class="flex items-center gap-3">
            <span class="text-sm text-slate-300 font-medium w-40 truncate">{{ $item->name }}</span>
            <div class="flex-1 bg-white/[0.06] rounded-full h-7 overflow-hidden">
                <div class="h-full bg-gradient-to-r from-amber-400 to-amber-600 rounded-full flex items-center px-3 transition-all" style="width: {{ max(3, $pct) }}%">
                    <span class="text-xs text-white font-semibold whitespace-nowrap">{{ number_format($pct, 1) }}% — ${{ number_format($item->total_revenue, 2) }}</span>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endif

<div class="table-container rounded-2xl overflow-hidden fade-in">
    <div class="p-5" style="border-bottom: 1px solid var(--border-color);">
        <h3 class="text-lg font-semibold text-white">Top Selling Products</h3>
        <p class="text-sm text-slate-500 mt-1">{{ displayDate(\Carbon\Carbon::parse($dateFrom)) }} — {{ displayDate(\Carbon\Carbon::parse($dateTo)) }}</p>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-white/[0.06]">
            <thead class="table-header">
                <tr>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">#</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">Product</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold text-slate-500 uppercase tracking-widest">Qty Sold</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold text-slate-500 uppercase tracking-widest">Revenue</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold text-slate-500 uppercase tracking-widest">Revenue Share</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/[0.06]">
                @forelse($topSales as $index => $item)
                @php $pct = $grandTotal > 0 ? ($item->total_revenue / $grandTotal) * 100 : 0; @endphp
                    <tr class="table-row hover:bg-white/[0.03] transition-colors">
                        <td class="px-5 py-4 text-sm text-slate-400">{{ $topSales->firstItem() + $index }}</td>
                        <td class="px-5 py-4 text-sm text-white font-bold">{{ $item->name }}</td>
                        <td class="px-5 py-4 text-sm text-right text-slate-300">{{ number_format($item->total_quantity) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-white">${{ number_format($item->total_revenue, 2) }}</td>
                        <td class="px-5 py-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <div class="w-24 bg-white/[0.06] rounded-full h-2 overflow-hidden">
                                    <div class="h-full bg-gradient-to-r from-amber-400 to-amber-600 rounded-full" style="width: {{ $pct }}%"></div>
                                </div>
                                <span class="text-sm font-medium text-slate-300 w-12 text-right">{{ number_format($pct, 1) }}%</span>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-5 py-12 text-center">
                        <div class="bg-white/[0.03] rounded-2xl py-8 flex flex-col items-center">
                            <div class="w-12 h-12 bg-white/[0.06] rounded-full flex items-center justify-center mb-3">
                                <i class="fas fa-crown text-slate-500 text-xl"></i>
                            </div>
                            <p class="font-medium text-slate-400">No data available</p>
                        </div>
                    </td></tr>
                @endforelse
            </tbody>
            @if($topSales->count() > 0)
                <tfoot class="bg-white/[0.03]">
                    <tr>
                        <td class="px-5 py-4 text-sm font-bold text-white" colspan="2">Total</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-white">{{ number_format($totalQty) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-amber-400">${{ number_format($grandTotal, 2) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-white">100%</td>
                    </tr>
                </tfoot>
            @endif
        </table>
    </div>
    @if(method_exists($topSales, 'links'))
    <div class="p-4" style="border-top: 1px solid var(--border-color);">
        {{ $topSales->withQueryString()->links() }}
    </div>
    @endif
</div>

@endcan
@endsection