@extends('admin.layout')

@section('title', 'Daftar Layanan')
@section('page_heading', 'Data Layanan & Opsi Durasi Harga')

@section('content')
<div class="space-y-6">

    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Daftar Layanan</h2>
            <p class="text-sm text-on-surface-variant mt-1">Kelola data layanan, deskripsi, serta variasi durasi &amp; harga.</p>
        </div>
        <a href="{{ route('admin.services.create') }}" class="px-6 py-2.5 rounded-xl bg-primary text-on-primary font-bold text-sm hover:bg-opacity-90 transition-all shadow flex items-center gap-2">
            <span class="material-symbols-outlined text-[20px]">add</span>
            <span>Tambah Layanan</span>
        </a>
    </div>

    <!-- Table Card with Horizontal Scroll -->
    <div class="bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs whitespace-nowrap min-w-[800px]">
                <thead class="bg-surface-container-low border-b border-outline-variant text-on-surface-variant font-bold text-[11px] uppercase tracking-wider">
                    <tr>
                        <th class="px-5 py-3.5 w-12 text-center">No</th>
                        <th class="px-5 py-3.5 w-14 text-center">Icon</th>
                        <th class="px-5 py-3.5">Nama Layanan</th>
                        <th class="px-5 py-3.5">Kategori</th>
                        <th class="px-5 py-3.5">Harga Termurah</th>
                        <th class="px-5 py-3.5">Variasi Durasi &amp; Harga</th>
                        <th class="px-5 py-3.5 w-24 text-center">Status</th>
                        <th class="px-5 py-3.5 w-24 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant/60">
                    @forelse($services as $service)
                    <tr class="hover:bg-surface-container-low/50 transition-colors">
                        <td class="px-5 py-3.5 text-center font-bold text-on-surface-variant">#{{ $loop->iteration }}</td>
                        <td class="px-5 py-3.5 text-center">
                            <span class="text-xl">{{ $service->icon }}</span>
                        </td>
                        <td class="px-5 py-3.5">
                            <div class="font-bold text-on-surface text-xs">{{ $service->name }}</div>
                            @if($service->description)
                            <div class="text-[11px] font-normal text-on-surface-variant max-w-xs truncate mt-0.5">{{ $service->description }}</div>
                            @endif
                        </td>
                        <td class="px-5 py-3.5">
                            @if($service->category)
                            <span class="inline-flex items-center px-2 py-0.5 rounded-md bg-primary/10 text-primary text-[10px] font-bold">
                                {{ $service->category->name }}
                            </span>
                            @else
                            <span class="text-outline-variant text-[11px] italic">—</span>
                            @endif
                        </td>
                        <td class="px-5 py-3.5 font-bold text-primary">
                            {{ $service->starting_price }}
                        </td>
                        <td class="px-5 py-3.5">
                            @if(!empty($service->durations) && is_array($service->durations))
                            <div class="flex flex-wrap gap-1.5 items-center">
                                @foreach($service->durations as $d)
                                <span class="inline-flex items-center px-2 py-0.5 rounded-md bg-surface-container-low border border-outline-variant/80 text-[11px] font-semibold text-on-surface">
                                    <span class="text-primary font-bold mr-1">{{ $d['minutes'] ?? '' }}m</span> : {{ config('app.currency_symbol', 'Rp') }} {{ $d['price'] ?? '' }}
                                </span>
                                @endforeach
                            </div>
                            @else
                            <span class="text-on-surface-variant/60 text-[11px] italic">Belum ada durasi</span>
                            @endif
                        </td>
                        <td class="px-5 py-3.5 text-center">
                            @if($service->is_active)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-[#E1F2E8] text-[#1E5128]">
                                Aktif
                            </span>
                            @else
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-surface-variant text-on-surface-variant">
                                Non-aktif
                            </span>
                            @endif
                        </td>
                        <td class="px-5 py-3.5 text-center">
                            <div class="flex items-center justify-center gap-1">
                                <!-- Icon-only Edit Button -->
                                <a href="{{ route('admin.services.edit', ['encryptedId' => $service->secure_id]) }}"
                                    title="Edit Data Layanan"
                                    class="p-1.5 rounded-lg text-tertiary hover:bg-tertiary-container/20 transition-colors flex items-center justify-center">
                                    <span class="material-symbols-outlined text-lg">edit</span>
                                </a>

                                <!-- Icon-only Delete Button -->
                                <form action="{{ route('admin.services.destroy', ['encryptedId' => $service->secure_id]) }}" method="POST" class="inline-block delete-form">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" title="Hapus Layanan" class="p-1.5 rounded-lg text-error hover:bg-error-container transition-colors flex items-center justify-center">
                                        <span class="material-symbols-outlined text-lg">delete</span>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-10 text-center text-on-surface-variant text-xs">
                            Belum ada data layanan. Klik "Tambah Layanan" untuk membuat layanan pertama.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection