@extends('layouts.app')
@section('title', 'Services Price List')
@section('content')

<div class="flex flex-wrap items-baseline justify-between gap-3 mb-4">
    <div>
        <h1 class="text-lg font-bold text-gray-900">Services Price List</h1>
        <p class="text-xs text-gray-400">Price reference for hospital services · Read-only</p>
    </div>
</div>

{{-- Search + filter bar --}}
<form method="GET" action="{{ route('price-list.services') }}" class="bg-white border border-gray-100 rounded-xl shadow-sm p-3 mb-4">
    <div class="grid grid-cols-1 md:grid-cols-12 gap-2 items-end">
        <div class="md:col-span-5">
            <label class="block text-[10px] text-gray-500 font-semibold uppercase mb-1">Search by name or code</label>
            <input type="text" name="q" value="{{ $q }}"
                   placeholder="e.g. consultation, ultrasound, dressing"
                   autocomplete="off"
                   class="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-xs focus:border-purple-500 focus:outline-none">
        </div>
        <div class="md:col-span-3">
            <label class="block text-[10px] text-gray-500 font-semibold uppercase mb-1">Category</label>
            <select name="category" class="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-xs focus:border-purple-500 focus:outline-none">
                <option value="">All categories</option>
                @foreach($categories as $c)
                    <option value="{{ $c }}" {{ $category === $c ? 'selected' : '' }}>{{ $c }}</option>
                @endforeach
            </select>
        </div>
        <div class="md:col-span-2">
            <label class="block text-[10px] text-gray-500 font-semibold uppercase mb-1">Department</label>
            <select name="department" class="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-xs focus:border-purple-500 focus:outline-none">
                <option value="">All</option>
                @include('partials._department-options', ['selected' => $department])
            </select>
        </div>
        <div class="md:col-span-2 flex gap-2">
            <button type="submit" class="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white text-xs rounded-lg font-medium flex-1">Search</button>
            @if($q !== '' || $category !== '' || $department !== '')
                <a href="{{ route('price-list.services') }}" class="px-2 py-1.5 text-xs text-gray-500 hover:text-purple-600">Reset</a>
            @endif
        </div>
    </div>
</form>

<p class="text-xs text-gray-500 mb-2">
    Showing <strong>{{ number_format($services->total()) }}</strong>
    {{ $services->total() === 1 ? 'service' : 'services' }}
    @if($q !== '') matching "<strong>{{ $q }}</strong>" @endif
</p>

<div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-x-auto">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="table-header">Service</th>
                <th class="table-header">Code</th>
                <th class="table-header">Category</th>
                <th class="table-header">Department</th>
                <th class="table-header text-right">Price (KES)</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @forelse($services as $s)
                <tr class="hover:bg-gray-50">
                    <td class="table-cell font-medium text-gray-800">
                        {{ $s->name }}
                        @if($s->is_package)
                            <span class="ml-1 inline-block px-1.5 py-0.5 bg-amber-100 text-amber-800 text-[10px] font-semibold rounded uppercase">Package</span>
                        @endif
                    </td>
                    <td class="table-cell font-mono text-xs">{{ $s->code ?: '—' }}</td>
                    <td class="table-cell text-xs">{{ $s->category ?: '—' }}</td>
                    <td class="table-cell text-xs">{{ optional($s->department)->name ?: '—' }}</td>
                    <td class="table-cell text-right font-semibold">{{ number_format($s->price, 2) }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="text-center text-gray-400 py-10 text-sm">
                        No services match the current filters.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

@if($services->hasPages())
    <div class="mt-4">{{ $services->links() }}</div>
@endif
@endsection