@extends('user.layouts')

@section('title', 'Edit Category 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">

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

<style>

    /* =========================================================
       PAGE
    ========================================================== */

    .edit-request-page {
        padding-top: 24px;
        padding-bottom: 40px;
    }

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

    .page-title {
        margin: 0;
        color: #252a30;
        font-size: 25px;
        font-weight: 700;
    }

    .page-subtitle {
        margin: 5px 0 0;
        color: #8c939c;
        font-size: 12px;
    }


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

    .filter-card,
    .datatable-card {
        border: 0;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 3px 18px rgba(0, 0, 0, .05);
    }

    .filter-card .card-body,
    .datatable-card .card-body {
        padding: 22px;
    }

    .filter-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    .filter-header-icon {
        width: 38px;
        height: 38px;

        display: flex;
        align-items: center;
        justify-content: center;

        flex-shrink: 0;

        border-radius: 9px;

        background: #eef5ff;
        color: #0d6efd;
    }

    .filter-title {
        margin: 0;
        color: #292e34;
        font-size: 15px;
        font-weight: 700;
    }

    .filter-subtitle {
        margin: 3px 0 0;
        color: #9298a1;
        font-size: 11px;
    }

    .filter-label {
        display: block;
        margin-bottom: 6px;

        color: #606770;
        font-size: 11px;
        font-weight: 600;
    }

    .filter-control {
        width: 100%;
        height: 41px;

        border: 1px solid #e0e4e9;
        border-radius: 8px;

        background: #ffffff;

        color: #454b52;
        font-size: 12px;

        box-shadow: none !important;
    }

    .filter-control:focus {
        border-color: #86b7fe;
    }

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


    /* =========================================================
       FILTER BUTTONS
    ========================================================== */

    .filter-search-btn,
    .filter-reset-btn {
        height: 41px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 6px;

        padding: 0 16px;

        border-radius: 8px;

        font-size: 12px;
        font-weight: 600;
    }

    .filter-search-btn {
        border: 1px solid #0d6efd;
        background: #0d6efd;
        color: #ffffff;
    }

    .filter-search-btn:hover {
        background: #0b5ed7;
        color: #ffffff;
    }

    .filter-reset-btn {
        border: 1px solid #e0e4e9;
        background: #f8f9fa;
        color: #59616a;
    }

    .filter-reset-btn:hover {
        background: #eceff2;
        color: #343a40;
    }


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

    .table-responsive {
        width: 100%;
    }

    #data-table {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0;
    }

    #data-table thead th {
        padding: 13px 12px;

        border-bottom: 1px solid #e8ebef;

        background: #f7f8fa;

        color: #555d66;

        font-size: 11px;
        font-weight: 700;

        white-space: nowrap;
        vertical-align: middle;
    }

    #data-table tbody td {
        padding: 13px 12px;

        border-bottom: 1px solid #f0f1f3;

        color: #41474e;

        font-size: 12px;
        vertical-align: middle;
    }

    #data-table tbody tr:hover td {
        background: #fafbfc;
    }

    #data-table tbody tr:last-child td {
        border-bottom: 0;
    }


    /* =========================================================
       AGENT
    ========================================================== */

    .agent-wrapper {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .agent-avatar {
        width: 34px;
        height: 34px;

        display: flex;
        align-items: center;
        justify-content: center;

        flex-shrink: 0;

        border-radius: 8px;

        background: #eef5ff;
        color: #0d6efd;

        font-size: 11px;
        font-weight: 700;

        text-transform: uppercase;
    }

    .agent-name {
        color: #343a40;
        font-size: 12px;
        font-weight: 600;
    }


    /* =========================================================
       CATEGORY
    ========================================================== */

    .category-name {
        color: #3e444b;
        font-weight: 600;
    }

    .malayalam-name {
        color: #5c636a;
    }


    /* =========================================================
       IMAGE BUTTON
    ========================================================== */

    .view-image-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 6px;

        padding: 6px 10px;

        border: 1px solid #cfe0f7;
        border-radius: 7px;

        background: #f5f9ff;
        color: #0d6efd;

        font-size: 11px;
        font-weight: 600;

        transition: all .2s ease;
    }

    .view-image-btn:hover {
        border-color: #0d6efd;
        background: #0d6efd;
        color: #ffffff;
    }


    /* =========================================================
       ACTIONS
    ========================================================== */

    .action-wrapper {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: nowrap;
    }

    .approve-btn,
    .reject-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 5px;

        padding: 7px 10px;

        border: 0;
        border-radius: 7px;

        font-size: 11px;
        font-weight: 600;

        white-space: nowrap;

        transition: all .2s ease;
    }

    .approve-btn {
        background: #eaf8f0;
        color: #198754;
    }

    .approve-btn:hover {
        background: #198754;
        color: #ffffff;
    }

    .reject-btn {
        background: #fdeff0;
        color: #dc3545;
    }

    .reject-btn:hover {
        background: #dc3545;
        color: #ffffff;
    }


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

    .dt-buttons {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
    }

    .dt-buttons .dt-button {
        border: 0 !important;
        border-radius: 7px !important;

        margin: 0 !important;

        padding: 7px 12px !important;

        color: #ffffff !important;

        font-size: 11px !important;
        font-weight: 600 !important;

        box-shadow: none !important;
    }

    .dt-buttons .excel-btn {
        background: #198754 !important;
    }

    .dt-buttons .pdf-btn {
        background: #dc3545 !important;
    }

    .dt-buttons .print-btn {
        background: #0d6efd !important;
    }


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

    .dataTables_wrapper .dataTables_filter label {
        color: #606770;
        font-size: 12px;
        font-weight: 500;
    }

    .dataTables_wrapper .dataTables_filter input {
        height: 37px;
        min-width: 210px;

        margin-left: 7px;

        padding: 5px 10px;

        border: 1px solid #e0e4e9;
        border-radius: 7px;

        outline: none;
        box-shadow: none;
    }

    .dataTables_wrapper .dataTables_filter input:focus {
        border-color: #86b7fe;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info {
        color: #7d848c;
        font-size: 12px;
    }

    .dataTables_wrapper .dataTables_length select {
        border: 1px solid #e0e4e9;
        border-radius: 6px;
    }


    /* =========================================================
       MODAL
    ========================================================== */

    .request-modal .modal-content,
    .image-modal .modal-content {
        border: 0;
        border-radius: 15px;

        overflow: hidden;

        box-shadow: 0 15px 45px rgba(0, 0, 0, .15);
    }

    .request-modal .modal-body {
        padding: 28px;
    }

    .request-modal-icon {
        width: 60px;
        height: 60px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin: 0 auto 16px;

        border-radius: 50%;

        font-size: 21px;
    }

    .approve-modal-icon {
        background: #eaf8f0;
        color: #198754;
    }

    .reject-modal-icon {
        background: #fdeff0;
        color: #dc3545;
    }

    .request-modal-title {
        margin: 0;

        color: #292e34;

        font-size: 18px;
        font-weight: 700;

        text-align: center;
    }

    .request-modal-description {
        max-width: 350px;

        margin: 8px auto 20px;

        color: #8b929b;

        font-size: 13px;
        line-height: 1.6;

        text-align: center;
    }

    .remark-field {
        height: 42px;

        border: 1px solid #e0e4e9;
        border-radius: 8px;

        background: #f8f9fa !important;

        color: #626971;

        font-size: 12px;
    }


    /* =========================================================
       IMAGE MODAL
    ========================================================== */

    .image-modal .modal-header {
        border-bottom: 1px solid #f0f1f3;
    }

    .image-modal-title {
        color: #30353b;
        font-size: 15px;
        font-weight: 700;
    }

    .image-preview-wrapper {
        min-height: 250px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 20px;

        background: #f7f8fa;
    }

    #serviceModalImage {
        display: block;

        max-width: 100%;
        max-height: 70vh;

        object-fit: contain;

        border-radius: 10px;
    }


    /* =========================================================
       MOBILE
    ========================================================== */

    @media (max-width: 991.98px) {

        .dataTables_wrapper .dataTables_filter {
            margin-top: 12px;
            text-align: left !important;
        }

    }

    @media (max-width: 767.98px) {

        .edit-request-page {
            padding-top: 17px;
        }

        .page-title {
            font-size: 21px;
        }

        .filter-card .card-body,
        .datatable-card .card-body {
            padding: 16px;
        }

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

        .dataTables_wrapper .dataTables_filter {
            width: 100%;
        }

        .dataTables_wrapper .dataTables_filter label {
            width: 100%;
        }

        .dataTables_wrapper .dataTables_filter input {
            width: calc(100% - 55px);
            min-width: 0;
        }

    }

