@extends('layouts.app')
@section('title', 'Services & Pricing')
@section('styles')
<style>
    .svc-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:12px 16px;border-bottom:1px solid #e5e7eb;background:#fafafa}
    .svc-chip{display:inline-flex;align-items:center;padding:5px 14px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid #e5e7eb;cursor:pointer;transition:all .12s;background:#fff;color:#4b5563;white-space:nowrap}
    .svc-chip:hover{border-color:#0069c9;color:#0069c9}
    .svc-chip.active{background:#0069c9;color:#fff;border-color:#0069c9}
</style>
@endsection
@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">Services & Pricing</h1>
        <p class="text-xs text-gray-400">Manage hospital services across departments and set pricing</p>
    </div>
    <div class="flex items-center gap-2">
        <input type="text" id="svcSearch" placeholder="Search services…" class="form-input w-56" oninput="filterSvcTable(this.value)">
        <button onclick="document.getElementById('addServiceModal').classList.remove('hidden')" class="btn-primary text-xs">+ Add Service</button>
    </div>
</div>

<div class="bg-white rounded-xl border shadow-sm">
    {{-- Category Tabs --}}
    <div class="svc-tabs" id="svcTabs">
        <button class="svc-chip active" onclick="filterCategory(this, 'all')">All</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Consultation')">Consultation</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Laboratory')">Laboratory</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Imaging')">Imaging</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Dental')">Dental</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Orthopedic')">Orthopedic</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Minor Surgical Procedures')">Minor Surgical Procedures</button>
        <button class="svc-chip" onclick="filterCategory(this, 'MCH')">MCH</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Maternity')">Maternity</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Eye Clinic')">Eye Clinic</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Surgery')">Surgery</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Day-case Services')">Day-case Services</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Home Care Services')">Home Care Services</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Inpatient')">Inpatient</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Follow up')">Follow up</button>
        <button class="svc-chip" onclick="filterCategory(this, 'Other')">Other</button>
    </div>

    {{-- Services List --}}
    <div class="overflow-x-auto">
        <table class="w-full" id="svcTable">
            <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">Price (KES)</th>
                <th class="table-header">Insurance Price</th>
                <th class="table-header">Status</th>
                <th class="table-header">Actions</th>
            </tr></thead>
            <tbody>
            @forelse($services ?? [] as $svc)
            <tr class="border-b border-gray-50 svc-row" data-category="{{ $svc->category }}">
                <td class="table-cell font-mono text-xs">{{ $svc->code }}</td>
                <td class="table-cell font-medium">{{ $svc->name }}</td>
                <td class="table-cell"><span class="badge badge-info text-xs">{{ $svc->category }}</span></td>
                <td class="table-cell text-xs">{{ $svc->department->name ?? '–' }}</td>
                <td class="table-cell font-semibold">{{ number_format($svc->price) }}</td>
                <td class="table-cell text-xs">{{ $svc->insurance_price ? number_format($svc->insurance_price) : '–' }}</td>
                <td class="table-cell">@if($svc->is_active)<span class="badge badge-success">Active</span>@else<span class="badge badge-gray">Inactive</span>@endif</td>
                <td class="table-cell">
                    <div class="flex items-center gap-2">
                        <button onclick="editService({{ $svc->id }}, '{{ addslashes($svc->name) }}', '{{ $svc->code }}', '{{ $svc->category }}', {{ $svc->price }}, {{ $svc->insurance_price ?? 'null' }}, '{{ addslashes($svc->description ?? '') }}')" class="text-cr-600 text-xs font-semibold hover:underline">Edit</button>
                        <form method="POST" action="{{ route('pharmacy.services.delete', $svc->id) }}" onsubmit="return confirm('Delete this service?')">@csrf @method('DELETE')
                            <button type="submit" class="text-red-500 text-xs font-semibold hover:underline">Delete</button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="8" class="table-cell text-center text-gray-400 py-8">No services found. Click <strong>+ Add Service</strong> to create one.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if(isset($services) && $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 text-gray-900">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('pharmacy.services.store') }}">@csrf
            <div class="grid grid-cols-2 gap-3">
                <div class="col-span-2"><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. CONS-001"></div>
                <div><label class="form-label">Category *</label>
                    <select name="category" required class="form-input">
                        <option value="">Select…</option>
                        <option>Consultation</option><option>Laboratory</option><option>Imaging</option><option>Dental</option>
                        <option>Orthopedic</option><option>Minor Surgical Procedures</option><option>MCH</option><option>Maternity</option>
                        <option>Eye Clinic</option><option>Surgery</option><option>Day-case Services</option><option>Home Care Services</option>
                        <option>Inpatient</option><option>Follow up</option><option>Other</option>
                    </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 (KES)</label><input type="number" step="0.01" name="insurance_price" class="form-input"></div>
                <div class="col-span-2"><label class="form-label">Description</label><textarea name="description" class="form-input" rows="2"></textarea></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">Save 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 text-gray-900">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-2 gap-3">
                <div class="col-span-2"><label class="form-label">Service Name *</label><input type="text" name="name" id="editName" required class="form-input"></div>
                <div><label class="form-label">Code *</label><input type="text" name="code" id="editCode" required class="form-input"></div>
                <div><label class="form-label">Category *</label>
                    <select name="category" id="editCategory" required class="form-input">
                        <option value="">Select…</option>
                        <option>Consultation</option><option>Laboratory</option><option>Imaging</option><option>Dental</option>
                        <option>Orthopedic</option><option>Minor Surgical Procedures</option><option>MCH</option><option>Maternity</option>
                        <option>Eye Clinic</option><option>Surgery</option><option>Day-case Services</option><option>Home Care Services</option>
                        <option>Inpatient</option><option>Follow up</option><option>Other</option>
                    </select>
                </div>
                <div><label class="form-label">Price (KES) *</label><input type="number" step="0.01" name="price" id="editPrice" required class="form-input"></div>
                <div><label class="form-label">Insurance Price (KES)</label><input type="number" step="0.01" name="insurance_price" id="editInsPrice" class="form-input"></div>
                <div class="col-span-2"><label class="form-label">Description</label><textarea name="description" id="editDesc" class="form-input" rows="2"></textarea></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-primary text-xs">Update Service</button></div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
<script>
function filterCategory(btn, cat) {
    document.querySelectorAll('.svc-chip').forEach(c => c.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('.svc-row').forEach(r => {
        r.style.display = (cat === 'all' || r.dataset.category === cat) ? '' : 'none';
    });
}
function filterSvcTable(q) {
    q = q.toLowerCase();
    document.querySelectorAll('.svc-row').forEach(r => { r.style.display = r.textContent.toLowerCase().includes(q) ? '' : 'none'; });
}
function editService(id, name, code, category, price, insPrice, desc) {
    document.getElementById('editServiceForm').action = `${window.HMIS_BASE}/pharmacy/services/${id}`;
    document.getElementById('editName').value = name;
    document.getElementById('editCode').value = code;
    document.getElementById('editCategory').value = category;
    document.getElementById('editPrice').value = price;
    document.getElementById('editInsPrice').value = insPrice || '';
    document.getElementById('editDesc').value = desc;
    document.getElementById('editServiceModal').classList.remove('hidden');
}
</script>
@endsection