@extends('layouts.admin')

@section('title', 'Manage Services')
@section('page-title', 'Services')

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Services</h1>
            <p class="mt-1 text-sm text-gray-500">Set a service charge per service. Leave at ₦0.00 for no charge.</p>
        </div>
        <form method="POST" action="{{ route('admin.services.sync') }}" class="inline">
            @csrf
            <button type="submit" onclick="return confirm('This will fetch all services and variations from VTPass API. Continue?')" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 transition">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182" /></svg>
                Sync from VTPass
            </button>
        </form>
    </div>

    <div class="rounded-xl bg-white shadow-sm border border-gray-100 overflow-hidden" x-data="{ query: '' }">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h2 class="text-lg font-semibold text-gray-900">Bill Services</h2>
            <input type="text" x-model="query" placeholder="Search name, code, category..." class="w-64 rounded-lg border-gray-300 text-sm px-3 py-1.5 border focus:border-indigo-500 focus:ring-indigo-500">
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-100">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Code</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Category</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Service Charge</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($services as $service)
                    <tr class="hover:bg-gray-50" x-show="query === '' || '{{ strtolower($service->name) }} {{ strtolower($service->code) }} {{ strtolower(str_replace('_', ' ', $service->category)) }}'.includes(query.toLowerCase())">
                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ $service->name }}</td>
                        <td class="px-4 py-3 text-sm font-mono text-gray-500">{{ $service->code }}</td>
                        <td class="px-4 py-3 text-sm text-gray-500">{{ ucfirst(str_replace('_', ' ', $service->category)) }}</td>
                        <td class="px-4 py-3">
                            <form method="POST" action="{{ route('admin.services.update', $service) }}" class="flex items-center gap-1" x-data="{ editing: false }">
                                @csrf @method('PUT')
                                <template x-if="!editing">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm text-gray-900">{{ $service->service_charge > 0 ? '₦' . number_format($service->service_charge, 2) : 'Global' }}</span>
                                        <button type="button" @click="editing = true" class="text-xs text-indigo-500 hover:text-indigo-600">Edit</button>
                                    </div>
                                </template>
                                <template x-if="editing">
                                    <div class="flex items-center gap-1">
                                        <input type="number" name="service_charge" value="{{ $service->service_charge }}" step="0.01" min="0" class="w-24 rounded-md border-gray-300 text-sm px-2 py-1 border focus:border-indigo-500 focus:ring-indigo-500">
                                        <button type="submit" class="text-xs font-medium text-green-950 hover:text-green-700">Save</button>
                                        <button type="button" @click="editing = false" class="text-xs text-gray-400 hover:text-gray-500">Cancel</button>
                                    </div>
                                </template>
                            </form>
                        </td>
                        <td class="px-4 py-3">
                            @if($service->is_active)
                                <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700">Active</span>
                            @else
                                <span class="inline-flex items-center rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700">Inactive</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-right">
                            <form method="POST" action="{{ route('admin.services.update', $service) }}" class="inline">
                                @csrf @method('PUT')
                                <input type="hidden" name="is_active" value="{{ $service->is_active ? '0' : '1' }}">
                                <button type="submit" class="text-xs font-medium {{ $service->is_active ? 'text-red-500 hover:text-red-600' : 'text-green-950 hover:text-green-700' }}">
                                    {{ $service->is_active ? 'Disable' : 'Enable' }}
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="px-4 py-12 text-center text-sm text-gray-500">No services configured.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection