@extends('layouts.sash')

@section('title', 'Service Categories')

@section('content')
<div class="row mt-4">
<div class="col-xl-8">
    <div class="page-header">
        <div>
            <h1 class="page-title">Service Categories</h1>
            <p class="page-subtitle">Group your services into easy-to-browse categories.</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('service-categories.create') }}" class="btn btn-primary"><i class="fe fe-plus me-1"></i>Add Category</a>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <form method="get" action="{{ route('service-categories.index') }}" class="row g-3 align-items-end">
                <div class="col-12 col-md-6 col-lg-4">
                    <label class="form-label">Search</label>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Name or code..." class="form-control">
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-control form-select">
                        <option value="">All</option>
                        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="col-12 col-lg-auto">
                    <button type="submit" class="btn btn-primary"><i class="fe fe-filter me-1"></i>Filter</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table border text-nowrap text-md-nowrap table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($categories as $category)
                        <tr>
                            <td>{{ $category->code }}</td>
                            <td>{{ $category->name }}</td>
                            <td>
                                <span class="badge {{ $category->status === 'active' ? 'badge-success' : 'badge-muted' }}">
                                    {{ $category->status }}
                                </span>
                            </td>
                            <td class="text-end table-actions">
                        <a href="{{ route('service-categories.edit', $category) }}" class="btn btn-icon btn-sm btn-light" title="Edit"><i class="fe fe-edit"></i></a>
                        <form action="{{ route('service-categories.destroy', $category) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this category?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-icon btn-sm btn-light text-danger" title="Delete"><i class="fe fe-trash-2"></i></button>
                        </form>
                    </td>
                </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-4">No service categories found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

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