</style>

@endsection


@section('content')

<div class="container-fluid page-wrapper edit-request-page">


    {{-- =========================================================
         PAGE HEADER
    ========================================================== --}}

    <div class="page-header-wrapper">

        <div>

            <h3 class="page-title">
                Edit Category Request
            </h3>

            <p class="page-subtitle">
                Review and manage category edit requests
            </p>

        </div>

    </div>


    {{-- =========================================================
         FILTER
    ========================================================== --}}

    <div class="row mt-4">

        <div class="col-12">

            <div class="card filter-card">

                <div class="card-body">

                    <div class="filter-header">

                        <div class="filter-header-icon">

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

                        </div>

                        <div>

                            <h5 class="filter-title">
                                Search Requests
                            </h5>

                            <p class="filter-subtitle">
                                Filter edit requests by date, agent or category
                            </p>

                        </div>

                    </div>


                    <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="from_date"
                                   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="to_date"
                                   class="form-control filter-control">

                        </div>


                        {{-- AGENT NAME --}}

                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">

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

                            <input type="text"
                                   id="agent_name"
                                   class="form-control filter-control"
                                   placeholder="Enter agent name">

                        </div>


                        {{-- CATEGORY --}}

                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">

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

                            <input type="text"
                                   id="category_name"
                                   class="form-control filter-control"
                                   placeholder="Enter category name">

                        </div>


                        {{-- BUTTONS --}}

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

                            <div class="d-flex gap-2 w-100">

                                <button type="button"
                                        id="filterBtn"
                                        class="btn filter-search-btn">

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

                                    Search

                                </button>


                                <button type="button"
                                        id="resetBtn"
                                        class="btn filter-reset-btn"
                                        title="Reset">

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

                                </button>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- =========================================================
         TABLE
    ========================================================== --}}

    <div class="row mt-4">

        <div class="col-12">

            <div class="card datatable-card">

                <div class="card-body">

                    <div class="table-responsive">

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

                            <thead>

                                <tr>

                                    <th>SN</th>

                                    <th>REQUEST DATE</th>

                                    <th>AGENT NAME</th>

                                    <th>CATEGORY NAME</th>

                                    <th>CATEGORY NAME MALAYALAM</th>

                                    <th>IMAGE</th>

                                    <th>ACTION</th>

                                </tr>

                            </thead>


                            <tbody>

                                @foreach ($service_list as $service)

                                    @php

                                        $agentName =
                                            optional($service->user)->name ?? '-';

                                        $initial =
                                            $agentName !== '-'
                                                ? strtoupper(
                                                    substr(
                                                        trim($agentName),
                                                        0,
                                                        1
                                                    )
                                                )
                                                : 'A';

                                    @endphp


                                    <tr>


                                        {{-- SN --}}

                                        <td>
                                            {{ $loop->iteration }}
                                        </td>


                                        {{-- REQUEST DATE --}}

                                        <td>

                                            {{ !empty($service->created_at)
                                                ? $service->created_at->format('Y-m-d')
                                                : '-'
                                            }}

                                        </td>


                                        {{-- AGENT --}}

                                        <td>

                                            <div class="agent-wrapper">

                                                <div class="agent-avatar">

                                                    {{ $initial }}

                                                </div>


                                                <span class="agent-name">

                                                    {{ $agentName }}

                                                </span>

                                            </div>

                                        </td>


                                        {{-- CATEGORY --}}

                                        <td>

                                            <span class="category-name">

                                                {{ $service->category_name ?? '-' }}

                                            </span>

                                        </td>


                                        {{-- MALAYALAM CATEGORY --}}

                                        <td>

                                            <span class="malayalam-name">

                                                {{ $service->category_name_malayalam ?? '-' }}

                                            </span>

                                        </td>


                                        {{-- IMAGE --}}

                                        <td>

                                            @if(!empty($service->image))

                                                <button type="button"
                                                        class="view-image-btn"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#imageModal"
                                                        data-image="{{ asset($service->image) }}"
                                                        onclick="setServiceImage(this)">

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

                                                    View Image

                                                </button>

                                            @else

                                                <span class="text-muted">
                                                    No Image
                                                </span>

                                            @endif

                                        </td>


                                        {{-- ACTION --}}

                                        <td>

                                            <div class="action-wrapper">


                                                {{-- APPROVE --}}

                                                <button type="button"
                                                        class="approve-btn"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#ApproveModal"
                                                        data-user-id="{{ $service->id }}"
                                                        data-category="{{ $service->category_name ?? '' }}"
                                                        onclick="setApproveId(this)">

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

                                                    Accept

                                                </button>


                                                {{-- REJECT --}}

                                                <button type="button"
                                                        class="reject-btn"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#DeclineModal"
                                                        data-user-id="{{ $service->id }}"
                                                        data-category="{{ $service->category_name ?? '' }}"
                                                        onclick="setDeclineId(this)">

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

                                                    Reject

                                                </button>

                                            </div>

                                        </td>

                                    </tr>

                                @endforeach

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     COMMON IMAGE MODAL
========================================================== --}}

