@extends('layouts.app')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')

{{-- Branch context banner for non-admins --}}
@if(!$isAdmin && $user->branch)
<div class="d-flex align-items-center gap-3 mb-4 p-3 rounded-3" style="background:rgba(46,196,182,0.08);border:1px solid rgba(46,196,182,0.2);">
    <i class="bi bi-building" style="font-size:20px;color:var(--accent);"></i>
    <div>
        <span class="fw-700" style="font-size:14px;">{{ $user->branch->name }}</span>
        <span class="text-muted ms-2" style="font-size:13px;">{{ $user->branch->code }} · You are viewing data for this branch only</span>
    </div>
</div>
@endif

{{-- KPI Cards --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-xl-3">
        <div class="stat-card stat-card-1 h-100">
            <div class="stat-icon"><i class="bi bi-currency-dollar"></i></div>
            <div class="stat-value">${{ number_format($todaySales, 2) }}</div>
            <div class="stat-label">Today's Sales</div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="stat-card stat-card-2 h-100">
            <div class="stat-icon"><i class="bi bi-graph-up"></i></div>
            <div class="stat-value">${{ number_format($monthlySales, 2) }}</div>
            <div class="stat-label">Monthly Sales</div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="stat-card stat-card-3 h-100">
            <div class="stat-icon"><i class="bi bi-box-seam"></i></div>
            <div class="stat-value">{{ number_format($totalProducts) }}</div>
            <div class="stat-label">Total Products</div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="stat-card stat-card-4 h-100">
            <div class="stat-icon"><i class="bi bi-wallet2"></i></div>
            <div class="stat-value">${{ number_format($inventoryValue, 0) }}</div>
            <div class="stat-label">Inventory Value</div>
        </div>
    </div>
</div>

{{-- Top row: Charts + Trending --}}
<div class="row g-4 mb-4">
    {{-- Sales trend --}}
    <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;">Sales Trend (6 Months)</h6>
                <canvas id="salesTrendChart" 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,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <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;font-size:15px;">Top Trending</div>
                        <div style="font-size:12px;color:var(--text-muted-c)">
                            Best sellers this month
                            @if(!$isAdmin && $user->branch) · {{ $user->branch->code }} @endif
                        </div>
                    </div>
                </div>

                @forelse($topTrendingProducts as $i => $product)
                @php $colors = ['#FF6B35','#2EC4B6','#4361EE']; $bgs = ['rgba(255,107,53,0.10)','rgba(46,196,182,0.10)','rgba(67,97,238,0.10)']; @endphp
                <div class="d-flex align-items-center gap-3 mb-3">
                    <div style="width:34px;height:34px;border-radius:50%;background:{{ $bgs[$i] }};display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;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;" title="{{ $product->name }}">{{ $product->name }}</div>
                        <div style="font-size:11px;color:var(--text-muted-c)">
                            {{ number_format($product->total_qty) }} units · {{ $product->order_count }} orders
                        </div>
                    </div>
                    <div class="text-end flex-shrink-0">
                        <div class="fw-700" style="font-size:14px;color:{{ $colors[$i] }}">${{ number_format($product->total_revenue, 2) }}</div>
                    </div>
                </div>
                @if($i < count($topTrendingProducts) - 1)
                <div style="border-top:1px solid var(--border-c);margin-bottom:12px;"></div>
                @endif
                @empty
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-bar-chart" style="font-size:36px;"></i>
                    <p class="mt-2 mb-0" style="font-size:13px;">No sales recorded this month yet.</p>
                </div>
                @endforelse

                @if($topTrendingProducts->isNotEmpty())
                <div class="mt-4 pt-3" style="border-top:1px solid var(--border-c)">
                    <a href="{{ route('reports.sales') }}" style="font-size:13px;color:var(--brand);text-decoration:none;">Full Sales Report →</a>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Admin: branch comparison / Manager: quick stats --}}
    <div class="col-12 col-xl-3">
        @if($isAdmin && $branchComparison)
        <div class="card h-100">
            <div class="card-body p-4">
                <h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Branch Performance</h6>
                <div style="font-size:12px;color:var(--text-muted-c);margin-bottom:12px;">This month</div>
                @foreach($branchComparison as $b)
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <div>
                            <span class="fw-600" style="font-size:13px;">{{ $b->name }}</span>
                            @if($b->is_headquarters)<span style="font-size:10px;color:#FF6B35;font-weight:700;margin-left:4px;">HQ</span>@endif
                        </div>
                        <span class="fw-700" style="font-size:13px;color:var(--accent)">${{ number_format($b->monthly_revenue, 0) }}</span>
                    </div>
                    @php $maxRev = $branchComparison->max('monthly_revenue') ?: 1; @endphp
                    <div class="progress" style="height:5px;">
                        <div class="progress-bar" style="width:{{ max(2, ($b->monthly_revenue / $maxRev) * 100) }}%;background:var(--brand);"></div>
                    </div>
                </div>
                @endforeach
                <div class="mt-3 pt-2" style="border-top:1px solid var(--border-c)">
                    <a href="{{ route('branches.index') }}" style="font-size:13px;color:var(--brand);text-decoration:none;">Manage Branches →</a>
                </div>
            </div>
        </div>
        @else
        <div class="card h-100">
            <div class="card-body p-4">
                <h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Stock Alerts</h6>
                <div class="d-flex justify-content-between mb-3 p-3 rounded-3" style="background:rgba(239,71,111,0.08)">
                    <span style="font-size:13px;">Out of stock</span>
                    <strong style="color:#EF476F">{{ $outOfStockCount }}</strong>
                </div>
                <div class="d-flex justify-content-between mb-3 p-3 rounded-3" style="background:rgba(255,209,102,0.1)">
                    <span style="font-size:13px;">Low stock</span>
                    <strong style="color:#B45309">{{ $lowStockCount }}</strong>
                </div>
                <a href="{{ route('products.index') }}?status=low" style="font-size:13px;color:var(--brand);text-decoration:none;">View Products →</a>
            </div>
        </div>
        @endif
    </div>
