@extends('layouts.app')

@section('content')
<div class="app-content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">
                <h3 class="mb-0">Trimurti Store Analytics</h3>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="app-content">
    <div class="container-fluid">
        <!-- KPI Cards -->
        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="small-box text-bg-primary">
                    <div class="inner">
                        <h3>NPR {{ number_format($totalRevenue, 2) }}</h3>
                        <p>Total Revenue</p>
                    </div>
                    <i class="small-box-icon bi bi-currency-exchange"></i>
                    <a href="{{ route('admin.orders.index') }}" class="small-box-footer link-light">
                        View Orders <i class="bi bi-arrow-right-circle"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box text-bg-success">
                    <div class="inner">
                        <h3>{{ $activeRepairs }}</h3>
                        <p>Active Repairs</p>
                    </div>
                    <i class="small-box-icon bi bi-tools"></i>
                    <a href="{{ route('admin.repair-details.index') }}" class="small-box-footer link-light">
                        Manage Repairs <i class="bi bi-arrow-right-circle"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box text-bg-warning">
                    <div class="inner">
                        <h3>{{ $pendingOrders }}</h3>
                        <p>Pending Orders</p>
                    </div>
                    <i class="small-box-icon bi bi-cart-fill"></i>
                    <a href="{{ route('admin.orders.index', ['status' => 'Pending']) }}" class="small-box-footer link-dark">
                        Process Now <i class="bi bi-arrow-right-circle"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box text-bg-danger">
                    <div class="inner">
                        <h3>{{ $newUsers }}</h3>
                        <p>New Customers (30d)</p>
                    </div>
                    <i class="small-box-icon bi bi-people-fill"></i>
                    <a href="{{ route('admin.users.index') }}" class="small-box-footer link-light">
                        User Directory <i class="bi bi-arrow-right-circle"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Main Charts Row -->
        <div class="row">
            <div class="col-lg-8">
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-header border-bottom-0 bg-transparent">
                        <h3 class="card-title fw-bold">Sales Performance Trends</h3>
                    </div>
                    <div class="card-body">
                        <div id="revenue-chart" style="min-height: 350px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-header border-bottom-0 bg-transparent">
                        <h3 class="card-title fw-bold">Order Status Distribution</h3>
                    </div>
                    <div class="card-body d-flex align-items-center justify-content-center">
                        <div id="order-status-chart" style="width: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Secondary Charts Row -->
        <div class="row">
            <div class="col-lg-4">
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-header border-bottom-0 bg-transparent">
                        <h3 class="card-title fw-bold">Repair Workflow Status</h3>
                    </div>
                    <div class="card-body">
                        <div id="repair-status-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-header border-bottom-0 bg-transparent">
                        <h3 class="card-title fw-bold">Top Selling Products</h3>
                    </div>
                    <div class="card-body">
                        <div id="top-products-chart"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activity Tables -->
        <div class="row">
            <div class="col-md-6">
                <div class="card shadow-sm border-0">
                    <div class="card-header border-0 bg-transparent">
                        <h3 class="card-title fw-bold">Recent Orders</h3>
                        <div class="card-tools">
                            <a href="{{ route('admin.orders.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th>Order ID</th>
                                        <th>Customer</th>
                                        <th>Amount</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentOrders as $order)
                                    <tr>
                                        <td><span class="fw-bold text-primary">#{{ $order->order_number }}</span></td>
                                        <td>{{ $order->user->name ?? 'Guest' }}</td>
                                        <td>NPR {{ number_format($order->total_amount, 2) }}</td>
                                        <td>
                                            @php
                                                $badgeClass = match($order->status) {
                                                    'Pending' => 'bg-warning',
                                                    'Delivered' => 'bg-success',
                                                    'Cancelled' => 'bg-danger',
                                                    default => 'bg-info'
                                                };
                                            @endphp
                                            <span class="badge {{ $badgeClass }}">{{ $order->status }}</span>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr><td colspan="4" class="text-center py-4">No recent orders</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card shadow-sm border-0">
                    <div class="card-header border-0 bg-transparent">
                        <h3 class="card-title fw-bold">Recent Service Repairs</h3>
                        <div class="card-tools">
                            <a href="{{ route('admin.repair-details.index') }}" class="btn btn-sm btn-outline-success">View All</a>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th>Number</th>
                                        <th>Device</th>
                                        <th>Branch</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentRepairs as $repair)
                                    <tr>
                                        <td><span class="fw-bold text-success">{{ $repair->repair_number }}</span></td>
                                        <td>{{ $repair->device_name }}</td>
                                        <td>{{ $repair->branch->title ?? 'N/A' }}</td>
                                        <td>
                                            <span class="badge bg-secondary">{{ $repair->status }}</span>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr><td colspan="4" class="text-center py-4">No recent repairs</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // --- Sales Trend Chart ---
        const salesData = @json($salesTrend);
        const revenueChartOptions = {
            series: [{
                name: 'Revenue',
                data: salesData.map(item => item.total)
            }],
            chart: {
                height: 350,
                type: 'area',
                sparkline: { enabled: false },
                toolbar: { show: false }
            },
            colors: ['#0d6efd'],
            fill: {
                type: 'gradient',
                gradient: { shadeIntensity: 1, opacityFrom: 0.3, opacityTo: 0.1, stops: [0, 90, 100] }
            },
            dataLabels: { enabled: false },
            stroke: { curve: 'smooth', width: 3 },
            xaxis: {
                categories: salesData.map(item => item.date),
                type: 'datetime'
            },
            yaxis: { labels: { formatter: (val) => "NPR " + val.toLocaleString() } },
            tooltip: { x: { format: 'dd MMM yyyy' } }
        };
        new ApexCharts(document.querySelector("#revenue-chart"), revenueChartOptions).render();

        // --- Order Status Chart ---
        const orderData = @json($orderStatuses);
        const orderStatusOptions = {
            series: orderData.map(item => item.total),
            chart: { type: 'pie', height: 300 },
            labels: orderData.map(item => item.status),
            colors: ['#ffc107', '#198754', '#dc3545', '#0dcaf0', '#6c757d'],
            legend: { position: 'bottom' },
            dataLabels: { enabled: true }
        };
        new ApexCharts(document.querySelector("#order-status-chart"), orderStatusOptions).render();

        // --- Repair Status Chart ---
        const repairData = @json($repairStatuses);
        const repairStatusOptions = {
            series: repairData.map(item => item.total),
            chart: { type: 'donut', height: 300 },
            labels: repairData.map(item => item.status),
            theme: { palette: 'palette2' },
            legend: { position: 'bottom' }
        };
        new ApexCharts(document.querySelector("#repair-status-chart"), repairStatusOptions).render();

        // --- Top Products Chart ---
        const topProductData = @json($topProducts);
        const topProductsOptions = {
            series: [{
                name: 'Volume Sold',
                data: topProductData.map(item => item.total_sold)
            }],
            chart: { type: 'bar', height: 300 },
            plotOptions: { bar: { horizontal: true, borderRadius: 4 } },
            colors: ['#20c997'],
            xaxis: { categories: topProductData.map(item => item.name) },
            dataLabels: { enabled: true }
        };
        new ApexCharts(document.querySelector("#top-products-chart"), topProductsOptions).render();
    });
</script>
@endpush