@extends('crm.layouts.master')
@section('title', $isRecovery ? 'Customers' : ($isClient ? 'Clients' : 'Leads'))
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/css/bootstrap-select.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/crm-client-presence.css') }}?v=1">
    <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: var(--bs-body-bg, #fff);
            border-collapse: collapse;
        }
        .leads-page #leads_table thead th {
            position: relative;
            background: var(--bs-body-bg, #fff);
            color: var(--bs-body-color, #212529);
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0;
            white-space: nowrap;
            border: 1px solid var(--bs-border-color, #dee2e6);
            padding: 10px 28px 10px 10px;
            vertical-align: middle;
            cursor: move;
        }
        .leads-page #leads_table tbody td {
            background: transparent;
            border: 1px solid var(--bs-border-color, #dee2e6);
            padding: 8px 10px;
            vertical-align: middle;
            white-space: nowrap;
        }
        .leads-page #leads_table tbody a {
            color: #727cf5;
            font-weight: 600;
        }
        /* ⋮ column-menu button */
        .leads-page #leads_table .col-menu-btn {
            background: none;
            border: none;
            padding: 0 5px 0 0;
            font-size: 1.05rem;
            line-height: 1;
            cursor: default;
            color: var(--bs-border-color, #ccc);
            vertical-align: middle;
            user-select: none;
        }
        .leads-page #leads_table .col-menu-btn.filterable {
            cursor: pointer;
            color: var(--bs-secondary-color, #8b909a);
        }
        .leads-page #leads_table .col-menu-btn.filterable:hover {
            color: #727cf5;
        }
        .leads-page #leads_table .col-menu-btn.filterable.cf-active {
            color: #727cf5;
            font-weight: 700;
        }
        /* per-column filter dropdown */
        #col-filter-menu {
            position: fixed;
            z-index: 99999;
            background: var(--bs-dropdown-bg, #fff);
            border: 1px solid var(--bs-border-color, #dee2e6);
            border-radius: 4px;
            box-shadow: 0 4px 14px rgba(0,0,0,.18);
            min-width: 170px;
            max-height: 280px;
            overflow-y: auto;
            display: none;
            color: var(--bs-body-color);
        }
        #col-filter-menu .cf-item {
            padding: 7px 16px;
            cursor: pointer;
            font-size: .84rem;
            white-space: nowrap;
        }
        #col-filter-menu .cf-item:hover { background: var(--bs-dropdown-link-hover-bg, #f0f4ff); }
        #col-filter-menu .cf-item.cf-active { font-weight: 700; color: #727cf5; }
        #col-filter-menu .cf-divider {
            border-top: 1px solid var(--bs-border-color, #dee2e6);
            margin: 2px 0;
        }
        .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;
        }
        /* Narrow checkbox column */
        .leads-page #leads_table th:first-child,
        .leads-page #leads_table td:first-child {
            width: 32px !important;
            min-width: 32px !important;
            max-width: 40px !important;
            text-align: center !important;
            padding-left: 6px !important;
            padding-right: 6px !important;
        }
        .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 var(--bs-border-color, #ced4da);
            border-radius: 6px;
            background-color: var(--bs-body-bg, #fff);
            color: var(--bs-body-color);
            box-shadow: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
        .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;
        }
        .leads-page .dataTables_wrapper .dataTables_length,
        .leads-page .dataTables_wrapper .dataTables_info {
            float: none !important;
            width: auto !important;
            display: inline-flex;
            align-items: center;
            margin: 0;
        }
        .leads-page .dataTables_wrapper .dataTables_length label {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            margin: 0;
        }
        .leads-page .dataTables_wrapper .dataTables_length select {
            min-width: 4.5rem;
            margin: 0 .15rem;
        }
        .leads-page .leads-table-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding-top: .75rem;
        }
        .leads-page .leads-table-footer-left {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .leads-page .leads-table-top {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 1rem;
            padding-bottom: .75rem;
        }
        .leads-page .leads-table-top-left {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        @media (max-width: 640px) {
            .leads-page .leads-table-footer { align-items: flex-start; flex-direction: column; }
            .leads-page .leads-table-top { align-items: flex-start; }
        }
        .leads-page .dataTables_filter {
            display: none !important;
        }
        .leads-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .leads-toolbar-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
            margin-left: auto;
        }
        .lead-filter-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
            padding: 0;
        }
        .lead-filter-bar--advanced {
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .lead-filter-control {
            position: relative;
            min-width: 0;
        }
        .lead-filter-control:first-child { width: 240px; }
        .lead-filter-control:nth-child(2) { width: 135px; }
        .lead-filter-control:nth-child(3) { width: 165px; }
        .lead-filter-control:nth-child(4) { width: 140px; }
        .lead-filter-control--standard { width: 150px !important; }
        .lead-filter-control--date { width: 145px !important; }
        .record-filter-date-range {
            display: none;
            align-items: center;
            gap: 8px;
        }
        .record-filter-date-range.is-active { display: flex; }
        .record-filter-clear {
            height: 38px;
            white-space: nowrap;
        }
        .lead-filter-control .fa-search {
            position: absolute;
            left: 13px;
            top: 50%;
            z-index: 1;
            transform: translateY(-50%);
            color: var(--bs-secondary-color, #6c757d);
            pointer-events: none;
        }
        .leads-page .lead-filter-input,
        .leads-page .lead-filter-select {
            width: 100%;
            height: 38px;
            margin: 0;
            border: 1px solid var(--bs-border-color, #d7deea);
            border-radius: 7px;
            background-color: var(--bs-body-bg, #fff);
            color: var(--bs-body-color, #212529);
            box-shadow: none;
            font-size: 14px !important;
        }
        .leads-page .lead-filter-input {
            padding: 0 12px 0 37px;
        }
        .leads-page input[type="date"].lead-filter-input {
            padding: 0 10px;
        }
        .leads-page .lead-filter-select {
            padding: 0 32px 0 11px;
        }
        .leads-page .lead-filter-control .bootstrap-select { width: 100% !important; }
        .leads-page .lead-filter-control .bootstrap-select > .dropdown-toggle {
            height: 38px; padding: 0 32px 0 11px;
            border: 1px solid var(--bs-border-color, #d7deea); border-radius: 7px;
            background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529);
            font-size: 14px; box-shadow: none;
            position: relative;
        }
        .leads-page .lead-filter-control .bootstrap-select > .dropdown-toggle .filter-option,
        .leads-page .lead-filter-control .bootstrap-select > .dropdown-toggle .filter-option-inner,
        .leads-page .lead-filter-control .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
            text-align: center;
        }
        .leads-page .lead-filter-control .bootstrap-select > .dropdown-toggle .filter-option {
            position: absolute !important;
            inset: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 34px;
            pointer-events: none;
        }
        .leads-page .lead-filter-control .bootstrap-select > .dropdown-toggle .filter-option-inner,
        .leads-page .lead-filter-control .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
            width: 100%;
        }
        .leads-page .lead-filter-control .bootstrap-select > .dropdown-toggle::after {
            position: absolute;
            right: 12px;
            top: 50%;
            margin: 0;
            transform: translateY(-50%);
        }
        .leads-page .lead-filter-control .bootstrap-select > .dropdown-toggle:focus {
            border-color: #7c69ef; box-shadow: 0 0 0 3px rgba(124, 105, 239, .15);
            outline: 0 !important;
        }
        .leads-page .lead-filter-control .bootstrap-select .dropdown-menu {
            min-width: 260px !important;
            max-width: min(320px, calc(100vw - 24px));
            padding: 8px;
            border: 1px solid var(--bs-border-color, #d7deea);
            border-radius: 10px;
            background: var(--bs-dropdown-bg, #fff);
            box-shadow: 0 12px 30px rgba(33, 37, 41, .16);
        }
        .leads-page .lead-filter-control .bootstrap-select .bs-searchbox {
            padding: 0 0 8px;
        }
        .leads-page .lead-filter-control .bootstrap-select .bs-searchbox .form-control {
            width: 100%;
            height: 34px;
            padding: 0 10px;
            border: 1px solid var(--bs-border-color, #d7deea);
            border-radius: 7px;
            background: var(--bs-body-bg, #fff);
            color: var(--bs-body-color, #212529);
            box-shadow: none;
        }
        .leads-page .lead-filter-control .bootstrap-select .bs-searchbox .form-control:focus {
            border-color: #7c69ef;
            box-shadow: 0 0 0 3px rgba(124, 105, 239, .12);
        }
        .leads-page .lead-filter-control .bootstrap-select .bs-actionsbox {
            padding: 0 0 8px;
        }
        .leads-page .lead-filter-control .bootstrap-select .bs-actionsbox .btn-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }
        .leads-page .lead-filter-control .bootstrap-select .bs-actionsbox .btn {
            width: auto !important;
            min-height: 32px;
            padding: 5px 10px;
            border: 1px solid rgba(124, 105, 239, .22);
            border-radius: 7px !important;
            background: rgba(124, 105, 239, .10);
            color: var(--bs-body-color, #343747);
            font-weight: 600;
            line-height: 1.2;
            white-space: nowrap;
        }
        .leads-page .lead-filter-control .bootstrap-select .bs-actionsbox .btn:hover,
        .leads-page .lead-filter-control .bootstrap-select .bs-actionsbox .btn:focus {
            border-color: #7c69ef;
            background: rgba(124, 105, 239, .18);
            color: #6f5ce7;
        }
        .leads-page .lead-filter-control .bootstrap-select .dropdown-menu.inner {
            padding: 0;
            max-height: 300px !important;
            overflow-y: auto !important;
        }
        .leads-page .lead-filter-control .bootstrap-select .dropdown-menu li + li {
            margin-top: 2px;
        }
        .leads-page .lead-filter-control .bootstrap-select .dropdown-menu li a.dropdown-item {
            min-height: 36px;
            display: flex;
            align-items: center;
            padding: 7px 34px 7px 10px;
            border-radius: 7px;
            color: var(--bs-body-color, #343747);
            line-height: 1.25;
            white-space: normal;
        }
        .leads-page .lead-filter-control .bootstrap-select .dropdown-menu li a.dropdown-item:hover,
        .leads-page .lead-filter-control .bootstrap-select .dropdown-menu li a.dropdown-item:focus {
            background: var(--bs-tertiary-bg, #f3f1fd);
        }
        .leads-page .lead-filter-control .bootstrap-select .dropdown-menu li.selected a.dropdown-item {
            background: rgba(124, 105, 239, .13);
            color: #6f5ce7;
            font-weight: 600;
        }
        .leads-page .lead-filter-control .bootstrap-select.show-tick .dropdown-menu .selected .check-mark {
            top: 50%;
            right: 12px;
            transform: translateY(-55%);
            color: #7c69ef;
        }
        .leads-page .lead-filter-input:focus,
        .leads-page .lead-filter-select:focus {
            border-color: #7c69ef;
            box-shadow: 0 0 0 3px rgba(124, 105, 239, .15);
            outline: 0;
        }
        @media (max-width: 1400px) {
            .leads-toolbar-actions { width: 100%; justify-content: flex-start; }
        }
        @media (max-width: 768px) {
            .lead-filter-bar { width: 100%; flex-wrap: wrap; }
            .lead-filter-control:first-child { width: 100%; }
            .lead-filter-control:nth-child(n+2) { width: calc(33.333% - 6px); }
        }
        @media (max-width: 520px) {
            .lead-filter-control:nth-child(n+2) { width: 100%; }
            .leads-page .lead-filter-control .bootstrap-select .dropdown-menu {
                min-width: min(280px, calc(100vw - 24px)) !important;
            }
            .leads-page .lead-filter-control .bootstrap-select .dropdown-menu.inner {
                max-height: 260px !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>{{ $isRecovery ? 'Customers' : ($isClient ? 'Clients' : '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="leads-toolbar 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="leads-toolbar-actions">
                            <div class="lead-filter-bar lead-filter-bar--advanced" aria-label="{{ $isClient ? 'Client' : 'Lead' }} filters">
                                <div class="lead-filter-control">
                                    <label class="visually-hidden" for="lead-filter-search">Search {{ $isClient ? 'clients' : 'leads' }}</label>
                                    <i class="fa fa-search" aria-hidden="true"></i>
                                    <input type="search" id="lead-filter-search" class="form-control lead-filter-input"
                                           placeholder="Search by name, phone or email..." autocomplete="off">
                                </div>
                                <div class="lead-filter-control">
                                    <label class="visually-hidden" for="lead-filter-status">Filter by status</label>
                                    <select id="lead-filter-status" class="selectpicker show-tick form-control crm-multi-filter" multiple
                                            title="All statuses" data-actions-box="true" data-live-search="true"
                                            data-selected-text-format="count > 1" data-count-selected-text="{0} statuses selected">
                                        @foreach($isRecovery ? \App\Support\LeadStatusRegistry::RECOVERY_OUTCOMES : \App\Support\LeadStatusRegistry::forClient((bool) $isClient) as $status)
                                            <option value="{{ $status }}">{{ $status }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="lead-filter-control">
                                    <label class="visually-hidden" for="lead-filter-assignee">Filter by assigned user</label>
                                    <select id="lead-filter-assignee" class="selectpicker show-tick form-control crm-multi-filter" multiple
                                            title="All assigned users" data-actions-box="true" data-live-search="true"
                                            data-selected-text-format="count > 1" data-count-selected-text="{0} users selected">
                                        <option value="__unassigned__">Unassigned</option>
                                        @foreach($users as $filterUser)
                                            <option value="{{ $filterUser->id }}">{{ $filterUser->name }} ({{ $filterUser->access_level }})</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="lead-filter-control">
                                    <label class="visually-hidden" for="lead-filter-country">Filter by country</label>
                                    <select id="lead-filter-country" class="selectpicker show-tick form-control crm-multi-filter" multiple
                                            title="All countries" data-actions-box="true" data-live-search="true"
                                            data-selected-text-format="count > 1" data-count-selected-text="{0} countries selected">
                                        @foreach($countries as $filterCountry)
                                            <option value="{{ $filterCountry }}">{{ $filterCountry }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                    <div class="lead-filter-control lead-filter-control--standard">
                                        <label class="visually-hidden" for="record-filter-brand">Filter by brand</label>
                                        <select id="record-filter-brand" class="selectpicker show-tick form-control crm-multi-filter" multiple
                                                title="All brands" data-actions-box="true" data-live-search="true"
                                                data-selected-text-format="count > 1" data-count-selected-text="{0} brands selected">
                                            @foreach($brands as $filterBrand)
                                                <option value="{{ $filterBrand }}">{{ $filterBrand }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="lead-filter-control lead-filter-control--standard">
                                        <label class="visually-hidden" for="record-filter-desk">Filter by desk</label>
                                        <select id="record-filter-desk" class="selectpicker show-tick form-control crm-multi-filter" multiple
                                                title="All desks" data-actions-box="true" data-live-search="true"
                                                data-selected-text-format="count > 1" data-count-selected-text="{0} desks selected">
                                            <option value="__unassigned__">Unassigned</option>
                                            @foreach($filterDesks as $filterDesk)
                                                <option value="{{ $filterDesk->id }}">{{ $filterDesk->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="lead-filter-control lead-filter-control--standard">
                                        <label class="visually-hidden" for="record-filter-funnel">Filter by funnel name</label>
                                        <select id="record-filter-funnel" class="selectpicker show-tick form-control crm-multi-filter" multiple
                                                title="All funnels" data-actions-box="true" data-live-search="true"
                                                data-selected-text-format="count > 1" data-count-selected-text="{0} funnels selected">
                                            <option value="__none__">No funnel</option>
                                            @foreach($funnels as $filterFunnel)
                                                <option value="{{ $filterFunnel }}">{{ $filterFunnel }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="lead-filter-control lead-filter-control--standard">
                                        <label class="visually-hidden" for="record-filter-date-mode">Choose date filter type</label>
                                        <select id="record-filter-date-mode" class="form-select lead-filter-select">
                                            <option value="specific">Specific date</option>
                                            <option value="range">Date range</option>
                                        </select>
                                    </div>
                                    <div id="record-filter-specific-wrap" class="lead-filter-control lead-filter-control--date">
                                        <label class="visually-hidden" for="record-filter-date-specific">{{ $isClient ? 'Client' : 'Lead' }} creation date</label>
                                        <input type="date" id="record-filter-date-specific" class="form-control lead-filter-input record-advanced-filter">
                                    </div>
                                    <div id="record-filter-range-wrap" class="record-filter-date-range">
                                        <div class="lead-filter-control lead-filter-control--date">
                                            <label class="visually-hidden" for="record-filter-date-from">Created from date</label>
                                            <input type="date" id="record-filter-date-from" class="form-control lead-filter-input record-advanced-filter">
                                        </div>
                                        <div class="lead-filter-control lead-filter-control--date">
                                            <label class="visually-hidden" for="record-filter-date-to">Created through date</label>
                                            <input type="date" id="record-filter-date-to" class="form-control lead-filter-input record-advanced-filter">
                                        </div>
                                    </div>
                                    <button type="button" id="record-filter-clear" class="btn btn-outline-secondary record-filter-clear">
                                        Clear filters
                                    </button>
                            </div>

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

                                <div class="dropdown mx-2">
                                    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="fa fa-tasks"></i> Bulk actions
                                    </button>
                                    <div class="dropdown-menu">
                                        <button type="button" class="dropdown-item" data-toggle="modal" data-target="#assignModal"><i class="fa fa-user-plus me-2"></i>Assign to User</button>
                                        <button type="button" class="dropdown-item" data-toggle="modal" data-target="#bulkStatusModal"><i class="fa fa-tag me-2"></i>Change status</button>
                                        <button type="button" class="dropdown-item" data-toggle="modal" data-target="#bulkStatusAssignmentModal"><i class="fa fa-user-check me-2"></i>Change status &amp; assign user</button>
                                        <button type="button" class="dropdown-item" data-toggle="modal" data-target="#bulkDeskModal"><i class="fa fa-th-large me-2"></i>Change desk</button>
                                    </div>
                                </div>

                                @if(!$isClient)
                                    <button type="button" class="btn btn-primary" data-toggle="modal"
                                            data-target="#myModal">
                                        <i class="fa fa-plus fa-lg"></i> Import
                                    </button>
                                @endif
                                {{--                                <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 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">
                                        @foreach($leadTableColumns as $column)
                                            @if(in_array($column['key'], $allowedColumnKeys, true))
                                                <label class="dropdown-item" for="column_{{ $column['key'] }}">
                                                    <input type="checkbox" class="column_filter"
                                                           id="column_{{ $column['key'] }}"
                                                           data-column="{{ $column['index'] }}"
                                                           data-column-key="{{ $column['key'] }}">
                                                    {{ $column['label'] }}
                                                </label>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="display table table-bordered" id="leads_table" style="width:100%">
                            <thead>
                            <tr>
                                <th style="width:32px;min-width:32px;text-align:center">
                                    <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 title="Connected [Total]">Calls</th>
                                <th>Phone</th>
                                <th>SMS</th>
                                <th>WhatsApp</th>
                                <th>Brand</th>
                                <th>Status</th>
                                <th>Desk</th>
                                <th>User</th>
                                <th>Country</th>
                                <th>FTD</th>
                                <th>Amount</th>
                                <th>File name</th>
                                <th>Create Date</th>
                                <th>Affiliate Source</th>
                                <th>Funnel Name</th>
                                <th>Added By</th>
                                @if($isClient)
                                    <th>FTD Date</th>
                                    <th>Last Deposit Date</th>
                                    <th>Last Note Date</th>
                                    <th>Last Login</th>
                                    <th>Online Status</th>
                                @endif
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Per-column filter dropdown (shared, repositioned by JS) -->
    <div id="col-filter-menu"></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 Clients</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>

                        {{-- office_id is set automatically (single-office setup) --}}
                        <input type="hidden" id="office_id" value="{{ \App\Models\Office::first()->id ?? 1 }}">
                        <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->where('access_level', 'Agent') 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 {{ $isClient ? 'Clients' : 'Leads' }} to User</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 Assignee</label>
                            <select class="form-select" id="select_agent_id">
                                @foreach($users as $usr)
                                    <option value="{{$usr->id}}">{{$usr->name}} ({{$usr->access_level}})</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_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">
                        <input type="hidden" id="call_back_previous_status">
                        <input type="hidden" id="callback_status_value" value="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="bulkStatusModal">
        <div class="modal-dialog"><div class="modal-content">
            <div class="modal-header"><h4 class="modal-title">Change status</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>
            <div class="modal-body"><form id="bulk_status_form">
                @php $bulkStatuses = $isRecovery ? \App\Support\LeadStatusRegistry::RECOVERY_OUTCOMES : \App\Support\LeadStatusRegistry::forClient((bool) $isClient); @endphp
                <div class="form-group"><label for="bulk_status">Status</label><select class="form-select" id="bulk_status" required>
                    @foreach($bulkStatuses as $bulkStatus)
                        <option value="{{ $bulkStatus }}">{{ $bulkStatus }}</option>
                    @endforeach
                </select></div>
                <div id="bulk_callback_fields" class="d-none">
                    <div class="form-group"><label for="bulk_callback_date">Callback date</label><input type="date" class="form-control" id="bulk_callback_date"></div>
                    <div class="form-group"><label for="bulk_callback_time">Callback time</label><input type="time" class="form-control" id="bulk_callback_time"></div>
                </div>
                <div class="text-center"><button class="btn btn-primary" type="submit" id="bulk_status_submit">Update status</button></div>
            </form></div>
        </div></div>
    </div>
    <div class="modal" id="bulkDeskModal">
        <div class="modal-dialog"><div class="modal-content">
            <div class="modal-header"><h4 class="modal-title">Change desk</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>
            <div class="modal-body"><form id="bulk_desk_form">
                <div class="form-group"><label for="bulk_desk">Desk</label><select class="form-select" id="bulk_desk" required>
                    @foreach($desks as $bulkDesk)<option value="{{ $bulkDesk->id }}">{{ $bulkDesk->name }}</option>@endforeach
                </select></div>
                <div class="text-center"><button class="btn btn-primary" type="submit" id="bulk_desk_submit">Update desk</button></div>
            </form></div>
        </div></div>
    </div>
    <div class="modal" id="bulkStatusAssignmentModal">
        <div class="modal-dialog"><div class="modal-content">
            <div class="modal-header"><h4 class="modal-title">Change status &amp; assign user</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>
            <div class="modal-body"><form id="bulk_status_assignment_form">
                @php $bulkAssignmentStatuses = \App\Support\LeadStatusRegistry::forClient((bool) $isClient); @endphp
                <div class="form-group"><label for="bulk_assignment_status">Status</label><select class="form-select" id="bulk_assignment_status" required>
                    @foreach($bulkAssignmentStatuses as $bulkStatus)<option value="{{ $bulkStatus }}">{{ $bulkStatus }}</option>@endforeach
                </select></div>
                <div class="form-group"><label for="bulk_assignment_agent">Assignee</label><select class="form-select" id="bulk_assignment_agent" required>
                    @foreach($users as $bulkAgent)<option value="{{ $bulkAgent->id }}">{{ $bulkAgent->name }} ({{ $bulkAgent->access_level }})</option>@endforeach
                </select></div>
                <div id="bulk_assignment_callback_fields" class="d-none">
                    <div class="form-group"><label for="bulk_assignment_callback_date">Callback date</label><input type="date" class="form-control" id="bulk_assignment_callback_date"></div>
                    <div class="form-group"><label for="bulk_assignment_callback_time">Callback time</label><input type="time" class="form-control" id="bulk_assignment_callback_time"></div>
                </div>
                <div class="text-center"><button class="btn btn-primary" type="submit" id="bulk_status_assignment_submit">Update status &amp; assignment</button></div>
            </form></div>
        </div></div>
    </div>
    <div class="modal fade" id="ftd_modal" tabindex="-1" aria-labelledby="ftd_modal_title" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="ftd_modal_title">Submit First-Time Deposit</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="ftd_status_form">
                    <div class="modal-body">
                        <input type="hidden" id="ftd_lead_id">
                        <input type="hidden" id="ftd_previous_status">
                        <p class="text-muted">The lead remains unchanged until this deposit is approved.</p>
                        <div class="row g-3">
                            <div class="col-sm-7">
                                <label class="form-label" for="ftd_amount">FTD amount</label>
                                <input class="form-control" id="ftd_amount" type="number" min="0.01" step="0.01" required autocomplete="off">
                            </div>
                            <div class="col-sm-5">
                                <label class="form-label" for="ftd_currency">Currency</label>
                                <select class="form-select" id="ftd_currency" required>
                                    @foreach(['USD', 'EUR', 'CAD', 'AUD'] as $currency)
                                        <option value="{{ $currency }}">{{ $currency }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="ftd_submit_btn">Submit for approval</button>
                    </div>
                </form>
            </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>
    window.crmUpdateLeadUserUrl = @json(route('update_lead_user'));
    window.crmBulkStatusAssignmentUrl = @json(route('bulk_update_status_assignment'));
</script>
    <script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap-select.min.js') }}"></script>
    <script src="{{ asset('js/tinymce.min.js') }}"></script>
    <script>

        var table;
        var colFilterData = {};
        var activeColFilters = {};
        var syncingTopFilter = false;
        var columnKeys = @json(array_column($leadTableColumns, 'key'));
        var allowedColumnKeys = @json($allowedColumnKeys);
        var initialVisibleColumnKeys = @json($visibleColumnKeys);
        var initialOrderedColumnKeys = @json($orderedColumnKeys);
        var columnPreferenceUrl = @json(route('crm.table-preferences.store', ['table' => $tableType]));
        var preferenceReady = false;
        var preferenceSaveTimer = null;
        var preferenceSaveInFlight = false;
        var preferenceSaveQueued = false;
        if ($.fn.selectpicker) {
            try {
                // bootstrap-select 1.14 does not create the optional public
                // `defaults` object until an application supplies one.
                $.fn.selectpicker.defaults = $.extend({}, $.fn.selectpicker.defaults || {}, {
                    selectAllText: 'Select All',
                    deselectAllText: 'Clear'
                });
                $('.crm-multi-filter').selectpicker();
            } catch (filterEnhancementError) {
                // A cosmetic filter-plugin failure must never prevent the
                // server-side Clients table from loading.
                console.error('Could not enhance client filters.', filterEnhancementError);
            }
        }
        var lastConfirmedPreference = {
            visible_columns: initialVisibleColumnKeys.slice(),
            column_order: initialOrderedColumnKeys.slice()
        };

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

        function syncTopFilter(origIdx, val) {
            var controlMap = {
                10: '#record-filter-brand',
                11: '#lead-filter-status',
                12: '#record-filter-desk',
                13: '#lead-filter-assignee',
                14: '#lead-filter-country',
                20: '#record-filter-funnel'
            };
            if (controlMap[origIdx]) {
                var values = val === '' || val === undefined ? [] : [String(val)];
                setMultiFilterValues(controlMap[origIdx], values);
            }
        }

        function setMultiFilterValues(selector, values) {
            syncingTopFilter = true;
            try {
                $(selector).selectpicker('val', values).selectpicker('refresh');
            } finally {
                syncingTopFilter = false;
            }
        }

        function currentColumnPreference() {
            var visible = [];
            columnKeys.forEach(function (key, originalIndex) {
                if (allowedColumnKeys.indexOf(key) !== -1 && columnByOriginal(originalIndex).visible()) {
                    visible.push(key);
                }
            });

            var order = table.colReorder.order().map(function (originalIndex) {
                return columnKeys[originalIndex];
            }).filter(function (key) {
                return allowedColumnKeys.indexOf(key) !== -1;
            });

            return { visible_columns: visible, column_order: order };
        }

        function applyColumnPreference(preference) {
            preferenceReady = false;
            var preferredIndexes = preference.column_order.map(function (key) {
                return columnKeys.indexOf(key);
            }).filter(function (index) {
                return index >= 0;
            });
            columnKeys.forEach(function (key, index) {
                if (preferredIndexes.indexOf(index) === -1) preferredIndexes.push(index);
            });
            table.colReorder.order(preferredIndexes, true);

            columnKeys.forEach(function (key, originalIndex) {
                var visible = allowedColumnKeys.indexOf(key) !== -1
                    && preference.visible_columns.indexOf(key) !== -1;
                columnByOriginal(originalIndex).visible(visible, false);
                $('.column_filter[data-column-key="' + key + '"]').prop('checked', visible);
            });
            table.columns.adjust().draw(false);
            preferenceReady = true;
        }

        function showPreferenceSaveError(message) {
            if (window.Swal) {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'error',
                    title: message,
                    showConfirmButton: false,
                    timer: 3500
                });
            }
        }

        function persistColumnPreference() {
            if (!preferenceReady) return;
            if (preferenceSaveInFlight) {
                preferenceSaveQueued = true;
                return;
            }

            var payload = currentColumnPreference();
            preferenceSaveInFlight = true;
            $.ajax({
                url: columnPreferenceUrl,
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    visible_columns: payload.visible_columns,
                    column_order: payload.column_order
                }
            }).done(function (response) {
                lastConfirmedPreference = {
                    visible_columns: response.visible_columns.slice(),
                    column_order: response.column_order.slice()
                };
            }).fail(function (xhr) {
                preferenceSaveQueued = false;
                applyColumnPreference(lastConfirmedPreference);
                showPreferenceSaveError(xhr.responseJSON && xhr.responseJSON.message
                    ? xhr.responseJSON.message
                    : 'Column preferences could not be saved.');
            }).always(function () {
                preferenceSaveInFlight = false;
                if (preferenceSaveQueued) {
                    preferenceSaveQueued = false;
                    persistColumnPreference();
                }
            });
        }

        function scheduleColumnPreferenceSave() {
            if (!preferenceReady) return;
            window.clearTimeout(preferenceSaveTimer);
            preferenceSaveTimer = window.setTimeout(persistColumnPreference, 350);
        }

        $(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,
                    width: '32px',
                    className: 'text-center',
                    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", defaultContent: ""},
                {data: "id", name: "id", defaultContent: ""},
                {data: "first_name", name: "first_name", defaultContent: ""},
                {data: "lname", name: "lname", defaultContent: ""},
                {data: "email", name: "email", defaultContent: ""},
                {
                    data: "connected_calls",
                    name: "connected_calls",
                    defaultContent: "",
                    orderable: true,
                    render: function(data, type, row) {
                        if (type === 'display') {
                            var connected = row.connected_calls ?? 0;
                            var total     = row.total_calls ?? 0;
                            return '<span title="Connected / Total">' + connected + ' <span style="color:#999;font-size:.8em">[' + total + ']</span></span>';
                        }
                        return data;
                    }
                },
                {data: "phone", name: "phone", defaultContent: ""},
                {data: "send_sms", name: "send_sms", defaultContent: ""},
                {data: "whatsapp", name: "whatsapp", defaultContent: ""},
                {data: "brand", name: "brand", defaultContent: ""},
                {data: "status_drop", name: "status_drop", defaultContent: ""},
                {data: "desk", name: "desk", defaultContent: ""},
                {data: "user", name: "user", defaultContent: ""},
                {data: "country", name: "country", defaultContent: ""},
                {data: "ftd", name: "ftd", defaultContent: ""},
                {data: "amount", name: "amount", defaultContent: ""},
                {data: "file_name", name: "file_name", defaultContent: ""},
                {data: "create_date", name: "create_date", defaultContent: ""},
                {data: "aff_source_id", name: "aff_source_id", defaultContent: ""},
                {data: "funnel_name", name: "funnel_name", defaultContent: ""},
                {data: "added_by", name: "added_by", orderable: false, defaultContent: ""},
                @if($isClient)
                {data: "ftd_date", name: "ftd_date", defaultContent: "—"},
                {data: "last_deposit_date", name: "last_deposit_date", defaultContent: "—"},
                {data: "last_note_date", name: "last_note_date", defaultContent: "—"},
                {data: "last_portal_login", name: "last_portal_login_at", defaultContent: "Never"},
                {data: "portal_status", name: "last_portal_activity_at", className: "client-presence-cell", defaultContent: ""},
                @endif
            ];

            // DataTables' default error mode opens a technical browser alert. Authentication
            // expiry is handled below and other failures are shown inside the page instead.
            $.fn.dataTable.ext.errMode = 'none';

            // ordering or sorting
            table = $('#leads_table').DataTable({
                pageLength: 50,
                lengthMenu: [10, 25, 50, 100],
                dom: '<"leads-table-top"<"leads-table-top-left"li>>rt<"leads-table-footer"<"leads-table-footer-right"p>>',
                ajax: {
                    url: "{{ $isRecovery ? route('customers') : ($isClient ? route('clients') : route('leads')) }}",
                    error: function (xhr) {
                        if (xhr.status === 401 || xhr.status === 419) {
                            window.location.assign(@json(route('login')) + '?intended=' + encodeURIComponent(window.location.href));
                            return;
                        }

                        var existing = document.getElementById('leads-table-error');
                        if (!existing) {
                            existing = document.createElement('div');
                            existing.id = 'leads-table-error';
                            existing.className = 'alert alert-danger mx-3 mt-3 mb-0';
                            existing.setAttribute('role', 'alert');
                            var tableNode = document.getElementById('leads_table');
                            tableNode?.parentElement?.insertBefore(existing, tableNode);
                        }
                        existing.textContent = 'The client list could not be loaded. Please refresh the page and try again.';
                    },
                    data: function (requestData) {
                        requestData.statuses = $('#lead-filter-status').val() || [];
                        requestData.assigned_user_ids = $('#lead-filter-assignee').val() || [];
                        requestData.countries = $('#lead-filter-country').val() || [];
                        requestData.brands = $('#record-filter-brand').val() || [];
                        requestData.desk_ids = $('#record-filter-desk').val() || [];
                        requestData.funnel_names = $('#record-filter-funnel').val() || [];

                        if ($('#record-filter-date-mode').val() === 'range') {
                            requestData.date_from = $('#record-filter-date-from').val() || '';
                            requestData.date_to = $('#record-filter-date-to').val() || '';
                        } else {
                            var specificDate = $('#record-filter-date-specific').val() || '';
                            requestData.date_from = specificDate;
                            requestData.date_to = specificDate;
                        }
                    }
                },
                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 — dark-mode-aware
                    var isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
                    var color = '';
                    if (isDark) {
                        switch (data._row_status) {
                            case 'Test':           color = 'rgba(114,124,245,.15)';break;
                            case 'Call back':      color = 'rgba(249,200,81,.15)'; break;
                            case 'In Call':        color = 'rgba(57,175,209,.22)'; break;
                            case 'Straight to voicemail': color = 'rgba(140,150,165,.12)'; break;
                            case 'FTD':            color = 'rgba(10,207,151,.2)';  break;
                            case 'No Money':       color = 'rgba(168,140,90,.18)'; break;
                            case 'Low Potential':  color = 'rgba(249,200,81,.15)'; break;
                            case 'Failed Deposit': color = 'rgba(246,70,93,.18)';  break;
                            case 'Wrong info':     color = 'rgba(246,70,93,.08)'; break;
                            case 'Wrong number':   color = 'rgba(246,70,93,.16)'; break;
                            case 'Need to call':   color = 'rgba(57,175,209,.15)'; break;
                            case 'Callback':       color = 'rgba(249,200,81,.15)'; break;
                            case 'Interested':     color = 'rgba(57,175,209,.15)'; break;
                            case 'Awaiting deposit': color = 'rgba(249,200,81,.13)'; break;
                            case 'In the money':   color = 'rgba(10,207,151,.2)'; break;
                            case 'New':            color = '';                    break;
                            case 'Call again':     color = 'rgba(249,200,81,.15)'; break;
                            case 'No answer':      color = 'rgba(246,70,93,.12)';  break;
                            case 'hangup':         color = 'rgba(246,70,93,.12)';  break;
                            case 'Cross lead':     color = 'rgba(99,102,241,.15)'; break;
                            case 'Not Qualified':  color = 'rgba(249,115,22,.15)'; break;
                            case 'Not interested': color = 'rgba(114,124,245,.15)';break;
                            case 'Wrong Details':  color = 'rgba(255,255,255,.04)';break;
                            case 'Deposit':        color = 'rgba(10,207,151,.2)';  break;
                            case 'In progress':    color = 'rgba(57,175,209,.15)'; break;
                            case 'Meeting':        color = 'rgba(10,207,151,.12)'; break;
                            case 'No money':       color = 'rgba(122,114,96,.4)';  break;
                            case 'Language barrier':color= 'rgba(169,86,84,.35)';  break;
                            case 'Drain out':      color = 'rgba(168,197,222,.2)'; break;
                            default:               color = '';
                        }
                    } else {
                        switch (data._row_status) {
                            case 'Test':           color = '#eee9ff';  break;
                            case 'Call back':      color = '#fff4d3';  break;
                            case 'In Call':        color = '#dff3ff';  break;
                            case 'Straight to voicemail': color = '#eef1f5'; break;
                            case 'FTD':            color = '#d9f7e8';  break;
                            case 'No Money':       color = '#f4ead7';  break;
                            case 'Low Potential':  color = '#fff3cd';  break;
                            case 'Failed Deposit': color = '#f8d7da';  break;
                            case 'Wrong info':     color = '#f1f1f1';  break;
                            case 'Wrong number':   color = '#f8d7da';  break;
                            case 'Need to call':   color = '#e3ecf7';  break;
                            case 'Callback':       color = '#fff4d3';  break;
                            case 'Interested':     color = '#e3ecf7';  break;
                            case 'Awaiting deposit': color = '#fff3cd'; break;
                            case 'In the money':   color = '#d9f7e8';  break;
                            case 'New':            color = '';         break;
                            case 'Call again':     color = '#fff4d3';  break;
                            case 'No answer':      color = '#ffeeed';  break;
                            case 'hangup':         color = '#f8d7da';  break;
                            case 'Cross lead':     color = '#e0e7ff';  break;
                            case 'Not Qualified':  color = '#ffe4d6';  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
                // ],
            });

            applyColumnPreference(lastConfirmedPreference);

            var searchTimer = null;
            $('#lead-filter-search').on('input', function () {
                var value = this.value;
                window.clearTimeout(searchTimer);
                searchTimer = window.setTimeout(function () {
                    table.search(value).page('first').draw('page');
                }, 300);
            });

            $('.crm-multi-filter').on('change', function () {
                if (syncingTopFilter) return;
                var columnMap = {
                    'lead-filter-status': 11,
                    'lead-filter-assignee': 13,
                    'lead-filter-country': 14,
                    'record-filter-brand': 10,
                    'record-filter-desk': 12,
                    'record-filter-funnel': 20
                };
                var origIdx = columnMap[this.id];
                if (origIdx !== undefined) {
                    delete activeColFilters[origIdx];
                    columnByOriginal(origIdx).search('');
                }
                table.ajax.reload(null, true);
            });

                $('.record-advanced-filter').on('change', function () {
                    var advancedColumnMap = {
                        'record-filter-brand': 10,
                        'record-filter-desk': 12,
                        'record-filter-funnel': 20
                    };
                    if (advancedColumnMap[this.id] !== undefined) {
                        var advancedColumn = advancedColumnMap[this.id];
                        delete activeColFilters[advancedColumn];
                        columnByOriginal(advancedColumn).search('');
                    }
                    if (this.id === 'record-filter-date-from') {
                        var fromDate = $(this).val() || '';
                        $('#record-filter-date-to').attr('min', fromDate);
                        if (fromDate && $('#record-filter-date-to').val() && $('#record-filter-date-to').val() < fromDate) {
                            $('#record-filter-date-to').val(fromDate);
                        }
                    }
                    table.page('first').draw('page');
                });

                $('#record-filter-date-mode').on('change', function () {
                    var useRange = $(this).val() === 'range';
                    $('#record-filter-specific-wrap').toggle(!useRange);
                    $('#record-filter-range-wrap').toggleClass('is-active', useRange);
                    table.page('first').draw('page');
                });

                $('#record-filter-clear').on('click', function () {
                    window.clearTimeout(searchTimer);
                    activeColFilters = {};
                    $('#lead-filter-search').val('');
                    setMultiFilterValues('.crm-multi-filter', []);
                    $('#record-filter-date-specific, #record-filter-date-from, #record-filter-date-to').val('');
                    $('#record-filter-date-to').removeAttr('min');
                    $('#record-filter-date-mode').val('specific');
                    $('#record-filter-specific-wrap').show();
                    $('#record-filter-range-wrap').removeClass('is-active');
                    table.search('').columns().search('').page('first').draw('page');
                });

            /* ── Per-column ⋮ filter data ── */
            colFilterData = {
                1:  { opts: @json($leadLists->map(fn($l) => ['v' => (string)$l->id, 'l' => $l->list_name])) },
                10: { opts: @json($brands->map(fn($b) => ['v' => $b, 'l' => $b])) },
                11: { opts: @json(collect($isRecovery ? \App\Support\LeadStatusRegistry::RECOVERY_OUTCOMES : \App\Support\LeadStatusRegistry::forClient((bool) $isClient))->map(fn($status) => ['v' => $status, 'l' => $status])) },
                12: { opts: @json(collect([['v' => '__unassigned__', 'l' => 'Unassigned']])->concat($desks->map(fn($d) => ['v' => (string)$d->id, 'l' => $d->name]))) },
                13: { opts: @json(collect([['v' => '__unassigned__', 'l' => 'Unassigned']])->concat($users->map(fn($u) => ['v' => (string)$u->id, 'l' => $u->name]))) },
                14: { opts: @json($countries->map(fn($c) => ['v' => $c, 'l' => $c])) },
                20: { opts: @json($funnels->map(fn($f) => ['v' => $f, 'l' => $f])->prepend(['v' => '__none__', 'l' => 'No funnel'])) },
            };

            function addColMenus() {
                $('#leads_table thead th').each(function () {
                    if ($(this).find('.col-menu-btn').length) return;
                    var thVisIdx = $(this).index();
                    var origIdx  = table ? table.column(thVisIdx).index('original') : thVisIdx;
                    var filterable = colFilterData.hasOwnProperty(origIdx);
                    var cls = 'col-menu-btn' + (filterable ? ' filterable' : '');
                    if (filterable && activeColFilters[origIdx]) cls += ' cf-active';
                    $(this).prepend('<button type="button" class="' + cls + '" data-orig="' + origIdx + '" title="' + (filterable ? 'Filter' : '') + '">⋮</button>');
                });
            }
            addColMenus();

            $('#leads_table').on('column-reorder.dt', function () {
                // Remove existing buttons so they get rebuilt with correct orig indices
                $('#leads_table thead th .col-menu-btn').remove();
                addColMenus();
                scheduleColumnPreferenceSave();
            });

            /* Refresh active-filter highlights after each draw */
            table.on('draw.dt', function () {
                $('#leads_table thead th .col-menu-btn').each(function () {
                    var origIdx = parseInt($(this).data('orig'), 10);
                    if (activeColFilters[origIdx]) {
                        $(this).addClass('cf-active');
                    } else {
                        $(this).removeClass('cf-active');
                    }
                });
            });

        });

        // Handle change event of checkbox
        $('#column_filters').on('change', '.column_filter', function () {
            var origIdx = parseInt($(this).data('column'), 10);
            var isVisible = $(this).is(':checked');
            if (!isVisible && $('#column_filters .column_filter:checked').length === 0) {
                $(this).prop('checked', true);
                showPreferenceSaveError('At least one column must remain visible.');
                return;
            }
            columnByOriginal(origIdx).visible(isVisible);
            scheduleColumnPreferenceSave();
        });

        /* ── Per-column ⋮ filter dropdown ── */
        $(document).on('click', '.col-menu-btn.filterable', function (e) {
            e.stopPropagation();
            var $btn    = $(this);
            var origIdx = parseInt($btn.data('orig'), 10);
            var opts    = colFilterData[origIdx] ? colFilterData[origIdx].opts : [];
            var $menu   = $('#col-filter-menu');

            // Build menu items
            var html = '<div class="cf-item' + (!activeColFilters[origIdx] ? ' cf-active' : '') + '" data-orig="' + origIdx + '" data-val="">(All)</div>';
            html += '<div class="cf-divider"></div>';
            opts.forEach(function (o) {
                var active = (activeColFilters[origIdx] === o.v) ? ' cf-active' : '';
                html += '<div class="cf-item' + active + '" data-orig="' + origIdx + '" data-val="' + $('<div>').text(o.v).html() + '">' + $('<div>').text(o.l).html() + '</div>';
            });
            $menu.html(html);

            // Position below the button
            var rect = this.getBoundingClientRect();
            $menu.css({ top: (rect.bottom + window.scrollY) + 'px', left: (rect.left + window.scrollX) + 'px' }).show();
        });

        $(document).on('click', '#col-filter-menu .cf-item', function (e) {
            e.stopPropagation();
            var origIdx = parseInt($(this).data('orig'), 10);
            var val     = $(this).data('val');

            if (val === '' || val === undefined) {
                delete activeColFilters[origIdx];
            } else {
                activeColFilters[origIdx] = String(val);
            }

            syncTopFilter(origIdx, val);
            columnByOriginal(origIdx).search(val !== undefined ? String(val) : '').page('first').draw('page');
            $('#col-filter-menu').hide();
        });

        // Close dropdown on outside click
        $(document).on('click', function (e) {
            if (!$(e.target).closest('#col-filter-menu, .col-menu-btn').length) {
                $('#col-filter-menu').hide();
            }
        });

        function openemailbox(to_email) {
            $("#to").val(to_email);
            $("#send_email_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();
            document.dispatchEvent(new Event('crm:table-drawn'));
        });

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

    @if($isClient)
    <script src="{{ asset('js/crm-client-presence.js') }}?v=2"></script>
    <script>CrmClientPresence.start({url: @json(route('clients.presence'))});</script>
    @endif


@endsection