@extends('layouts.main')
@section('title', $data['title'])
@section('content')
    <style>
        .page-content {
            background: transparent !important;
            position: relative;
        }

        .page-content {
            padding: calc(74px + 24px) calc(24px / 2) 60px calc(24px / 2) !important;
        }

        h4.mb-sm-0.font-size-18 {
            position: absolute;
            top: 21px;
            text-transform: capitalize;
            color: #495057;
            font-size: 28px !important;
            font-weight: 600;
        }


        .col-12 .page-title-box {
            padding-bottom: 40px !important;
            /* z-index: 9999; */
            position: relative;
        }

        .col-sm-12.col-md-6 {
            display: block;
            width: 100%;
            padding-left: 20px;
        }

        .col-sm-12 #datatable_filter input {
            width: 311px;
            height: 20px;
            font-size: 12px;
            margin: 0;
        }

        div#datatable_filter {
            top: 0px;
        }

        div#datatable_length {
            float: right;
        }



        .table tr {
            border-color: inherit !important;
            border-style: solid;
            border-width: 0;
        }

        .client_total {
            position: absolute;
            top: 18px;
            left: 20px;
        }

        .tab-content>.active {
            display: block;
        }

        .lead-detail,
        .lead-list {
            box-shadow: 0px 3px 3px 0px rgb(0 0 0 / 23%);
        }

        div.dataTables_wrapper div.dataTables_length label {
            margin-bottom: 0;
        }

        div#datatable_wrapper .col-sm-12.col-md-6:first-child {
            margin-bottom: 20px;
            padding: 0 24px;
        }

        button#addBtnClient {
            /* margin-right: 100px; */
            margin-top: -37px;
        }

        .active_lead {
            background-color: #3751A1;
            border-color: transparent;
            -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, .03);
            box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, .03);
        }

        .active_lead .text-truncate {
            color: #fff;
        }

        .tab-content>.tab-pane {
            display: none;
        }

        .tab-content>.active {
            display: block;
        }

        .timeline-marker-web {
            top: 0;
            bottom: 0;
            left: 0;
            width: 15px;
            display: table-cell;
            position: relative;
            vertical-align: top;
        }

        .timeline-marker-web:before {
            border: 3px solid transparent;
            border-radius: 100%;
            content: "";
            display: block;
            height: 15px;
            position: absolute;
            top: 0px;
            left: 0;
            width: 15px;
            transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
            background-position: center;
        }

        .timeline-marker-web:after {
            content: "";
            width: 1px;
            background: #000000;
            display: block;
            position: absolute;
            top: 15px;
            bottom: 0;
            left: 7px;
        }

        .timeline-marker-android {
            top: 0;
            bottom: 0;
            left: 0;
            width: 15px;
            display: table-cell;
            position: relative;
            vertical-align: top;
        }

        .timeline-marker-android:before {
            background: #d3d3d3;
            border: 3px solid transparent;
            border-radius: 100%;
            content: "";
            display: block;
            height: 15px;
            position: absolute;
            top: 0px;
            left: 0;
            width: 15px;
            transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
            background-position: center;
            background-image: url(http://localhost/Whitelion-Erp/public/assets/images/timeline/android.svg);
        }

        .timeline-marker-android:after {
            content: "";
            width: 1px;
            background: #000000;
            display: block;
            position: absolute;
            top: 15px;
            bottom: 0;
            left: 7px;
        }

        .timeline-marker-iphone {
            top: 0;
            bottom: 0;
            left: 0;
            width: 15px;
            display: table-cell;
            position: relative;
            vertical-align: top;
        }

        .timeline-marker-iphone:before {
            background: #d3d3d3;
            border: 3px solid transparent;
            border-radius: 100%;
            content: "";
            display: block;
            height: 15px;
            position: absolute;
            top: 0px;
            left: 0;
            width: 15px;
            transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
            background-position: center;
            background-image: url(http://localhost/Whitelion-Erp/public/assets/images/timeline/ios.svg);
        }

        .timeline-marker-iphone:after {
            content: "";
            width: 1px;
            background: #000000;
            display: block;
            position: absolute;
            top: 15px;
            bottom: 0;
            left: 7px;
        }

        .modal-reduis {
            border-radius: 15px;
        }

        .bg-card-color {
            background-image: linear-gradient(to right, #6779af, #6779af);
            border-bottom-left-radius: 15px;
            border-top-left-radius: 15px;
        }

        span#contact_client_name {
            --bs-text-opacity: 1;
            color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
        }

        #formClient .form-label.img {
            position: unset;
            display: block;
            margin-left: 0;
            padding-left: 0;
        }

        #formClient .mb-3 {
            display: block !important;
        }

        #lead_detail .form-label {
            font-size: 12px;
            width: 100%;
        }

        #lead_detail button.waves-effect {
            background: #3751A1 !important;
            color: #fff;
            border-radius: .2rem;
            padding: 4px 6px;
        }

        #lead_detail>.row {
            margin-bottom: 10px;
        }

        .nav-tabs .nav-link.active span.d-sm-block {
            color: #fff;
        }

        .nav-tabs .nav-item.show .nav-link,
        .nav-tabs .nav-link.active {
            background-color: #3751A1 !important;
        }

        ul.nav.nav-tabs .nav-item .nav-link {
            padding: 10px;
        }

        .lead-detail button i.bx.bxs-pencil {
            font-size: 18px;
        }

        @media (min-width: 1200px) {
            .chat-leftsidebar {
                min-width: 330px !important;
            }
        }

        @media (max-width:1199px) {

            #datatable_wrapper .col-sm-12.col-md-6:first-child {
                width: 100%;
            }

            .form-control {
                font-size: 12px !important;
            }

            #joining_date .form-label {
                left: 0;
            }

        }
    </style>

    <link href="{{ asset('assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet"
        type="text/css">
    <div class="main-content" style="margin:0;" data-select2-id="199">
        <div class="page-content">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-12">

                    </div>
                </div>
                <div class="row ms-1">
                    <div class="d-lg-flex" id="custom_height" style="">
                        <div class="chat-leftsidebar me-lg-3">
                            <div class="tab-content py-1">
                                <input type="hidden" name="" value="0" id="hidden_status">
                                <input type="hidden" name="" value="0" id="hidden_is_advancefilter">
                                <div class="tab-pane show active lead-list" id="chat">
                                    <div class="client_total"><i id="list_data_loader"
                                            class="bx bx-loader bx-spin font-size-16 align-middle me-2"
                                            style="display: none;"></i><b>client (<span class="text-primary"
                                                style="font-weight: bold;"
                                                id="list_record_count">{{ $data['recordsTotal'] }}</span>)</b></div>
                                    <table id="datatable" class="table static_hover dt-responsive nowrap w-100 "
                                        style="">
                                        <thead class="d-none">
                                            <tr>
                                                <th>data</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>


                        <div class="w-100 user-chat py-1">
                            <div class="" id="lead_detail" style="">

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

