@extends('layouts.app')
@section('title','Sales Report')@section('page-title','Sales Report')
@section('content')
<div class="page-header d-flex align-items-start justify-content-between">
    <div><h1>Sales Report</h1><p>{{ \Carbon\Carbon::parse($from)->format('M j, Y') }} — {{ \Carbon\Carbon::parse($to)->format('M j, Y') }}{{ $selectedBranch ? ' · '.$selectedBranch->name : (auth()->user()->isAdmin() ? ' · All Branches' : '') }}</p></div>
    <button onclick="window.print()" class="btn btn-outline-secondary"><i class="bi bi-printer me-1"></i>Print</button>
</div>
<div class="card mb-4"><div class="card-body p-3">
    <form method="GET" class="row g-2 align-items-end">
        <div class="col-6 col-md-2"><label class="form-label" style="font-size:12px;">From</label><input type="date" name="from" class="form-control" value="{{ $from }}"></div>
        <div class="col-6 col-md-2"><label class="form-label" style="font-size:12px;">To</label><input type="date" name="to" class="form-control" value="{{ $to }}"></div>
        @if(auth()->user()->isAdmin())
        <div class="col-6 col-md-2"><label class="form-label" style="font-size:12px;">Branch</label><select name="branch_id" class="form-select"><option value="">All Branches</option>@foreach($branches as $b)<option value="{{ $b->id }}" {{ request('branch_id')==$b->id?'selected':'' }}>{{ $b->code }} — {{ $b->name }}</option>@endforeach</select></div>
        @endif
        <div class="col-auto" style="padding-top:24px"><button type="submit" class="btn btn-brand">Generate</button></div>
    </form>
</div></div>

<div class="row g-3 mb-4">
    @foreach([['$'.number_format($summary['total_revenue_usd'],2),'Total Revenue (USD)','stat-card-1','bi-currency-dollar'],[number_format($summary['total_transactions']),'Transactions','stat-card-2','bi-receipt'],['$'.number_format($summary['avg_order_usd'],2),'Avg Order (USD)','stat-card-3','bi-calculator'],[number_format($summary['total_items_sold']),'Units Sold','stat-card-4','bi-box-seam']] as [$val,$label,$cls,$icon])
    <div class="col-6 col-xl-3"><div class="stat-card {{ $cls }} h-100"><div class="stat-icon"><i class="bi {{ $icon }}"></i></div><div class="stat-value">{{ $val }}</div><div class="stat-label">{{ $label }}</div></div></div>
    @endforeach
</div>

<div class="row g-4 mb-4">
    <div class="col-12 col-xl-5"><div class="card h-100"><div class="card-body p-4"><h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Daily Revenue</h6><canvas id="dailyChart" height="180"></canvas></div></div></div>

    {{-- Top 3 Trending Products --}}
    <div class="col-12 col-xl-4"><div class="card h-100"><div class="card-body p-4">
        <div class="d-flex align-items-center gap-2 mb-4">
            <div style="width:36px;height:36px;border-radius:10px;background:rgba(255,107,53,.12);display:flex;align-items:center;justify-content:center;"><i class="bi bi-fire" style="color:#FF6B35;font-size:18px;"></i></div>
            <div><div class="fw-700" style="font-family:'Space Grotesk',sans-serif;">Top Trending</div><div style="font-size:12px;color:var(--text-muted-c)">This period{{ $selectedBranch ? ' · '.$selectedBranch->code : '' }}</div></div>
        </div>
        @forelse($topTrendingProducts as $i => $item)
        @php $colors=['#FF6B35','#2EC4B6','#4361EE']; @endphp
        <div class="d-flex align-items-center gap-3 mb-3 p-3 rounded-3" style="background:var(--page-bg)">
            <div style="width:32px;height:32px;border-radius:50%;background:{{ $colors[$i] }}18;display:flex;align-items:center;justify-content:center;font-weight:800;color:{{ $colors[$i] }};flex-shrink:0;">{{ $i+1 }}</div>
            <div class="flex-fill" style="min-width:0"><div class="fw-600" style="font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $item->product?->name }}</div><div style="font-size:11px;color:var(--text-muted-c)">{{ number_format($item->total_qty) }} units sold</div></div>
            <div class="fw-700" style="font-size:14px;color:{{ $colors[$i] }}">${{ number_format($item->total_revenue,2) }}</div>
        </div>
        @empty<div class="text-center py-4 text-muted"><i class="bi bi-bar-chart" style="font-size:32px"></i><p class="mt-2 mb-0" style="font-size:13px;">No sales this period.</p></div>@endforelse
    </div></div></div>

    <div class="col-12 col-xl-3"><div class="card h-100"><div class="card-body p-4"><h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Payment Methods</h6><canvas id="paymentChart" height="180"></canvas></div></div></div>
