@extends('user.layouts')

@section('title', 'All Business')

@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
========================================================= */

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

.page-top-heading {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #20242a;
}


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

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

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

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

.filter-title i {
    color: #0d6efd;
}

.filter-subtitle {
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 13px;
    color: #8a9099;
}

.filter-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #555c66;
}

.filter-control {
    height: 42px;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 13px;
    color: #3d4248;
    background-color: #ffffff;
    box-shadow: none !important;
}

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

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


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

.filter-btn,
.reset-btn {
    height: 42px;
    min-width: 115px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.reset-btn {
    border: 1px solid #e1e5ea;
    background: #f8f9fa;
    color: #555c66;
}

.reset-btn:hover {
    background: #eceff2;
    border-color: #d7dce1;
}


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

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

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

.table-responsive {
    width: 100%;
}

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

#data-table thead th {
    background: #f7f8fa;
    color: #555c66;
    font-size: 12px;
    font-weight: 700;
    padding: 14px 12px;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

#data-table tbody td {
    color: #3d4248;
    font-size: 13px;
    padding: 14px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f1f3;
}

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

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


/* =========================================================
   VIEW BUTTON
========================================================= */

.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 6px 13px;

    border-radius: 6px;

    background: #0d6efd;
    color: #ffffff !important;

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

    text-decoration: none !important;

    transition: all 0.2s ease;
}

.view-btn:hover {
    background: #0b5ed7;
    color: #ffffff !important;
}


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

.dt-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}

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

    padding: 8px 15px !important;
    margin: 0 !important;

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

    color: #ffffff !important;

    box-shadow: none !important;
}

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

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

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

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

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

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


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

.dataTables_wrapper .dataTables_filter {
    margin: 0;
}

.dataTables_wrapper .dataTables_filter label {
    font-size: 13px;
    font-weight: 500;
    color: #555c66;
}

.dataTables_wrapper .dataTables_filter input {
    height: 38px;
    min-width: 220px;

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

    padding: 6px 10px;
    margin-left: 8px;

    outline: none;
    box-shadow: none;
}

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


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

.dataTables_wrapper .dataTables_length {
    font-size: 13px;
    color: #555c66;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 5px 25px 5px 8px;
}


/* =========================================================
   INFO
========================================================= */

.dataTables_wrapper .dataTables_info {
    font-size: 13px;
    color: #777d85;
}


/* =========================================================
   PAGINATION
========================================================= */

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
}


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

@media (max-width: 991.98px) {

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

}

@media (max-width: 767.98px) {

    .page-wrapper {
        padding-top: 18px;
    }

    .page-top-heading {
        font-size: 22px;
    }

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

    .filter-btn,
    .reset-btn {
        flex: 1;
        min-width: 0;
    }

    .dt-buttons {
        width: 100%;
    }

    .dt-buttons .dt-button {
        padding: 7px 10px !important;
        font-size: 11px !important;
    }

    .dataTables_wrapper .dataTables_filter {
        width: 100%;
        text-align: left !important;
    }

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

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

}

</style>

@endsection


