@extends('user.layouts')

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

@section('header')

    <link rel="stylesheet"
        href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">

    <link rel="stylesheet"
        href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">

    <style>
        /* =========================
           PAGE
        ========================= */

        .service-page {
            padding-top: 22px;
            padding-bottom: 40px;
        }

        .page-header-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 22px;
        }

        .page-heading {
            margin: 0;
            color: #1e293b;
            font-size: 26px;
            font-weight: 700;
        }

        .page-subheading {
            margin: 5px 0 0;
            color: #94a3b8;
            font-size: 13px;
        }


        /* =========================
           SUMMARY
        ========================= */

        .summary-card {
            min-width: 190px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 16px;
            border: 1px solid #e8edf3;
            border-radius: 13px;
            background: #fff;
            box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
        }

        .summary-icon {
            width: 42px;
            height: 42px;
            min-width: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 11px;
            background: #eff6ff;
            color: #2563eb;
            font-size: 16px;
        }

        .summary-label {
            color: #94a3b8;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .summary-value {
            margin-top: 2px;
            color: #1e293b;
            font-size: 20px;
            line-height: 1;
            font-weight: 700;
        }


        /* =========================
           FILTER CARD
        ========================= */

        .filter-card {
            margin-bottom: 22px;
            border: 1px solid #e8edf3;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 5px 18px rgba(15, 23, 42, .04);
        }

        .filter-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 17px 20px;
            border-bottom: 1px solid #eef1f5;
        }

        .filter-heading {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
            color: #334155;
            font-size: 14px;
            font-weight: 700;
        }

        .filter-heading-icon {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: #eff6ff;
            color: #2563eb;
            font-size: 12px;
        }

        .filter-body {
            padding: 20px;
        }

        .filter-label {
            display: block;
            margin-bottom: 7px;
            color: #64748b;
            font-size: 11px;
            font-weight: 700;
        }

        .filter-control {
            height: 41px;
            border: 1px solid #dde3ea;
            border-radius: 9px;
            background: #fff;
            color: #334155;
            font-size: 12px;
            box-shadow: none !important;
        }

        .filter-control:focus {
            border-color: #93b4ff;
        }

        .filter-control::placeholder {
            color: #adb5bd;
        }

        .filter-actions {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .search-btn {
            min-height: 41px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 8px 18px;
            border: 1px solid #2563eb;
            border-radius: 9px;
            background: #2563eb;
            color: #fff;
            font-size: 12px;
            font-weight: 650;
        }

        .search-btn:hover {
            background: #1d4ed8;
            border-color: #1d4ed8;
            color: #fff;
        }

        .reset-btn {
            min-height: 41px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 8px 16px;
            border: 1px solid #dde3ea;
            border-radius: 9px;
            background: #fff;
            color: #64748b;
            font-size: 12px;
            font-weight: 650;
        }

        .reset-btn:hover {
            background: #f8fafc;
            color: #334155;
        }


        /* =========================
           ACTIVE FILTERS
        ========================= */

        .active-filters {
            display: none;
            align-items: center;
            flex-wrap: wrap;
            gap: 7px;
            margin-top: 17px;
            padding-top: 15px;
            border-top: 1px solid #f0f2f5;
        }

        .active-filter-label {
            margin-right: 3px;
            color: #94a3b8;
            font-size: 11px;
            font-weight: 600;
        }

        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 9px;
            border-radius: 20px;
            background: #eff6ff;
            color: #2563eb;
            font-size: 10px;
            font-weight: 650;
        }


        /* =========================
           TABLE CARD
        ========================= */

        .table-card {
            overflow: hidden;
            border: 1px solid #e8edf3;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 5px 18px rgba(15, 23, 42, .04);
        }

        .table-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 18px 20px;
            border-bottom: 1px solid #eef1f5;
        }

        .table-title {
            margin: 0;
            color: #334155;
            font-size: 15px;
            font-weight: 700;
        }

        .table-subtitle {
            margin-top: 3px;
            color: #94a3b8;
            font-size: 11px;
        }

        .result-count {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 20px;
            background: #f1f5f9;
            color: #475569;
            font-size: 10px;
            font-weight: 700;
        }

        .table-card-body {
            padding: 18px 20px 20px;
        }


        /* =========================
           TABLE
        ========================= */

        .service-table {
            width: 100% !important;
            margin-bottom: 0 !important;
        }

        .service-table thead th {
            padding: 12px 11px !important;
            border-bottom: 1px solid #e5e7eb !important;
            background: #f8fafc;
            color: #64748b;
            font-size: 10px;
            font-weight: 750;
            letter-spacing: .25px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .service-table tbody td {
            padding: 13px 11px !important;
            border-bottom: 1px solid #f0f2f5;
            color: #475569;
            font-size: 12px;
            vertical-align: middle;
        }

        .service-table tbody tr {
            transition: background .15s ease;
        }

        .service-table tbody tr:hover {
            background: #fafcff;
        }

        .serial-number {
            width: 31px;
            height: 31px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: #f1f5f9;
            color: #64748b;
            font-size: 10px;
            font-weight: 700;
        }


        /* DATE */

        .request-date {
            white-space: nowrap;
        }

        .request-date-main {
            color: #334155;
            font-size: 12px;
            font-weight: 650;
        }

        .request-time {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: 3px;
            color: #94a3b8;
            font-size: 10px;
        }


        /* BUSINESS */

        .business-info {
            min-width: 160px;
        }

        .business-name {
            color: #1e293b;
            font-size: 12px;
            font-weight: 700;
        }

        .business-id {
            margin-top: 3px;
            color: #94a3b8;
            font-size: 9px;
        }


        /* NAME */

        .owner-name {
            color: #334155;
            font-weight: 600;
        }


        /* PHONE */

        .phone-value {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }

        .phone-value i {
            color: #94a3b8;
            font-size: 10px;
        }


        /* CATEGORY */

        .category-badge {
            display: inline-flex;
            align-items: center;
            padding: 5px 9px;
            border-radius: 7px;
            background: #f5f3ff;
            color: #7c3aed;
            font-size: 10px;
            font-weight: 650;
            white-space: nowrap;
        }


        /* AGENT */

        .agent-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 9px;
            border-radius: 7px;
            background: #f0fdf4;
            color: #15803d;
            font-size: 10px;
            font-weight: 700;
            white-space: nowrap;
        }

        .agent-badge::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #22c55e;
        }

        .no-agent-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 9px;
            border-radius: 7px;
            background: #fffbeb;
            color: #b45309;
            font-size: 10px;
            font-weight: 650;
            white-space: nowrap;
        }

        .no-agent-badge::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #f59e0b;
        }


        /* VIEW */

        .view-request-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 34px;
            padding: 6px 11px;
            border: 1px solid #dbeafe;
            border-radius: 8px;
            background: #eff6ff;
            color: #2563eb;
            font-size: 10px;
            font-weight: 700;
            text-decoration: none;
            transition: all .2s ease;
        }

        .view-request-btn:hover {
            border-color: #2563eb;
            background: #2563eb;
            color: #fff;
            transform: translateY(-1px);
        }


        /* =========================
           DATATABLE
        ========================= */

        .dataTables_wrapper .dataTables_filter {
            display: none !important;
        }

        .dataTables_wrapper .dataTables_length {
            margin-bottom: 14px;
        }

        .dataTables_wrapper .dataTables_length label,
        .dataTables_wrapper .dataTables_info {
            color: #64748b;
            font-size: 11px;
        }

        .dataTables_wrapper .dataTables_length select {
            min-height: 34px;
            margin: 0 5px;
            border: 1px solid #dde3ea;
            border-radius: 7px;
            color: #475569;
            font-size: 11px;
        }

        .dataTables_wrapper .dataTables_paginate {
            padding-top: 12px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: 7px !important;
            font-size: 11px;
        }


        /* =========================
           DARK MODE
        ========================= */

        body.dark-mode .filter-card,
        body.dark-mode .table-card,
        body.dark-mode .summary-card {
            background: #172033;
            border-color: #273449;
        }

        body.dark-mode .page-heading,
        body.dark-mode .summary-value,
        body.dark-mode .table-title,
        body.dark-mode .business-name,
        body.dark-mode .request-date-main,
        body.dark-mode .owner-name {
            color: #f1f5f9;
        }

        body.dark-mode .filter-header,
        body.dark-mode .table-card-header {
            border-color: #273449;
        }

        body.dark-mode .filter-control,
        body.dark-mode .reset-btn {
            background: #111827;
            border-color: #374151;
            color: #e2e8f0;
        }

        body.dark-mode .service-table thead th {
            background: #111827;
            color: #94a3b8;
            border-color: #273449 !important;
        }

        body.dark-mode .service-table tbody td {
            border-color: #273449;
            color: #cbd5e1;
        }

        body.dark-mode .service-table tbody tr:hover {
            background: #1d293d;
        }

        body.dark-mode .serial-number {
            background: #273449;
            color: #cbd5e1;
        }


        /* =========================
           RESPONSIVE
        ========================= */

        @media (max-width: 767px) {

            .page-header-wrap {
                align-items: flex-start;
                flex-direction: column;
            }

            .summary-card {
                width: 100%;
            }

            .search-btn,
            .reset-btn {
                flex: 1;
            }

            .table-card-header {
                align-items: flex-start;
                flex-direction: column;
            }
        }
    </style>

