@extends('layouts.app')
@section('title', 'Dashboard')
@section('content')
<h4 class="mb-3">Welcome, {{ $user->name }}</h4>

<div class="row row-cols-3 row-cols-md-5 row-cols-lg-7 g-2 mb-4">
    @can('pos.access')
    <div class="col"><a href="{{ route('pos.index') }}" class="card p-2 text-center text-decoration-none text-dark h-100"><div class="fs-3">🛒</div><div class="small">POS</div></a></div>
    <div class="col"><a href="{{ route('orders.board') }}" class="card p-2 text-center text-decoration-none text-dark h-100"><div class="fs-3">📋</div><div class="small">Orders</div></a></div>
    @endcan
    @can('tables.manage')
    <div class="col"><a href="{{ route('tables.index') }}" class="card p-2 text-center text-decoration-none text-dark h-100"><div class="fs-3">🍽️</div><div class="small">Tables</div></a></div>
    @endcan
    @can('kitchen.access')
    <div class="col"><a href="{{ route('kitchen.index') }}" class="card p-2 text-center text-decoration-none text-dark h-100"><div class="fs-3">👨‍🍳</div><div class="small">Kitchen</div></a></div>
    @endcan
    @can('inventory.manage')
    <div class="col"><a href="{{ route('inventory.index') }}" class="card p-2 text-center text-decoration-none text-dark h-100"><div class="fs-3">📦</div><div class="small">Inventory</div></a></div>
    @endcan
    @can('reports.view')
    <div class="col"><a href="{{ route('reports.index') }}" class="card p-2 text-center text-decoration-none text-dark h-100"><div class="fs-3">📊</div><div class="small">Reports</div></a></div>
    @endcan
    @can('accounting.manage')
    <div class="col"><a href="{{ route('admin.finance.index') }}" class="card p-2 text-center text-decoration-none text-dark h-100"><div class="fs-3">💰</div><div class="small">Finance</div></a></div>
    @endcan
    @can('payroll.manage')
    <div class="col"><a href="{{ route('admin.payroll.index') }}" class="card p-2 text-center text-decoration-none text-dark h-100"><div class="fs-3">🧾</div><div class="small">Payroll</div></a></div>
    @endcan
    @can('scheduling.manage')
    <div class="col"><a href="{{ route('admin.shift-schedule.index') }}" class="card p-2 text-center text-decoration-none text-dark h-100"><div class="fs-3">🗓️</div><div class="small">Rota</div></a></div>
    @endcan
    @can('hr.manage')
    <div class="col"><a href="{{ route('admin.leave.index') }}" class="card p-2 text-center text-decoration-none text-dark h-100"><div class="fs-3">🧑‍💼</div><div class="small">HR</div></a></div>
    @endcan
    @can('promotions.manage')
    <div class="col"><a href="{{ route('admin.coupons.index') }}" class="card p-2 text-center text-decoration-none text-dark h-100"><div class="fs-3">🎁</div><div class="small">Promotions</div></a></div>
    @endcan
    @can('users.manage')
    <div class="col"><a href="{{ route('admin.users.index') }}" class="card p-2 text-center text-decoration-none text-dark h-100"><div class="fs-3">👥</div><div class="small">Staff</div></a></div>
    @endcan
</div>

