@extends('layouts.app')

@section('title', $appointment->appointment_number)
@section('eyebrow', 'RANDEVU DETAYI')
@section('heading', $appointment->appointment_number)

@section('top-actions')
    <a class="secondary-button" href="{{ route('appointments.index') }}"><i data-lucide="arrow-left"></i> Listeye Dön</a>
    <a class="primary-button" href="{{ $appointment->routeUrl() }}" target="_blank" rel="noopener"><i data-lucide="navigation"></i> Yol Tarifi</a>
@endsection

@section('content')
<div class="detail-grid">
    <section class="panel detail-main">
        <header class="detail-hero {{ $appointment->type === 'emergency' ? 'emergency' : '' }}">
            <span class="detail-hero-icon"><i data-lucide="{{ $appointment->type === 'emergency' ? 'siren' : 'calendar-check' }}"></i></span>
            <div><span>{{ $appointment->type === 'emergency' ? 'ACİL ÇAĞRI' : 'PLANLI RANDEVU' }}</span><h2>{{ $appointment->service->name }}</h2><p>{{ $appointment->scheduled_at->locale('tr')->translatedFormat('d F Y l · H:i') }}</p></div>
            <span class="status-badge status-{{ $appointment->status->tone() }}">{{ $appointment->status->label() }}</span>
        </header>
        <div class="detail-section-grid">
            <article><span class="detail-icon"><i data-lucide="user-round"></i></span><div><small>MÜŞTERİ</small><strong>{{ $appointment->customer->name }}</strong><a href="tel:{{ $appointment->customer->phone }}">{{ $appointment->customer->phone }}</a></div></article>
            <article><span class="detail-icon"><i data-lucide="car-front"></i></span><div><small>ARAÇ</small><strong>{{ $appointment->vehicle->plate }}</strong><span>{{ trim($appointment->vehicle->brand.' '.$appointment->vehicle->model.' '.$appointment->vehicle->year) }}</span></div></article>
            <article class="span-2"><span class="detail-icon"><i data-lucide="scan-line"></i></span><div><small>ŞASİ NUMARASI (VIN)</small><strong class="vin-value">{{ $appointment->vehicle->vin ?: 'Henüz girilmedi' }}</strong><span>{{ $appointment->vehicle->mileage ? number_format($appointment->vehicle->mileage, 0, ',', '.').' km' : 'Kilometre bilgisi yok' }}</span></div></article>
            <article class="span-2"><span class="detail-icon"><i data-lucide="map-pinned"></i></span><div><small>HİZMET ADRESİ</small><strong>{{ $appointment->address }}</strong><span>{{ collect([$appointment->district, $appointment->city])->filter()->join(' / ') }}</span></div></article>
        </div>
        @if($appointment->customer_note || $appointment->internal_note)
        <div class="notes-grid">
            @if($appointment->customer_note)<div><small>Müşteri notu</small><p>{{ $appointment->customer_note }}</p></div>@endif
            @if($appointment->internal_note)<div><small>Operasyon notu</small><p>{{ $appointment->internal_note }}</p></div>@endif
        </div>
        @endif
        <div class="price-summary">
            <span><small>Hizmet</small><strong>₺{{ number_format((float)$appointment->service_price, 2, ',', '.') }}</strong></span>
            <span><small>Yol ücreti</small><strong>₺{{ number_format((float)$appointment->travel_fee, 2, ',', '.') }}</strong></span>
            <span><small>İndirim</small><strong>−₺{{ number_format((float)$appointment->discount, 2, ',', '.') }}</strong></span>
            <span class="total"><small>Toplam</small><strong>₺{{ number_format((float)$appointment->total, 2, ',', '.') }}</strong></span>
        </div>
    </section>

    <aside class="detail-sidebar">
        <section class="panel action-panel">
            <header><span class="section-kicker">OPERASYON</span><h3>Durum Güncelle</h3></header>
            <form method="POST" action="{{ route('appointments.status', $appointment) }}">
                @csrf @method('PATCH')
                <label class="form-field"><span>Yeni durum</span><select name="status">@foreach($statuses as $status)<option value="{{ $status->value }}" @selected($appointment->status === $status)>{{ $status->label() }}</option>@endforeach</select></label>
                <label class="form-field"><span>Durum notu</span><textarea name="note" rows="2" placeholder="İsteğe bağlı açıklama"></textarea></label>
                <button class="primary-button full" type="submit"><i data-lucide="refresh-cw"></i> Durumu Güncelle</button>
            </form>
        </section>
        <section class="panel action-panel">
            <header><span class="section-kicker">SAHA EKİBİ</span><h3>Personel Ata</h3></header>
            <form method="POST" action="{{ route('appointments.assign', $appointment) }}">
                @csrf @method('PATCH')
                <label class="form-field"><span>Ekip üyesi</span><select name="assigned_user_id" required><option value="">Personel seçin</option>@foreach($technicians as $technician)<option value="{{ $technician->id }}" @selected($appointment->assigned_user_id === $technician->id)>{{ $technician->name }}</option>@endforeach</select></label>
                <button class="secondary-button full" type="submit"><i data-lucide="user-check"></i> Ekibi Ata</button>
            </form>
        </section>
        <section class="panel timeline-panel">
            <header><span class="section-kicker">GEÇMİŞ</span><h3>Durum Hareketleri</h3></header>
            <div class="status-timeline">
                @foreach($appointment->statusLogs->sortByDesc('created_at') as $log)
                    <div><i></i><span><strong>{{ \App\Enums\AppointmentStatus::tryFrom($log->to_status)?->label() ?? $log->to_status }}</strong><small>{{ $log->created_at?->format('d.m.Y H:i') }} · {{ $log->user?->name ?? 'Sistem' }}</small>@if($log->note)<p>{{ $log->note }}</p>@endif</span></div>
                @endforeach
            </div>
        </section>
    </aside>
</div>
@endsection