@extends('layouts.app')

@section('title', 'Randevular')
@section('eyebrow', 'OPERASYON YÖNETİMİ')
@section('heading', 'Randevular')

@section('top-actions')
    <button class="primary-button" type="button" data-modal-open="appointment-modal"><i data-lucide="plus"></i> Yeni Randevu</button>
@endsection

@section('content')
<section class="panel list-panel">
    <header class="list-toolbar">
        <div><span class="section-kicker">TÜM KAYITLAR</span><h2>Randevu Takibi</h2><p>Planlı işler ve acil çağrıları tek listeden yönetin.</p></div>
        <form class="filter-form" method="GET">
            <label class="search-input"><i data-lucide="search"></i><input name="q" value="{{ request('q') }}" placeholder="Plaka, müşteri, telefon veya VIN"></label>
            <select name="status" aria-label="Durum">
                <option value="">Tüm durumlar</option>
                @foreach($statuses as $status)<option value="{{ $status->value }}" @selected(request('status') === $status->value)>{{ $status->label() }}</option>@endforeach
            </select>
            <input type="date" name="date" value="{{ request('date') }}" aria-label="Tarih">
            <button class="secondary-button" type="submit"><i data-lucide="list-filter"></i> Filtrele</button>
            @if(request()->hasAny(['q','status','date','type']))<a class="ghost-button" href="{{ route('appointments.index') }}">Temizle</a>@endif
        </form>
    </header>

    <div class="table-wrap">
        <table class="data-table">
            <thead><tr><th>Randevu</th><th>Müşteri & Araç</th><th>Hizmet</th><th>Tarih</th><th>Ekip</th><th>Durum</th><th></th></tr></thead>
            <tbody>
            @forelse($appointments as $appointment)
                <tr>
                    <td><strong class="record-number">{{ $appointment->appointment_number }}</strong><small>{{ $appointment->type === 'emergency' ? 'Acil çağrı' : 'Planlı' }}</small></td>
                    <td><strong>{{ $appointment->customer->name }}</strong><small class="plate-line"><i data-lucide="car-front"></i>{{ $appointment->vehicle->plate }} · {{ trim($appointment->vehicle->brand.' '.$appointment->vehicle->model) }}</small></td>
                    <td><strong>{{ $appointment->service->name }}</strong><small>₺{{ number_format((float)$appointment->total, 2, ',', '.') }}</small></td>
                    <td><strong>{{ $appointment->scheduled_at->format('d.m.Y') }}</strong><small>{{ $appointment->scheduled_at->format('H:i') }} · {{ $appointment->district ?: $appointment->city }}</small></td>
                    <td><span class="person-cell"><b>{{ $appointment->assignee ? str($appointment->assignee->name)->explode(' ')->map(fn($p) => mb_substr($p,0,1))->take(2)->join('') : '—' }}</b><span>{{ $appointment->assignee?->name ?? 'Atanmadı' }}</span></span></td>
                    <td><span class="status-badge status-{{ $appointment->status->tone() }}">{{ $appointment->status->label() }}</span></td>
                    <td class="table-actions"><a href="{{ route('appointments.show', $appointment) }}" class="icon-button compact" title="Detayı aç"><i data-lucide="arrow-up-right"></i></a></td>
                </tr>
            @empty
                <tr><td colspan="7"><div class="empty-state"><i data-lucide="calendar-x"></i><strong>Randevu bulunamadı</strong><p>Filtreleri temizleyebilir veya yeni randevu oluşturabilirsiniz.</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <x-pagination :paginator="$appointments" />
</section>
@endsection

@push('modals')
<div class="modal-backdrop {{ $errors->any() ? 'is-open' : '' }}" data-modal="appointment-modal" role="dialog" aria-modal="true" aria-labelledby="appointment-title">
    <div class="modal-card modal-large">
        <header class="modal-header">
            <div><span class="section-kicker">YENİ İŞ EMRİ</span><h2 id="appointment-title">Randevu Oluştur</h2><p>Müşteri, araç, hizmet ve adres bilgilerini girin.</p></div>
            <button class="icon-button" type="button" data-modal-close aria-label="Kapat"><i data-lucide="x"></i></button>
        </header>
        <form method="POST" action="{{ route('appointments.store') }}" class="modal-form" data-appointment-form>
            @csrf
            <section class="form-section">
                <h3><span>1</span>Müşteri bilgileri</h3>
                <div class="form-grid cols-2">
                    <label class="form-field span-2"><span>Kayıtlı müşteri</span><select name="customer_id" data-customer-select><option value="">Yeni müşteri oluştur</option>@foreach($customers as $customer)<option value="{{ $customer->id }}" @selected(old('customer_id') == $customer->id)>{{ $customer->name }} · {{ $customer->phone }}</option>@endforeach</select></label>
                    <label class="form-field"><span>Ad soyad</span><input name="customer_name" value="{{ old('customer_name') }}" placeholder="Örn. Ahmet Demir">@error('customer_name')<small class="field-error">{{ $message }}</small>@enderror</label>
                    <label class="form-field"><span>Telefon</span><input name="customer_phone" value="{{ old('customer_phone') }}" placeholder="05xx xxx xx xx">@error('customer_phone')<small class="field-error">{{ $message }}</small>@enderror</label>
                    <label class="form-field span-2"><span>E-posta <em>isteğe bağlı</em></span><input type="email" name="customer_email" value="{{ old('customer_email') }}" placeholder="musteri@example.com"></label>
                </div>
            </section>
            <section class="form-section">
                <h3><span>2</span>Araç ve şasi bilgileri</h3>
                <div class="form-grid cols-2">
                    <label class="form-field span-2"><span>Kayıtlı araç</span><select name="vehicle_id" data-vehicle-select><option value="">Yeni araç oluştur</option>@foreach($customers as $customer)@foreach($customer->vehicles as $vehicle)<option value="{{ $vehicle->id }}" data-customer="{{ $customer->id }}" @selected(old('vehicle_id') == $vehicle->id)>{{ $vehicle->plate }} · {{ trim($vehicle->brand.' '.$vehicle->model) }}</option>@endforeach @endforeach</select></label>
                    <label class="form-field"><span>Plaka</span><input name="plate" value="{{ old('plate') }}" placeholder="50 AA 050">@error('plate')<small class="field-error">{{ $message }}</small>@enderror</label>
                    <label class="form-field"><span>Şasi numarası (VIN)</span><input name="vin" value="{{ old('vin') }}" minlength="17" maxlength="17" placeholder="17 karakter" data-vin-input><small class="field-help">Bakım ve parça hizmetlerinde doğru tedarik için kullanılır.</small>@error('vin')<small class="field-error">{{ $message }}</small>@enderror</label>
                    <label class="form-field"><span>Marka</span><input name="brand" value="{{ old('brand') }}" placeholder="Örn. Toyota"></label>
                    <label class="form-field"><span>Model</span><input name="model" value="{{ old('model') }}" placeholder="Örn. Corolla"></label>
                    <label class="form-field"><span>Model yılı</span><input type="number" name="year" value="{{ old('year') }}" min="1950" max="{{ now()->year + 1 }}"></label>
                    <label class="form-field"><span>Kilometre</span><input type="number" name="mileage" value="{{ old('mileage') }}" min="0"></label>
                </div>
            </section>
            <section class="form-section">
                <h3><span>3</span>Hizmet ve planlama</h3>
                <div class="form-grid cols-2">
                    <label class="form-field span-2"><span>Hizmet</span><select name="service_id" required data-service-select><option value="">Hizmet seçin</option>@foreach($services as $service)<option value="{{ $service->id }}" data-price="{{ $service->base_price }}" data-vin-required="{{ $service->vin_required ? '1' : '0' }}" data-emergency="{{ $service->is_emergency ? '1' : '0' }}" @selected(old('service_id') == $service->id)>{{ $service->category->label() }} · {{ $service->name }}</option>@endforeach</select>@error('service_id')<small class="field-error">{{ $message }}</small>@enderror</label>
                    <label class="form-field"><span>Talep türü</span><select name="type"><option value="scheduled" @selected(old('type') === 'scheduled')>Planlı randevu</option><option value="emergency" @selected(old('type') === 'emergency')>Acil çağrı</option></select></label>
                    <label class="form-field"><span>Tarih ve saat</span><input type="datetime-local" name="scheduled_at" value="{{ old('scheduled_at', now()->addHour()->format('Y-m-d\TH:i')) }}" required>@error('scheduled_at')<small class="field-error">{{ $message }}</small>@enderror</label>
                    <label class="form-field"><span>Atanacak ekip</span><select name="assigned_user_id"><option value="">Daha sonra ata</option>@foreach($technicians as $technician)<option value="{{ $technician->id }}" @selected(old('assigned_user_id') == $technician->id)>{{ $technician->name }}</option>@endforeach</select></label>
                    <label class="form-field"><span>Hizmet bedeli</span><span class="currency-input"><b>₺</b><input type="number" name="service_price" value="{{ old('service_price') }}" min="0" step="0.01" data-service-price></span></label>
                    <label class="form-field"><span>Yol ücreti</span><span class="currency-input"><b>₺</b><input type="number" name="travel_fee" value="{{ old('travel_fee', 0) }}" min="0" step="0.01"></span></label>
                    <label class="form-field"><span>İndirim</span><span class="currency-input"><b>₺</b><input type="number" name="discount" value="{{ old('discount', 0) }}" min="0" step="0.01"></span></label>
                </div>
            </section>
            <section class="form-section">
                <h3><span>4</span>Hizmet adresi</h3>
                <div class="form-grid cols-2">
                    <label class="form-field"><span>İl</span><input name="city" value="{{ old('city', auth()->user()->company?->city) }}"></label>
                    <label class="form-field"><span>İlçe</span><input name="district" value="{{ old('district', auth()->user()->company?->district) }}"></label>
                    <label class="form-field span-2"><span>Açık adres</span><textarea name="address" rows="3" required placeholder="Mahalle, cadde, sokak, bina ve tarif bilgisi">{{ old('address') }}</textarea>@error('address')<small class="field-error">{{ $message }}</small>@enderror</label>
                    <label class="form-field"><span>Müşteri notu</span><textarea name="customer_note" rows="3">{{ old('customer_note') }}</textarea></label>
                    <label class="form-field"><span>İç operasyon notu</span><textarea name="internal_note" rows="3">{{ old('internal_note') }}</textarea></label>
                </div>
            </section>
            <footer class="modal-actions"><button class="ghost-button" type="button" data-modal-close>Vazgeç</button><button class="primary-button" type="submit"><i data-lucide="calendar-check"></i> Randevuyu Kaydet</button></footer>
        </form>
    </div>
</div>
@endpush