@php
    $hasData = $serviceRequests->count() > 0;
@endphp




<!-- WRAPPER -->
<div class="card mt-5">


    @if($hasData)
    <div class="p-3 pb-0">
        <div class="input-group input-group-sm">
            <input type="text"
                   id="requestProcesingSearch"
                   class="form-control form-control-sm"
                   placeholder="Search Request...">
        </div>
    </div>
@endif
    <!-- HEADER (fixed style row) -->
    {{-- <div class="bg-light border-bottom" style="position: sticky; top: 0; z-index: 10;">

        <div class="w-100">
            <div class="row g-0 py-2 fw-semibold text-muted flex-wrap align-items-center">

                <div class="col-auto px-3" style="width: 160px;">
                    Action
                </div>

                <div class="col-auto px-3" style="width: 180px;">
                    Service Request ID
                </div>

                <div class="col-auto px-3" style="width: 220px;">
                    Client
                </div>

                <div class="col-auto px-3" style="width: 220px;">
                    Service
                </div>

                <div class="col-auto px-3" style="width: 160px;">
                    Date
                </div>

                <div class="col-auto px-3" style="width: 140px;">
                    Status
                </div>

            </div>
        </div>
    </div> --}}

    <!-- SCROLLABLE BODY -->
    <div style="max-height: 400px; overflow: auto;">

        <div style="min-width: 950px;">

            @forelse($serviceRequests as $request)

                <div class="card mb-2 border-0 border-bottom service-processing-request-item"
                    data-title="{{ strtolower($request->id) }}"
                    data-number="{{ strtolower($request->requestedClientUser->name) }}">

                    <div class="row g-0 align-items-center py-2 flex-nowrap">

                        @php
                            $isIndividual = $request->Client->type_of_client === 'INDIVIDUAL';

                            $url = $isIndividual
                                ? url('/admin/service-request/processing-requests/individual-clients/review')
                                : url('/admin/service-request/processing-requests/corporate-clients/review');
                        @endphp

                        <!-- ACTION -->
                        <div class="col-auto px-3" style="width: 160px;">
                            <a href="{{ $url }}?r={{ Crypt::encrypt($request->id) }}" class="btn btn-sm btn-primary">
                                Review
                            </a>
                        </div>

                        <!-- ID -->
                        <div class="col-auto px-3" style="width: 180px;">
                            {{ $request->service_request_no ? $request->service_request_no : 'SR#' . str_pad($request->id, 4, '0', STR_PAD_LEFT) }}
                        </div>

                        <!-- CLIENT -->
                        <div class="col-auto px-3" style="max-width: 220px; width: 100%;">
                            <div class="fw-semibold">
                                {{ $request->requestedClientUser->name ?? '' }}
                                {{ $request->requestedClientUser->last_name ?? '' }}
                            </div>
                            <small class="text-muted">
                                {{ $request->requestedClientUser->email ?? '' }}
                            </small>
                        </div>

                        <!-- SERVICE -->
                        <div class="col-auto px-3" style="width: 220px;">
                            {{ $request->service->service_name ?? '' }} <br>
                            <small class="text-muted">
                                {{ $request->service->serviceSubCategory->service_sub_category_name ?? '' }}
                            </small>
                        </div>

                        <!-- DATE -->
                        <div class="col-auto px-3" style="width: 160px;">
                            {{ \Carbon\Carbon::parse($request->created_at)->format('Y-m-d') }}
                        </div>

                        <!-- STATUS -->
                        <div class="col-auto px-3" style="width: 140px;">
                            <span class="badge bg-primary">
                                {{ $request->current_status }}
                            </span>
                        </div>

                    </div>
                </div>

            @empty
                <div class="p-3 text-center">
                    No under review service requests found.
                </div>
            @endforelse

        </div>

    </div>
</div>

<script>
    document.getElementById('requestProcesingSearch').addEventListener('keyup', function () {
        let value = this.value.toLowerCase();
        console.log(value)
        let items = document.querySelectorAll('.service-processing-request-item');

        items.forEach(function (item) {

            let title = item.getAttribute('data-title');
            let number = item.getAttribute('data-number');

            if (title.includes(value) || number.includes(value)) {
                item.style.display = '';
            } else {
                item.style.display = 'none';
            }

        });
    });
</script>