@extends('admin.layout')

@section('title', 'Services')
@section('page-title', 'Services')
@section('page-subtitle', 'Manage services displayed on your website')

@section('header-actions')
<a href="{{ route('admin.services.create') }}" class="primary" style="text-decoration:none">+ Add Service</a>
@endsection

@section('content')
<div class="toolbar">
    <input class="search" id="search" placeholder="Search services..." onkeyup="filterTable()">
</div>

<div class="tableWrap">
    <table id="dataTable">
        <thead>
            <tr>
                <th>Title</th>
                <th>Status</th>
                <th>Order</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($services as $service)
            <tr>
                <td><b>{{ $service->title }}</b></td>
                <td>
                    <span class="badge {{ $service->is_active ? '' : 'draft' }}">
                        {{ $service->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </td>
                <td>{{ $service->order }}</td>
                <td>
                    <a href="{{ route('admin.services.edit', $service->id) }}" style="text-decoration:none">
                        <button>Edit</button>
                    </a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="empty">No services found. Create your first service!</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection

@push('scripts')
<script>
function filterTable() {
    const input = document.getElementById('search');
    const filter = input.value.toLowerCase();
    const table = document.getElementById('dataTable');
    const rows = table.getElementsByTagName('tr');
    
    for (let i = 1; i < rows.length; i++) {
        const title = rows[i].getElementsByTagName('td')[0];
        if (title) {
            const textValue = title.textContent || title.innerText;
            rows[i].style.display = textValue.toLowerCase().indexOf(filter) > -1 ? '' : 'none';
        }
    }
}
</script>
@endpush