@extends('layouts.app')

@section('title', 'Hizmetler')
@section('eyebrow', 'HİZMET KATALOĞU')
@section('heading', 'Hizmetler & Fiyatlar')

@section('content')
<div class="service-category-grid">
@foreach($categories as $category)
    <section class="panel service-category-card">
        <header>
            <span class="category-icon"><i data-lucide="{{ match($category->value) {'wash_detailing' => 'sparkles', 'maintenance_repair' => 'wrench', default => 'siren'} }}"></i></span>
            <div><span class="section-kicker">{{ str_replace('_', ' ', mb_strtoupper($category->value)) }}</span><h2>{{ $category->label() }}</h2></div>
            <span class="count-badge">{{ ($services[$category->value] ?? collect())->count() }} hizmet</span>
        </header>
        <div class="service-list">
            @forelse($services[$category->value] ?? [] as $service)
                <article>
                    <div><strong>{{ $service->name }}</strong><span>{{ $service->duration_minutes }} dk @if($service->vin_required) · <b class="vin-required"><i data-lucide="scan-line"></i> VIN gerekli</b>@endif</span></div>
                    <div class="service-price"><strong>₺{{ number_format((float)$service->base_price, 2, ',', '.') }}</strong><span class="status-dot {{ $service->is_active ? 'active' : '' }}">{{ $service->is_active ? 'Aktif' : 'Pasif' }}</span></div>
                </article>
            @empty<div class="empty-state"><p>Bu kategoride henüz hizmet yok.</p></div>@endforelse
        </div>
    </section>
@endforeach
</div>
@endsection