</div>

{{-- Bottom row: recent sales + low stock --}}
<div class="row g-4">
    <div class="col-12 col-xl-7">
        <div class="card">
            <div class="card-body p-0">
                <div class="p-4 pb-2 d-flex align-items-center justify-content-between">
                    <h6 class="fw-700 mb-0" style="font-family:'Space Grotesk',sans-serif;">Recent Sales</h6>
                    <a href="{{ route('sales.index') }}" style="font-size:13px;color:var(--brand)">View All →</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th class="ps-4">Invoice</th>
                                @if($isAdmin)<th>Branch</th>@endif
                                <th>Customer</th>
                                <th class="text-end pe-4">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentSales 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($isAdmin)
                                <td><span style="font-size:11px;font-family:monospace;color:var(--text-muted-c)">{{ $sale->branch?->code ?? '—' }}</span></td>
                                @endif
                                <td style="font-size:13px;">{{ $sale->customer?->name ?? 'Walk-in' }}</td>
                                <td class="text-end pe-4 fw-700">${{ number_format($sale->total_usd, 2) }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="{{ $isAdmin ? 4 : 3 }}" class="text-center py-4 text-muted">No sales yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-5">
        <div class="card">
            <div class="card-body p-4">
                <h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Low Stock Alerts</h6>
                @forelse($lowStockProducts as $product)
                <div class="d-flex align-items-center justify-content-between mb-2 p-2 rounded-2" style="background:var(--page-bg)">
                    <div style="min-width:0">
                        <div class="fw-600" style="font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $product->name }}</div>
                        <div style="font-size:11px;color:var(--text-muted-c)">
                            {{ $product->category?->name ?? '' }}
                            @if($isAdmin && $product->branch) · {{ $product->branch->code }} @endif
                        </div>
                    </div>
                    <div class="text-end flex-shrink-0 ms-2">
                        <span style="font-size:13px;font-weight:700;color:{{ $product->quantity_in_stock == 0 ? '#EF476F' : '#B45309' }}">
                            {{ $product->quantity_in_stock }} left
                        </span>
                    </div>
                </div>
                @empty
                <div class="text-center py-4 text-muted"><i class="bi bi-check-circle" style="font-size:28px;color:#06D6A0"></i><p class="mt-2 mb-0" style="font-size:13px;">All stock levels are healthy.</p></div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const trendLabels = @json($monthlySalesTrend->keys());
const trendValues = @json($monthlySalesTrend->values());
new Chart(document.getElementById('salesTrendChart'), {
    type: 'line',
    data: {
        labels: trendLabels,
        datasets: [{
            label: 'Revenue (USD)',
            data: trendValues,
            borderColor: '#FF6B35',
            backgroundColor: 'rgba(255,107,53,0.08)',
            borderWidth: 2.5,
            pointRadius: 4,
            pointBackgroundColor: '#FF6B35',
            fill: true,
            tension: 0.35,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { display: false } },
            y: { ticks: { callback: v => '$' + v.toLocaleString() } }
        }
    }
});
</script>
@endpush