@php
    $categories = App\Models\ProductGroup::whereHas('children', function ($q) {
        $q->whereHas('children', function ($q2) {
            $q2->where('is_service', 1);
        });
    })->where('type', App\Models\ProductGroup::CATEGORY)->orderBy('name')->get();
@endphp
<div class="row align-items-end">
    <div class="col-md-3">
        <div class="form-group">
            <label for="company_name" class="form-label">Company Name</label>
            <input class="form-control form-control-sm" type="text" name="company_name" id="company_name">
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label for="category_id" class="form-label">Service Category</label>
            <select class="form-control form-control-sm" name="category_id" id="category_id">
                <option value="" @selected(old('category') == '')>Select Category</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}" @selected(old('category') == $category->id)>{{ $category->name }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <label for="certificate_number" class="form-label">Certificate Number</label>
            <input class="form-control form-control-sm" type="text" name="certificate_number" id="certificate_number">
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label for="product_name" class="form-label">Product Name</label>
            <input class="form-control form-control-sm" type="text" name="product_name" id="product_name">
        </div>
    </div>
    <div class="col-md-1">
        <button class="btn btn-success btn-sm" id="filter">Filter</button>
    </div>
</div>
<div class="card">
    <div class="card-header d-flex">
        <div class="card-title">
            <h3>{{ __('Service Search') }}</h3>
        </div>
        <div class="d-flex justify-content-between align-items-center">
            <div class="position-relative me-3">
                {!! getIcon('magnifier', 'fs-3 position-absolute ms-2 mt-3') !!}
                <input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid form-control-sm w-250px ps-13" placeholder="Search" id="search-application" />
            </div>
        </div>
    </div>
    <div class="table-responsive">
        <x-datatable-table id="service-search-table">
            <x-datatable-thead class="text-start text-muted fw-bold fs-7 text-uppercase gs-0 table-light">
                <tr>
                    <th>{{ __('No.') }}</th>
                    <th>{{ __('Certificate No.') }}</th>
                    <th>{{ __('Service Name') }}</th>
                    <th>{{ __('Category') }}</th>
                    <th>{{ __('Company Name') }}</th>
                    <th>{{ __('Status') }}</th>
                    <th><span>{{ __('Action') }}</span></th>
                </tr>
            </x-datatable-thead>
            <tbody>
            </tbody>
        </x-datatable-table>
    </div>
</div>