@extends('admin.layouts.app')

@section('title', __('admin.menu.dashboard'))
@section('page-title', __('admin.dashboard.welcome'))
@section('page-subtitle', __('admin.auth.welcome', ['name' => auth()->user()->name]))

@php
    $cards = [
        ['key' => 'customers', 'icon' => 'bi-people', 'variant' => 'primary', 'route' => 'admin.customers.index'],
        ['key' => 'orders', 'icon' => 'bi-bag-check', 'variant' => 'success', 'route' => 'admin.orders.index'],
        ['key' => 'revenue', 'icon' => 'bi-cash-coin', 'variant' => 'warning', 'route' => null, 'money' => true],
        ['key' => 'products', 'icon' => 'bi-box-seam', 'variant' => 'info', 'route' => 'admin.products.index'],
        ['key' => 'quote_requests', 'icon' => 'bi-file-earmark-text', 'variant' => 'secondary', 'route' => 'admin.quote-requests.index'],
        ['key' => 'trade_requests', 'icon' => 'bi-truck', 'variant' => 'primary', 'route' => 'admin.trade-requests.index'],
        ['key' => 'rental_bookings', 'icon' => 'bi-calendar-check', 'variant' => 'success', 'route' => 'admin.rental-bookings.index'],
        ['key' => 'appointments', 'icon' => 'bi-calendar2-week', 'variant' => 'danger', 'route' => 'admin.appointments.index'],
    ];
@endphp

@section('content')
    <div class="row g-3 mb-4">
        @foreach ($cards as $card)
            <div class="col-6 col-lg-3">
                <div class="card stat-card h-100">
                    <div class="card-body d-flex align-items-center gap-3">
                        <span class="stat-icon bg-{{ $card['variant'] }}-subtle text-{{ $card['variant'] }}-emphasis">
                            <i class="bi {{ $card['icon'] }}"></i>
                        </span>
                        <div class="min-w-0">
                            <div class="text-secondary small text-truncate">{{ __('admin.dashboard.'.$card['key']) }}</div>
                            <div class="stat-value">
                                @if ($card['money'] ?? false)
                                    {{ number_format($stats[$card['key']], 0) }}
                                    <small class="fs-6 text-secondary">{{ config('shop.currency') }}</small>
                                @else
                                    {{ number_format($stats[$card['key']]) }}
                                @endif
                            </div>
                            @if (($pending[$card['key']] ?? 0) > 0)
                                <a href="{{ $card['route'] ? route($card['route']) : '#' }}"
                                   class="badge bg-warning-subtle text-warning-emphasis text-decoration-none">
                                    {{ $pending[$card['key']] }} {{ __('admin.dashboard.pending_actions') }}
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card h-100">
                <div class="card-header">{{ __('admin.dashboard.orders_chart') }}</div>
                <div class="card-body">
                    <canvas id="ordersChart" height="110"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header">{{ __('admin.dashboard.latest_appointments') }}</div>
                <ul class="list-group list-group-flush">
                    @forelse ($latestAppointments as $appointment)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="min-w-0">
                                <a href="{{ route('admin.appointments.show', $appointment) }}" class="text-decoration-none">
                                    {{ $appointment->patient_name }}
                                </a>
                                <div class="small text-secondary text-truncate">
                                    {{ $appointment->doctor?->name }} · {{ $appointment->appointment_date?->toDateString() }}
                                </div>
                            </div>
                            @include('admin.partials.badge-status', [
                                'label' => __('statuses.appointment.'.$appointment->status),
                                'status' => $appointment->status,
                            ])
                        </li>
                    @empty
                        <li class="list-group-item text-center text-secondary py-4">{{ __('admin.dashboard.no_records') }}</li>
                    @endforelse
                </ul>
            </div>
        </div>

        <div class="col-12">
            <div class="card">
                <div class="card-header">{{ __('admin.dashboard.latest_orders') }}</div>
                <div class="table-responsive">
                    <table class="table mb-0 align-middle">
                        <thead>
                        <tr>
                            <th>{{ __('admin.fields.reference') }}</th>
                            <th>{{ __('admin.fields.customer') }}</th>
                            <th>{{ __('admin.fields.total') }}</th>
                            <th>{{ __('admin.fields.status') }}</th>
                            <th>{{ __('admin.fields.created_at') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse ($latestOrders as $order)
                            <tr>
                                <td><a href="{{ route('admin.orders.show', $order) }}">{{ $order->reference }}</a></td>
                                <td>{{ $order->user?->name }}</td>
                                <td>{{ number_format((float) $order->total, 2) }} {{ $order->currency }}</td>
                                <td>@include('admin.partials.badge-status', ['label' => __('statuses.order.'.$order->status), 'status' => $order->status])</td>
                                <td>{{ $order->created_at->format('Y-m-d H:i') }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-center text-secondary py-4">{{ __('admin.dashboard.no_records') }}</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
    <script>
        $.getJSON(@json(route('admin.dashboard.chart')), function (data) {
            new Chart(document.getElementById('ordersChart'), {
                type: 'line',
                data: {
                    labels: data.labels,
                    datasets: [
                        {
                            label: @json(__('admin.dashboard.orders')),
                            data: data.orders,
                            borderColor: '#1570ef',
                            backgroundColor: 'rgba(21, 112, 239, .12)',
                            fill: true,
                            tension: .35,
                        },
                        {
                            label: @json(__('admin.dashboard.revenue')),
                            data: data.revenue,
                            borderColor: '#12b76a',
                            backgroundColor: 'rgba(18, 183, 106, .10)',
                            fill: true,
                            tension: .35,
                            yAxisID: 'y1',
                        },
                    ],
                },
                options: {
                    responsive: true,
                    interaction: { intersect: false, mode: 'index' },
                    scales: {
                        y: { beginAtZero: true, position: window.Admin.rtl ? 'right' : 'left' },
                        y1: { beginAtZero: true, position: window.Admin.rtl ? 'left' : 'right', grid: { drawOnChartArea: false } },
                    },
                },
            });
        });
    </script>
@endpush