<div class="row g-3 mb-4">
    <div class="col-md-3"><div class="card p-3"><div class="text-muted small">Orders Today</div><div class="fs-3 fw-bold">{{ $stats['orders_today'] }}</div></div></div>
    <div class="col-md-3"><div class="card p-3"><div class="text-muted small">Sales Today</div><div class="fs-3 fw-bold">{{ number_format($stats['sales_today'],2) }}</div></div></div>
    <div class="col-md-3"><div class="card p-3"><div class="text-muted small">Open Orders</div><div class="fs-3 fw-bold">{{ $stats['open_orders'] }}</div></div></div>
    <div class="col-md-3"><div class="card p-3"><div class="text-muted small">Low Stock Items</div><div class="fs-3 fw-bold text-danger">{{ $stats['low_stock'] }}</div></div></div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card p-3">
            <div class="text-muted small">Sales — This Month vs Last</div>
            <div class="fs-4 fw-bold">{{ number_format($monthComparison['this_month_sales'],2) }}
                <span class="fs-6 {{ $monthComparison['sales_change_pct'] >= 0 ? 'text-success' : 'text-danger' }}">
                    {{ $monthComparison['sales_change_pct'] >= 0 ? '▲' : '▼' }} {{ abs($monthComparison['sales_change_pct']) }}%
                </span>
            </div>
            <div class="text-muted small">vs {{ number_format($monthComparison['last_month_sales'],2) }} last month</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-3">
            <div class="text-muted small">Orders — This Month vs Last</div>
            <div class="fs-4 fw-bold">{{ $monthComparison['this_month_count'] }}
                <span class="fs-6 {{ $monthComparison['count_change_pct'] >= 0 ? 'text-success' : 'text-danger' }}">
                    {{ $monthComparison['count_change_pct'] >= 0 ? '▲' : '▼' }} {{ abs($monthComparison['count_change_pct']) }}%
                </span>
            </div>
            <div class="text-muted small">vs {{ $monthComparison['last_month_count'] }} last month</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-3">
            <div class="text-muted small">Avg Order Value — This Month</div>
            <div class="fs-4 fw-bold">{{ number_format($monthComparison['this_month_avg'],2) }}</div>
            <div class="text-muted small">vs {{ number_format($monthComparison['last_month_avg'],2) }} last month</div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-8">
        <div class="card p-3">
            <h6>Sales — Last 14 Days</h6>
            <canvas id="salesTrendChart" height="90"></canvas>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-3">
            <h6>Payment Methods — Last 30 Days</h6>
            <canvas id="paymentChart" height="200"></canvas>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-6">
        <div class="card p-3">
            <h6>Revenue by Channel — Last 30 Days</h6>
            <canvas id="channelChart" height="200"></canvas>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card p-3">
            <h6>Top 5 Products — Last 30 Days</h6>
            <canvas id="topProductsChart" height="180"></canvas>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card p-3">
            <h6>Low Stock Alerts</h6>
            @if ($lowStockItems->isEmpty())
                <p class="text-muted small mb-0">Nothing low on stock right now.</p>
            @else
                <table class="table table-sm mb-0">
                    <thead><tr><th>Item</th><th>Stock</th><th>Threshold</th></tr></thead>
                    <tbody>
                    @foreach ($lowStockItems as $item)
                    <tr class="table-danger">
                        <td>{{ $item->name }}</td>
                        <td>{{ $item->stock_qty }}</td>
                        <td>{{ $item->low_stock_threshold }}</td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
                <a href="{{ route('inventory.index') }}" class="btn btn-sm btn-outline-dark mt-2">Go to Inventory</a>
            @endif
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('salesTrendChart'), {
    type: 'line',
    data: {
        labels: @json($salesTrend['labels']),
        datasets: [{
            label: 'Sales',
            data: @json($salesTrend['values']),
            borderColor: '#212529',
            backgroundColor: 'rgba(33,37,41,0.08)',
            fill: true,
            tension: 0.3,
        }]
    },
    options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
});

new Chart(document.getElementById('paymentChart'), {
    type: 'doughnut',
    data: {
        labels: @json($paymentBreakdown['labels']),
        datasets: [{
            data: @json($paymentBreakdown['values']),
            backgroundColor: ['#198754', '#0d6efd', '#fd7e14', '#6f42c1', '#adb5bd'],
        }]
    },
    options: { plugins: { legend: { position: 'bottom' } } }
});

new Chart(document.getElementById('channelChart'), {
    type: 'pie',
    data: {
        labels: @json($channelBreakdown->keys()),
        datasets: [{
            data: @json($channelBreakdown->values()),
            backgroundColor: ['#212529', '#0d6efd', '#fd7e14', '#198754', '#6f42c1', '#dc3545', '#adb5bd'],
        }]
    },
    options: { plugins: { legend: { position: 'bottom' } } }
});

new Chart(document.getElementById('topProductsChart'), {
    type: 'bar',
    data: {
        labels: @json($topProducts['labels']),
        datasets: [{
            label: 'Qty Sold',
            data: @json($topProducts['values']),
            backgroundColor: '#212529',
        }]
    },
    options: { indexAxis: 'y', plugins: { legend: { display: false } } }
});
</script>
@endsection