@endsection


@section('content')

<div class="container-fluid page-wrapper service-page">

    {{-- HEADER --}}
    <div class="page-header-wrap">

        <div>
            <h3 class="page-heading">
                Service Request
            </h3>

            <p class="page-subheading">
                Review and manage business service requests
            </p>
        </div>


        <div class="summary-card">

            <div class="summary-icon">
                <i class="fa-solid fa-code-pull-request"></i>
            </div>

            <div>
                <div class="summary-label">
                    Total Requests
                </div>

                <div
                    class="summary-value"
                    id="totalRequestCount">

                    {{ $service_list->count() }}

                </div>
            </div>

        </div>

    </div>


    {{-- SEARCH FILTER --}}
    <div class="filter-card">

        <div class="filter-header">

            <h5 class="filter-heading">

                <span class="filter-heading-icon">
                    <i class="fa-solid fa-filter"></i>
                </span>

                Search & Filter

            </h5>

        </div>


        <div class="filter-body">

            <div class="row g-3">

                {{-- FROM DATE --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        From Date
                    </label>

                    <input
                        type="date"
                        id="fromDate"
                        class="form-control filter-control">

                </div>


                {{-- TO DATE --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        To Date
                    </label>

                    <input
                        type="date"
                        id="toDate"
                        class="form-control filter-control">

                </div>


                {{-- BUSINESS --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        Business Name
                    </label>

                    <input
                        type="text"
                        id="businessSearch"
                        class="form-control filter-control"
                        placeholder="Search business">

                </div>


                {{-- NAME --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        Name
                    </label>

                    <input
                        type="text"
                        id="nameSearch"
                        class="form-control filter-control"
                        placeholder="Search name">

                </div>


                {{-- PHONE --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        Phone Number
                    </label>

                    <input
                        type="text"
                        id="phoneSearch"
                        class="form-control filter-control"
                        placeholder="Search phone">

                </div>


                {{-- CATEGORY --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        Category
                    </label>

                    <input
                        type="text"
                        id="categorySearch"
                        class="form-control filter-control"
                        placeholder="Search category">

                </div>


                {{-- AGENT --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        Agent Code
                    </label>

                    <input
                        type="text"
                        id="agentSearch"
                        class="form-control filter-control"
                        placeholder="Search agent code">

                </div>


                {{-- BUTTONS --}}
                <div class="col-xl-4 col-lg-6 col-md-8 col-sm-12 d-flex align-items-end">

                    <div class="filter-actions w-100">

                        <button
                            type="button"
                            id="searchButton"
                            class="btn search-btn">

                            <i class="fa-solid fa-magnifying-glass"></i>

                            Search

                        </button>


                        <button
                            type="button"
                            id="resetButton"
                            class="btn reset-btn">

                            <i class="fa-solid fa-rotate-left"></i>

                            Reset

                        </button>

                    </div>

                </div>

            </div>


            {{-- ACTIVE FILTERS --}}
            <div
                class="active-filters"
                id="activeFilters">

                <span class="active-filter-label">
                    Active Filters:
                </span>

                <div
                    id="filterChips"
                    class="d-flex flex-wrap gap-2">
                </div>

            </div>

        </div>

    </div>


    {{-- TABLE --}}
    <div class="table-card">

        <div class="table-card-header">

            <div>

                <h5 class="table-title">
                    Business Requests
                </h5>

                <div class="table-subtitle">
                    Latest requests are displayed first
                </div>

            </div>


            <div class="result-count">

                <i class="fa-solid fa-list"></i>

                <span id="filteredCount">
                    {{ $service_list->count() }}
                </span>

                Results

            </div>

        </div>


        <div class="table-card-body">

            <div class="table-responsive">

                <table
                    id="data-table"
                    class="table service-table nowrap align-middle"
                    style="width:100%">

                    <thead>

                        <tr>
                            <th>SN</th>
                            <th>REQUEST DATE</th>
                            <th>BUSINESS NAME</th>
                            <th>NAME</th>
                            <th>PHONE NO</th>
                            <th>CATEGORY NAME</th>
                            <th>AGENT CODE</th>
                            <th>ACTION</th>
                        </tr>

                    </thead>


                    <tbody>

                        @foreach ($service_list as $service)

                            <tr>

                                {{-- SN --}}
                                <td>

                                    <span class="serial-number">
                                        {{ $loop->iteration }}
                                    </span>

                                </td>


                                {{-- DATE --}}
                              @php
    $createdAt = $service->created_at
        ? \Carbon\Carbon::parse($service->created_at)->timezone('Asia/Kolkata')
        : null;
@endphp

<td
    data-date="{{ $createdAt ? $createdAt->format('Y-m-d') : '' }}"
    data-order="{{ $createdAt ? $createdAt->timestamp : 0 }}">

    @if($createdAt)

        <div class="request-date">

            <div class="request-date-main">
                {{ $createdAt->format('d-m-Y') }}
            </div>

            <div class="request-time">

                <i class="fa-regular fa-clock"></i>

                {{ $createdAt->format('h:i A') }}

            </div>

        </div>

    @else

        <span class="text-muted">
            N/A
        </span>

    @endif

</td>


                                {{-- BUSINESS --}}
                                <td data-search="{{ $service->business_name ?? '' }}">

                                    <div class="business-info">

                                        <div class="business-name">
                                            {{ $service->business_name ?? 'N/A' }}
                                        </div>

                                        <div class="business-id">
                                            Request #{{ $service->id }}
                                        </div>

                                    </div>

                                </td>


                                {{-- NAME --}}
                                <td data-search="{{ $service->name ?? '' }}">

                                    <span class="owner-name">
                                        {{ $service->name ?? 'N/A' }}
                                    </span>

                                </td>


                                {{-- PHONE --}}
                                <td data-search="{{ $service->phone_number ?? '' }}">

                                    <span class="phone-value">

                                        <i class="fa-solid fa-phone"></i>

                                        {{ $service->phone_number ?? 'N/A' }}

                                    </span>

                                </td>


                                {{-- CATEGORY --}}
                                <td data-search="{{ $service->category_name ?? '' }}">

                                    <span class="category-badge">
                                        {{ $service->category_name ?? 'N/A' }}
                                    </span>

                                </td>


                                {{-- AGENT --}}
                                <td data-search="{{ $service->agent_code ?? 'No Agent Code' }}">

                                    @if($service->agent_code)

                                        <span class="agent-badge">
                                            {{ $service->agent_code }}
                                        </span>

                                    @else

                                        <span class="no-agent-badge">
                                            No Agent Code
                                        </span>

                                    @endif

                                </td>


                                {{-- ACTION --}}
                                <td>

                                    <a
                                        href="{{ route('service_request_view', $service->id) }}"
                                        class="view-request-btn">

                                        <i class="fa-regular fa-eye"></i>

                                        View

                                    </a>

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

@endsection


@section('footer')

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>

    <script src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function () {

            /* =========================
               DESTROY OLD DATATABLE
            ========================= */

            if ($.fn.DataTable.isDataTable('#data-table')) {
                $('#data-table').DataTable().destroy();
            }


            /* =========================
               DATE RANGE FILTER
            ========================= */

            $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {

                if (settings.nTable.id !== 'data-table') {
                    return true;
                }

                const fromDate = $('#fromDate').val();
                const toDate = $('#toDate').val();

                const row = settings.aoData[dataIndex].nTr;

                if (!row) {
                    return true;
                }

                const rowDate = $(row)
                    .find('td')
                    .eq(1)
                    .attr('data-date');


                if (!rowDate) {
                    return true;
                }


                if (!fromDate && !toDate) {
                    return true;
                }


                if (fromDate && !toDate) {
                    return rowDate >= fromDate;
                }


                if (!fromDate && toDate) {
                    return rowDate <= toDate;
                }


                return (
                    rowDate >= fromDate &&
                    rowDate <= toDate
                );
            });


            /* =========================
               DATATABLE
            ========================= */

            const table = $('#data-table').DataTable({

                processing: true,

                responsive: false,

                scrollX: true,

                autoWidth: false,

                pageLength: 10,

                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, 'All']
                ],

                order: [
                    [1, 'desc']
                ],

                columnDefs: [

                    {
                        targets: 0,
                        orderable: false,
                        searchable: false
                    },

                    {
                        targets: 7,
                        orderable: false,
                        searchable: false
                    }

                ],

                dom:
                    "<'row mb-3'<'col-12'l>>" +
                    "<'row'<'col-12'tr>>" +
                    "<'row mt-3'<'col-md-5'i><'col-md-7'p>>"
            });


            /* =========================
               APPLY FILTERS
            ========================= */

            function applyFilters() {

                const business = $('#businessSearch').val().trim();
                const name = $('#nameSearch').val().trim();
                const phone = $('#phoneSearch').val().trim();
                const category = $('#categorySearch').val().trim();
                const agent = $('#agentSearch').val().trim();


                table.column(2).search(business);
                table.column(3).search(name);
                table.column(4).search(phone);
                table.column(5).search(category);
                table.column(6).search(agent);


                table.draw();

                updateFilterChips();
            }


            /* =========================
               LIVE BUSINESS SEARCH
            ========================= */

            $('#businessSearch').on('input', function () {

                table
                    .column(2)
                    .search($(this).val().trim())
                    .draw();

                updateFilterChips();
            });


            /* =========================
               LIVE NAME SEARCH
            ========================= */

            $('#nameSearch').on('input', function () {

                table
                    .column(3)
                    .search($(this).val().trim())
                    .draw();

                updateFilterChips();
            });


            /* =========================
               LIVE PHONE SEARCH
            ========================= */

            $('#phoneSearch').on('input', function () {

                table
                    .column(4)
                    .search($(this).val().trim())
                    .draw();

                updateFilterChips();
            });


            /* =========================
               LIVE CATEGORY SEARCH
            ========================= */

            $('#categorySearch').on('input', function () {

                table
                    .column(5)
                    .search($(this).val().trim())
                    .draw();

                updateFilterChips();
            });


            /* =========================
               LIVE AGENT SEARCH
            ========================= */

            $('#agentSearch').on('input', function () {

                table
                    .column(6)
                    .search($(this).val().trim())
                    .draw();

                updateFilterChips();
            });


            /* =========================
               DATE FILTER
            ========================= */

            $('#fromDate, #toDate').on('change', function () {

                table.draw();

                updateFilterChips();
            });


            /* =========================
               SEARCH BUTTON
            ========================= */

            $('#searchButton').on('click', function () {

                applyFilters();
            });


            /* =========================
               ENTER KEY
            ========================= */

            $('#businessSearch, #nameSearch, #phoneSearch, #categorySearch, #agentSearch')
                .on('keypress', function (event) {

                    if (event.which === 13) {

                        event.preventDefault();

                        applyFilters();
                    }

                });


            /* =========================
               RESET
            ========================= */

            $('#resetButton').on('click', function () {

                $('#fromDate').val('');
                $('#toDate').val('');

                $('#businessSearch').val('');
                $('#nameSearch').val('');
                $('#phoneSearch').val('');
                $('#categorySearch').val('');
                $('#agentSearch').val('');


                table.search('');

                table.columns().search('');


                table
                    .order([
                        [1, 'desc']
                    ])
                    .draw();


                $('#filterChips').empty();

                $('#activeFilters').hide();
            });


            /* =========================
               FILTER CHIPS
            ========================= */

            function updateFilterChips() {

                const filters = [

                    {
                        label: 'From',
                        value: $('#fromDate').val()
                    },

                    {
                        label: 'To',
                        value: $('#toDate').val()
                    },

                    {
                        label: 'Business',
                        value: $('#businessSearch').val().trim()
                    },

                    {
                        label: 'Name',
                        value: $('#nameSearch').val().trim()
                    },

                    {
                        label: 'Phone',
                        value: $('#phoneSearch').val().trim()
                    },

                    {
                        label: 'Category',
                        value: $('#categorySearch').val().trim()
                    },

                    {
                        label: 'Agent',
                        value: $('#agentSearch').val().trim()
                    }

                ];


                let html = '';

                let hasFilter = false;


                filters.forEach(function (filter) {

                    if (filter.value !== '') {

                        hasFilter = true;

                        html +=
                            '<span class="filter-chip">' +
                                '<strong>' +
                                    escapeHtml(filter.label) +
                                ':</strong> ' +
                                escapeHtml(filter.value) +
                            '</span>';
                    }

                });


                $('#filterChips').html(html);


                if (hasFilter) {

                    $('#activeFilters').css(
                        'display',
                        'flex'
                    );

                } else {

                    $('#activeFilters').hide();
                }
            }


            /* =========================
               RESULT COUNT
            ========================= */

            function updateResultCount() {

                const count = table
                    .rows({
                        search: 'applied'
                    })
                    .count();


                $('#filteredCount').text(count);
            }


            /* =========================
               SERIAL NUMBER
            ========================= */

            function updateSerialNumbers() {

                const info = table.page.info();


                table
                    .column(0, {
                        search: 'applied',
                        order: 'applied',
                        page: 'current'
                    })
                    .nodes()
                    .each(function (cell, index) {

                        $(cell).html(
                            '<span class="serial-number">' +
                                (info.start + index + 1) +
                            '</span>'
                        );

                    });
            }


            /* =========================
               ESCAPE HTML
            ========================= */

            function escapeHtml(value) {

                return $('<div>')
                    .text(value)
                    .html();
            }


            /* =========================
               TABLE DRAW
            ========================= */

            table.on('draw.dt', function () {

                updateResultCount();

                updateSerialNumbers();
            });


            /* =========================
               INITIAL
            ========================= */

            updateResultCount();

            updateSerialNumbers();

        });
    </script>

@endsection