@extends('garage.layouts.app')

@section('title', 'Dashboard')

@push('styles')
@include('garage.dashboard.partials.dashboard-ui')
@endpush

@section('content')
@php
    $fmtMoney = fn ($n) => number_format((float) ($n ?? 0), 2);
    $fmtInt = fn ($n) => number_format((int) ($n ?? 0));
    $limit = (int) ($cardLimit ?? 4);

    $statusClass = function ($status) {
        $s = str_replace(' ', '_', strtolower((string) $status));
        return match ($s) {
            'in_progress' => 'is-progress',
            'completed', 'posted' => 'is-done',
            'on_hold' => 'is-hold',
            'cancelled' => 'is-danger',
            'overdue' => 'is-danger',
            'due_soon' => 'is-warn',
            default => 'is-draft',
        };
    };
    $statusLabel = fn ($s) => ucwords(str_replace('_', ' ', (string) $s));

    $voucherTypeLabel = function ($t) {
        return match ((string) $t) {
            'journal' => 'Journal',
            'receipt' => 'Receipt',
            'payment' => 'Payment',
            'contra' => 'Contra',
            default => strtoupper((string) $t),
        };
    };

    $servicePreview = ($serviceDueAlerts ?? collect())->take($limit);
    $ordersPreview = ($repairOrders ?? collect())->take($limit);
    $jobsPreview = ($pendingJobCards ?? collect())->take($limit);
    $vouchersPreview = ($vouchers ?? collect())->take($limit);

    $ordersListUrl = route('garage.repair-orders.index');
    $jobsListUrl = route('garage.work-orders.index', [
        'from_date' => $fromDate,
        'to_date' => $toDate,
    ]);
    $vouchersListUrl = route('garage.vouchers.index', [
        'from_date' => $fromDate,
        'to_date' => $toDate,
    ]);
    $vouchersDraftUrl = route('garage.vouchers.index', [
        'from_date' => $fromDate,
        'to_date' => $toDate,
        'status' => 'draft',
    ]);
    $salesListUrl = route('garage.sales.index');
@endphp

