@extends('layouts.admin')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('content')
@php
    $currency = \App\Models\Setting::get('currency', 'INR');
@endphp
<div class="space-y-8">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <p class="text-slate-600">Welcome back, <span class="font-medium text-slate-800">{{ Auth::user()->name }}</span>. Role: <x-badge variant="default">{{ Auth::user()->getRoleNames()->first() ?? '—' }}</x-badge></p>
            <p class="mt-1 text-sm text-slate-500">
                {{ $stats['orders_count'] }} total orders · {{ $stats['pending_trials'] }} pending trials · {{ $stats['pending_deliveries'] }} ready for delivery
            </p>
        </div>
        <div class="flex flex-wrap gap-2">
            @can('create branches')<a href="{{ route('branches.create') }}" class="btn-secondary">Add Branch</a>@endcan
            @can('create users')<a href="{{ route('users.create') }}" class="btn-secondary">Add User</a>@endcan
            @can('create orders')<a href="{{ route('orders.create') }}" class="btn-primary">New Order</a>@endcan
        </div>
    </div>

    <div>
        <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500">Summary</h2>
        <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <x-stat-card label="Total orders" :value="$stats['orders_count']" />
            <x-stat-card label="Sales (today)" :value="$currency . ' ' . number_format($stats['total_sales_today'] ?? 0, 2)" />
            <x-stat-card label="Sales (this month)" :value="$currency . ' ' . number_format($stats['total_sales_month'] ?? 0, 2)" />
            <x-stat-card label="Pending deliveries" :value="$stats['pending_deliveries'] ?? 0" subtext="Orders ready to deliver" />
            <x-stat-card label="Pending trials" :value="$stats['pending_trials'] ?? 0" subtext="Scheduled trials" />
            <x-stat-card label="Outstanding" :value="$currency . ' ' . number_format($stats['outstanding_payments'] ?? 0, 2)" subtext="Due amount" />
            <x-stat-card label="Users" :value="$stats['users_count']" />
            <x-stat-card label="Branches" :value="$stats['branches_count']" />
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-2">
        <x-card>
            <h3 class="text-base font-semibold text-slate-900">Sales (last 7 days)</h3>
            <p class="mt-1 text-sm text-slate-500">Daily revenue</p>
            <div class="mt-4 h-64">
                <canvas id="chartSales" height="240"></canvas>
            </div>
        </x-card>
        <x-card>
            <h3 class="text-base font-semibold text-slate-900">Orders by status</h3>
            <p class="mt-1 text-sm text-slate-500">Current distribution</p>
            <div class="mt-4 h-64 flex items-center justify-center">
                <canvas id="chartOrders" height="240"></canvas>
            </div>
        </x-card>
    </div>

    <div class="grid gap-6 lg:grid-cols-2">
        <x-card>
            <h3 class="text-base font-semibold text-slate-900">Quick actions</h3>
            <ul class="mt-4 space-y-2">
                @can('create orders')<li><a href="{{ route('orders.create') }}" class="text-slate-600 hover:text-slate-900">Create new order</a></li>@endcan
                @can('view orders')<li><a href="{{ route('orders.index') }}" class="text-slate-600 hover:text-slate-900">View all orders</a></li>@endcan
                @can('view trials')<li><a href="{{ route('trials.index') }}" class="text-slate-600 hover:text-slate-900">Trials</a></li>@endcan
                @can('view deliveries')<li><a href="{{ route('deliveries.index') }}" class="text-slate-600 hover:text-slate-900">Deliveries</a></li>@endcan
                @can('view reports')<li><a href="{{ route('reports.index') }}" class="text-slate-600 hover:text-slate-900">Reports</a></li>@endcan
            </ul>
        </x-card>
        <x-card>
            <h3 class="text-base font-semibold text-slate-900">Support</h3>
            <p class="mt-2 text-sm text-slate-600">Use the sidebar to navigate. For settings and shop configuration, go to Settings.</p>
        </x-card>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
(function () {
    const salesData = @json($stats['sales_last_7_days'] ?? []);
    const ordersData = @json($stats['orders_by_status'] ?? ['labels' => [], 'data' => []]);

    if (document.getElementById('chartSales') && salesData.length) {
        new Chart(document.getElementById('chartSales'), {
            type: 'bar',
            data: {
                labels: salesData.map(d => d.label),
                datasets: [{
                    label: 'Sales',
                    data: salesData.map(d => d.total),
                    backgroundColor: 'rgba(59, 130, 246, 0.6)',
                    borderColor: 'rgb(59, 130, 246)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { callback: v => Number(v).toLocaleString() }
                    }
                }
            }
        });
    }

    if (document.getElementById('chartOrders') && ordersData.labels && ordersData.labels.length) {
        new Chart(document.getElementById('chartOrders'), {
            type: 'doughnut',
            data: {
                labels: ordersData.labels,
                datasets: [{
                    data: ordersData.data,
                    backgroundColor: [
                        '#94a3b8', '#3b82f6', '#8b5cf6', '#ec4899', '#f59e0b', '#10b981', '#059669', '#ef4444'
                    ],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'right' }
                }
            }
        });
    }
})();
</script>
@endpush
@endsection