@extends('layout.app')
@php
    $roleGlobal = auth()->user()?:[];
    $checkRole = checkRoleAlready();
@endphp
@section('_style')
    <link href="{{ asset('css/customer.css') }}" rel="stylesheet"/>
    <link href="{{ asset('assets/css/toggle-switch-custom.css') }}" rel="stylesheet"/>
    <style>
        .card i {
            color: #3b8fec !important;
        }

        .description-cus {
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            overflow-y: hidden;
            transition: ease 0.2s all;
            line-height: 20px;
            font-size: 11px;
            border: none;
        }

        .description-cus:focus, .description-cus:hover {
            height: 70px;
            width: 400px !important;
            z-index: 9999;
            box-shadow: 0 0 10px #ddd;
        }

        th.text-white.text-center{
        /*z-index: 1;*/
        }
    </style>
    <script type="text/javascript" src="{{asset('layout/js/enumSipCode.js')}}"></script>
    <script>
        $(document).ready(function() {
            $("#search").focus();
            // Ctrl/Cmd + K: nhảy nhanh vào ô tìm kiếm
            $(document).on('keydown', function (e) {
                if ((e.ctrlKey || e.metaKey) && (e.key === 'k' || e.key === 'K')) {
                    e.preventDefault();
                    $("#search").focus().select();
                }
            });
        });
        function requestMicrophoneAccess() {
            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                alertify.error('Trình duyệt của bạn không hỗ trợ microphone. !');
                return;
            }
            navigator.mediaDevices.getUserMedia({audio: true})
                .then(function (stream) {
                    console.log('Microphone đã được kết nối');
                })
                .catch(function (err) {
                    alertify.warning('Chưa kết nối Microphone !');
                });
        }

        (function (a,b) {
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.onload = ()=>{PitelSDK.k=a;b()};
            s.src = '{{asset('layout/js/sdk-1.1.6.min.js')}}';
            var x = document.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s, x);
        })('4187f03f-a78e-4040-8c4b-b17eaeaaa60f', ()=>{
            console.log('Pitel SDK Loaded');
        });

        (function() {
            const OriginalWebSocket = window.WebSocket;
            window.WebSocket = function(url, protocols) {
                const wsInstance = new OriginalWebSocket(url, protocols);
                wsInstance.addEventListener('message', function(event) {

                    const lines = event.data.split('\r\n');
                    const statusLine = lines[0];
                    const statusCode = parseInt(statusLine.split(' ')[1]);
                    if(statusCode > 401){
                        if (statusCode === 486) {
                            alertify.error('Máy bận !')
                        } else if (statusCode === 407) {
                            alertify.success('Đang kết nối cuộc gọi... (407)')
                        } else {
                            alertify.error((sipStatusMessages[statusCode] ?? 'Error:') + ' (' + statusCode + ')')
                        }
                    }
                });

                return wsInstance;
            };
        })();

        setTimeout(function(){
            let caller_number = '{{\Illuminate\Support\Facades\Auth::user()->caller_number}}';
            let pitelP = '{{\Illuminate\Support\Facades\Auth::user()->pitel_password}}';

            let sdkOptions = {
                enableWidget: true,
                sipOnly: true,
                sipDomain: '{{config('app.SIP_DOMAIN')}}',
                wsServer: "wss://cgvcall.mobilesip.vn:7444",
                sipPassword: pitelP
            }
            let pitelSDK = new PitelSDK('{{config('app.SIP_DOMAIN')}}', 'xxx', caller_number, {}, sdkOptions)// số máy nhân viên

            // Gọi hàm khi nhấn nút
            requestMicrophoneAccess();
            $(document).on('click','#callButton',function () {
                let phone = $(this).data('phone');
                phone = phone.split(' ').join('');
                console.log(phone,'phone');
                pitelSDK.call(phone, {
                    extraHeaders: ['x-PROCESS-ID: 123'],
                    earlyMedia: true
                });
            });
        }, 2000);
    </script>
