@extends('layouts.app')
@section('title', 'لوحة التحكم')
@section('page_title', 'مرحباً، ' . auth()->user()->name)

@section('page_actions')
    <span class="btn btn-light disabled"><i class="fa-regular fa-calendar ms-2"></i>{{ arabicDate(today()) }}</span>
@endsection

@section('content')

    {{-- ===== مؤشرات سريعة ===== --}}
    <div class="row g-3 mb-3">
        <div class="col-xl-3 col-md-6">
            <x-stat title="إجمالي العملاء" :value="number_format($stats['customers'])" icon="fa-users" color="primary"
                    :meta="$stats['customers_new'] . ' عميل جديد هذا الشهر'" :url="route('customers.index')"/>
        </div>
        <div class="col-xl-3 col-md-6">
            <x-stat title="مبيعات الشهر" :value="currency($stats['sales_month'])" icon="fa-file-invoice-dollar" color="success"
                    :meta="'محصّل: ' . currency($stats['collected_month'])" :url="route('reports.sales')"/>
        </div>
        <div class="col-xl-3 col-md-6">
            <x-stat title="إجمالي المديونيات" :value="currency($stats['receivables'])" icon="fa-hand-holding-dollar" color="danger"
                    :meta="$stats['overdue_invoices'] . ' فاتورة متأخرة'" :url="route('invoices.index', ['filter' => 'overdue'])"/>
        </div>
        <div class="col-xl-3 col-md-6">
            <x-stat title="أجهزة بالمخزن" :value="number_format($stats['devices_in_stock'])" icon="fa-microchip" color="info"
                    :meta="$stats['devices_installed'] . ' جهاز مركّب لدى العملاء'" :url="route('devices.index')"/>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-xl-3 col-md-6">
            <x-stat title="عملاء محتملون نشطون" :value="number_format($stats['leads_open'])" icon="fa-user-plus" color="warning"
                    meta="فرص بيع مفتوحة" :url="route('leads.index')"/>
        </div>
        <div class="col-xl-3 col-md-6">
            <x-stat title="اشتراكات سارية" :value="number_format($stats['subs_active'])" icon="fa-satellite-dish" color="success"
                    :meta="$stats['subs_expiring'] . ' ينتهي خلال ' . $alertDays . ' يوم'" :url="route('subscriptions.index')"/>
        </div>
        <div class="col-xl-3 col-md-6">
            <x-stat title="أوامر تركيب مفتوحة" :value="number_format($stats['installs_open'])" icon="fa-screwdriver-wrench" color="primary"
                    :meta="$stats['installs_today'] . ' أمر مجدول اليوم'" :url="route('installations.index', ['filter' => 'open'])"/>
        </div>
        <div class="col-xl-3 col-md-6">
            <x-stat title="تذاكر دعم مفتوحة" :value="number_format($stats['tickets_open'])" icon="fa-headset" color="danger"
                    :meta="$stats['low_stock'] . ' منتج وصل حد الطلب'" :url="route('tickets.index', ['filter' => 'open'])"/>
        </div>
    </div>

    {{-- ===== الرسوم البيانية ===== --}}
    <div class="row g-3 mb-3">
        <div class="col-xl-8">
            <div class="card h-100">
                <div class="card-header">
                    <span><i class="fa-solid fa-chart-line text-primary ms-2"></i>المبيعات والتحصيلات — آخر 12 شهراً</span>
                </div>
                <div class="card-body"><canvas id="salesChart" height="110"></canvas></div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header"><span><i class="fa-solid fa-filter text-warning ms-2"></i>مسار العملاء المحتملين</span></div>
                <div class="card-body"><canvas id="funnelChart" height="200"></canvas></div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header"><span><i class="fa-solid fa-microchip text-info ms-2"></i>توزيع حالات الأجهزة</span></div>
                <div class="card-body"><canvas id="deviceChart" height="200"></canvas></div>
            </div>
        </div>

        <div class="col-xl-8">
            <div class="card h-100">
                <div class="card-header">
                    <span><i class="fa-solid fa-trophy text-warning ms-2"></i>أفضل 5 عملاء بحجم المبيعات</span>
                    <a href="{{ route('reports.customers') }}" class="btn btn-sm btn-light">التقرير الكامل</a>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover mb-0 align-middle">
                        <thead class="table-light">
                        <tr>
                            <th>العميل</th>
                            <th class="text-center">عدد الفواتير</th>
                            <th class="text-start">إجمالي المبيعات</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse ($topCustomers as $row)
                            <tr>
                                <td>
                                    @if ($row->customer)
                                        <a href="{{ route('customers.show', $row->customer) }}" class="text-decoration-none fw-bold">
                                            {{ $row->customer->display_name }}
                                        </a>
                                        <div class="small text-muted">{{ $row->customer->phone }}</div>
                                    @else — @endif
                                </td>
                                <td class="text-center">{{ $row->invoices }}</td>
                                <td class="fw-bold text-success">{{ currency($row->total) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="text-center text-muted py-4">لا توجد بيانات</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== قوائم العمل ===== --}}
    <div class="row g-3">
        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header">
                    <span><i class="fa-solid fa-calendar-check text-primary ms-2"></i>متابعاتي القادمة</span>
                    <a href="{{ route('activities.index') }}" class="btn btn-sm btn-light">الكل</a>
                </div>
                <div class="card-body">
                    @forelse ($upcomingActivities as $activity)
                        <div class="d-flex gap-2 align-items-start pb-3 mb-3 border-bottom">
                            <span class="badge bg-primary-subtle text-primary p-2">
                                <i class="fa-solid {{ \App\Models\Activity::TYPE_ICONS[$activity->type] ?? 'fa-bell' }}"></i>
                            </span>
                            <div class="flex-grow-1 min-w-0">
                                <div class="fw-bold small">{{ $activity->title }}</div>
                                <div class="text-muted small">{{ $activity->subject?->name ?? '—' }}</div>
                                <div class="small {{ $activity->scheduled_at?->isPast() ? 'text-danger fw-bold' : 'text-muted' }}">
                                    <i class="fa-regular fa-clock"></i> {{ arabicDate($activity->scheduled_at, true) }}
                                </div>
                            </div>
                            @can('activities.edit')
                                <button class="btn btn-sm btn-outline-success"
                                        onclick="confirmAction('{{ route('activities.complete', $activity) }}', 'إنهاء النشاط', 'سيتم تعليم النشاط كمكتمل.', '#198754')">
                                    <i class="fa-solid fa-check"></i>
                                </button>
                            @endcan
                        </div>
                    @empty
                        <p class="text-muted text-center mb-0 py-3">لا توجد متابعات مجدولة</p>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header">
                    <span><i class="fa-solid fa-triangle-exclamation text-warning ms-2"></i>اشتراكات تحتاج تجديد</span>
                    <a href="{{ route('subscriptions.index', ['filter' => 'expiring']) }}" class="btn btn-sm btn-light">الكل</a>
                </div>
                <div class="card-body">
                    @forelse ($expiringSubscriptions as $sub)
                        <div class="d-flex gap-2 align-items-start pb-3 mb-3 border-bottom">
                            <span class="badge bg-warning-subtle text-warning p-2"><i class="fa-solid fa-satellite-dish"></i></span>
                            <div class="flex-grow-1 min-w-0">
                                <a href="{{ route('subscriptions.show', $sub) }}" class="fw-bold small text-decoration-none">
                                    {{ $sub->customer?->display_name ?? '—' }}
                                </a>
                                <div class="text-muted small">{{ $sub->vehicle?->plate_number ?? $sub->code }}</div>
                                <div class="small text-warning fw-bold">
                                    ينتهي {{ arabicDate($sub->end_date) }} (متبقي {{ $sub->days_remaining }} يوم)
                                </div>
                            </div>
                        </div>
                    @empty
                        <p class="text-muted text-center mb-0 py-3">لا توجد اشتراكات قريبة الانتهاء</p>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header">
                    <span><i class="fa-solid fa-screwdriver-wrench text-info ms-2"></i>تركيبات اليوم</span>
                    <a href="{{ route('installations.calendar') }}" class="btn btn-sm btn-light">التقويم</a>
                </div>
                <div class="card-body">
                    @forelse ($todayInstallations as $inst)
                        <div class="d-flex gap-2 align-items-start pb-3 mb-3 border-bottom">
                            <span class="badge bg-{{ $inst->status_color }}-subtle text-{{ $inst->status_color }} p-2">
                                <i class="fa-solid fa-wrench"></i>
                            </span>
                            <div class="flex-grow-1 min-w-0">
                                <a href="{{ route('installations.show', $inst) }}" class="fw-bold small text-decoration-none">
                                    {{ $inst->customer?->display_name ?? '—' }}
                                </a>
                                <div class="text-muted small">
                                    {{ $inst->vehicle?->plate_number ?? '—' }} · {{ $inst->technician?->name ?? 'لم يُسند' }}
                                </div>
                                <div class="small text-muted">
                                    <i class="fa-regular fa-clock"></i> {{ $inst->scheduled_at?->format('h:i A') }}
                                    {!! badge($inst->status_label, $inst->status_color) !!}
                                </div>
                            </div>
                        </div>
                    @empty
                        <p class="text-muted text-center mb-0 py-3">لا توجد تركيبات مجدولة اليوم</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-0">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <span><i class="fa-solid fa-receipt text-success ms-2"></i>أحدث الفواتير</span>
                    <a href="{{ route('invoices.index') }}" class="btn btn-sm btn-light">عرض الكل</a>
                </div>
                <div class="card-body p-0 table-responsive">
                    <table class="table table-hover mb-0 align-middle">
                        <thead class="table-light">
                        <tr>
                            <th>رقم الفاتورة</th>
                            <th>العميل</th>
                            <th>التاريخ</th>
                            <th>الإجمالي</th>
                            <th>المتبقي</th>
                            <th class="text-center">الحالة</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse ($recentInvoices as $invoice)
                            <tr>
                                <td><a href="{{ route('invoices.show', $invoice) }}" class="fw-bold text-decoration-none">{{ $invoice->code }}</a></td>
                                <td>{{ $invoice->customer?->display_name ?? '—' }}</td>
                                <td>{{ arabicDate($invoice->date) }}</td>
                                <td class="fw-bold">{{ currency($invoice->total) }}</td>
                                <td class="{{ $invoice->remaining > 0 ? 'text-danger fw-bold' : 'text-success' }}">{{ currency($invoice->remaining) }}</td>
                                <td class="text-center">{!! badge($invoice->status_label, $invoice->status_color) !!}</td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="text-center text-muted py-4">لا توجد فواتير</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