@endsection('content')
@section('custom-scripts')
    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    @include('../clients/add_client')

    <script>
        var ajaxURLDataListAjax = "{{ route('client.list.ajax') }}";
        let previousClientDetailRequest = null;
        var ajaxURLDataDatail = "{{ route('client.detail') }}";
        var csrfToken = $("[name=_token").val();
        var type = "{{ $data['type'] }}";
        var viewLeadId = null;
        var client_point_id = 0;

        let advanceFilterList = '';
        var table = $('#datatable').DataTable({
            "aoColumnDefs": [{
                "bSortable": true,
                "aTargets": [0]
            }],
            "pageLength": 10,
            "scrollX": false,
            "scrollY": 600,
            "order": [
                [0, 'desc']
            ],
            "processing": true,
            "serverSide": true,
            "bInfo": false,
            "ajax": {
                "url": ajaxURLDataListAjax,
                "type": "POST",
                "data": {
                    "_token": csrfToken,
                    "type": type,

                }
            },
            "aoColumns": [{
                "mData": "view"
            }, ],
            "pagingType": "simple_numbers",
            "language": {
                "search": "",
                "sLengthMenu": "_MENU_",
                "paginate": {
                    "previous": "<",
                    "next": ">",
                    "first": "|<",
                    "last": ">|"
                }
            },
            "initComplete": function() {

                $('.dataTables_wrapper .row .col-sm-12.col-md-5').removeClass('col-sm-12 col-md-5');
                $('.dataTables_wrapper .row .col-sm-12.col-md-7').removeClass('col-sm-12 col-md-7');


                $('.dataTables_wrapper .dataTables_paginate').css({
                    'display': 'flex',
                    'justify-content': 'center',
                    'align-items': 'center'
                });
            }
        });



        function Load_Tooltip_Action() {
            $(".closing-badge").mouseover(function(e) {
                var $tip = $(this).next();
                var $arrow = $(this).next().find(".tip_arrow");

                $tip.css("display", "block");
                $tip.css("left", $(this).position().left - 9 + "px");
                $tip.css("top", $(this).position().top + this.offsetHeight + 14 + "px");
                $arrow.css("top", 0);
                $arrow.css("left", this.offsetWidth * 1 / 2 + 2 + "px");
                $arrow.css({
                    "border-bottom-color": "#bbbefcf0",
                    "margin-top": "-20px",
                    "border-top-color": "transparent"
                });
            });
            $(".closing-badge").mouseleave(function(e) {
                var $tip = $(this).next();
                $tip.css("display", "none");
            });
            $(".closing-badge1").mouseover(function(e) {
                var $tip = $(this).next();
                var $arrow = $(this).next().find(".tip_arrow1");
                $tip.css("display", "block");
                $tip.css("left", $(this).position().left - 9 + "px");
                $tip.css("top", $(this).position().top + this.offsetHeight + 14 + "px");
                $arrow.css("top", 0);
                $arrow.css("left", this.offsetWidth * 1 / 2 + 2 + "px");
                $arrow.css({
                    "border-bottom-color": "#bbbefcf0",
                    "margin-top": "-20px",
                    "border-top-color": "transparent"
                });
            });
            $(".closing-badge1").mouseleave(function(e) {
                var $tip = $(this).next();
                $tip.css("display", "none");
            });
        }
        table.on('xhr', function() {
            var status = $('#hidden_status').val();
            var responseData = table.ajax.json();
            if (responseData['status'] == 0) {
                toastr['error'] = responseData['msg'];
            } else {
                $('.lead_status_filter_remove').removeClass("next-status-active-class");
                $('.lead_status_filter_' + status).addClass("next-status-active-class");

                if (viewLeadId == null || viewLeadId == "" || viewLeadId == undefined || viewLeadId == 0) {
                    getDataDetail(responseData['FirstPageLeadId']);
                } else {
                    getDataDetail(viewLeadId);
                }
                $("#saveAdvanceFilter").html('<span>Save</span>');
                $('#list_data_loader').hide();
            }
        });
        var firstPageLeadId = 0;
        var loadDetail = 1;
        var firstTimeDetailLoad = 1;

        function getDataDetail(id) {

            client_point_id = id;

            if (id != 0 && id != null && id != undefined) {
                if (previousClientDetailRequest) {
                    previousClientDetailRequest.abort();
                }
                var scrollTopHeightDataTable = $('#lead_detail .lead-custom-scroll-2').prop('scrollTop');
                $("#client_user_" + id).parent().parent().addClass('active_lead');
                isdetailload = 0;
                $('#list_data_loader').show();


                previousClientDetailRequest = $.ajax({
                    type: 'GET',
                    url: ajaxURLDataDatail + "?id=" + id,
                    success: function(resultData) {
                        if (resultData['status'] == 1) {
                            $("#lead_detail").html(resultData['view']);
                            Load_Tooltip_Action();
                            $(".client_li").parent().parent().removeClass('active_lead');
                            $("#client_user_" + id).parent().parent().addClass('active_lead');
                            adjustContainerHeight();

                            $('#list_data_loader').hide();
                        }
                    }
                })
            }
        }

        window.smoothScroll = function(target) {
            var scrollContainer = target;


            do {
                scrollContainer = scrollContainer.parentNode.parentNode;
                if (!scrollContainer) return;
                scrollContainer.scrollTop += 1;
            } while (scrollContainer.scrollTop == 0);

            var targetY = 0;
            do {
                if (target == scrollContainer) break;
                targetY += target.offsetTop;
            } while (target = target.offsetParent);

            scroll = function(c, a, b, i) {
                i++;
                if (i > 30) return;
                c.scrollTop = a + (b - a) / 30 * i;
                setTimeout(function() {
                    scroll(c, a, b, i);
                }, 20);
            }

            targetY = targetY - 300
            scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
        }
        $(document).ready(function() {
            adjustContainerHeight();
            $(window).on('resize', adjustContainerHeight);
        });

        function adjustContainerHeight() {
            var windowWidth = $(window).width();
            if (windowWidth <= 1440) {
                $('body').addClass('vertical-collpsed');
            }
            var windowHeight = $(window).height() - 150;
            max_height = windowHeight - 180;
            $('#datatable').parent().css('max-height', max_height + 'px');
            $('#datatable').parent().css('height', max_height + 'px');
            $('#home').parent().css('max-height', max_height + 'px');
            $('#custom_height').css('height', windowHeight + 'px');
        }
    </script>
@endsection