@endsection
@section('content')
    <div class="col-md-12 col-lg-12 crm-page customers-page">
        <div class="crm-page-header border-bottom pb-3 mb-4">
            <div class="crm-page-header__main">
                <h1 class="crm-page-header__title color-h1 font-weight-bold"><i class="fas fa-users mr-2 text-primary"></i> Danh sách khách hàng</h1>
            </div>
            <div class="crm-page-header__actions mt-3 mt-md-0 d-flex align-items-center flex-wrap">
                <div class="crm-page-header__subactions d-flex">
                    <a {{$roleGlobal->permission('customer.import')?:"style=display:none"}}
                       class="btn btn-sm crm-header-btn-icon crm-header-btn-icon--soft mb-2 mb-md-0"
                       href="#"
                       data-toggle="modal"
                       data-target="#myModal"
                       title="Nhập dữ liệu khách hàng (Import)"
                       data-placement="bottom"
                       rel="tooltip"
                       aria-label="Nhập dữ liệu">
                        <i class="fas fa-cloud-upload-alt"></i>
                    </a>
                    <a {{$roleGlobal->permission('customer.export')?:"style=display:none"}}
                       class="btn btn-sm crm-header-btn-icon crm-header-btn-icon--soft mb-2 mb-md-0"
                       href="#"
                       data-toggle="modal"
                       data-target="#myModalExport"
                       title="Tải dữ liệu khách hàng (Export)"
                       data-placement="bottom"
                       rel="tooltip"
                       aria-label="Tải dữ liệu">
                        <i class="fas fa-cloud-download-alt"></i>
                    </a>
                </div>
                @if($roleGlobal->permission('customers.add'))
                    <a class="btn btn-primary btn-sm crm-header-btn-icon mb-2 mb-md-0"
                       href="{{ route('customers.create') }}"
                       data-toggle="tooltip"
                       title="Thêm khách hàng"
                       data-placement="bottom"
                       rel="tooltip"
                       aria-label="Thêm khách hàng">
                        <i class="fas fa-plus"></i>
                    </a>
                @endif
            </div>
        </div>
        <div class="card crm-card">
            <form id="gridFormA">
                <div class="card-header search-box searchbox-sticky crm-filter-bar">
                    <div class="col-md-3 col-xs-12 crm-search-field">
                        <i class="fas fa-search crm-search-field__icon"></i>
                        <input class="form-control" name="search" placeholder="Tìm tên, SĐT, mã khách hàng..."
                               tabindex="1" type="text" id="search">
                        <kbd class="crm-search-field__kbd" title="Nhấn Ctrl + K để tìm nhanh">Ctrl + K</kbd>
                    </div>
                    <div class="col-md-2 col-xs-12 crm-filter-field">
                        <i class="fas fa-user crm-filter-field__icon"></i>
                        <select name="telesales_id" id="telesales_id" class="form-control telesales select2">
                            <option value="">Người phụ trách</option>
                            @foreach($telesales as $k => $l)
                                @foreach($l as $kl => $vl)
                                    <option
                                        {{@$customer->telesales_id == $vl?'selected':''}} value="{{ $vl }}">{{ $kl }}</option>
                                @endforeach
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 col-xs-12 crm-filter-field">
                        <i class="fas fa-th-large crm-filter-field__icon"></i>
                        <select name="group" class="form-control group select2">
                            <option value="">Nhóm dịch vụ</option>
                            @foreach($categories as $item)
                                <option value="{{$item->id}}">{{ $item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 col-xs-12 crm-filter-field">
                        <i class="far fa-calendar-check crm-filter-field__icon"></i>
                        <select name="call_back" class="form-control call_back">
                            <option value="">Tất cả công việc</option>
                            <option value="{{\App\Constants\StatusCode::GOI_LAI}}">GỌI LẠI</option>
                        </select>
                    </div>
                    <div class="col-xs-12 crm-filter-field" style="max-width: 170px">
                        @if(empty($checkRole))
                            <i class="fas fa-map-marker-alt crm-filter-field__icon"></i>
                            <select name="branch_id" class="form-control branch_id">
                                <option value="">Tất cả chi nhánh</option>
                                @foreach($branchs as $k=> $item)
                                    <option {{$loop->first?'selected':''}} value="{{$k}}">{{ $item}}</option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                    <div class="heading-elements crm-filter-toggle">
                        <ul class="list-inline mb-0">
                            <li><a style="display: none" href="#" class="angleDoubleUp crm-filter-toggle__btn is-open" title="Thu gọn bộ lọc">
                                    <i class="fas fa-sliders-h"></i><span>Thu gọn</span></a></li>
                            <li><a href="#" class="angleDoubleDown crm-filter-toggle__btn" title="Mở bộ lọc nâng cao">
                                    <i class="fas fa-sliders-h"></i><span>Bộ lọc</span></a></li>
                        </ul>
                    </div>
                </div>
                @include('customers.dropdownFilter')
            </form>
            <div id="registration-form">
                @include('customers.ajax')
            </div>
            @include('customers.modal')
            @include('customers.modal-export')
            @include('customers.modal-update-relation')
            @include('customers.modal-update-account-manager')
            @include('customers.modal-branch')
            @include('kanban_board.modal')
            @include('customers._include.modal_qr')
            <input type="hidden" id="status">
            <input type="hidden" id="invalid_account">
            <input type="hidden" id="group">
            <input type="hidden" id="group_product">
            <input type="hidden" id="source">
            <input type="hidden" id="telesales">
            <input type="hidden" id="search_value">
            <input type="hidden" id="btn_choose_time">
            <input type="hidden" id="birthday_tab">
        </div>
    </div>
@endsection
@section('_script')
    <script type="text/javascript" src="{{asset('assets/js/qr-code-styling.min.js')}}"></script>
    <script type="text/javascript">
        $("#search").focus();
        $(function () {
            /* ================================================================
             * HÀM DÙNG CHUNG
             * ================================================================ */

            var $customerList = $('#registration-form');

            // Nơi đọc giá trị của từng tham số lọc gửi lên server:
            // input ẩn (#...) giữ bộ lọc đang áp dụng, select (.xxx) là bộ lọc trên thanh tìm kiếm.
            var FILTER_SOURCES = {
                carepage_id: '.carepage',
                status: '#status',
                data_time: '#btn_choose_time',
                group: '#group',
                telesales: '#telesales',
                search: '#search_value',
                source: '#source',
                marketing: '#group_product',
                branch_id: '.branch_id',
                location_id: '.location',
                cskh_id: '.cskh',
                gender: '.gender',
                call_back: '.call_back',
                invalid_account: '#invalid_account',
                birthday: '#birthday_tab'
            };

            /**
             * Gom các tham số lọc theo danh sách key, rồi ghi đè bằng giá trị riêng của từng thao tác.
             * Giữ nguyên cả giá trị undefined để request gửi lên y hệt trước đây.
             *
             * @param {Array}  keys      Các key trong FILTER_SOURCES cần gửi
             * @param {Object} overrides Giá trị riêng (ví dụ page, status vừa chọn...)
             * @returns {Object}
             */
            function collectFilters(keys, overrides) {
                var data = {};
                keys.forEach(function (key) {
                    data[key] = $(FILTER_SOURCES[key]).val();
                });
                Object.keys(overrides || {}).forEach(function (key) {
                    data[key] = overrides[key];
                });
                return data;
            }

            /**
             * Tải lại danh sách khách hàng theo bộ lọc, có hiệu ứng loading.
             *
             * @param {Object} data Tham số lọc
             * @param {String} url  Mặc định là trang danh sách khách hàng
             * @returns {jqXHR}
             */
            function loadCustomerList(data, url) {
                $customerList.addClass('crm-loading');
                return $.ajax({
                    url: url || "{{ Url('customers/') }}",
                    method: "get",
                    data: data
                }).done(function (html) {
                    $('.load').hide();
                    $customerList.html(html);
                    initDatepicker();
                }).always(function () {
                    $customerList.removeClass('crm-loading');
                });
            }

            function initDatepicker() {
                $('[data-toggle="datepicker"]').datepicker({
                    format: 'dd-mm-yyyy',
                    autoHide: true,
                    zIndex: 99999,
                });
            }

            // Trì hoãn gọi hàm tới khi người dùng ngừng thao tác `ms` mili giây
            function delay(callback, ms) {
                var timer = 0;
                return function () {
                    var context = this, args = arguments;
                    clearTimeout(timer);
                    timer = setTimeout(function () {
                        callback.apply(context, args);
                    }, ms || 0);
                };
            }

            // ID các khách hàng đang được tick chọn trong bảng
            function getCheckedIds() {
                return $('td .myCheck:checked').map(function () {
                    return $(this).val();
                }).get();
            }

            // Hỏi xác nhận rồi gửi thao tác hàng loạt cho các khách hàng đang chọn, xong thì tải lại trang
            function confirmBulkAction(swalOptions, url) {
                let ids = getCheckedIds();

                swal($.extend({
                    showCancelButton: true,
                    cancelButtonClass: 'btn-secondary waves-effect',
                    confirmButtonClass: 'btn-danger waves-effect waves-light',
                    confirmButtonText: 'OK'
                }, swalOptions), function () {
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: {
                            ids: ids,
                        },
                        success: function () {
                            window.location.reload();
                        }
                    })
                })
            }

            // Cập nhật hàng loạt cho các khách hàng đang chọn, xong thì tải lại trang
            function bulkUpdate(url, data) {
                $.ajax({
                    url: url,
                    method: "post",
                    data: $.extend({ids: getCheckedIds()}, data)
                }).done(function () {
                    window.location.reload();
                });
            }

            // Cập nhật nhanh một trường của khách hàng (sửa trực tiếp trên bảng)
            function updateCustomer(id, data) {
                return $.ajax({
                    url: "ajax/customers/" + id,
                    method: "put",
                    data: data
                });
            }

            /**
             * Sửa trực tiếp trên bảng: khi ô nhập `selector` thay đổi thì lưu `field`,
             * sau đó gọi `render(target, data)` để hiển thị lại giá trị mới.
             */
            function bindInlineSave(events, selector, field, render) {
                $(document).on(events, selector, function (e) {
                    let target = $(e.target).parent();
                    let data = {};
                    data[field] = $(target).find(selector).val();

                    updateCustomer($(this).data('id'), data).done(function (res) {
                        render && render(target, res);
                    });
                });
            }

            // Sinh danh sách <option> cho select
            function renderOptions(items, isSelected, labelKey, optionClass) {
                return items.map(function (item) {
                    return '<option value="' + item.id + '"' + (optionClass ? ' class="' + optionClass + '"' : '') + ' ' + (isSelected(item) ? "selected" : "") + '>' + item[labelKey] + '</option>';
                }).join('');
            }

            /**
             * Double click vào ô trên bảng => thay nội dung ô bằng select để chọn lại giá trị.
             *
             * @param {Event}  e
             * @param {Object} opts cell, url, id, selectClass, name, selectedKey, labelKey
             */
            function openSelectEditor(e, opts) {
                let target = $(e.target).parent();
                $(target).find(opts.cell).empty();

                $.ajax({
                    url: opts.url,
                    method: "get",
                    data: {id: opts.id}
                }).done(function (data) {
                    let html = '<select class="' + opts.selectClass + '" data-id="' + data.customer.id + '" name="' + opts.name + '" style="font-size: 14px;">'
                        + renderOptions(data.data, function (item) {
                            return item.id === data.customer[opts.selectedKey];
                        }, opts.labelKey)
                        + '</select>';
                    $(target).find(opts.cell).append(html);
                });
            }

            /**
             * Double click vào ô nhóm => thay nội dung ô bằng select nhiều lựa chọn (select2).
             *
             * @param {Event}  e
             * @param {Object} opts cell, url, id, selectClass, optionClass, isSelected(item, selectedIds)
             */
            function openMultiSelectEditor(e, opts) {
                let target = $(e.target).parent();
                $(target).find(opts.cell).empty();

                $.ajax({
                    url: opts.url,
                    method: "get",
                    data: {id: opts.id}
                }).done(function (data) {
                    let html = '<select class="' + opts.selectClass + ' form-control select2-multiple" multiple="multiple" data-id="' + data.customer_id + '" name="group_id[]">'
                        + renderOptions(data.categories, function (item) {
                            return opts.isSelected(item, data.category_id);
                        }, 'name', opts.optionClass)
                        + '</select>';
                    $(target).find(opts.cell).append(html);

                    $('.select2-multiple').select2({ //apply select2 to my element
                        placeholder: "Chọn nhóm KH",
                        allowClear: true
                    });
                });
            }

            /**
             * Lưu select nhiều lựa chọn khi người dùng chọn xong (không lưu khi select2 còn đang mở).
             */
            function bindMultiSelectSave(selector, field, render) {
                $(document.body).on("change", selector, function (e) {
                    if (!($(selector).parent().find('span.select2-container--focus').length) ||
                        $(selector).parent().find('.select2-container--below .selection  .select2-selection--multiple').length) {
                        let data = {};
                        data[field] = $(e.target).parent().find(selector).val();

                        updateCustomer($(e.target).parent().find(selector).data('id'), data).done(render);
                    }
                });
            }

            // Mở/đóng dropdown công cụ (số bản ghi/trang, thời gian tạo)
            function setDropdownOpen($dropdown, open) {
                $dropdown.toggleClass('show', open).find('.dropdown-menu').toggleClass('show', open);
            }

            function toggleToolDropdown($parent, onClose) {
                var isShown = $parent.hasClass('show') || $parent.find('.dropdown-menu').hasClass('show');
                setDropdownOpen($('.dropdown').not($parent), false);
                setDropdownOpen($parent, !isShown);
                if (isShown && onClose) {
                    onClose();
                }
            }

            // Đưa dropdown "Thời gian tạo" về danh sách mốc thời gian nhanh
            function resetCreatedAtPanel() {
                $(".other_time_panel").hide();
                $(".created-at-quick-links").show();
            }

            /* ================================================================
             * QR ZALO & TRAO ĐỔI NHANH
             * ================================================================ */

            $(document).on('click', '.zalo-qr', function (e) {
                e.preventDefault();
                $('#qrcodeTable').find('canvas').remove();
                const text = "https://zalo.me/"+$(this).data('phone');
                const account = "Khách hàng:"+$(this).data('account');
                $('.title-code').html(account);
                const qrCode = new QRCodeStyling({
                    width: 200,
                    height: 200,
                    type: "canvas",
                    data: text,
                    image: "{{asset('assets/images/zalo-qr.png')}}",
                    dotsOptions: {
                        type: "rounded"
                    },
                    cornersSquareOptions: {
                        type: "rounded"
                    },
                    imageOptions: {
                        hideBackgroundDots: true,
                    },
                    backgroundOptions: {
                        round: 0,
                        color: "#ffffff"
                    }
                });
                qrCode.append(document.getElementById("qrcodeTable"));
                $('#modal_qrcode').modal('show');
            });

            $(document).on('click', '.view_modal', function (e) {
                e.preventDefault();

                $('.customer-chat').empty();
                let id = $(this).data('customer-id');
                let check_show_button = false;
                $.ajax({
                    url: "{{ Url('/group_comments/') }}" + '/' + id,
                    method: "get",
                }).done(function (data) {
                    check_show_button = true;
                    let customer = data.customer;
                    // Danh sách nhóm dịch vụ, nối bằng dấu phẩy (bỏ dấu phẩy thừa cuối chuỗi như bản cũ)
                    let category = (customer.categories || []).map(function (item) {
                        return item.name;
                    }).join(', ');
                    let hidden_phone = {{auth()->user()->permission('phone.open') ? 'true' :'false'}};
                    let phoneNumber = hidden_phone == true ? customer.phone : customer.phone.slice(0, 7)+'xxx';
                    let totalComment = data.group_comments.length;

                    let statusOptions = '';
                    data.status.forEach(function (item) {
                        statusOptions += `<option value="` + item.id + `" ` + (item.id === customer.status_id ? "selected" : "") + `>` + item.name + `</option>`;
                    });

                    let html = `<div class="quick-chat">
                        <div class="quick-chat__profile">
                            <img class="quick-chat__avatar" src="` + (customer.avatar ? customer.avatar : '/default/noavatar.png') + `" alt="">
                            <div class="quick-chat__identity">
                                <a class="quick-chat__name" href="{{ url('customers') }}/` + customer.id + `" target="_blank" title="Xem chi tiết khách hàng">
                                    ` + customer.full_name + `
                                    ` + (customer.account_code ? `<span class="crm-badge crm-badge--pink">` + customer.account_code + `</span>` : '') + `
                                </a>
                                <div class="quick-chat__contact">
                                    <span><i class="fas fa-phone"></i>` + phoneNumber + `</span>
                                    ` + (category ? `<span><i class="fas fa-layer-group"></i>` + category + `</span>` : '') + `
                                </div>
                            </div>
                        </div>

                        <ul class="crm-fact-list quick-chat__facts">
                            <li>
                                <span class="crm-fact-list__icon"><i class="fas fa-headset"></i></span>
                                <span class="crm-fact-list__label">Telesale</span>
                                <span class="crm-fact-list__value">` + (customer.telesale ? customer.telesale.full_name : '—') + `</span>
                            </li>
                            <li>
                                <span class="crm-fact-list__icon crm-fact-list__icon--pink"><i class="fas fa-user-tie"></i></span>
                                <span class="crm-fact-list__label">CSKH</span>
                                <span class="crm-fact-list__value">` + (customer.cskh ? customer.cskh.full_name : '—') + `</span>
                            </li>
                            <li>
                                <span class="crm-fact-list__icon crm-fact-list__icon--success"><i class="fas fa-bullhorn"></i></span>
                                <span class="crm-fact-list__label">Nguồn khách hàng</span>
                                <span class="crm-fact-list__value">` + (customer.source_customer ? customer.source_customer.name : '—') + `</span>
                            </li>
                            <li>
                                <span class="crm-fact-list__icon crm-fact-list__icon--warning"><i class="far fa-calendar-check"></i></span>
                                <span class="crm-fact-list__label">Liên hệ lần cuối</span>
                                <span class="crm-fact-list__value">` + (data.last_contact ? data.last_contact : '—') + `</span>
                            </li>
                            <li>
                                <span class="crm-fact-list__icon crm-fact-list__icon--danger"><i class="fas fa-wallet"></i></span>
                                <span class="crm-fact-list__label">Giá trị</span>
                                <span class="crm-fact-list__value quick-chat__revenue">` + data.order_revenue + ` VNĐ</span>
                            </li>
                        </ul>

                        <div class="form-group required quick-chat__status">
                            {!! Form::label('status_id', 'Trạng thái', array('class' => 'control-label')) !!}
                            <select name="status_id" class="form-control status-result select2" data-id="` + customer.id + `">` + statusOptions + `</select>
                        </div>

                        <div class="quick-chat__composer">
                            {!! Form::textArea('messages', null, array('class' => 'form-control message', 'rows'=> 3, 'required' => 'required', 'placeholder' => 'Nhập nội dung trao đổi với khách hàng...')) !!}
                            <div class="quick-chat__composer-actions">
                                <button type="submit" class="btn btn-primary chat-save" id="chat-save" data-customer-id="">
                                    <i class="fas fa-paper-plane mr-1"></i>Lưu
                                </button>
                            </div>
                        </div>

                        <div class="quick-chat__tabs">
                            <button type="button" class="quick-chat__tab sale-note active">
                                <i class="far fa-comments"></i>Trao đổi <span class="quick-chat__count">` + totalComment + `</span>
                            </button>
                            <button type="button" class="quick-chat__tab message-chat" data-phone="` + customer.phone + `">
                                <i class="fas fa-comment-dots"></i>Zalo Message
                            </button>
                        </div>
                    </div>
                @include('message_zalo.index')
                <div class="chat-ajax quick-chat__timeline"></div>`;

                    let html1 = '';
                    data.group_comments.forEach(function (item) {
                        html1 += renderQuickComment(item, data.id_login);
                    });
                    if (!html1) {
                        html1 = `<div class="quick-chat__empty"><i class="far fa-comment-dots"></i>Chưa có trao đổi nào với khách hàng này</div>`;
                    }

                    $(".status-result").val(customer.status_id).change();
                    $('.customer-chat').append(html);
                    $('.chat-ajax').html(html1);
                    $('#view_chat').modal("show");
                    $('.chat-save').attr('data-customer-chat-id', data.customer.id);
                    $('#view_chat .chatApplication').hide();
                    if(!check_show_button){
                        $('#view_chat .message-chat').hide();
                        $('#view_chat .sale-note').hide();
                    } else {
                        $('#view_chat .message-chat').show();
                        $('#view_chat .sale-note').show();
                    }
                });
            });

            $(document).on('click', '.chat-save', function () {
                let customer_id = $(this).data('customer-chat-id');
                let messages = $('.message').val();
                $('.message').val('');

                $.ajax({
                    url: "{{ Url('/ajax/group-comments/') }}",
                    method: "post",
                    data: {
                        messages: messages,
                        customer_id: customer_id
                    }
                }).done(function (data) {
                    let comment = Object.assign({}, data.group_comment, {
                        full_name: data.group_comment.user ? data.group_comment.user.full_name : ''
                    });

                    $('.chat-ajax .quick-chat__empty').remove();
                    $('.chat-ajax').prepend(renderQuickComment(comment, data.id_login));
                    updateQuickCommentCount();
                });

            });

            /**
             * Render một tin trao đổi trong timeline của modal "Trao đổi nhanh".
             *
             * @param {Object} item    Bản ghi group_comment (cần full_name, created_at, messages, user_id, id)
             * @param {Number} idLogin ID người dùng đang đăng nhập, dùng để hiển thị nút sửa/xoá tin của chính mình
             * @returns {String} Chuỗi HTML của tin trao đổi
             */
            function renderQuickComment(item, idLogin) {
                let fullName = item.full_name ?? '';
                // Chữ cái đầu của tên (từ cuối cùng) làm avatar, ví dụ "Telesale Yến Nhi" -> "N"
                let initial = fullName.trim() ? fullName.trim().split(/\s+/).pop().charAt(0).toUpperCase() : '?';
                let tools = '';

                if (idLogin == item.user_id) {
                    tools = `<div class="tools-msg edit_area quick-chat__tools">
                        @if(!in_array('comment.edit',setting('permissions')??[]))
                        <a data-original-title="Sửa" rel="tooltip" title="Sửa">
                            <i class="fas fa-pen btn-edit-comment" data-id="` + item.id + `"></i>
                        </a>
                        <a data-original-title="Xóa" rel="tooltip" title="Xoá">
                            <i class="fas fa-trash-alt btn-delete-comment" data-id="` + item.id + `"></i>
                        </a>
                        @endif
                    </div>`;
                }

                return `<div class="comment-fast quick-chat__item">
                    <span class="quick-chat__item-avatar">` + initial + `</span>
                    <div class="quick-chat__item-body">
                        <div class="quick-chat__item-head">
                            <span class="quick-chat__author">` + fullName + `</span>
                            <span class="quick-chat__time"><i class="far fa-clock"></i>` + item.created_at + `</span>
                            ` + tools + `
                        </div>
                        <div class="comment quick-chat__message">` + (item.messages ?? '') + `</div>
                    </div>
                </div>`;
            }

            /**
             * Cập nhật lại số lượng tin trao đổi hiển thị trên tab "Trao đổi" sau khi thêm/xoá.
             */
            function updateQuickCommentCount() {
                $('#view_chat .quick-chat__count').text($('#view_chat .chat-ajax .comment-fast').length);
            }

            $(document).on('click', '.btn-edit-comment', function (e) {
                let target = $(e.target).closest('.comment-fast');
                let group_comment_id = $(this).data('id');

                $.ajax({
                    url: "{{ Url('group-comments/') }}" + "/" + group_comment_id + "/edit",
                    method: "get",
                }).done(function (data) {

                    let html = `<div class="quick-chat__edit">
                        <textarea name="messages" class="form-control message" rows="2" data-id="` + data.id + `">` + data.messages + `</textarea>
                        <div class="quick-chat__edit-actions">
                            <button type="submit" class="btn btn-primary btn-sm update-messages">Cập nhật</button>
                        </div>
                    </div>`;
                    $(target).find('.comment').empty();
                    $(target).find(".comment").append(html);
                });
            });

            $(document).on('click', '.update-messages', function (e) {
                let target = $(e.target).closest('.comment-fast');
                let messages = $(target).find('.message').val();
                let id = $(target).find('.message').data('id');

                $.ajax({
                    url: "{{ Url('group-comments/') }}" + "/" + id + "/edit",
                    method: "post",
                    data: {
                        messages: messages
                    }
                }).done(function (data) {
                    $(target).find('.message').empty();
                    $(target).find(".comment").html(data.messages);
                });
            });

            $(document).on('click', '.btn-delete-comment', function (e) {
                let target = $(e.target).closest('.comment-fast');
                let group_comment_id = $(this).data('id');

                let result = confirm("Bạn muốn xoá tin nhắn này?");
                if (result) {
                    $.ajax({
                        url: "{{ Url('group-comments/') }}" + "/" + group_comment_id + "/delete",
                        method: "delete",
                    }).done(function () {
                        // Chỉ xoá đúng tin vừa bấm, sau đó cập nhật lại bộ đếm trên tab
                        $(target).remove();
                        updateQuickCommentCount();
                    });
                }
            });

            /* ================================================================
             * BỘ LỌC & PHÂN TRANG
             * ================================================================ */

            $(document).on('click', '.status', function () {
                $('.crm-status-tabs .status').removeClass('active');
                $(this).addClass('active');
                let status = $(this).data('name');
                let data = collectFilters(
                    ['carepage_id', 'data_time', 'group', 'telesales', 'search', 'source', 'marketing', 'branch_id', 'location_id', 'cskh_id'],
                    {status: status}
                );

                $('#status').val(status);
                $('#birthday_tab').val('');
                loadCustomerList(data);
            });

            $(document).on('click', '.limiting', function (e) {
                e.preventDefault();
                let limit = $(this).data('limit');
                setDropdownOpen($(this).closest('.dropdown-page-limit'), false);
                $.ajax({
                    url: "{{ Url('/set-default-pagination') }}",
                    method: "post",
                    data: {limit: limit}
                }).done(function (data) {
                    alertify.success('Cập nhật bản ghi thành công !');
                    location.reload();
                });
            });

            // Delegated click handlers for tool dropdowns (page limit & created_at)
            $(document).on('click', '.dropdown-page-limit > .dropdown-toggle', function (e) {
                e.preventDefault();
                e.stopPropagation();
                toggleToolDropdown($(this).closest('.dropdown-page-limit'));
            });

            $(document).on('click', '#div_created_at_dropdown > .dropdown-toggle', function (e) {
                e.preventDefault();
                e.stopPropagation();
                toggleToolDropdown($(this).closest('#div_created_at_dropdown'), resetCreatedAtPanel);
            });

            $(document).on('click', function (e) {
                if (!$(e.target).closest('#div_created_at_dropdown, .dropdown-page-limit').length) {
                    setDropdownOpen($('#div_created_at_dropdown, .dropdown-page-limit'), false);
                    resetCreatedAtPanel();
                }
            });

            $(document).on('click', '.birthday_tab', function () {
                $('#birthday_tab').val(1);
                loadCustomerList({birthday: 1});
            });

            $(document).on('click', '.other_time', function (e) {
                e.preventDefault();
                e.stopPropagation();
                $(".created-at-quick-links").hide();
                $(".other_time_panel").slideDown(150);
                initDatepicker();
            });

            $(document).on('click', '.cancel_other_time', function (e) {
                e.preventDefault();
                e.stopPropagation();
                $(".other_time_panel").slideUp(150, function() {
                    $(".created-at-quick-links").show();
                });
            });

            $(document).on('click', '.other_time_panel', function (e) {
                e.stopPropagation();
            });

            $(document).ready(function () {
                initDatepicker();
                $('[data-toggle="tooltip"], [rel="tooltip"], .crm-header-btn-icon').tooltip({
                    trigger: 'hover',
                    placement: 'bottom'
                });
            });

            $(document).on('click', '.crm-header-btn-icon', function () {
                $(this).tooltip('hide');
            });

            $(document).on('click', '.btn_choose_time, .submit_other_time', function (e) {
                let data_time = $(this).data('time') || $(this).find('.btn_choose_time').data('time') || $(e.target).closest('[data-time]').data('time');
                $('#birthday_tab').val('');
                $('#btn_choose_time').val(data_time);
                setDropdownOpen($('#div_created_at_dropdown'), false);
                $('.other_time_panel').hide();

                let data = collectFilters(
                    ['carepage_id', 'group', 'telesales', 'search', 'status', 'source', 'marketing', 'branch_id', 'gender', 'location_id', 'cskh_id'],
                    {
                        data_time: data_time,
                        start_date: $('.filter_start_date').val(),
                        end_date: $('.filter_end_date').val()
                    }
                );

                $('.filter_start_date').val('');
                $('.filter_end_date').val('');
                loadCustomerList(data);
            });

            $(document).on('change', '.group, .telesales, .group-product, .source, .branch_id, .gender, .location,.carepage, .call_back,.cskh', delay(function () {
                // Giá trị vừa chọn trên các select, đồng thời lưu vào input ẩn để các thao tác sau dùng lại
                let selected = {
                    marketing: $('.group-product').val(),
                    group: $('.group').val(),
                    telesales: $('.telesales').val(),
                    source: $('.source').val()
                };
                $('#branch_id').val($('.branch_id').val());
                $('#source').val(selected.source);
                $('#group').val(selected.group);
                $('#group_product').val(selected.marketing);
                $('#telesales').val(selected.telesales);
                $('#birthday_tab').val('');

                loadCustomerList(collectFilters(
                    ['call_back', 'carepage_id', 'gender', 'location_id', 'data_time', 'search', 'status', 'branch_id', 'cskh_id'],
                    selected
                ));
            }, 500));

            // Chặn Enter gửi form tìm kiếm (tìm kiếm chạy bằng ajax khi gõ)
            $("#gridFormA").on("keydown", function (event) {
                if (event.keyCode === 13) {
                    event.preventDefault();
                }
            });

            $(document).on('keyup', '#search', delay(function () {
                $('#search_value').val($('#search').val());
                $('#birthday_tab').val('');

                loadCustomerList(collectFilters(
                    ['carepage_id', 'search', 'gender', 'data_time', 'group', 'telesales', 'status', 'marketing', 'source', 'branch_id', 'location_id', 'cskh_id']
                ));
            }, 500));

            $(document).on('click', '.invalid_account', function (e) {
                let target = $(e.target).parent();
                let invalid_account = $(target).find('.invalid_account').data('invalid');
                let isTrash = invalid_account === 0;

                $("#send_email, #send_sms, #mark_as_potential, #show_popup_task, #show_group_type_account, #show_manager_account, #remove_selected_account, #change_relations").css({'display': isTrash ? 'none' : 'block'});
                $("#restore_account, #permanently_delete_account").css({'display': isTrash ? 'block' : 'none'});
                $('#birthday_tab').val('');
                $('#invalid_account').val(invalid_account);

                loadCustomerList({invalid_account: invalid_account});
            });

            $('body').on('click', 'a.page-link', function (e) {
                e.preventDefault();
                let pages = $(this).attr('href').split('page=')[1] ? $(this).attr('href').split('page=')[1] : 1;
                let data = collectFilters(
                    ['location_id', 'carepage_id', 'gender', 'marketing', 'source', 'invalid_account', 'search', 'status', 'data_time', 'birthday', 'branch_id', 'cskh_id'],
                    {
                        page: pages,
                        group: $('.group').val(),
                        telesales: $('.telesales').val()
                    }
                );

                loadCustomerList(data, '{{ url()->current() }}').fail(function () {
                    alert('Articles could not be loaded.');
                });
            });

            /* ================================================================
             * SỬA TRỰC TIẾP TRÊN BẢNG
             * ================================================================ */

            $(document).on('dblclick', '.category-db', function (e) {
                openMultiSelectEditor(e, {
                    cell: '.category-db',
                    url: "ajax/categories/",
                    id: $(this).data('id'),
                    selectClass: 'category-result',
                    optionClass: 'category-op',
                    isSelected: function (item, selectedIds) {
                        return jQuery.inArray(item.id, selectedIds) !== -1;
                    }
                });
            });

            $(document).on('dblclick', '.category-tip', function (e) {
                openMultiSelectEditor(e, {
                    cell: '.category-tip',
                    url: "ajax/categories-tips/",
                    id: $(this).data('id'),
                    selectClass: 'tip-result',
                    optionClass: 'tip-op',
                    isSelected: function (item, selectedIds) {
                        return jQuery.inArray(item.id.toString(), selectedIds) !== -1;
                    }
                });
            });

            $(document).on('dblclick', '.customer-birthday', function (e) {
                let customerBirthday = $(this);
                let id = $(this).data('id');
                customerBirthday.empty();

                $.ajax({
                    url: "ajax/customers/" + id,
                    method: "get",
                    data: {id: id}
                }).done(function (data) {
                    let birthdayResult = document.createElement('input');
                    birthdayResult.setAttribute('data-id', data.id);
                    birthdayResult.setAttribute('id', data.id);
                    birthdayResult.setAttribute('value', data.birthday);
                    birthdayResult.setAttribute('name', "birthday");
                    birthdayResult.setAttribute('class', "form-control birthday-result");
                    birthdayResult.setAttribute('style', "font-size: 0.875rem;");
                    birthdayResult.onchange = customerBirthday_handleChange;
                    birthdayResult.onblur = customerBirthday_handleChange;
                    customerBirthday.append(birthdayResult);

                    $(birthdayResult).datepicker({
                        format: "DD-MM-YYYY"
                    });

                    birthdayResult.focus();
                });
            });

            // Lưu ngày sinh khi ô nhập thay đổi hoặc mất focus. change và blur thường bắn liền nhau
            // nên chỉ gửi 1 request cho mỗi lần mở ô sửa (lỗi thì cho phép lưu lại).
            function customerBirthday_handleChange(event) {
                let input = event.target;
                if (input.dataset.saving) {
                    return;
                }
                input.dataset.saving = '1';
                let parent = input.parentNode;

                updateCustomer(input.id, {birthday: input.value}).done(function (data) {
                    parent.innerHTML = data.birthday;
                }).fail(function () {
                    delete input.dataset.saving;
                });
            }

            $(document).on('dblclick', '.status-db', function (e) {
                openSelectEditor(e, {
                    cell: '.status-db',
                    url: "ajax/statuses/",
                    id: $(this).data('id'),
                    selectClass: 'status-result form-control select2',
                    name: 'status_id',
                    selectedKey: 'status_id',
                    labelKey: 'name'
                });
            });

            $(document).on('dblclick', '.genitive-db', function (e) {
                openSelectEditor(e, {
                    cell: '.genitive-db',
                    url: "ajax/genitives/",
                    id: $(this).data('id'),
                    selectClass: 'genitive-result form-control',
                    name: 'status_id',
                    selectedKey: 'genitive_id',
                    labelKey: 'name'
                });
            });

            bindInlineSave('change', '.status-result', 'status_id', function (target, data) {
                $(target).parent().find(".status-db").empty();
                $(target).parent().find('.status-db').html(data.status.name);
            });

            bindInlineSave('change', '.genitive-result', 'genitive_id', function (target, data) {
                $(target).parent().find(".genitive-db").empty();
                $(target).parent().find('.genitive-db').html(data.genitive.name);
                $(target).parent().find('.genitive-db').attr('title', data.genitive.description);
            });

            bindInlineSave('change', '.description-cus', 'description');

            bindMultiSelectSave('.category-result', 'category_ids', function (data) {
                let blkstr = $.map(data.categories, function (val) {
                    return val.name;
                }).join(", ");

                $('.category-result').parent().parent().find('.category-db').html(blkstr);
            });

            bindMultiSelectSave('.tip-result', 'category_tips', function (data) {
                let blkstr = `<span class="badge badge-primary"> `+data.tips+`</span>`;
                $('.tip-result').parent().parent().find('.category-tip').html(blkstr);
            });

            /* ================================================================
             * CHỌN NHIỀU & THAO TÁC HÀNG LOẠT
             * ================================================================ */

            $(document).on('click', '.selectall', function () {
                let checkAll = !$(this).hasClass('active');

                $('.myCheck').prop('checked', checkAll);
                $(this).toggleClass('active', checkAll);
                $(this).html(checkAll ? 'Bỏ chọn tất cả' : 'Chọn tất cả');
            });

            $(document).on('click', '#remove_selected_account', function () {
                confirmBulkAction({
                    title: 'Bạn có muốn xóa ?',
                    text: "Nếu bạn xóa tất cả các thông tin sẽ không thể khôi phục!",
                    type: "error"
                }, 'customers/delete-multiple');
            });

            $(document).on('click', '.myCheck', function () {
                $("#btn_tool_group").css({'display': $(this).is(':checked') ? 'block' : 'none'});
            });

            $(document).on('dblclick', '.name-customer', function (e) {
                let target = $(e.target).parent();
                $(target).find('.name-customer').empty();
                let id = $(this).data('customer-id');

                $.ajax({
                    url: "ajax/customers/" + id,
                    method: "get",
                    data: {id: id}
                }).done(function (data) {
                    let html = `<textarea data-id=` + data.id + ` class="handsontableInput" style="width: auto; height: 58px; font-size: 14px; overflow-y: hidden;"> ` + data.full_name + `</textarea>`;
                    $(target).find(".name-customer").append(html);
                });
            });

            bindInlineSave('focusout', '.handsontableInput', 'full_name', function (target, data) {
                let html = `<a class="view_modal" id="chat-fast" data-customer-id="` + data.id + `" href="#">
                                <i class="fas fa-info-circle"></i>
                            </a>
                            <a href="customers/` + data.id + `">` + data.full_name + `</a>
                            <span class="noti-number noti-number-on ml5"></span>`;
                $(target).parent().find(".name-customer").html(html);
            });

            bindInlineSave('focusout', '.phone-result', 'phone', function (target, data) {
                $(target).parent().find(".phone-customer").html(data.phone);
            });

            $(document).on('click', '#restore_account', function () {
                confirmBulkAction({
                    title: 'Bạn có muốn khôi phục tài khoản ?',
                    type: "warning"
                }, 'customers/restore');
            });

            $(document).on('click', '#permanently_delete_account', function () {
                confirmBulkAction({
                    title: 'Bạn có muốn xóa ?',
                    text: "Nếu bạn xóa tất cả các thông tin sẽ không thể khôi phục!",
                    type: "error"
                }, 'customers/force-delete');
            });

            $(document).on('click', '#change_relations', function () {
                $('#updateRelation').modal("show");
            });

            $(document).on('click', '.update-multiple-status', function () {
                bulkUpdate("customers/update-multiple-status", {status_id: $('.status-customer').val()});
            });

            @if(auth()->user()->permission('customer.changeSale'))
            $(document).on('dblclick', '.telesale-customer', function (e) {
                openSelectEditor(e, {
                    cell: '.telesale-customer',
                    url: "ajax/customers",
                    id: $(this).data('customer-id'),
                    selectClass: 'telesales-result form-control select2',
                    name: 'telesale_id',
                    selectedKey: 'telesales_id',
                    labelKey: 'full_name'
                });
            });
            @endif

            bindInlineSave('change', '.telesales-result', 'telesales_id', function (target, data) {
                $(target).parent().find(".telesale-customer").html(data.telesale.full_name);
            });

            $(document).on('click', '#show_manager_account', function () {
                $('#show-manager-account').modal("show");
            })

            $(document).on('click', '.update-multiple-account-manager', function () {
                bulkUpdate("customers/update-multiple-status", {telesales_id: $('#manager-account').val()});
            });

            $(document).on('click', '.update-multiple-branch', function () {
                bulkUpdate("customers/update-multiple-branch", {branch_id: $('#changeBranch').val()});
            });
        }());

        // Lăn chuột dọc trên vùng tab trạng thái => cuộn ngang (tab được render lại bằng ajax nên bắt ở document)
        document.addEventListener('wheel', function (e) {
            var tabs = e.target.closest && e.target.closest('.crm-status-tabs--scroll');
            if (!tabs || tabs.scrollWidth <= tabs.clientWidth) return;
            if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
            var maxLeft = tabs.scrollWidth - tabs.clientWidth;
            if ((e.deltaY < 0 && tabs.scrollLeft <= 0) || (e.deltaY > 0 && tabs.scrollLeft >= maxLeft)) return;
            e.preventDefault();
            tabs.scrollLeft += e.deltaY;
        }, {passive: false});
    </script>
    <script>
        $(function ($) {
            var scrollbar = $('<div id="fixed-scrollbar"><div></div></div>').appendTo($(document.body));
            scrollbar.hide().css({
                overflowX: 'auto',
                position: 'fixed',
                width: '100%',
                bottom: 0
            });
            var fakecontent = scrollbar.find('div');

            function top(e) {
                return e.offset().top;
            }

            function bottom(e) {
                return e.offset().top + e.height();
            }

            var active = $([]);

            function find_active() {
                scrollbar.show();
                var active = $([]);
                $('.fixed-scrollbar').each(function () {
                    if (top($(this)) < top(scrollbar) && bottom($(this)) > bottom(scrollbar)) {
                        fakecontent.width($(this).get(0).scrollWidth);
                        fakecontent.height(1);
                        active = $(this);
                    }
                });
                fit(active);
                return active;
            }

            function fit(active) {
                if (!active.length) return scrollbar.hide();
                scrollbar.css({left: active.offset().left, width: active.width()});
                fakecontent.width($(this).get(0).scrollWidth);
                fakecontent.height(1);
                delete lastScroll;
            }

            function onscroll() {
                var oldactive = active;
                active = find_active();
                if (oldactive.not(active).length) {
                    oldactive.unbind('scroll', update);
                }
                if (active.not(oldactive).length) {
                    active.scroll(update);
                }
                update();
            }

            var lastScroll;

            function scroll() {
                if (!active.length) return;
                if (scrollbar.scrollLeft() === lastScroll) return;
                lastScroll = scrollbar.scrollLeft();
                active.scrollLeft(lastScroll);
            }

            function update() {
                if (!active.length) return;
                if (active.scrollLeft() === lastScroll) return;
                lastScroll = active.scrollLeft();
                scrollbar.scrollLeft(lastScroll);
            }

            scrollbar.scroll(scroll);

            onscroll();
            $(window).scroll(onscroll);
            $(window).resize(onscroll);
        });

        // Chuyển tab trong modal "Trao đổi nhanh": Zalo Message <-> Trao đổi nội bộ
        $(document).on('click','#view_chat .message-chat',function () {

            getMessage($(this).data('phone'));
            $('#view_chat .quick-chat__tab').removeClass('active');
            $(this).addClass('active');
            $('#view_chat .chatApplication').show();
            $('#view_chat .chat-ajax').hide();
        })
        $(document).on('click','#view_chat .sale-note',function () {
            $('#view_chat .quick-chat__tab').removeClass('active');
            $(this).addClass('active');
            $('#view_chat .chat-ajax').show();
            $('#view_chat .chatApplication').hide();
        })
        var thisCallBack ='';
        $(document).on('click', '.call-back', function () {
             thisCallBack = $(this);
            $.ajax({
                url: '/ajax/tasks/' + $(this).data('id'),
                method: 'GET',
                success: function (data) {
                    let abc = data.description.replaceAll("--", '\n');
                    let link = '/customers/'+data.customer.id;
                    $('#name').val(data.name).change();
                    $("a[href]").attr("href",link);
                    $('.modal-body .name-customer').html(data.customer.full_name+'('+data.customer.account_code+')').change();
                    $('.modal-body .phone-customer').val(data.customer.phone).change();
                    $('.modal-body #user_id').val(data.user.full_name).change();
                    $('.modal-body #date_from').val(data.date_from).change();
                    $('.modal-body #time_from').val(data.time_from).change();
                    $('.modal-body #time_to').val(data.time_to).change();
                    $('.modal-body #description').html(abc).change();
                    $('.checkTask').data('id',data.id);
                    $('.modal-task').modal('show');
                    $('.checkTask').prop("checked",false);
                }
            })
        })
        $(document).on('change', '.checkTask', function () {
            let id =  $(this).data('id');
            $.ajax({
                url: '/ajax/tasks/' + id,
                method: 'PUT',
                data: {task_status_id: 3},
                success: function (data) {
                    $('.modal-task').modal('hide');
                    thisCallBack.remove();
                }
            });
        })

    </script>
    @include('message_zalo.js_chat_app')

@endsection