@extends('layouts.app')

@section('title', 'Monthly 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); 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_monthly_sales')

<div class="mb-8">
    <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-emerald-400 to-emerald-600 rounded-full"></div>
            <div>
                <h1 class="text-3xl font-bold tracking-tight">Monthly Sales Report</h1>
                <p class="text-secondary mt-1">Date range sales summary with trends</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.monthly-sales.pdf', request()->query()) }}" class="btn-primary flex items-center gap-2 text-sm font-medium">
                <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 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500/20 to-emerald-600/10 flex items-center justify-center">
                <i class="fas fa-dollar-sign text-emerald-400"></i>
            </div>
            <p class="text-xs text-secondary font-medium">Total Sales</p>
        </div>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format($totalSales, 2) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-600/10 flex items-center justify-center">
                <i class="fas fa-receipt text-blue-400"></i>
            </div>
            <p class="text-xs text-secondary font-medium">Transactions</p>
        </div>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">{{ $totalTransactions }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-red-500/20 to-red-600/10 flex items-center justify-center">
                <i class="fas fa-tag text-red-400"></i>
            </div>
            <p class="text-xs text-secondary font-medium">Discount</p>
        </div>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format($totalDiscount, 2) }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-600/10 flex items-center justify-center">
                <i class="fas fa-percent text-purple-400"></i>
            </div>
            <p class="text-xs text-secondary font-medium">Period</p>
        </div>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">{{ \Carbon\Carbon::parse($dateFrom)->format('M d') }} — {{ \Carbon\Carbon::parse($dateTo)->format('M d') }}</p>
    </div>
</div>

@if($dailyData->count() > 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-emerald-500/20 flex items-center justify-center">
            <i class="fas fa-chart-bar text-emerald-400 text-sm"></i>
        </div>
        Daily Sales Trend
    </h3>
    <div class="overflow-x-auto">
        <table class="min-w-full">
            <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);">Date</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Transactions</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Total</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Bar</th>
                </tr>
            </thead>
            <tbody class="divide-y" style="border-color: var(--border-color);">
                @php $maxDaily = $dailyData->max('total') ?: 1; @endphp
                @foreach($dailyData as $day)
                <tr class="table-row">
                    <td class="px-5 py-3 text-sm" style="color: var(--text-secondary);">{{ displayDate(\Carbon\Carbon::parse($day->date)) }}</td>
                    <td class="px-5 py-3 text-sm text-right" style="color: var(--text-secondary);">{{ $day->count }}</td>
                    <td class="px-5 py-3 text-sm text-right font-medium" style="color: var(--text-secondary);">${{ number_format($day->total, 2) }}</td>
                    <td class="px-5 py-3">
                        <div class="w-full rounded-full h-5 overflow-hidden" style="background: var(--table-bg);">
                            <div class="h-full bg-gradient-to-r from-emerald-400 to-emerald-500 rounded-full flex items-center px-2 transition-all" style="width: {{ max(5, ($day->total / $maxDaily) * 100) }}%">
                                <span class="text-[10px] text-white font-bold whitespace-nowrap">{{ number_format(($day->total / $maxDaily) * 100, 0) }}%</span>
                            </div>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

<div class="table-container rounded-2xl overflow-hidden fade-in">
    <div class="p-5 flex items-center justify-between">
        <div>
            <h3 class="text-lg font-semibold" style="color: var(--text-primary);">Sales Transactions</h3>
            <p class="text-sm text-secondary mt-1">{{ displayDate(\Carbon\Carbon::parse($dateFrom)) }} — {{ displayDate(\Carbon\Carbon::parse($dateTo)) }}</p>
        </div>
        <span class="text-sm px-3 py-1 rounded-full" style="color: var(--text-muted); background: var(--table-bg);">{{ $sales->count() }} records</span>
    </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);">Invoice</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Customer</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Subtotal</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Discount</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Total</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Payment</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Date</th>
                </tr>
            </thead>
            <tbody class="divide-y" style="border-color: var(--border-color);">
                @forelse($sales as $sale)
                    <tr class="table-row">
                        <td class="px-5 py-3.5 text-sm font-medium"><a href="{{ route('sales.show', $sale) }}" class="text-emerald-400 hover:text-emerald-300 hover:underline">{{ $sale->invoice_no }}</a></td>
                        <td class="px-5 py-3.5 text-sm" style="color: var(--text-secondary);">{{ $sale->customer?->name ?? '—' }}</td>
                        <td class="px-5 py-3.5 text-sm text-right" style="color: var(--text-secondary);">${{ number_format($sale->subtotal, 2) }}</td>
                        <td class="px-5 py-3.5 text-sm text-right text-red-400">${{ number_format($sale->discount, 2) }}</td>
                        <td class="px-5 py-3.5 text-sm text-right font-semibold" style="color: var(--text-primary);">${{ number_format($sale->total_amount, 2) }}</td>
                        <td class="px-5 py-3.5 text-sm">
                            <span class="badge capitalize">{{ $sale->payment_method }}</span>
                        </td>
                        <td class="px-5 py-3.5 text-sm" style="color: var(--text-muted);">{{ displayDate($sale->created_at) }}</td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="px-5 py-12 text-center" style="color: var(--text-muted);">
                        <div class="flex flex-col items-center">
                            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-3" style="background: var(--table-bg);">
                                <i class="fas fa-calendar-xmark" style="color: var(--text-muted); font-size: 1.25rem;"></i>
                            </div>
                            <p class="font-medium" style="color: var(--text-secondary);">No sales for selected date range</p>
                        </div>
                    </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endcan
@endsection