@extends('crm.layouts.master')
@section('title','Leads')
@section('page-css')
    <style>
        .dt-row .col-sm-12 {
            overflow: auto;
        }

        .mce-notification, .mce-notification-inner {
            display: none;
        }

        .leads-page,
        .leads-page h3,
        .leads-page h4,
        .leads-page label,
        .leads-page a,
        .leads-page span,
        .leads-page p,
        .leads-page td,
        .leads-page th,
        .leads-page .btn,
        .leads-page .dropdown-item,
        .leads-page .form-control,
        .leads-page .form-select,
        .leads-page .form-control-lg,
        .leads-page select,
        .leads-page option,
        .leads-page .dataTables_wrapper,
        .leads-page .dataTables_filter,
        .leads-page .dataTables_length,
        .leads-page .dataTables_info,
        .leads-page .dataTables_paginate,
        .leads-page .paginate_button,
        .leads-page .page-link,
        .leads-page .modal-title,
        .leads-page .modal-body,
        .leads-page .custom-font {
            font-size: 14px !important;
            line-height: 1.4;
        }
        .leads-page #leads_table {
            background: #fff;
            border-collapse: collapse;
        }
        .leads-page #leads_table thead th {
            position: relative;
            background: #fff;
            color: #212529;
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0;
            white-space: nowrap;
            border: 1px solid #dee2e6;
            padding: 10px 28px 10px 10px;
            vertical-align: middle;
            cursor: move;
        }
        .leads-page #leads_table tbody td {
            background: transparent;
            border: 1px solid #dee2e6;
            padding: 8px 10px;
            vertical-align: middle;
            white-space: nowrap;
        }
        .leads-page #leads_table tbody a {
            color: #0d6efd;
            font-weight: 600;
        }
        .leads-page #leads_table .col-grip {
            display: inline-block;
            width: 8px;
            height: 14px;
            margin-right: 8px;
            vertical-align: -2px;
            background: repeating-linear-gradient(
                to right,
                #8b909a 0 2px,
                transparent 2px 4px
            );
            cursor: move;
        }
        .leads-page #leads_table thead .sorting:before,
        .leads-page #leads_table thead .sorting_asc:before,
        .leads-page #leads_table thead .sorting_desc:before,
        .leads-page #leads_table thead .sorting_asc_disabled:before,
        .leads-page #leads_table thead .sorting_desc_disabled:before {
            right: 1em;
            bottom: 0.9em;
            content: "\2191" !important;
            opacity: .35;
            display: block;
            position: absolute;
        }
        .leads-page #leads_table thead .sorting:after,
        .leads-page #leads_table thead .sorting_asc:after,
        .leads-page #leads_table thead .sorting_desc:after,
        .leads-page #leads_table thead .sorting_asc_disabled:after,
        .leads-page #leads_table thead .sorting_desc_disabled:after {
            right: 0.5em;
            bottom: 0.9em;
            content: "\2193" !important;
            opacity: .35;
            display: block;
            position: absolute;
        }
        .leads-page #leads_table thead .sorting_asc:before,
        .leads-page #leads_table thead .sorting_desc:after {
            opacity: .85;
        }
        .leads-page #leads_table select.lead_status,
        .leads-page #leads_table select.lead_office,
        .leads-page #leads_table select.lead_desk,
        .leads-page #leads_table select.lead_user {
            display: block;
            width: auto;
            min-width: 140px;
            height: 34px;
            padding: 4px 28px 4px 10px;
            border: 1px solid #ced4da;
            border-radius: 6px;
            background-color: #fff;
            box-shadow: none;
            appearance: auto;
        }
        .leads-page #leads_table .fa,
        .leads-page #leads_table .fas,
        .leads-page #leads_table .fab {
            font-size: 14px !important;
        }
        .leads-page #leads_table .btn {
            padding: 0;
            line-height: 1;
        }
        .leads-page .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
        .leads-page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #7c69ef !important;
            border-color: #7c69ef !important;
            color: #fff !important;
        }
    </style>
    <style>
        .swal2-timer-progress-bar {
            background: #3671E9; /* Change this to your desired color */
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
    {{--    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css">--}}
@endsection
@section('main-content')
<div class="leads-page">
    <div class="breadcrumb">
        <h3>Leads</h3>
    </div>
    <div class="separator-breadcrumb border-top"></div>
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card text-left">
                <div class="card-body">
                    <div class="d-flex justify-content-between my-2">

                        <div class="d-flex align-items-center justify-content-center ">
                            <h4 class="my-0">Your Extension: {{Auth::user()->extension}}</h4>
                            @if(Auth::user()->access_level == 'Agent')
                                <div class="form-check form-switch mx-2 d-flex align-items-center gap-2">
                                    <input class="form-check-input py-2 px-3" type="checkbox" id="auto_dialer">
                                    <label class="custom-font mb-0 " for="auto_dialer">Auto Dialer</label>
                                </div>
                            @endif
                        </div>
                        <div class="d-flex ">

                            @if(Auth::user()->access_level == 'Admin' || Auth::user()->access_level == 'Office Manager')

                                <button type="button" class="btn btn-success mx-2" data-toggle="modal"
                                        data-target="#assignModal">
                                    <i class="fa fa-user-plus"></i> Assign to Agent
                                </button>

                                <button type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#myModal">
                                    <i class="fa fa-plus fa-lg"></i> Import
                                </button>
                                {{--                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#importfile">--}}
                                {{--                                    <i class="fa fa-plus fa-lg"></i> importfile--}}
                                {{--                                </button>--}}
                            @endif
                            <div style="visibility: {{Auth::user()->access_level != 'Agent' ? 'show' : 'hidden'}}"
                                 class="dropdown mx-2">
                                <button class="btn btn-primary dropdown-toggle" type="button"
                                        id="column_filters_dropdown" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                    Columns
                                </button>
                                <div class="dropdown-menu" aria-labelledby="column_filters_dropdown">
                                    <div id="column_filters">
                                        <label class="dropdown-item" for="select_row"><input type="checkbox"
                                                                                             class="column_filter"
                                                                                             id="select_row"
                                                                                             data-column="0"> Select
                                            Row</label>
                                        <label class="dropdown-item" for="list_name"><input type="checkbox"
                                                                                            class="column_filter"
                                                                                            id="list_name"
                                                                                            data-column="1"> List
                                            Name</label>
                                        <label class="dropdown-item" for="id_checkbox"><input type="checkbox"
                                                                                              class="column_filter"
                                                                                              id="id_checkbox"
                                                                                              data-column="2">
                                            ID</label>
                                        <label class="dropdown-item" for="fname_checkbox"><input type="checkbox"
                                                                                                 class="column_filter"
                                                                                                 id="fname_checkbox"
                                                                                                 data-column="3"> First
                                            Name</label>
                                        <label class="dropdown-item" for="lname_checkbox"><input type="checkbox"
                                                                                                 class="column_filter"
                                                                                                 id="lname_checkbox"
                                                                                                 data-column="4"> Last
                                            Name</label>
                                        <label class="dropdown-item" for="email_checkbox"><input type="checkbox"
                                                                                                 class="column_filter"
                                                                                                 id="email_checkbox"
                                                                                                 data-column="5"> Email</label>
                                        <label class="dropdown-item" for="total_calls_checkbox"><input type="checkbox"
                                                                                                       class="column_filter"
                                                                                                       id="total_calls_checkbox"
                                                                                                       data-column="6">
                                            Total Calls</label>
                                        <label class="dropdown-item" for="connected_calls_checkbox"><input
                                                type="checkbox" class="column_filter" id="connected_calls_checkbox"
                                                data-column="7"> Connected Calls</label>
                                        <label class="dropdown-item" for="phone_checkbox"><input type="checkbox"
                                                                                                 class="column_filter"
                                                                                                 id="phone_checkbox"
                                                                                                 data-column="8"> Phone</label>
                                        <label class="dropdown-item" for="call_issue_checkbox"><input type="checkbox"
                                                                                                      class="column_filter"
                                                                                                      id="call_issue_checkbox"
                                                                                                      data-column="9">
                                            Call Issue</label>
                                        <label class="dropdown-item" for="send_sms_checkbox"><input type="checkbox"
                                                                                                    class="column_filter"
                                                                                                    id="send_sms_checkbox"
                                                                                                    data-column="10">
                                            SMS</label>
                                        <label class="dropdown-item" for="whatsapp_checkbox"><input type="checkbox"
                                                                                                    class="column_filter"
                                                                                                    id="whatsapp_checkbox"
                                                                                                    data-column="11">
                                            WhatsApp</label>
                                        <label class="dropdown-item" for="brand_checkbox"><input type="checkbox"
                                                                                                 class="column_filter"
                                                                                                 id="brand_checkbox"
                                                                                                 data-column="12"> Brand</label>
                                        <label class="dropdown-item" for="status_checkbox"><input type="checkbox"
                                                                                                  class="column_filter"
                                                                                                  id="status_checkbox"
                                                                                                  data-column="13">
                                            Status</label>
                                        <label class="dropdown-item" for="office_checkbox"><input type="checkbox"
                                                                                                  class="column_filter"
                                                                                                  id="office_checkbox"
                                                                                                  data-column="14">
                                            Office</label>
                                        <label class="dropdown-item" for="desk_checkbox"><input type="checkbox"
                                                                                                class="column_filter"
                                                                                                id="desk_checkbox"
                                                                                                data-column="15">
                                            Desk</label>
                                        <label class="dropdown-item" for="user_checkbox"><input type="checkbox"
                                                                                                class="column_filter"
                                                                                                id="user_checkbox"
                                                                                                data-column="16">
                                            User</label>
                                        <label class="dropdown-item" for="country_checkbox"><input type="checkbox"
                                                                                                   class="column_filter"
                                                                                                   id="country_checkbox"
                                                                                                   data-column="17">
                                            Country</label>
                                        <label class="dropdown-item" for="ftd_checkbox"><input type="checkbox"
                                                                                               class="column_filter"
                                                                                               id="ftd_checkbox"
                                                                                               data-column="18">
                                            FTD</label>
                                        <label class="dropdown-item" for="amount_checkbox"><input type="checkbox"
                                                                                                  class="column_filter"
                                                                                                  id="amount_checkbox"
                                                                                                  data-column="19">
                                            Amount</label>
                                        <label class="dropdown-item" for="file_name_checkbox"><input type="checkbox"
                                                                                                     class="column_filter"
                                                                                                     id="file_name_checkbox"
                                                                                                     data-column="20">
                                            File name</label>
                                        <label class="dropdown-item" for="create_date_checkbox"><input type="checkbox"
                                                                                                       class="column_filter"
                                                                                                       id="create_date_checkbox"
                                                                                                       data-column="21">
                                            Create Date</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="display table table-bordered" id="leads_table" style="width:100%">
                            <thead>
                            <tr>
                                <th>
                                    Select Row
                                    <input type="checkbox" id="select-all">
                                </th>
                                <th>List Name</th>
                                <th>#ID</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email</th>
                                <th>Total Calls</th>
                                <th>Connected Calls</th>
                                <th>Phone</th>
                                <th>Call Issue</th>
                                <th>SMS</th>
                                <th>WhatsApp</th>
                                <th>Brand</th>
                                <th>Status</th>
                                <th>Office</th>
                                <th>Desk</th>
                                <th>User</th>
                                <th>Country</th>
                                <th>FTD</th>
                                <th>Amount</th>
                                <th>File name</th>
                                <th>Create Date</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- The Modal -->
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Import Leads</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">

                    <form class="" id="save_lead">

                        <div class="form-group">
                            <label>List name</label>
                            <input type="text" id="import_list_name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Select Priority</label>
                            <select class="form-select" id="priority">
                                <option value="low">low</option>
                                <option value="high">high</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Select Office</label>
                            <select class="form-select" id="office_id">
                                @if(Auth::user()->access_level == 'Admin')
                                    <option value="">--Select Office--</option>
                                    @foreach($offices as $office)
                                        <option value="{{$office->id}}">{{$office->name}}</option>
                                    @endforeach
                                @else
                                    <option
                                        value="{{Auth::user()->office_id}}">{{Auth::user()->office->name ?? ''}}</option>
                                @endif
                            </select>
                        </div>
                        <div class="form-group d-none">
                            <label>Select Desk</label>
                            <select class="form-select" id="desk_id">
                                <option value="">--Select Desk--</option>
                            </select>
                        </div>
                        <div class="form-group d-none">
                            <label>Select User</label>
                            <select class="form-select" id="user_id">
                                <option value="">--Select User--</option>
                                @foreach($users as $user)
                                    <option value="{{$user->id}}">{{$user->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Select File</label>
                            <input type="file" id="clients_file" required class="form-control" accept=".csv, text/csv">
                        </div>

                        <div class="text-center">
                            <button class="btn btn-primary" id="submit_btn" type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="assignModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Assign Leads To Agent</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">

                    <form class="" id="assign_leads_to_agent">
                        <input type="hidden" id="selectedLeads" name="lead_ids">
                        <div class="form-group">
                            <label>Select Agent</label>
                            <select class="form-select" id="select_agent_id">
                                @foreach($users as $usr)
                                    <option value="{{$usr->id}}">{{$usr->name}}</option>
                                @endforeach

                            </select>
                        </div>

                        <div class="text-center">
                            <button class="btn btn-primary" id="assign_leads_to_agent_submit_btn" type="submit">Submit
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="importfile">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Import file</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">

                    <form class="" id="importfile">
                        <div class="form-group">
                            <label>Select File</label>
                            <input type="file" id="clients_file1" required class="form-control" accept=".csv, text/csv">
                        </div>

                        <div class="text-center">
                            <button class="btn btn-primary" id="submit_btn1" type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="getmoreinfo">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Get more info</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">

                    <div class="mx-auto p-5 my-auto">
                        <h2>This feature coming soon</h2>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="calltoleadmodal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Call to the lead</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">

                    <div class="mx-auto p-5 my-auto">
                        <button type="button" onclick="">Call</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="call_issue_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Send Call Issue report</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form class="" id="save_call_issue">
                        <input type="hidden" id="lead_id_call_issue">

                        <div class="form-group">
                            <label>Subject</label>
                            <input type="text" id="call_issue_subject" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <textarea type="text" id="call_issue_description" required class="form-control"></textarea>
                        </div>
                        <div class="text-center">
                            <button class="btn btn-primary" id="call_issue_submit_btn" type="submit">Submit</button>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="call_again_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Call Again</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form class="" id="save_call_again">
                        <input type="hidden" id="lead_id_call_back">
                        <div class="form-group">
                            <label>Select Date</label>
                            <input type="date" id="date" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Select Time</label>
                            <input type="time" id="time" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <textarea type="text" id="description" class="form-control"></textarea>
                        </div>
                        <div class="text-center">
                            <button class="btn btn-primary" id="call_again_submit_btn" type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="add_event_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Add To Calender</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form class="" id="save_event">
                        <input type="hidden" value="leads" id="submit_form">
                        <input type="hidden" value="" id="lead_id_event">
                        <div class="form-group">
                            <label>Select Date</label>
                            <input type="date" class="form-control" value="" required id="event_date">
                        </div>

                        <div class="form-group">
                            <label>Event Description</label>
                            <textarea type="text" id="event_description" rows="4" required
                                      class="form-control"></textarea>
                        </div>

                        <div class="text-center">
                            <button class="btn btn-primary" id="submit_event_btn" type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- The Add Modal -->
    <div class="modal" id="send_email_modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Send Email</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form class="" id="send_email">

                        <div class="form-group d-none">
                            <label class="form-label">TO:</label>
                            <input type="email" id="to" required class="form-control">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Subject:</label>
                            <input type="text" id="subject" required class="form-control">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="email_body">Body</label>
                            <textarea type="text" id="email_body" class="form-control"></textarea>
                        </div>

                        <div class="text-center">
                            <button class="btn btn-primary" id="send_email_btn" type="submit">Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="send_sms_modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Send SMS</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form class="" id="send_sms">

                        <input type="hidden" id="sms_lead_id">
                        <div class="form-group">
                            <label class="form-label" for="email_body">Type message</label>
                            <textarea type="text" id="sms_body" rows="5" required class="form-control"></textarea>
                        </div>

                        <div class="text-center">
                            <button class="btn btn-primary" id="send_sms_btn" type="submit">Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="whatsapp_messages_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Send WhatsApp Message</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form class="" id="send_whatsapp_message">
                        <input type="hidden" id="whatsapp_lead_id">
                        <div class="form-group">
                            <label class="form-label" for="whatsapp_message_body">Type message</label>
                            <select id="whatsapp_message_id" class="form-select">
                                @foreach($predefined_whatsapp_message as $message)
                                    <option value="{{$message->id}}">{{$message->title}}</option>
                                @endforeach
                            </select>

                        </div>

                        <div class="text-center">
                            <button class="btn btn-primary" id="whatsapp_message_btn" type="submit">Send Message
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-js')
    <script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
    <script src="{{ asset('js/tinymce.min.js') }}"></script>
    <script>

        var table;
        $(document).ready(function () {

            $.fn.dataTable.ext.order['dom-select'] = function (settings, col) {
                return this.api().column(col, {order: 'index'}).nodes().map(function (td, i) {
                    return $('select', td).val();
                });
            };
            let columns = [
                // Define your data columns here
                {
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function (data, type, row) {
                        return `<input type="checkbox" class="row-checkbox" data-id="${row.id}" value="${row.id}">`;
                    }
                },
                {data: "lead_list", name: "lead_list"},
                {data: "id", name: "id"},
                {data: "first_name", name: "first_name"},
                {data: "lname", name: "lname"},
                {data: "email", name: "email"},
                {data: "total_calls", name: "total_calls"},
                {data: "connected_calls", name: "connected_calls"},
                {data: "phone", name: "phone"},
                {data: "call_issue", name: "call_issue"},
                {data: "send_sms", name: "send_sms"},
                {data: "whatsapp", name: "whatsapp"},
                {data: "brand", name: "brand"},
                {data: "status_drop", name: "status_drop"},
                {data: "office", name: "office"},
                {data: "desk", name: "desk"},
                {data: "user", name: "user"},
                {data: "country", name: "country"},
                {data: "ftd", name: "ftd"},
                {data: "amount", name: "amount"},
                {data: "file_name", name: "file_name"},
                {data: "create_date", name: "create_date"},
            ];

            var colOrderKey = 'leads_table_col_order';
            var savedColOrder = null;
            try {
                var parsedOrder = JSON.parse(localStorage.getItem(colOrderKey) || 'null');
                if (Array.isArray(parsedOrder) && parsedOrder.length === columns.length) {
                    savedColOrder = parsedOrder;
                }
            } catch (e) {
                savedColOrder = null;
            }

            function columnByOriginal(origIdx) {
                var current = (table.colReorder && table.colReorder.transpose)
                    ? table.colReorder.transpose(origIdx, 'toCurrent')
                    : origIdx;
                return table.column(current);
            }

            // ordering or sorting
            table = $('#leads_table').DataTable({
                ajax: "{{ route('leads') }}", // Ajax route
                serverSide: true,
                processing: true,
                colReorder: {
                    realtime: true
                },
                columns: columns,
                "createdRow": function (row, data, index) {
                    // Add data-lead-id attribute to each row
                    $(row).attr('data-lead-id', data.id);

                    // Set background color based on status
                    var color = '';
                    switch (data.status) {
                        case 'New':
                            color = '#fff';
                            break;
                        case 'Call again':
                            color = '#fff4d3';
                            break;
                        case 'No answer':
                            color = '#ffeeed';
                            break;
                        case 'Not interested':
                            color = '#f2e5ff';
                            break;
                        case 'Wrong Details':
                            color = '#f1f1f1';
                            break;
                        case 'Deposit':
                            color = '#a8a496';
                            break;
                        case 'In progress':
                            color = '#e3ecf7';
                            break;
                        case 'Meeting':
                            color = '#e5ffe6';
                            break;
                        case 'No money':
                            color = '#7a7260';
                            break;
                        case 'Language barrier':
                            color = '#a95654';
                            break;
                        case 'Drain out':
                            color = '#a8c5de';
                            break;

                        default:
                            color = '';
                    }

                    $(row).css('background-color', color);
                },
                "order": [
                    // [1, "ASC"]
                ],
                // columnDefs: [
                //     {
                //         // Assuming the 8th column is the Status column
                //         targets: 8, // 0-based index of the column
                //         orderDataType: 'dom-select' // Use custom sorting function for select options
                //     },
                //     // Add similar configurations for other select option columns if needed
                // ],
            });

            if (savedColOrder) {
                table.colReorder.order(savedColOrder, true);
            }

            function addColGrips() {
                $('#leads_table thead th').each(function () {
                    if (!$(this).find('.col-grip').length) {
                        $(this).prepend('<span class="col-grip" aria-hidden="true"></span>');
                    }
                });
            }
            addColGrips();

            $('#leads_table').on('column-reorder.dt', function () {
                addColGrips();
                try {
                    localStorage.setItem(colOrderKey, JSON.stringify(table.colReorder.order()));
                } catch (e) {}
            });

            // Your existing code for hide/show columns
            var leadColumnAccess = `{{ $userAccess->lead_column_access }}`;
            leadColumnAccess = leadColumnAccess.split(',');

            leadColumnAccess = leadColumnAccess.map(function (str) {
                return parseInt(str, 10);
            });

            // Iterate over each checkbox
            $('.column_filter').each(function () {
                var columnNumber = parseInt($(this).data('column'));
                // if(columnNumber == 6){
                //     return;
                // }
                // Check if the column number is in the leadColumnAccess array
                if ($.inArray(columnNumber, leadColumnAccess) !== -1) {
                    $(this).prop('checked', true);
                } else {
                    $(this).prop('checked', false);
                }

                // Toggle visibility of column based on checkbox state
                columnByOriginal($(this).data('column')).visible($(this).is(':checked'));
            });


        });

        // Handle change event of checkbox
        $('#column_filters').on('change', '.column_filter', function () {
            var origIdx = parseInt($(this).data('column'), 10);
            var current = (table.colReorder && table.colReorder.transpose)
                ? table.colReorder.transpose(origIdx, 'toCurrent')
                : origIdx;
            table.column(current).visible($(this).is(':checked'));
        });

        function openemailbox(to_email) {
            $("#to").val(to_email);
            $("#send_email_modal").modal('show')
        }

        function call_issue(lead_id) {

            $("#lead_id_call_issue").val(lead_id);
            $("#call_issue_modal").modal('show');
        }

        function send_sms(lead_id) {

            $("#sms_lead_id").val(lead_id);
            $("#send_sms_modal").modal('show');
        }

        function whatsapp(lead_id) {

            $("#whatsapp_lead_id").val(lead_id);
            $("#whatsapp_messages_modal").modal('show');
        }

        tinymce.init({
            selector: '#email_body',
            plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen codesample table charmap pagebreak nonbreaking insertdatetime advlist lists wordcount help charmap quickbars emoticons',
            menubar: 'file edit view insert format tools table help',
            toolbar: 'undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | emoticons | fullscreen  preview | insertfile anchor codesample | ltr rtl',
            textcolor_map: [
                "FFFFFF", "White",
            ],
            toolbar_sticky: true,
            autosave_ask_before_unload: true,
            autosave_interval: '30s',
            autosave_prefix: '{path}{query}-{id}-',
            autosave_restore_when_empty: false,
            autosave_retention: '2m',
            importcss_append: true,
            template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
            template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
            height: 300,
            // content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:18px;color:#fff; }'
        });
    </script>

    {{--    make the table dynamic--}}
    <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
    <script>
        // Enable pusher logging - don't include this in production
        // Pusher.logToConsole = true;

        var pusher = new Pusher("{{env('PUSHER_APP_KEY')}}", {
            cluster: "{{env('PUSHER_APP_CLUSTER')}}"
        });

        var callEventChannel = pusher.subscribe('call_event_channel');
        var callConnectedChannel = pusher.subscribe('call_connected_channel');
        var callHangupChannel = pusher.subscribe('call_hangup_channel');
        var originalHtml = '';
        callEventChannel.bind('App\\Events\\AutoDialerEvent', function (data) {
            var lead = data.lead;
            // Store the existing HTML content
            originalHtml = $("#calltolead_btn" + lead.id).html();

            // Replace with spinner
            $("#calltolead_btn" + lead.id)
                .attr("disabled", true)
                .html('<i class="fa fa-spinner fa-spin text-success"></i>');
        });

        callConnectedChannel.bind('App\\Events\\CallConnectedEvent', function (data) {
            var lead = data.lead;
            var row = $('tr[data-lead-id="' + lead.id + '"]');
            if (row.length > 0) {
                row.css('background-color', '#a4dfb4');
            }
        });

        callHangupChannel.bind('App\\Events\\CallHangupEvent', function (data) {
            var lead = data.lead;
            // Restore original HTML content


            // remove the connected status
            var row = $('tr[data-lead-id="' + lead.id + '"]');
            if (row.length > 0) {
                row.css('background-color', '');

                $("#calltolead_btn" + lead.id)
                    .attr("disabled", false)
                    .html('<i class=" fa fa-phone  text-primary fs-3 "></i>');
            }
        });

        // $('#select-all').on('click', function () {
        //     const isChecked = $(this).is(':checked');
        //     $('.lead-checkbox').prop('checked', isChecked);
        // });

    </script>

    <script>
        let selectedIds = [];

        // Individual checkbox selection
        $(document).on('change', '.row-checkbox', function() {
            const id = $(this).data('id');
            if ($(this).is(':checked')) {
                if (!selectedIds.includes(id)) selectedIds.push(id);
            } else {
                selectedIds = selectedIds.filter(item => item !== id);
            }
        });

        // "Select All" checkbox
        $(document).on('change', '#select-all', function() {
            const checked = $(this).is(':checked');
            $('.row-checkbox').each(function() {
                const id = $(this).data('id');
                $(this).prop('checked', checked);
                if (checked && !selectedIds.includes(id)) {
                    selectedIds.push(id);
                } else if (!checked) {
                    selectedIds = selectedIds.filter(item => item !== id);
                }
            });
        });

        // Re-check checkboxes on page load or pagination
        function restoreCheckboxes() {
            $('.row-checkbox').each(function() {
                const id = $(this).data('id');
                $(this).prop('checked', selectedIds.includes(id));
            });

            // Handle "Select All" state
            $('#select-all').prop('checked', $('.row-checkbox:checked').length === $('.row-checkbox').length);
        }

        // When content reloads (e.g., via AJAX pagination)
        $(document).on('ajaxComplete', function() {
            restoreCheckboxes();
        });

        // Initial check on page load
        $(document).ready(function() {
            restoreCheckboxes();
        });
    </script>


@endsection