@section('content')

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


    {{-- =========================================================
         PAGE HEADING
    ========================================================== --}}

    <div class="row">

        <div class="col-12">

            <div class="d-flex justify-content-between align-items-center">

                <h3 class="page-top-heading">
                    All Business
                </h3>

            </div>

        </div>

    </div>


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

    <div class="row mt-4">

        <div class="col-12">

            <div class="card filter-card">

                <div class="card-body">

                    <div class="d-flex
                                align-items-center
                                justify-content-between
                                flex-wrap
                                gap-2
                                mb-4">

                        <div>

                            <h5 class="filter-title">

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

                                Search & Filter

                            </h5>

                            <p class="filter-subtitle">

                                Search business records using the filters below

                            </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>


                        {{-- BUSINESS NAME --}}

                        <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="business_name"
                                class="form-control filter-control"
                                placeholder="Enter business name">

                        </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="user_name"
                                class="form-control filter-control"
                                placeholder="Enter name">

                        </div>


                        {{-- PHONE --}}

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

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

                            <input
                                type="text"
                                id="phone_number"
                                class="form-control filter-control"
                                placeholder="Enter phone no">

                        </div>


                        {{-- CATEGORY --}}

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

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

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

                        </div>


                        {{-- AGENT CODE --}}

                        <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="agent_code"
                                class="form-control filter-control"
                                placeholder="Enter 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="d-flex gap-2 w-100">

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

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

                                    Search

                                </button>


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

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

                                    Reset

                                </button>

                            </div>

                        </div>


                    </div>

                </div>

            </div>

        </div>

    </div>


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

    <div class="row mt-4">

        <div class="col-lg-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>BUSINESS NAME</th>

                                    <th>NAME</th>

                                    <th>PHONE NO</th>

                                    <th>CATEGORY NAME</th>

                                    <th>AGENT CODE</th>

                                    {{-- Used internally for From / To date filter --}}
                                    <th>CREATED DATE</th>

                                    <th>ACTION</th>

                                </tr>

                            </thead>


                            <tbody>

                                @foreach ($business as $buss)

                                    <tr>

                                        {{-- SN --}}

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


                                        {{-- BUSINESS NAME --}}

                                        <td>
                                            {{ $buss->business_name ?? '-' }}
                                        </td>


                                        {{-- USER NAME --}}

                                        <td>
                                            {{ optional($buss->user)->name ?? '-' }}
                                        </td>


                                        {{-- PHONE --}}

                                        <td>
                                            {{ $buss->phone_number ?? '-' }}
                                        </td>


                                        {{-- CATEGORY --}}

                                        <td>
                                            {{ $buss->category_name ?? '-' }}
                                        </td>


                                        {{-- AGENT CODE --}}

                                        <td>
                                            {{ optional($buss->user)->agent_code ?? '-' }}
                                        </td>


                                        {{-- CREATED DATE --}}

                                        <td>
                                            {{ $buss->created_at ? $buss->created_at->format('Y-m-d') : '' }}
                                        </td>


                                        {{-- ACTION --}}

                                        <td>

                                            <a
                                                href="{{ route('business_profile_view', $buss->id) }}"
                                                class="view-btn">

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

                                                View

                                            </a>

                                        </td>

                                    </tr>

                                @endforeach

                            </tbody>

                        </table>

                    </div>

                </div>

            </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 CORE
========================================================== --}}

<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>


{{-- =========================================================
     EXPORT DEPENDENCIES
========================================================== --}}

<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>


{{-- =========================================================
     DATATABLE BUTTONS
========================================================== --}}

<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>