$(function () {
    const money = v => new Intl.NumberFormat('en-US').format(v);

    new Chart(document.getElementById('salesChart'), {
        type: 'line',
        data: {
            labels: @json($chart['labels']),
            datasets: [
                {
                    label: 'المبيعات',
                    data: @json($chart['sales']),
                    borderColor: '#1e4bd8',
                    backgroundColor: 'rgba(30,75,216,.12)',
                    fill: true, tension: .35, borderWidth: 2, pointRadius: 3,
                },
                {
                    label: 'التحصيلات',
                    data: @json($chart['payments']),
                    borderColor: '#16a34a',
                    backgroundColor: 'rgba(22,163,74,.10)',
                    fill: true, tension: .35, borderWidth: 2, pointRadius: 3,
                }
            ]
        },
        options: {
            responsive: true, maintainAspectRatio: true,
            plugins: {
                legend: { position: 'top', labels: { font: { family: 'Cairo' } } },
                tooltip: { callbacks: { label: c => c.dataset.label + ': ' + money(c.parsed.y) + ' {{ setting('currency', 'ر.س') }}' } }
            },
            scales: { y: { beginAtZero: true, ticks: { callback: v => money(v) } } }
        }
    });

    const funnelLabels = @json(collect(\App\Models\Lead::STATUSES)->values());
    const funnelKeys   = @json(collect(\App\Models\Lead::STATUSES)->keys());
    const funnelData   = @json($leadFunnel);

    new Chart(document.getElementById('funnelChart'), {
        type: 'bar',
        data: {
            labels: funnelLabels,
            datasets: [{
                label: 'عدد الفرص',
                data: funnelKeys.map(k => funnelData[k] || 0),
                backgroundColor: ['#94a3b8','#0ea5e9','#1e4bd8','#f59e0b','#f97316','#16a34a','#ef4444'],
                borderRadius: 6,
            }]
        },
        options: {
            indexAxis: 'y', responsive: true,
            plugins: { legend: { display: false } },
            scales: { x: { beginAtZero: true, ticks: { precision: 0 } } }
        }
    });

    const devLabels = @json(collect(\App\Models\DeviceUnit::STATUSES)->values());
    const devKeys   = @json(collect(\App\Models\DeviceUnit::STATUSES)->keys());
    const devData   = @json($deviceStatus);

    new Chart(document.getElementById('deviceChart'), {
        type: 'doughnut',
        data: {
            labels: devLabels,
            datasets: [{
                data: devKeys.map(k => devData[k] || 0),
                backgroundColor: ['#16a34a','#f59e0b','#1e4bd8','#ef4444','#94a3b8','#334155'],
            }]
        },
        options: {
            responsive: true, cutout: '58%',
            plugins: { legend: { position: 'bottom', labels: { font: { family: 'Cairo', size: 11 }, boxWidth: 12 } } }
        }
    });
});
</script>
@endpush