@extends('layouts.app')

@section('title', 'Sales by Category 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); padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 700; border-radius: 0.75rem; transition: all 0.2s; }
.btn-ghost:hover { background: var(--accent-light); color: var(--text-primary); border-color: var(--accent); }
</style>
@endpush

@section('content')
@can('view_category_sales')

@php
$categoryCount = $categorySales->count();
$totalItems = $categorySales->sum('total_items');
$totalQuantity = $categorySales->sum('total_quantity');
$grandTotal = $categorySales->sum('total_sales');
$averagePerCategory = $categoryCount > 0 ? $grandTotal / $categoryCount : 0;
@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">Sales by Category</h1>
                <p class="text-secondary mt-1">Category-wise revenue breakdown & analysis</p>
            </div>
        </div>
        <div class="flex gap-2">
            <button onclick="window.print()" class="btn-ghost flex items-center gap-2">
                <i class="fas fa-print"></i> Print
            </button>
            <a href="{{ route('reports.category-sales.pdf', request()->query()) }}" class="btn-primary 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">Today</button>
            <button type="button" onclick="setRange('yesterday')" class="btn-ghost">Yesterday</button>
            <button type="button" onclick="setRange('this-week')" class="btn-ghost">This Week</button>
            <button type="button" onclick="setRange('last-week')" class="btn-ghost">Last Week</button>
            <button type="button" onclick="setRange('this-month')" class="btn-ghost">This Month</button>
            <button type="button" onclick="setRange('last-month')" class="btn-ghost">Last Month</button>
            <button type="button" onclick="setRange('this-year')" class="btn-ghost">This Year</button>
            <button type="button" onclick="setRange('last-year')" class="btn-ghost">Last Year</button>
        </div>
        <div class="flex flex-wrap items-end gap-4">
            <div>
                <label class="block text-xs text-secondary 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-secondary mb-1">To</label>
                <input type="date" id="dateTo" name="date_to" value="{{ $dateTo }}" class="input-modern">
            </div>
            @include('reports.partials.branch-filter')
            <button type="submit" class="btn-primary 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" style="color: var(--text-muted);">Categories</p>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">{{ $categoryCount }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <p class="text-sm" style="color: var(--text-muted);">Items Sold</p>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">{{ number_format($totalItems) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <p class="text-sm" style="color: var(--text-muted);">Total Revenue</p>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format($grandTotal, 2) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <p class="text-sm" style="color: var(--text-muted);">Avg per Category</p>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format($averagePerCategory, 2) }}</p>
    </div>
</div>

@if($grandTotal > 0)
<div class="table-container rounded-2xl p-5 mb-8 fade-in">
    <h3 class="text-lg font-semibold mb-4 flex items-center gap-2" style="color: var(--text-primary);">
        <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 Category
    </h3>
    <div class="space-y-3">
        @foreach($categorySales as $cat)
        @php $pct = $grandTotal > 0 ? ($cat->total_sales / $grandTotal) * 100 : 0; @endphp
        <div class="flex items-center gap-3">
            <span class="text-sm font-medium w-32 truncate" style="color: var(--text-secondary);">{{ $cat->category_name }}</span>
            <div class="flex-1 rounded-full h-7 overflow-hidden" style="background: var(--table-bg);">
                <div class="h-full bg-gradient-to-r from-indigo-400 to-indigo-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($cat->total_sales, 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" style="color: var(--text-primary);">Category Breakdown</h3>
        <p class="text-sm text-secondary 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" style="border-color: var(--border-color);">
            <thead class="table-header">
                <tr>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">#</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Category</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Items Sold</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Total Qty</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Total Sales</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Revenue Share</th>
                </tr>
            </thead>
            <tbody class="divide-y" style="border-color: var(--border-color);">
                @forelse($categorySales as $index => $cat)
                @php $pct = $grandTotal > 0 ? ($cat->total_sales / $grandTotal) * 100 : 0; @endphp
                    <tr class="table-row">
                        <td class="px-5 py-4 text-sm" style="color: var(--text-muted);">{{ $index + 1 }}</td>
                        <td class="px-5 py-4 text-sm font-bold" style="color: var(--text-primary);">{{ $cat->category_name }}</td>
                        <td class="px-5 py-4 text-sm text-right" style="color: var(--text-secondary);">{{ $cat->total_items }}</td>
                        <td class="px-5 py-4 text-sm text-right" style="color: var(--text-secondary);">{{ $cat->total_quantity }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold" style="color: var(--text-primary);">${{ number_format($cat->total_sales, 2) }}</td>
                        <td class="px-5 py-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <div class="w-24 rounded-full h-2 overflow-hidden" style="background: var(--table-bg);">
                                    <div class="h-full bg-gradient-to-r from-indigo-400 to-indigo-600 rounded-full" style="width: {{ $pct }}%"></div>
                                </div>
                                <span class="text-sm font-medium w-12 text-right" style="color: var(--text-secondary);">{{ number_format($pct, 1) }}%</span>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-5 py-12 text-center">
                        <div class="rounded-2xl py-8 flex flex-col items-center" style="background: var(--table-bg);">
                            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-3" style="background: var(--input-bg);">
                                <i class="fas fa-tags" style="color: var(--text-muted); font-size: 1.25rem;"></i>
                            </div>
                            <p class="font-medium" style="color: var(--text-muted);">No data available</p>
                        </div>
                    </td></tr>
                @endforelse
            </tbody>
            @if($categorySales->count() > 0)
                <tfoot style="background: var(--table-bg);">
                    <tr>
                        <td class="px-5 py-4 text-sm font-bold" style="color: var(--text-primary);" colspan="2">Total</td>
                        <td class="px-5 py-4 text-sm text-right font-bold" style="color: var(--text-primary);">{{ $totalItems }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold" style="color: var(--text-primary);">{{ $totalQuantity }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-indigo-400">${{ number_format($grandTotal, 2) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold" style="color: var(--text-primary);">100%</td>
                    </tr>
                </tfoot>
            @endif
        </table>
    </div>
</div>

@endcan
@endsection