@extends('layouts.app')
@section('title', 'Service Price List')
@section('content')
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div><h1 class="text-lg font-bold text-gray-900">Service Price List</h1><p class="text-xs text-gray-400">Master charge list for all billable services</p></div>
    <button onclick="document.getElementById('addServiceModal').classList.remove('hidden')" class="btn-primary text-xs flex items-center gap-1"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> Add Service</button>
</div>

<div class="bg-white rounded-xl border shadow-sm">
    <div class="px-5 py-3 border-b bg-gray-50/50">
        <form method="GET" class="flex flex-wrap gap-2 items-end">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search services…" class="form-input text-xs w-48">
            <select name="category" class="form-input text-xs w-40"><option value="">All Categories</option>@foreach($categories as $c)<option value="{{ $c }}" {{ request('category')===$c?'selected':'' }}>{{ $c }}</option>@endforeach</select>
            <button class="btn-primary text-xs">Filter</button>
            @if(request()->hasAny(['search','category']))<a href="{{ route('admin.services') }}" class="btn-secondary text-xs">Clear</a>@endif
        </form>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full"><thead><tr class="bg-gray-50">
            <th class="table-header">Code</th><th class="table-header">Service Name</th><th class="table-header">Category</th><th class="table-header">Department</th><th class="table-header text-right">Price (KES)</th><th class="table-header text-right">Insurance</th><th class="table-header">Status</th><th class="table-header">Actions</th>
        </tr></thead>
        <tbody>
        @forelse($services as $s)
        <tr class="border-b border-gray-50 {{ !$s->is_active ? 'opacity-50' : '' }}">
            <td class="table-cell font-mono text-xs">{{ $s->code }}</td>
            <td class="table-cell text-xs font-medium">{{ $s->name }}</td>
            <td class="table-cell text-xs">{{ $s->category }}</td>
            <td class="table-cell text-xs">{{ $s->department->name ?? '-' }}</td>
            <td class="table-cell text-right text-xs font-bold">{{ number_format($s->price) }}</td>
            <td class="table-cell text-right text-xs">{{ $s->insurance_price ? number_format($s->insurance_price) : '-' }}</td>
            <td class="table-cell">@if($s->is_active)<span class="badge badge-success">Active</span>@else<span class="badge badge-gray">Inactive</span>@endif</td>
            <td class="table-cell"><button onclick="editService({{ json_encode($s) }})" class="text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded hover:bg-blue-100">Edit</button></td>
        </tr>
        @empty
        <tr><td colspan="8" class="table-cell text-center text-gray-400 py-8">No services. Click + Add Service.</td></tr>
        @endforelse
        </tbody></table>
    </div>
    @if($services->hasPages())<div class="px-4 py-3 border-t">{{ $services->links() }}</div>@endif
</div>

{{-- Add Service Modal --}}
<div id="addServiceModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 p-6">
        <div class="flex justify-between items-center mb-4"><h3 class="font-bold">Add Service</h3><button onclick="document.getElementById('addServiceModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button></div>
        <form method="POST" action="{{ route('admin.services.store') }}">@csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div><label class="form-label">Service Name *</label><input type="text" name="name" required class="form-input"></div>
                <div><label class="form-label">Code *</label><input type="text" name="code" required class="form-input" placeholder="e.g. CON001"></div>
                <div><label class="form-label">Category *</label>
                    <select name="category" required class="form-input"><option value="">Select…</option>@foreach(['Consultation','Laboratory','Imaging','Dental','Orthopedic','Minor Surgical','MCH','Maternity','Eye Clinic','Surgery','Day-case','Home Care','Inpatient','Follow up','Procedure','Other'] as $c)<option>{{ $c }}</option>@endforeach</select>
                </div>
                <div><label class="form-label">Department</label><select name="department_id" class="form-input"><option value="">|</option>@include('partials._department-options')</select></div>
                <div><label class="form-label">Price (KES) *</label><input type="number" step="0.01" name="price" required class="form-input"></div>
                <div><label class="form-label">Insurance Price</label><input type="number" step="0.01" name="insurance_price" class="form-input"></div>
                <div class="md:col-span-2"><label class="form-label">Description</label><input type="text" name="description" class="form-input"></div>
            </div>
            <div class="flex justify-end gap-2 mt-4"><button type="button" onclick="document.getElementById('addServiceModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button><button type="submit" class="btn-primary text-xs">Add Service</button></div>
        </form>
    </div>
</div>

{{-- Edit Service Modal --}}
<div id="editServiceModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 p-6">
        <div class="flex justify-between items-center mb-4"><h3 class="font-bold">Edit Service</h3><button onclick="document.getElementById('editServiceModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button></div>
        <form method="POST" id="editServiceForm">@csrf @method('PUT')
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div><label class="form-label">Service Name *</label><input type="text" name="name" id="es_name" required class="form-input"></div>
                <div><label class="form-label">Category *</label>
                    <select name="category" id="es_cat" required class="form-input">@foreach(['Consultation','Laboratory','Imaging','Dental','Orthopedic','Minor Surgical','MCH','Maternity','Eye Clinic','Surgery','Day-case','Home Care','Inpatient','Follow up','Procedure','Other'] as $c)<option>{{ $c }}</option>@endforeach</select>
                </div>
                <div><label class="form-label">Department</label><select name="department_id" id="es_dept" class="form-input"><option value="">|</option>@include('partials._department-options')</select></div>
                <div><label class="form-label">Price (KES) *</label><input type="number" step="0.01" name="price" id="es_price" required class="form-input"></div>
                <div><label class="form-label">Insurance Price</label><input type="number" step="0.01" name="insurance_price" id="es_ins" class="form-input"></div>
                <div><label class="form-label">Active</label><select name="is_active" id="es_active" class="form-input"><option value="1">Active</option><option value="0">Inactive</option></select></div>
                <div class="md:col-span-2"><label class="form-label">Description</label><input type="text" name="description" id="es_desc" class="form-input"></div>
            </div>
            <div class="flex justify-end gap-2 mt-4"><button type="button" onclick="document.getElementById('editServiceModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button><button type="submit" class="btn-success text-xs">Save Changes</button></div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
<script>
function editService(s) {
    document.getElementById('editServiceForm').action = `${window.HMIS_BASE}/admin/services/${s.id}`;
    document.getElementById('es_name').value = s.name;
    document.getElementById('es_cat').value = s.category;
    document.getElementById('es_dept').value = s.department_id || '';
    document.getElementById('es_price').value = s.price;
    document.getElementById('es_ins').value = s.insurance_price || '';
    document.getElementById('es_active').value = s.is_active ? '1' : '0';
    document.getElementById('es_desc').value = s.description || '';
    document.getElementById('editServiceModal').classList.remove('hidden');
}
</script>
@endsection