<div class="gs-dash gs-dash--fit">
    <div class="gs-dash-layout">

        <header class="gs-dash-head">
            <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-2">
                <div>
                    <h1 class="gs-dash-head-title">Operations overview</h1>
                    <p class="gs-dash-head-sub">
                        @if($garage){{ $garage->name }} · @endif
                        {{ date('d M Y', strtotime($fromDate)) }}@if($fromDate !== $toDate) – {{ date('d M Y', strtotime($toDate)) }}@endif
                    </p>
                </div>
                @if(!empty($lowStockCount))
                <a href="{{ route('garage.reports.stock.show', ['slug' => 'low-stock']) }}" class="badge bg-warning text-dark text-decoration-none">
                    <i class="bi bi-exclamation-triangle me-1"></i>{{ $fmtInt($lowStockCount) }} low stock
                </a>
                @endif
            </div>
            <form method="GET" action="{{ route('garage.dashboard') }}" class="gs-dash-filter">
                <div>
                    <label for="dashFrom">From</label>
                    <input type="date" id="dashFrom" name="from_date" class="form-control" value="{{ $fromDate }}">
                </div>
                <div>
                    <label for="dashTo">To</label>
                    <input type="date" id="dashTo" name="to_date" class="form-control" value="{{ $toDate }}">
                </div>
                <button type="submit" class="btn gs-dash-btn is-solid"><i class="bi bi-funnel me-1"></i>Apply</button>
                <a href="{{ route('garage.dashboard') }}" class="btn gs-dash-btn is-ghost">Today</a>
            </form>
        </header>

        <div class="gs-dash-summary">
            <a href="{{ $ordersListUrl }}" class="gs-dash-chip is-orders">
                <span class="lbl"><i class="bi bi-wrench-adjustable"></i>{{ $glOrders ?? 'Orders' }}</span>
                <span class="val">{{ $fmtInt($periodSummary['orders'] ?? 0) }}</span>
            </a>
            <a href="{{ $jobsListUrl }}" class="gs-dash-chip is-jobs">
                <span class="lbl"><i class="bi bi-clipboard-check"></i>Pending jobs</span>
                <span class="val">{{ $fmtInt($periodSummary['pending_job_cards'] ?? 0) }}</span>
            </a>
            <a href="{{ $vouchersDraftUrl }}" class="gs-dash-chip is-vouchers">
                <span class="lbl"><i class="bi bi-journal-text"></i>Voucher drafts</span>
                <span class="val">{{ $fmtInt($periodSummary['voucher_drafts'] ?? 0) }}</span>
            </a>
            <a href="{{ $salesListUrl }}" class="gs-dash-chip is-sales">
                <span class="lbl"><i class="bi bi-cash-stack"></i>Sales</span>
                <span class="val">PKR {{ $fmtMoney($periodSummary['sales_total'] ?? 0) }}</span>
            </a>
            @if(($serviceDueTotal ?? 0) > 0)
            <span class="gs-dash-chip is-service is-static" id="gs-dash-service-panel">
                <span class="lbl"><i class="bi bi-bell"></i>Service due</span>
                <span class="val">{{ $fmtInt($serviceDueTotal) }}</span>
            </span>
            @endif
        </div>

        <section class="gs-dash-cards">

            <article class="gs-dash-card">
                <div class="gs-dash-card-hd">
                    <h2 class="gs-dash-card-title">
                        <span class="gs-dash-card-icon is-service"><i class="bi bi-bell"></i></span>
                        Service reminders
                    </h2>
                    <span class="gs-dash-card-count">{{ $fmtInt($serviceDueTotal ?? 0) }}</span>
                </div>
                <div class="gs-dash-card-body">
                    @forelse($servicePreview as $alert)
                    <button type="button"
                            class="gs-dash-row js-service-detail"
                            data-vehicle="{{ $alert['registration_number'] ?: $alert['vehicle_label'] }}"
                            data-customer="{{ $alert['customer_name'] ?? '—' }}"
                            data-status="{{ $statusLabel($alert['status']) }}"
                            data-status-class="{{ $statusClass($alert['status']) }}"
                            data-message="{{ $alert['message'] }}"
                            data-next-date="{{ $alert['next_service_date'] ?? '—' }}"
                            data-next-km="{{ $alert['next_service_meter_reading'] !== null ? number_format($alert['next_service_meter_reading'], 0).' km' : '—' }}"
                            data-odometer="{{ $alert['odometer_reading'] !== null ? number_format($alert['odometer_reading'], 0).' km' : '—' }}"
                            data-book-url="{{ route('garage.repair-orders.create', ['garage_vehicle_id' => $alert['vehicle_id']]) }}">
                        <span class="gs-dash-dot {{ $alert['status'] === 'overdue' ? 'is-overdue' : 'is-soon' }}"></span>
                        <span class="gs-dash-row-body">
                            <span class="gs-dash-row-title">{{ $alert['registration_number'] ?: $alert['vehicle_label'] }}</span>
                            <span class="gs-dash-row-meta">{{ $alert['message'] }}</span>
                        </span>
                        <span class="gs-dash-badge {{ $statusClass($alert['status']) }}">{{ $statusLabel($alert['status']) }}</span>
                        <i class="bi bi-chevron-right gs-dash-row-arrow"></i>
                    </button>
                    @empty
                    <div class="gs-dash-empty">No service reminders for vehicles.</div>
                    @endforelse
                </div>
            </article>

            <article class="gs-dash-card">
                <a href="{{ $ordersListUrl }}" class="gs-dash-card-hd">
                    <h2 class="gs-dash-card-title">
                        <span class="gs-dash-card-icon is-order"><i class="bi bi-wrench-adjustable"></i></span>
                        {{ $glOrders ?? 'Orders' }}
                    </h2>
                    <span class="gs-dash-card-count">{{ $fmtInt($periodSummary['orders'] ?? 0) }}</span>
                </a>
                <div class="gs-dash-card-body">
                    @forelse($ordersPreview as $r)
                    <a href="{{ route('garage.repair-orders.show', $r->id) }}" class="gs-dash-row">
                        <span class="gs-dash-row-body">
                            <span class="gs-dash-row-title">{{ $r->repair_order_number }}</span>
                            <span class="gs-dash-row-meta">
                                {{ $r->customer_name ?: 'Walk-in' }}
                                @if($r->vehicle_registration) · {{ $r->vehicle_registration }} @endif
                                · {{ $r->repair_order_date }}
                            </span>
                        </span>
                        <span class="gs-dash-badge {{ $statusClass($r->status) }}">{{ $statusLabel($r->status) }}</span>
                        <i class="bi bi-chevron-right gs-dash-row-arrow"></i>
                    </a>
                    @empty
                    <div class="gs-dash-empty">No {{ strtolower($glOrders ?? 'orders') }} in this period.</div>
                    @endforelse
                </div>
                @if(($periodSummary['orders'] ?? 0) > $limit)
                <div class="gs-dash-card-ft">
                    <a href="{{ $ordersListUrl }}">View all {{ $fmtInt($periodSummary['orders']) }} <i class="bi bi-arrow-right-short"></i></a>
                </div>
                @endif
            </article>

            <article class="gs-dash-card">
                <a href="{{ $jobsListUrl }}" class="gs-dash-card-hd">
                    <h2 class="gs-dash-card-title">
                        <span class="gs-dash-card-icon is-job"><i class="bi bi-clipboard-check"></i></span>
                        Pending job cards
                    </h2>
                    <span class="gs-dash-card-count">{{ $fmtInt($periodSummary['pending_job_cards'] ?? 0) }}</span>
                </a>
                <div class="gs-dash-card-body">
                    @forelse($jobsPreview as $j)
                    <a href="{{ route('garage.work-orders.show', $j->id) }}" class="gs-dash-row">
                        <span class="gs-dash-row-body">
                            <span class="gs-dash-row-title">{{ $j->work_order_number }}</span>
                            <span class="gs-dash-row-meta">
                                {{ $j->customer_name ?: '—' }}
                                @if($j->vehicle_registration) · {{ $j->vehicle_registration }} @endif
                                · {{ $j->work_order_date }}
                            </span>
                        </span>
                        <span class="gs-dash-badge {{ $statusClass($j->status) }}">{{ $statusLabel($j->status) }}</span>
                        <i class="bi bi-chevron-right gs-dash-row-arrow"></i>
                    </a>
                    @empty
                    <div class="gs-dash-empty">No pending job cards in this period.</div>
                    @endforelse
                </div>
                @if(($periodSummary['pending_job_cards'] ?? 0) > $limit)
                <div class="gs-dash-card-ft">
                    <a href="{{ $jobsListUrl }}">View all {{ $fmtInt($periodSummary['pending_job_cards']) }} <i class="bi bi-arrow-right-short"></i></a>
                </div>
                @endif
            </article>

            <article class="gs-dash-card">
                <a href="{{ $vouchersListUrl }}" class="gs-dash-card-hd">
                    <h2 class="gs-dash-card-title">
                        <span class="gs-dash-card-icon is-voucher"><i class="bi bi-journal-text"></i></span>
                        Vouchers
                    </h2>
                    <span class="gs-dash-card-count">{{ $fmtInt(($vouchers ?? collect())->count()) }}</span>
                </a>
                <div class="gs-dash-card-body">
                    @if($vouchersEnabled ?? false)
                        @forelse($vouchersPreview as $v)
                        <a href="{{ route('garage.vouchers.show', $v->id) }}" class="gs-dash-row">
                            <span class="gs-dash-row-body">
                                <span class="gs-dash-row-title">{{ $v->voucher_no }}</span>
                                <span class="gs-dash-row-meta">
                                    {{ $voucherTypeLabel($v->voucher_type) }} · {{ $v->voucher_date }}
                                    · PKR {{ $fmtMoney($v->total_amount ?? 0) }}
                                </span>
                            </span>
                            <span class="gs-dash-badge {{ $statusClass($v->status) }}">{{ $statusLabel($v->status) }}</span>
                            <i class="bi bi-chevron-right gs-dash-row-arrow"></i>
                        </a>
                        @empty
                        <div class="gs-dash-empty">No vouchers in this period.</div>
                        @endforelse
                    @else
                        <div class="gs-dash-empty">Vouchers module not enabled.</div>
                    @endif
                </div>
                @if($vouchersEnabled && ($vouchers ?? collect())->count() > $limit)
                <div class="gs-dash-card-ft">
                    <a href="{{ $vouchersListUrl }}">View all {{ $fmtInt(($vouchers ?? collect())->count()) }} <i class="bi bi-arrow-right-short"></i></a>
                </div>
                @endif
            </article>

        </section>
    </div>