</div>

@if($branchBreakdown && $branchBreakdown->count())
<div class="card mb-4"><div class="card-body p-4">
    <h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Branch Performance Breakdown</h6>
    <div class="table-responsive"><table class="table mb-0">
        <thead><tr><th>Branch</th><th class="text-end">Transactions</th><th class="text-end">Revenue (USD)</th><th class="text-end">Revenue (LRD)</th></tr></thead>
        <tbody>
        @foreach($branchBreakdown as $row)
        <tr>
            <td><div class="fw-600">{{ $row['branch']->name }}</div><span style="font-size:11px;font-family:monospace;color:var(--text-muted-c)">{{ $row['branch']->code }}</span></td>
            <td class="text-end">{{ number_format($row['count']) }}</td>
            <td class="text-end fw-700">${{ number_format($row['revenue_usd'],2) }}</td>
            <td class="text-end text-muted" style="font-size:13px;">LRD {{ number_format($row['revenue_local'],2) }}</td>
        </tr>
        @endforeach
        </tbody>
    </table></div>
</div></div>
@endif

<div class="card"><div class="card-body p-0">
    <div class="p-4 pb-2"><h6 class="fw-700" style="font-family:'Space Grotesk',sans-serif;">All Transactions</h6></div>
    <div class="table-responsive"><table class="table table-hover mb-0">
        <thead><tr><th class="ps-4">Invoice</th>@if(auth()->user()->isAdmin())<th>Branch</th>@endif<th>Customer</th><th>Items</th><th class="text-end">Total (USD)</th><th>Status</th><th class="text-end pe-4">Date</th></tr></thead>
        <tbody>
        @forelse($sales as $sale)
        <tr>
            <td class="ps-4"><a href="{{ route('sales.show',$sale) }}" style="font-weight:700;color:var(--accent);text-decoration:none;font-size:13px;">{{ $sale->invoice_number }}</a></td>
            @if(auth()->user()->isAdmin())<td><span style="font-size:11px;font-family:monospace;background:rgba(46,196,182,.1);color:var(--accent);padding:2px 8px;border-radius:6px;">{{ $sale->branch?->code ?? '—' }}</span></td>@endif
            <td style="font-size:13px;">{{ $sale->customer?->name ?? 'Walk-in' }}</td>
            <td style="font-size:13px;">{{ $sale->items->sum('quantity') }}</td>
            <td class="text-end fw-700">${{ number_format($sale->total_usd,2) }}</td>
            <td><span class="badge-status badge-{{ $sale->status }}">{{ ucfirst($sale->status) }}</span></td>
            <td class="text-end pe-4" style="font-size:12px;color:var(--text-muted-c)">{{ $sale->sale_date->format('M j, Y') }}</td>
        </tr>
        @empty<tr><td colspan="{{ auth()->user()->isAdmin()?7:6 }}" class="text-center py-4 text-muted">No sales in this period.</td></tr>
        @endforelse
        </tbody>
    </table></div>
</div></div>
@endsection
@push('scripts')
<script>
const dailyData = @json($dailyTrend);
new Chart(document.getElementById('dailyChart'),{type:'bar',data:{labels:Object.keys(dailyData),datasets:[{label:'Revenue (USD)',data:Object.values(dailyData).map(d=>d.total),backgroundColor:'rgba(255,107,53,.7)',borderRadius:6}]},options:{responsive:true,plugins:{legend:{display:false}},scales:{x:{grid:{display:false},ticks:{font:{size:10}}},y:{ticks:{callback:v=>'$'+v}}}}});
const payData = @json($byPayment);
const payLabels = Object.keys(payData).map(k=>k.charAt(0).toUpperCase()+k.slice(1));
const payValues = Object.values(payData).map(d=>d.total);
new Chart(document.getElementById('paymentChart'),{type:'doughnut',data:{labels:payLabels,datasets:[{data:payValues,backgroundColor:['#FF6B35','#2EC4B6','#4361EE','#7209B7'],borderWidth:0}]},options:{responsive:true,plugins:{legend:{position:'bottom',labels:{font:{size:11}}}},cutout:'65%'}});
</script>
@endpush