@extends('client.layouts.app')

@section('title', 'Хяналтын самбар')
@section('page_title', 'Сайн уу, ' . auth('client')->user()->name . '!')

@section('content')

{{-- KPI cards --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
    @php
        $cards = [
            ['Нийт захиалга',     $stats['orders_total'],     'text-blue-600 bg-blue-50'],
            ['Идэвхтэй',          $stats['orders_open'],      'text-orange-600 bg-orange-50'],
            ['Дууссан',           $stats['orders_completed'], 'text-green-600 bg-green-50'],
            ['Уулзалт',           $stats['meetings_total'],   'text-purple-600 bg-purple-50'],
        ];
    @endphp
    @foreach($cards as [$label, $value, $color])
        <div class="bg-white rounded-2xl border border-gray-100 p-5">
            <div class="w-10 h-10 rounded-lg {{ $color }} mb-3"></div>
            <div class="text-3xl font-black mb-1">{{ $value }}</div>
            <div class="text-xs text-gray-500">{{ $label }}</div>
        </div>
    @endforeach
</div>

<div class="grid lg:grid-cols-3 gap-6 mb-8">
    {{-- Сүүлийн захиалга --}}
    <div class="lg:col-span-2 bg-white rounded-2xl border border-gray-100 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-bold">Сүүлийн захиалгууд</h3>
            <a href="{{ route('client.orders.index') }}" class="text-sm text-nsma-red font-semibold">Бүгд →</a>
        </div>
        <div class="space-y-3">
            @forelse($recentOrders as $o)
                <a href="{{ route('client.orders.show', $o) }}" class="block p-3 border border-gray-100 rounded-lg hover:border-nsma-red transition">
                    <div class="flex items-center justify-between">
                        <div class="min-w-0 flex-1">
                            <div class="font-semibold text-sm truncate">{{ $o->title }}</div>
                            <div class="text-xs text-gray-500 mt-0.5">{{ $o->order_number }} · {{ $o->service->title ?? '-' }}</div>
                        </div>
                        <span class="text-xs px-2 py-1 rounded-full bg-{{ $o->statusColor() }}-100 text-{{ $o->statusColor() }}-700 ml-3">{{ $o->statusLabel() }}</span>
                    </div>
                </a>
            @empty
                <div class="text-center py-8">
                    <p class="text-sm text-gray-500 mb-4">Та одоохондоо захиалга хийгээгүй байна.</p>
                    <a href="{{ route('client.orders.create') }}" class="inline-block bg-nsma-red text-white font-semibold px-5 py-2.5 rounded-lg hover:bg-red-600">+ Шинэ захиалга өгөх</a>
                </div>
            @endforelse
        </div>
    </div>

    {{-- Удахгүй болох уулзалт --}}
    <div class="bg-white rounded-2xl border border-gray-100 p-6">
        <h3 class="font-bold mb-4">Удахгүйн уулзалт</h3>
        <div class="space-y-3">
            @forelse($upcomingMeetings as $m)
                <div class="p-3 border border-gray-100 rounded-lg">
                    <div class="text-sm font-semibold">{{ $m->subject }}</div>
                    <div class="text-xs text-gray-500 mt-1">
                        📅 {{ $m->preferred_date->format('Y-m-d') }} · {{ substr($m->preferred_time, 0, 5) }}
                    </div>
                    @if($m->meeting_link)
                        <a href="{{ $m->meeting_link }}" target="_blank" class="text-xs text-nsma-red mt-2 inline-block">🎥 Уулзалтад нэгдэх</a>
                    @endif
                </div>
            @empty
                <p class="text-sm text-gray-500 text-center py-6">Уулзалт бүртгэлгүй.</p>
                <a href="{{ url('/meeting') }}" class="block text-center text-sm text-nsma-red font-semibold">+ Уулзалт захиалах</a>
            @endforelse
        </div>
    </div>
</div>

{{-- Quick actions --}}
<div class="grid md:grid-cols-3 gap-4">
    <a href="{{ route('client.orders.create') }}" class="bg-nsma-red text-white rounded-2xl p-6 hover:bg-red-600 transition">
        <h3 class="font-bold text-lg mb-1">Шинэ захиалга</h3>
        <p class="text-sm opacity-90">NSMA-аас үйлчилгээ авах</p>
    </a>
    <a href="{{ url('/meeting') }}" class="bg-nsma-dark text-white rounded-2xl p-6 hover:bg-gray-900 transition">
        <h3 class="font-bold text-lg mb-1">Уулзалт захиалах</h3>
        <p class="text-sm opacity-90">Манай багтай уулзах</p>
    </a>
    <a href="{{ route('client.profile') }}" class="bg-white border border-gray-200 rounded-2xl p-6 hover:border-nsma-red transition">
        <h3 class="font-bold text-lg mb-1">Профайл</h3>
        <p class="text-sm text-gray-500">Мэдээллээ шинэчлэх</p>
    </a>
</div>

@endsection