</div>

{{-- Service detail modal only (not list) --}}
<div class="modal fade gs-dash-modal" id="dashServiceDetailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-bell-fill"></i> Service reminder</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="gs-dash-detail-hero">
                    <div class="vehicle" id="sdVehicle">—</div>
                    <div class="customer" id="sdCustomer">—</div>
                    <div class="mt-2"><span id="sdStatus" class="gs-dash-badge">—</span></div>
                </div>
                <div class="gs-dash-detail-grid">
                    <div class="gs-dash-detail-item">
                        <div class="lbl">Next service date</div>
                        <div class="val" id="sdNextDate">—</div>
                    </div>
                    <div class="gs-dash-detail-item">
                        <div class="lbl">Next reading</div>
                        <div class="val" id="sdNextKm">—</div>
                    </div>
                    <div class="gs-dash-detail-item">
                        <div class="lbl">Current odometer</div>
                        <div class="val" id="sdOdometer">—</div>
                    </div>
                    <div class="gs-dash-detail-item">
                        <div class="lbl">Reminder type</div>
                        <div class="val" id="sdStatusText">—</div>
                    </div>
                    <div class="gs-dash-detail-item is-wide">
                        <div class="lbl">Summary</div>
                        <div class="gs-dash-detail-msg" id="sdMessage">—</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn gs-dash-btn is-ghost btn-sm" data-bs-dismiss="modal">Close</button>
                <a href="#" id="sdBookBtn" class="btn gs-dash-btn is-solid btn-sm">
                    <i class="bi bi-plus-lg me-1"></i>Create {{ strtolower($glOrder ?? 'order') }}
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var detailModal = document.getElementById('dashServiceDetailModal');
    if (!detailModal) return;

    var bsDetail = bootstrap.Modal.getOrCreateInstance(detailModal);

    document.querySelectorAll('.js-service-detail').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.getElementById('sdVehicle').textContent = btn.dataset.vehicle || '—';
            document.getElementById('sdCustomer').textContent = btn.dataset.customer || '—';
            document.getElementById('sdNextDate').textContent = btn.dataset.nextDate || '—';
            document.getElementById('sdNextKm').textContent = btn.dataset.nextKm || '—';
            document.getElementById('sdOdometer').textContent = btn.dataset.odometer || '—';
            document.getElementById('sdMessage').textContent = btn.dataset.message || '—';
            document.getElementById('sdStatusText').textContent = btn.dataset.status || '—';
            var statusEl = document.getElementById('sdStatus');
            statusEl.textContent = btn.dataset.status || '—';
            statusEl.className = 'gs-dash-badge ' + (btn.dataset.statusClass || '');
            document.getElementById('sdBookBtn').href = btn.dataset.bookUrl || '#';
            bsDetail.show();
        });
    });
});
</script>
@endpush