<div class="modal fade image-modal"
     id="imageModal"
     tabindex="-1"
     aria-hidden="true">

    <div class="modal-dialog modal-lg modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title image-modal-title">

                    <i class="fa-regular fa-image me-1"></i>

                    Category Image

                </h5>

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal">
                </button>

            </div>


            <div class="modal-body p-0">

                <div class="image-preview-wrapper">

                    <img id="serviceModalImage"
                         src=""
                         alt="Category Image">

                </div>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     APPROVE MODAL
========================================================== --}}

<div class="modal fade request-modal"
     id="ApproveModal"
     tabindex="-1"
     aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-body">

                <div class="request-modal-icon approve-modal-icon">

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

                </div>


                <h4 class="request-modal-title">
                    Approve Edit Request
                </h4>


                <p class="request-modal-description">

                    Are you sure you want to approve
                    <strong id="approveCategoryName">
                        this category
                    </strong>
                    edit request?

                </p>


                <form id="approveForm"
                      action="{{ route('approve_edit_category') }}"
                      method="POST">

                    @csrf


                    <input type="hidden"
                           id="approve_id"
                           name="approve_id">


                    <input type="text"
                           name="remark"
                           class="form-control remark-field mb-4"
                           value="Your category request has been accepted"
                           readonly>


                    <div class="d-flex justify-content-center gap-2">

                        <button type="button"
                                data-bs-dismiss="modal"
                                class="btn btn-light px-4">

                            Cancel

                        </button>


                        <button type="submit"
                                id="approveBtn"
                                class="btn btn-success px-4">

                            <i class="fa-solid fa-check me-1"></i>

                            Yes, Approve

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     REJECT MODAL
========================================================== --}}

<div class="modal fade request-modal"
     id="DeclineModal"
     tabindex="-1"
     aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-body">

                <div class="request-modal-icon reject-modal-icon">

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

                </div>


                <h4 class="request-modal-title">
                    Reject Edit Request
                </h4>


                <p class="request-modal-description">

                    Are you sure you want to reject
                    <strong id="rejectCategoryName">
                        this category
                    </strong>
                    edit request?

                </p>


                <form id="rejectForm"
                      action="{{ route('reject_edit_category') }}"
                      method="POST">

                    @csrf


                    <input type="hidden"
                           id="decline_id"
                           name="decline_id">


                    <input type="text"
                           name="remark"
                           class="form-control remark-field mb-4"
                           value="Your category request has been rejected"
                           readonly>


                    <div class="d-flex justify-content-center gap-2">

                        <button type="button"
                                data-bs-dismiss="modal"
                                class="btn btn-light px-4">

                            Cancel

                        </button>


                        <button type="submit"
                                id="rejectBtn"
                                class="btn btn-danger px-4">

                            <i class="fa-solid fa-xmark me-1"></i>

                            Yes, Reject

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

@endsection


@section('footer')


{{-- =========================================================
     JQUERY
========================================================== --}}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
</script>


{{-- =========================================================
     DATATABLE JS
========================================================== --}}

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

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

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

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

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

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

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

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

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