$(document).ready(function () {


    /*
    |--------------------------------------------------------------------------
    | DESTROY EXISTING DATATABLE
    |--------------------------------------------------------------------------
    */

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

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

    }


    /*
    |--------------------------------------------------------------------------
    | CLEAN EXPORT TEXT
    |--------------------------------------------------------------------------
    */

    function cleanExportText(data) {

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

    }


    /*
    |--------------------------------------------------------------------------
    | DATE FILTER
    |--------------------------------------------------------------------------
    */

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

        /*
        |--------------------------------------------------------------------------
        | ONLY APPLY TO THIS TABLE
        |--------------------------------------------------------------------------
        */

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


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

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


        /*
        |--------------------------------------------------------------------------
        | CREATED DATE COLUMN INDEX = 6
        |--------------------------------------------------------------------------
        */

        const rowDate = data[6];


        /*
        |--------------------------------------------------------------------------
        | NO DATE FILTER SELECTED
        |--------------------------------------------------------------------------
        */

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


        /*
        |--------------------------------------------------------------------------
        | ROW DOES NOT HAVE DATE
        |--------------------------------------------------------------------------
        */

        if (!rowDate) {
            return false;
        }


        /*
        |--------------------------------------------------------------------------
        | FROM DATE
        |--------------------------------------------------------------------------
        */

        if (
            fromDate &&
            rowDate < fromDate
        ) {

            return false;

        }


        /*
        |--------------------------------------------------------------------------
        | TO DATE
        |--------------------------------------------------------------------------
        */

        if (
            toDate &&
            rowDate > toDate
        ) {

            return false;

        }


        return true;

    });


    /*
    |--------------------------------------------------------------------------
    | INITIALIZE DATATABLE
    |--------------------------------------------------------------------------
    */

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

        processing: true,

        responsive: false,

        scrollX: true,

        autoWidth: false,


        /*
        |--------------------------------------------------------------------------
        | PAGINATION
        |--------------------------------------------------------------------------
        */

        pageLength: 10,


        lengthMenu: [

            [
                10,
                25,
                50,
                100,
                -1
            ],

            [
                10,
                25,
                50,
                100,
                'All'
            ]

        ],


        /*
        |--------------------------------------------------------------------------
        | DEFAULT ORDER
        |--------------------------------------------------------------------------
        */

        order: [
            [0, 'asc']
        ],


        /*
        |--------------------------------------------------------------------------
        | DATATABLE 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-2"></i>' +
                    'Export Excel',

                className:
                    'excel-btn',

                title:
                    'All Business',

                filename: function () {

                    const date =
                        new Date()
                            .toISOString()
                            .slice(0, 10);

                    return 'All_Business_' + date;

                },


                exportOptions: {

                    /*
                    |--------------------------------------------------------------------------
                    | DATE + ACTION NOT EXPORTED
                    |--------------------------------------------------------------------------
                    */

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

                    modifier: {

                        search:
                            'applied',

                        order:
                            'applied'

                    },

                    stripHtml:
                        true,

                    format: {

                        body: function (
                            data,
                            row,
                            column,
                            node
                        ) {

                            return cleanExportText(data);

                        }

                    }

                }

            },


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

            {

                extend:
                    'pdfHtml5',

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

                className:
                    'pdf-btn',

                title:
                    'All Business',

                filename: function () {

                    const date =
                        new Date()
                            .toISOString()
                            .slice(0, 10);

                    return 'All_Business_' + date;

                },

                orientation:
                    'landscape',

                pageSize:
                    'A4',


                exportOptions: {

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

                    modifier: {

                        search:
                            'applied',

                        order:
                            'applied'

                    },

                    stripHtml:
                        true,

                    format: {

                        body: function (
                            data,
                            row,
                            column,
                            node
                        ) {

                            return cleanExportText(data);

                        }

                    }

                },


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

                customize: function (doc) {


                    doc.pageOrientation =
                        'landscape';


                    doc.pageSize =
                        'A4';


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


                    /*
                    |--------------------------------------------------------------------------
                    | DEFAULT STYLE
                    |--------------------------------------------------------------------------
                    */

                    doc.defaultStyle = {

                        fontSize:
                            8,

                        alignment:
                            'left'

                    };


                    /*
                    |--------------------------------------------------------------------------
                    | TITLE
                    |--------------------------------------------------------------------------
                    */

                    if (doc.content[0]) {

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

                        doc.content[0].fontSize =
                            16;

                        doc.content[0].bold =
                            true;

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

                    }


                    /*
                    |--------------------------------------------------------------------------
                    | FIND TABLE
                    |--------------------------------------------------------------------------
                    */

                    let tableNode = null;


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

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

                            tableNode =
                                doc.content[i];

                            break;

                        }

                    }


                    /*
                    |--------------------------------------------------------------------------
                    | TABLE FORMAT
                    |--------------------------------------------------------------------------
                    */

                    if (tableNode) {


                        /*
                        |--------------------------------------------------------------------------
                        | COLUMN WIDTHS
                        |--------------------------------------------------------------------------
                        */

                        tableNode.table.widths = [

                            35,     // SN

                            '*',    // BUSINESS NAME

                            120,    // NAME

                            100,    // PHONE

                            140,    // CATEGORY

                            100     // AGENT CODE

                        ];


                        /*
                        |--------------------------------------------------------------------------
                        | REPEAT HEADER
                        |--------------------------------------------------------------------------
                        */

                        tableNode.table.headerRows =
                            1;


                        /*
                        |--------------------------------------------------------------------------
                        | ROW FORMATTING
                        |--------------------------------------------------------------------------
                        */

                        tableNode.table.body.forEach(
                            function (
                                row,
                                rowIndex
                            ) {

                                row.forEach(
                                    function (
                                        cell,
                                        columnIndex
                                    ) {


                                        /*
                                        |--------------------------------------------------------------------------
                                        | HEADER
                                        |--------------------------------------------------------------------------
                                        */

                                        if (rowIndex === 0) {

                                            cell.bold =
                                                true;

                                            cell.fontSize =
                                                8;

                                            cell.alignment =
                                                'center';

                                            cell.margin = [
                                                3,
                                                5,
                                                3,
                                                5
                                            ];

                                        }


                                        /*
                                        |--------------------------------------------------------------------------
                                        | BODY
                                        |--------------------------------------------------------------------------
                                        */

                                        else {

                                            cell.fontSize =
                                                7.5;

                                            cell.margin = [
                                                3,
                                                4,
                                                3,
                                                4
                                            ];


                                            /*
                                            |--------------------------------------------------------------------------
                                            | CENTER COLUMNS
                                            |--------------------------------------------------------------------------
                                            */

                                            if (
                                                columnIndex === 0 ||
                                                columnIndex === 3 ||
                                                columnIndex === 5
                                            ) {

                                                cell.alignment =
                                                    'center';

                                            }

                                            else {

                                                cell.alignment =
                                                    'left';

                                            }

                                        }

                                    }
                                );

                            }
                        );


                        /*
                        |--------------------------------------------------------------------------
                        | BORDERS
                        |--------------------------------------------------------------------------
                        */

                        tableNode.layout = {

                            hLineWidth: function () {
                                return 0.5;
                            },

                            vLineWidth: function () {
                                return 0.5;
                            },

                            hLineColor: function () {
                                return '#bdbdbd';
                            },

                            vLineColor: function () {
                                return '#bdbdbd';
                            },

                            paddingLeft: function () {
                                return 3;
                            },

                            paddingRight: function () {
                                return 3;
                            },

                            paddingTop: function () {
                                return 3;
                            },

                            paddingBottom: function () {
                                return 3;
                            }

                        };

                    }


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

                    doc.footer = function (
                        currentPage,
                        pageCount
                    ) {

                        return {

                            columns: [

                                {

                                    text:
                                        'All Business',

                                    alignment:
                                        'left',

                                    fontSize:
                                        7,

                                    margin: [
                                        20,
                                        0,
                                        0,
                                        0
                                    ]

                                },

                                {

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

                                    alignment:
                                        'right',

                                    fontSize:
                                        7,

                                    margin: [
                                        0,
                                        0,
                                        20,
                                        0
                                    ]

                                }

                            ]

                        };

                    };

                }

            },


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

            {

                extend:
                    'print',

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

                className:
                    'print-btn',

                title:
                    'All Business',

                exportOptions: {

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

                    modifier: {

                        search:
                            'applied',

                        order:
                            'applied'

                    },

                    stripHtml:
                        true,

                    format: {

                        body: function (
                            data,
                            row,
                            column,
                            node
                        ) {

                            return cleanExportText(data);

                        }

                    }

                }

            }

        ],


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

        columnDefs: [


            /*
            |--------------------------------------------------------------------------
            | CREATED DATE
            | Hidden but available for date filter
            |--------------------------------------------------------------------------
            */

            {

                targets:
                    6,

                visible:
                    false,

                searchable:
                    true

            },


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

            {

                targets:
                    7,

                orderable:
                    false,

                searchable:
                    false

            },


            /*
            |--------------------------------------------------------------------------
            | SN
            |--------------------------------------------------------------------------
            */

            {

                targets:
                    0,

                width:
                    '50px'

            }

        ]

    });


    /*
    |--------------------------------------------------------------------------
    | SEARCH FILTER
    |--------------------------------------------------------------------------
    */

    function applyFilters() {


        /*
        |--------------------------------------------------------------------------
        | BUSINESS NAME
        |--------------------------------------------------------------------------
        */

        table
            .column(1)
            .search(
                $('#business_name').val().trim()
            );


        /*
        |--------------------------------------------------------------------------
        | NAME
        |--------------------------------------------------------------------------
        */

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


        /*
        |--------------------------------------------------------------------------
        | PHONE
        |--------------------------------------------------------------------------
        */

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


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

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


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

        table
            .column(5)
            .search(
                $('#agent_code').val().trim()
            );


        /*
        |--------------------------------------------------------------------------
        | DRAW
        |--------------------------------------------------------------------------
        */

        table.draw();

    }


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

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

        applyFilters();

    });


    /*
    |--------------------------------------------------------------------------
    | FROM / TO DATE
    |--------------------------------------------------------------------------
    */

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

            table.draw();

        }
    );


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

    $(
        '#business_name,' +
        '#user_name,' +
        '#phone_number,' +
        '#category_name,' +
        '#agent_code'
    ).on(
        'keypress',
        function (e) {

            if (e.which === 13) {

                e.preventDefault();

                applyFilters();

            }

        }
    );


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

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


        /*
        |--------------------------------------------------------------------------
        | CLEAR INPUTS
        |--------------------------------------------------------------------------
        */

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

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

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

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

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

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

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


        /*
        |--------------------------------------------------------------------------
        | CLEAR GLOBAL SEARCH
        |--------------------------------------------------------------------------
        */

        table.search('');


        /*
        |--------------------------------------------------------------------------
        | CLEAR COLUMN SEARCHES
        |--------------------------------------------------------------------------
        */

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


        /*
        |--------------------------------------------------------------------------
        | REDRAW
        |--------------------------------------------------------------------------
        */

        table.draw();

    });


    /*
    |--------------------------------------------------------------------------
    | DYNAMIC SN
    |--------------------------------------------------------------------------
    |
    | Search / sorting / pagination panna SN proper sequence-la
    | display aagum.
    |
    */

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

            let info =
                table.page.info();


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

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

                });

        }
    );


    /*
    |--------------------------------------------------------------------------
    | INITIAL SN
    |--------------------------------------------------------------------------
    */

    table.draw();

});

</script>

@endsection