@extends('layouts.app')

@section('title', 'Genel Bakış')
@section('eyebrow', now()->locale('tr')->translatedFormat('d F Y l'))
@section('heading', 'Günaydın, '.str(auth()->user()->name)->before(' '))

@section('top-actions')
    <a href="{{ route('appointments.index') }}" class="icon-button" title="Randevularda ara"><i data-lucide="search"></i></a>
    <button class="icon-button notification-button" type="button" title="Bildirimler"><i data-lucide="bell"></i><span>{{ $metrics['emergency_count'] }}</span></button>
    <a href="{{ route('appointments.index', ['open' => 'new']) }}" class="primary-button"><i data-lucide="plus"></i> Yeni Randevu</a>
@endsection

@section('content')
<section class="metric-grid" aria-label="Günlük özet">
    <article class="metric-card">
        <span class="metric-icon"><i data-lucide="calendar-days"></i></span>
        <div><p>Bugünkü Randevu</p><strong>{{ $metrics['today_count'] }}</strong><small>{{ $metrics['completed_count'] }} tamamlandı</small></div>
    </article>
    <article class="metric-card">
        <span class="metric-icon"><i data-lucide="briefcase-business"></i></span>
        <div><p>Aktif İş</p><strong>{{ $metrics['active_count'] }}</strong><small>Yolda, sahada veya işlemde</small></div>
    </article>
    <article class="metric-card metric-emergency">
        <span class="metric-icon"><i data-lucide="triangle-alert"></i></span>
        <div><p>Acil Çağrı</p><strong>{{ $metrics['emergency_count'] }}</strong><small>Müdahale bekleyen talepler</small></div>
    </article>
    <article class="metric-card">
        <span class="metric-icon"><i data-lucide="wallet-cards"></i></span>
        <div><p>Günlük Ciro</p><strong>₺{{ number_format($metrics['daily_revenue'], 0, ',', '.') }}</strong><small><i data-lucide="trending-up"></i> Tamamlanan işlerden</small></div>
    </article>
</section>

<section class="operations-grid">
    <article class="panel map-panel">
        <header class="panel-heading map-heading">
            <div><span class="section-kicker">CANLI OPERASYON</span><h2>Harita & Rota</h2></div>
            <span class="route-toggle"><i data-lucide="route"></i> {{ $technicians->count() }} ekip hazır</span>
        </header>
        <div class="map-canvas">
            <span class="map-text avanos">Avanos</span><span class="map-text nevsehir">Nevşehir</span><span class="map-text urgup">Ürgüp</span><span class="map-text goreme">Göreme</span>
            <span class="map-road road-one"></span><span class="map-road road-two"></span><span class="map-road road-three"></span>
            <svg class="route-line route-visible" viewBox="0 0 800 440" aria-hidden="true"><path d="M110 330 C180 290 205 350 275 296 S355 218 410 250 S486 340 545 278 S600 170 690 135"/><path class="route-secondary" d="M220 115 C270 158 305 188 360 166 S470 98 540 145"/></svg>
            @foreach($technicians->take(3) as $index => $technician)
                <span class="team-marker team-{{ ['one','two','three'][$index] }}"><b>{{ str($technician->name)->explode(' ')->map(fn($p) => mb_substr($p,0,1))->take(2)->join('') }}</b><strong>{{ $technician->name }}</strong></span>
            @endforeach
            <span class="location-pin pin-one"><i data-lucide="map-pin"></i></span><span class="location-pin pin-two"><i data-lucide="map-pin"></i></span><span class="location-pin pin-three"><i data-lucide="map-pin"></i></span>
            <span class="map-status"><i></i> Canlı harita entegrasyonuna hazır</span>
        </div>
        <footer class="resource-strip">
            <div><span class="resource-icon"><i data-lucide="car-front"></i></span><span><strong>{{ $appointments->count() }} Araç</strong><small>Bugünkü aktif operasyonda</small></span></div>
            <div><span class="resource-icon"><i data-lucide="users"></i></span><span><strong>{{ $technicians->count() }} Ekip Üyesi</strong><small>Saha atamasına uygun</small></span></div>
            <div><span class="resource-icon"><i data-lucide="navigation"></i></span><span><strong>Tek Tıkla Rota</strong><small>Randevu detayından yol tarifi</small></span></div>
        </footer>
    </article>

    <aside class="panel appointments-panel">
        <header class="panel-heading">
            <div><span class="section-kicker">BUGÜN</span><h2>Yaklaşan Randevular</h2></div>
            <a class="icon-button compact" href="{{ route('appointments.index') }}"><i data-lucide="list-filter"></i></a>
        </header>
        <div class="appointments-list">
            @forelse($appointments as $appointment)
                <a class="appointment-row" href="{{ route('appointments.show', $appointment) }}">
                    <time>{{ $appointment->scheduled_at->format('H:i') }}</time>
                    <span class="appointment-timeline"><i></i></span>
                    <span class="appointment-main">
                        <strong>{{ $appointment->vehicle->plate }}</strong>
                        <span>{{ $appointment->service->name }}</span>
                        <small><i data-lucide="map-pin"></i> {{ str($appointment->address)->limit(30) }}</small>
                    </span>
                    <span class="appointment-side"><b>{{ $appointment->assignee ? str($appointment->assignee->name)->explode(' ')->map(fn($p) => mb_substr($p,0,1))->take(2)->join('') : '—' }}</b><em class="status-badge status-{{ $appointment->status->tone() }}">{{ $appointment->status->label() }}</em></span>
                </a>
            @empty
                <div class="empty-state"><i data-lucide="calendar-x"></i><strong>Bugün randevu yok</strong><p>Yeni randevu oluşturarak operasyonu başlatabilirsiniz.</p></div>
            @endforelse
        </div>
        <a class="panel-footer-link" href="{{ route('appointments.index') }}">Tüm randevuları gör <i data-lucide="arrow-right"></i></a>
    </aside>
</section>
@endsection