{{-- =========================================================
     MODAL FUNCTIONS
========================================================== --}}

<script>

function setApproveId(button) {

    const id =
        button.getAttribute('data-user-id');

    const category =
        button.getAttribute('data-category');


    document.getElementById('approve_id').value =
        id;


    document.getElementById('approveCategoryName').textContent =
        category || 'this category';

}


function setDeclineId(button) {

    const id =
        button.getAttribute('data-user-id');

    const category =
        button.getAttribute('data-category');


    document.getElementById('decline_id').value =
        id;


    document.getElementById('rejectCategoryName').textContent =
        category || 'this category';

}


function setServiceImage(button) {

    const image =
        button.getAttribute('data-image');

    document.getElementById('serviceModalImage').src =
        image || '';

}

</script>


{{-- =========================================================
     DOUBLE SUBMIT PROTECTION
========================================================== --}}

<script>

$(document).ready(function () {


    $('#approveForm').on(
        'submit',
        function () {

            $('#approveBtn')
                .prop('disabled', true)
                .html(
                    '<span class="spinner-border spinner-border-sm me-2"></span> Processing...'
                );

            return true;

        }
    );


    $('#rejectForm').on(
        'submit',
        function () {

            $('#rejectBtn')
                .prop('disabled', true)
                .html(
                    '<span class="spinner-border spinner-border-sm me-2"></span> Processing...'
                );

            return true;

        }
    );

});

</script>


{{-- =========================================================
     DATATABLE + FILTER
========================================================== --}}

<script>

