@extends('layouts.app')
@section('title', 'Dashboard')
@section('breadcrumb')
    <li class="breadcrumb-item active">Dashboard</li>
@endsection

@section('content')
<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h4><i class="bi bi-speedometer2 me-2 text-primary"></i>Dashboard</h4>
        <p class="text-muted small mb-0">Selamat datang, {{ auth()->user()->name }}! Berikut ringkasan hari ini.</p>
    </div>
    <div class="text-end">
        <div class="text-muted small">{{ now()->translatedFormat('l, d F Y') }}</div>
        @if(auth()->user()->isHO())
            <span class="badge bg-warning-subtle text-warning border border-warning-subtle mt-1">
                <i class="bi bi-building me-1"></i>HO — Semua Cabang
            </span>
        @else
            <span class="badge bg-info-subtle text-info border border-info-subtle mt-1">
                <i class="bi bi-building me-1"></i>{{ auth()->user()->branch->name ?? 'Cabang' }}
            </span>
        @endif
    </div>
</div>

{{-- Stat Cards --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="card stat-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="stat-icon" style="background:#dbeafe;color:#1d4ed8;">
                    <i class="bi bi-people-fill"></i>
                </div>
                <div>
                    <div class="text-muted small">Total Pelanggan</div>
                    <div class="fw-bold fs-4">{{ number_format($totalCustomers) }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card stat-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="stat-icon" style="background:#fef3c7;color:#d97706;">
                    <i class="bi bi-hourglass-split"></i>
                </div>
                <div>
                    <div class="text-muted small">Order Pending</div>
                    <div class="fw-bold fs-4 text-warning">{{ number_format($pendingOrders) }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card stat-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="stat-icon" style="background:#dcfce7;color:#16a34a;">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
                <div>
                    <div class="text-muted small">Selesai Bulan Ini</div>
                    <div class="fw-bold fs-4 text-success">{{ number_format($completedOrders) }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card stat-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="stat-icon" style="background:#f0fdf4;color:#15803d;">
                    <i class="bi bi-cash-stack"></i>
                </div>
                <div>
                    <div class="text-muted small">Pendapatan Bulan Ini</div>
                    <div class="fw-bold" style="font-size:1.1rem;">Rp {{ number_format($monthlyRevenue, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- KPI Service Performance --}}
<div class="row g-3 mb-4">
    <div class="col-12">
        <h6 class="text-muted small fw-bold mb-2 mt-2"><i class="bi bi-graph-up me-1"></i>KPI SERVICE PERFORMANCE — Bulan Ini</h6>
    </div>
    <div class="col-6 col-md-3">
        <div class="card h-100 border-start border-3 border-success">
            <div class="card-body py-3">
                <div class="text-muted small">Completion Rate</div>
                <div class="fw-bold fs-3 text-success">{{ $completionRate }}%</div>
                <div class="small text-muted">Selesai dari total order bulan ini</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card h-100 border-start border-3 border-primary">
            <div class="card-body py-3">
                <div class="text-muted small">Rata-rata Durasi</div>
                <div class="fw-bold fs-3 text-primary">{{ $avgDuration }} <small class="fs-6">hari</small></div>
                <div class="small text-muted">Waktu rata-rata penyelesaian</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card h-100 border-start border-3 border-warning">
            <div class="card-body py-3">
                <div class="text-muted small">Re-repair Rate</div>
                <div class="fw-bold fs-3 text-warning">{{ $rerepairRate }}%</div>
                <div class="small text-muted">{{ $rerepairCount }} order servis ulang</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card h-100 border-start border-3 border-info">
            <div class="card-body py-3">
                <div class="text-muted small">Kepuasan Pelanggan</div>
                @if($satisfaction)
                <div class="fw-bold fs-3 text-info">
                    {{ $satisfaction }}<small class="fs-6">/5</small>
                    <span class="small">
                        @for($i = 1; $i <= 5; $i++)
                            <i class="bi bi-star{{ $i <= round($satisfaction) ? '-fill text-warning' : ' text-muted' }}" style="font-size:.75rem;"></i>
                        @endfor
                    </span>
                </div>
                <div class="small text-muted">Rata-rata rating feedback</div>
                @else
                <div class="fw-bold fs-3 text-muted">—</div>
                <div class="small text-muted">Belum ada feedback bulan ini</div>
                @endif
            </div>
        </div>
    </div>

    {{-- SVO Age Buckets --}}
    <div class="col-12">
        <div class="card">
            <div class="card-body py-3">
                <h6 class="text-muted small fw-bold mb-3"><i class="bi bi-hourglass me-1"></i>SVO AGE — Order Aktif (belum selesai)</h6>
                <div class="row g-2 text-center">
                    @foreach(['Same-day' => 'success', '2–3 hari' => 'info', '4–6 hari' => 'warning', '>7 hari' => 'danger'] as $bucket => $color)
                    <div class="col-6 col-md-3">
                        <div class="p-2 rounded" style="background:var(--bs-{{ $color }}-bg-subtle, #f8f9fa);">
                            <div class="small text-muted">{{ $bucket }}</div>
                            <div class="fw-bold fs-5 text-{{ $color }}">{{ $ageBuckets[$bucket] ?? 0 }}</div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Second row stats --}}
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body">
                <h6 class="card-title text-muted small mb-3">STATUS ORDER AKTIF</h6>
                <div class="d-flex flex-column gap-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="small"><span class="badge bg-warning text-dark me-2">Pending</span></span>
                        <strong>{{ $pendingOrders }}</strong>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="small"><span class="badge bg-primary me-2">Proses</span></span>
                        <strong>{{ $inProgressOrders }}</strong>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="small"><span class="badge bg-success me-2">Selesai</span></span>
                        <strong>{{ $completedOrders }}</strong>
                    </div>
                    <hr class="my-1">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="small fw-bold">Total Order</span>
                        <strong>{{ $totalOrders }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body">
                <h6 class="card-title text-muted small mb-3">RINGKASAN KEUANGAN</h6>
                <div class="d-flex flex-column gap-2">
                    <div class="d-flex justify-content-between">
                        <span class="small text-muted">Total Pendapatan</span>
                        <strong class="text-success small">Rp {{ number_format($totalRevenue, 0, ',', '.') }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="small text-muted">Bulan Ini</span>
                        <strong class="small">Rp {{ number_format($monthlyRevenue, 0, ',', '.') }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="small text-muted">Belum Dibayar</span>
                        <strong class="text-danger small">Rp {{ number_format($unpaidInvoices, 0, ',', '.') }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="small text-muted">Teknisi Aktif</span>
                        <strong class="small">{{ $totalTechnicians }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if($lowStockParts->count() > 0)
    <div class="col-md-4">
        <div class="card h-100 border-warning">
            <div class="card-header bg-warning-subtle py-2">
                <h6 class="mb-0 small fw-bold"><i class="bi bi-exclamation-triangle text-warning me-1"></i> Stok Spare Part Rendah</h6>
            </div>
            <div class="card-body p-0">
                <ul class="list-group list-group-flush">
                    @foreach($lowStockParts as $part)
                    <li class="list-group-item py-2 px-3 d-flex justify-content-between align-items-center">
                        <div>
                            <div class="small fw-medium">{{ $part->name }}</div>
                            <div class="text-muted" style="font-size:.7rem;">Min: {{ $part->min_stock }} {{ $part->unit }}</div>
                        </div>
                        <span class="badge bg-danger">{{ $part->stock }} {{ $part->unit }}</span>
                    </li>
                    @endforeach
                </ul>
                <div class="p-2">
                    <a href="{{ route('spare-parts.index') }}?stock_status=low" class="btn btn-warning btn-sm w-100">Lihat Semua</a>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

{{-- Recent Orders --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center py-3">
        <h6 class="mb-0 fw-bold">Order Servis Terbaru</h6>
        <a href="{{ route('service-orders.index') }}" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>No. Order</th>
                    <th>Pelanggan</th>
                    <th>Perangkat</th>
                    <th>Teknisi</th>
                    <th>Tgl Masuk</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentOrders as $order)
                <tr>
                    <td><a href="{{ route('service-orders.show', $order) }}" class="fw-medium text-decoration-none">{{ $order->order_number }}</a></td>
                    <td>{{ $order->customer->name }}</td>
                    <td>
                        <div class="small">{{ $order->deviceType->name }}</div>
                        <div class="text-muted" style="font-size:.7rem;">{{ $order->brand }} {{ $order->model }}</div>
                    </td>
                    <td>{{ $order->technician?->user->name ?? '-' }}</td>
                    <td class="small">{{ $order->received_date->format('d/m/Y') }}</td>
                    <td>
                        <span class="badge" style="background:{{ match($order->status) { 'pending' => '#fef3c7', 'diagnosa' => '#dbeafe', 'proses' => '#dcfce7', 'menunggu_part' => '#fee2e2', 'selesai' => '#d1fae5', 'diambil' => '#e0e7ff', default => '#f3f4f6'} }};color:{{ match($order->status) { 'pending' => '#92400e', 'diagnosa' => '#1e40af', 'proses' => '#166534', 'menunggu_part' => '#991b1b', 'selesai' => '#065f46', 'diambil' => '#3730a3', default => '#374151'} }};">
                            {{ $order->status_label }}
                        </span>
                    </td>
                    <td><a href="{{ route('service-orders.show', $order) }}" class="btn btn-xs btn-outline-secondary btn-sm">Detail</a></td>
                </tr>
                @empty
                <tr><td colspan="7" class="text-center text-muted py-4">Belum ada order servis</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection