@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <form method="GET" action="{{ route('admin.dashboard') }}" class="mb-3">
        <div class="d-flex flex-wrap align-items-center" style="gap:.5rem;">
            <div class="input-group" style="max-width:320px;">
                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                <input type="text" id="dateRangeDisplay" class="form-control" autocomplete="off" readonly
                       value="{{ $start->format('d M Y') }} - {{ $end->format('d M Y') }}">
            </div>
            <input type="hidden" name="start" id="startDate" value="{{ $start->toDateString() }}">
            <input type="hidden" name="end" id="endDate" value="{{ $end->toDateString() }}">
            <button type="submit" class="btn btn-primary">Apply</button>
            <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary">Reset</a>
            <span class="text-muted ml-2">
                Stats for <strong>{{ $start->format('d M Y') }}</strong> &ndash; <strong>{{ $end->format('d M Y') }}</strong>
            </span>
        </div>
    </form>

    <div class="row">
        <div class="col-lg-2 col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{ $stats['total_products'] }}</h3>
                    <p>Products <small>(total)</small></p>
                </div>
                <div class="icon"><i class="fas fa-box-open"></i></div>
            </div>
        </div>
        <div class="col-lg-2 col-6">
            <div class="small-box bg-success">
                <div class="inner">
                    <h3>{{ $stats['total_categories'] }}</h3>
                    <p>Categories <small>(total)</small></p>
                </div>
                <div class="icon"><i class="fas fa-tags"></i></div>
            </div>
        </div>
        <div class="col-lg-2 col-6">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3>{{ $stats['new_customers'] }}</h3>
                    <p>New Customers</p>
                </div>
                <div class="icon"><i class="fas fa-users"></i></div>
            </div>
        </div>
        <div class="col-lg-2 col-6">
            <div class="small-box bg-primary">
                <div class="inner">
                    <h3>{{ $stats['orders'] }}</h3>
                    <p>Orders</p>
                </div>
                <div class="icon"><i class="fas fa-receipt"></i></div>
            </div>
        </div>
        <div class="col-lg-2 col-6">
            <div class="small-box bg-danger">
                <div class="inner">
                    <h3>{{ $stats['pending_orders'] }}</h3>
                    <p>Pending Orders</p>
                </div>
                <div class="icon"><i class="fas fa-clock"></i></div>
            </div>
        </div>
        <div class="col-lg-2 col-6">
            <div class="small-box bg-secondary">
                <div class="inner">
                    <h3>Rs. {{ number_format($stats['revenue']) }}</h3>
                    <p>Revenue</p>
                </div>
                <div class="icon"><i class="fas fa-coins"></i></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-7">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Recent Orders</h3>
                </div>
                <div class="card-body p-0">
                    <table class="table table-striped mb-0">
                        <thead>
                            <tr>
                                <th>Order #</th>
                                <th>Customer</th>
                                <th>Total</th>
                                <th>Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentOrders as $order)
                                <tr>
                                    <td>{{ $order->order_number }}</td>
                                    <td>{{ $order->full_name }}</td>
                                    <td>Rs. {{ number_format($order->total) }}</td>
                                    <td><span class="badge bg-{{ $order->statusBadgeColor() }}">{{ ucfirst($order->status) }}</span></td>
                                    <td><a href="{{ route('admin.orders.show', $order) }}" class="btn btn-primary btn-sm">View</a></td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="text-center text-muted py-3">No orders yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-lg-5">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Low Stock Products</h3>
                </div>
                <div class="card-body p-0">
                    <table class="table table-striped mb-0">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Stock</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($lowStockProducts as $product)
                                <tr>
                                    <td>{{ $product->name }}</td>
                                    <td><span class="badge bg-danger">{{ $product->stock_quantity }}</span></td>
                                </tr>
                            @empty
                                <tr><td colspan="2" class="text-center text-muted py-3">All stock levels healthy.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@stop

@push('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-daterangepicker@3.1.0/daterangepicker.css">
@endpush

@push('js')
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-daterangepicker@3.1.0/daterangepicker.min.js"></script>
<script>
$(function () {
    var startDate = moment('{{ $start->toDateString() }}', 'YYYY-MM-DD');
    var endDate = moment('{{ $end->toDateString() }}', 'YYYY-MM-DD');

    $('#dateRangeDisplay').daterangepicker({
        startDate: startDate,
        endDate: endDate,
        maxDate: moment(),
        opens: 'right',
        locale: { format: 'DD MMM YYYY', cancelLabel: 'Clear' },
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
        }
    }, function (start, end) {
        $('#startDate').val(start.format('YYYY-MM-DD'));
        $('#endDate').val(end.format('YYYY-MM-DD'));
    });
});
</script>
@endpush