$(document).ready(function () {


    /*
    |--------------------------------------------------------------------------
    | DESTROY OLD TABLE
    |--------------------------------------------------------------------------
    */

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

        $('#data-table')
            .DataTable()
            .destroy();

    }


    /*
    |--------------------------------------------------------------------------
    | CUSTOM DATE FILTER
    |--------------------------------------------------------------------------
    |
    | Column 1 = Request Date
    |
    */

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

            if (
                settings.nTable.id !==
                'data-table'
            ) {

                return true;

            }


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

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

            const rowDate =
                data[1] || '';


            if (
                !fromDate &&
                !toDate
            ) {

                return true;

            }


            if (
                !rowDate ||
                rowDate === '-'
            ) {

                return false;

            }


            if (
                fromDate &&
                rowDate < fromDate
            ) {

                return false;

            }


            if (
                toDate &&
                rowDate > toDate
            ) {

                return false;

            }


            return true;

        }
    );


    /*
    |--------------------------------------------------------------------------
    | EXPORT TEXT CLEANER
    |--------------------------------------------------------------------------
    */

    function cleanExportText(data) {

        return $('<div>')
            .html(data)
            .text()
            .replace(/\s+/g, ' ')
            .trim();

    }


    /*
    |--------------------------------------------------------------------------
    | 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'
                ]

            ],


            /*
            |--------------------------------------------------------------------------
            | NEWEST REQUEST FIRST
            |--------------------------------------------------------------------------
            */

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


            /*
            |--------------------------------------------------------------------------
            | LAYOUT
            |--------------------------------------------------------------------------
            */

            dom:

                "<'row align-items-center mb-3'" +

                    "<'col-lg-7 col-md-7 col-12'B>" +

                    "<'col-lg-5 col-md-5 col-12'f>" +

                ">" +

                "<'row mb-3'" +

                    "<'col-md-6 col-12'l>" +

                ">" +

                "<'row'" +

                    "<'col-12'tr>" +

                ">" +

                "<'row align-items-center mt-3'" +

                    "<'col-md-5 col-12'i>" +

                    "<'col-md-7 col-12'p>" +

                ">",


            /*
            |--------------------------------------------------------------------------
            | EXPORT BUTTONS
            |--------------------------------------------------------------------------
            */

            buttons: [


                /*
                |--------------------------------------------------------------------------
                | EXCEL
                |--------------------------------------------------------------------------
                */

                {

                    extend:
                        'excelHtml5',

                    text:
                        '<i class="fa-solid fa-file-excel me-1"></i> Excel',

                    className:
                        'excel-btn',

                    title:
                        'Edit Category Requests',

                    filename: function () {

                        return (
                            'Edit_Category_Requests_' +
                            new Date()
                                .toISOString()
                                .slice(0, 10)
                        );

                    },

                    exportOptions: {

                        /*
                        |--------------------------------------------------------------------------
                        | Image + Action excluded
                        |--------------------------------------------------------------------------
                        */

                        columns: [
                            0,
                            1,
                            2,
                            3,
                            4
                        ],

                        modifier: {

                            search:
                                'applied',

                            order:
                                'applied'

                        },

                        format: {

                            body: function (data) {

                                return cleanExportText(data);

                            }

                        }

                    }

                },


                /*
                |--------------------------------------------------------------------------
                | PDF
                |--------------------------------------------------------------------------
                */

                {

                    extend:
                        'pdfHtml5',

                    text:
                        '<i class="fa-solid fa-file-pdf me-1"></i> PDF',

                    className:
                        'pdf-btn',

                    title:
                        'Edit Category Requests',

                    filename: function () {

                        return (
                            'Edit_Category_Requests_' +
                            new Date()
                                .toISOString()
                                .slice(0, 10)
                        );

                    },

                    orientation:
                        'landscape',

                    pageSize:
                        'A4',

                    exportOptions: {

                        columns: [
                            0,
                            1,
                            2,
                            3,
                            4
                        ],

                        modifier: {

                            search:
                                'applied',

                            order:
                                'applied'

                        },

                        format: {

                            body: function (data) {

                                return cleanExportText(data);

                            }

                        }

                    },


                    customize: function (doc) {

                        doc.pageMargins = [
                            25,
                            30,
                            25,
                            30
                        ];

                        doc.defaultStyle.fontSize =
                            8;


                        if (doc.content[0]) {

                            doc.content[0].alignment =
                                'center';

                            doc.content[0].fontSize =
                                15;

                            doc.content[0].bold =
                                true;

                            doc.content[0].margin = [
                                0,
                                0,
                                0,
                                15
                            ];

                        }


                        let tableNode =
                            null;


                        for (
                            let i = 0;
                            i < doc.content.length;
                            i++
                        ) {

                            if (
                                doc.content[i].table
                            ) {

                                tableNode =
                                    doc.content[i];

                                break;

                            }

                        }


                        if (tableNode) {

                            tableNode.table.widths = [

                                35,
                                80,
                                120,
                                '*',
                                '*'

                            ];

                        }


                        doc.footer = function (
                            currentPage,
                            pageCount
                        ) {

                            return {

                                columns: [

                                    {

                                        text:
                                            'Edit Category Requests',

                                        alignment:
                                            'left',

                                        fontSize:
                                            7,

                                        margin: [
                                            25,
                                            0,
                                            0,
                                            0
                                        ]

                                    },

                                    {

                                        text:
                                            'Page ' +
                                            currentPage +
                                            ' of ' +
                                            pageCount,

                                        alignment:
                                            'right',

                                        fontSize:
                                            7,

                                        margin: [
                                            0,
                                            0,
                                            25,
                                            0
                                        ]

                                    }

                                ]

                            };

                        };

                    }

                },


                /*
                |--------------------------------------------------------------------------
                | PRINT
                |--------------------------------------------------------------------------
                */

                {

                    extend:
                        'print',

                    text:
                        '<i class="fa-solid fa-print me-1"></i> Print',

                    className:
                        'print-btn',

                    title:
                        'Edit Category Requests',

                    exportOptions: {

                        columns: [
                            0,
                            1,
                            2,
                            3,
                            4
                        ],

                        modifier: {

                            search:
                                'applied',

                            order:
                                'applied'

                        },

                        format: {

                            body: function (data) {

                                return cleanExportText(data);

                            }

                        }

                    }

                }

            ],


            /*
            |--------------------------------------------------------------------------
            | COLUMN SETTINGS
            |--------------------------------------------------------------------------
            */

            columnDefs: [

                {

                    targets:
                        0,

                    width:
                        '45px',

                    orderable:
                        false,

                    searchable:
                        false

                },

                {

                    /*
                    |--------------------------------------------------------------------------
                    | IMAGE
                    |--------------------------------------------------------------------------
                    */

                    targets:
                        5,

                    orderable:
                        false,

                    searchable:
                        false

                },

                {

                    /*
                    |--------------------------------------------------------------------------
                    | ACTION
                    |--------------------------------------------------------------------------
                    */

                    targets:
                        6,

                    orderable:
                        false,

                    searchable:
                        false

                }

            ]

        });


    /*
    |--------------------------------------------------------------------------
    | APPLY FILTER
    |--------------------------------------------------------------------------
    */

    function applyFilters() {

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

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


        /*
        |--------------------------------------------------------------------------
        | VALIDATE DATES
        |--------------------------------------------------------------------------
        */

        if (
            fromDate &&
            toDate &&
            fromDate > toDate
        ) {

            alert(
                'From Date cannot be greater than To Date.'
            );

            return;

        }


        /*
        |--------------------------------------------------------------------------
        | AGENT
        |--------------------------------------------------------------------------
        */

        table
            .column(2)
            .search(
                $('#agent_name')
                    .val()
                    .trim()
            );


        /*
        |--------------------------------------------------------------------------
        | CATEGORY
        |--------------------------------------------------------------------------
        */

        table
            .column(3)
            .search(
                $('#category_name')
                    .val()
                    .trim()
            );


        table.draw();

    }


    /*
    |--------------------------------------------------------------------------
    | SEARCH BUTTON
    |--------------------------------------------------------------------------
    */

    $('#filterBtn').on(
        'click',
        applyFilters
    );


    /*
    |--------------------------------------------------------------------------
    | DATE CHANGE
    |--------------------------------------------------------------------------
    */

    $('#from_date, #to_date').on(
        'change',
        function () {

            table.draw();

        }
    );


    /*
    |--------------------------------------------------------------------------
    | ENTER SEARCH
    |--------------------------------------------------------------------------
    */

    $('#agent_name, #category_name').on(
        'keypress',
        function (e) {

            if (
                e.which === 13
            ) {

                e.preventDefault();

                applyFilters();

            }

        }
    );


    /*
    |--------------------------------------------------------------------------
    | RESET
    |--------------------------------------------------------------------------
    */

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

            $('#from_date').val('');

            $('#to_date').val('');

            $('#agent_name').val('');

            $('#category_name').val('');


            table.search('');

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


            table.draw();

        }
    );


    /*
    |--------------------------------------------------------------------------
    | DYNAMIC SERIAL NUMBER
    |--------------------------------------------------------------------------
    */

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

            const info =
                table.page.info();


            table
                .column(
                    0,
                    {
                        search:
                            'applied',

                        order:
                            'applied',

                        page:
                            'current'
                    }
                )
                .nodes()
                .each(
                    function (
                        cell,
                        i
                    ) {

                        cell.innerHTML =
                            info.start +
                            i +
                            1;

                    }
                );

        }
    );


    table.draw();

});

</script>

@endsection