@extends('layouts.main')
@section('title', $data['title'])
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href=" {{ asset('assets/css/dataTables.bootstrap5.css') }}">

    <style type="text/css">
        <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: 97%;
            /* 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 !important;
            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);
        }

        .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;
        }

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

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

        #part_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;
            }

        }

        @media (max-width:1205px) {
            .col-sm-12 #datatable_filter input {
                width: 260px;
                height: 20px;
                font-size: 12px;
                margin: 0;
            }

        }

        #datatable tbody td {
            font-size: 14px;
            text-align: left !important;
            /* background-color: #fff !important; */
            color: #000;
        }

        #purchase_return_datatable tbody .dataTables_empty,
        #quotation_datatable tbody .dataTables_empty,
        #sales_order_return_datatable tbody .dataTables_empty,
        #purchase_datatable tbody .dataTables_empty,
        #sales_order_datatable tbody .dataTables_empty {
            text-align-last: center !important;
        }

        #calendar-icon {
            position: absolute;
            right: 3px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: #3751A1;
            pointer-events: none;
            /* Prevents icon from being clickable */
        }

        .btn-primary {
            background-color: #3751A1 !important;
            border-color: #3751A1 !important;
            height: 41px !important;
            border-radius: 10px !important;
        }

        .btn-secondary {
            background-color: #3751A1 !important;
            border-color: #3751A1 !important;
            height: 41px !important;
            border-radius: 10px !important;
        }

        .nav-tabs {
            border-bottom: 0px solid #ced4da !important;
        }

        #datatable_wrapper .dataTables_scrollBody {
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* Internet Explorer 10+ */
            overflow-y: scroll;
        }

        #datatable_wrapper .dataTables_scrollBody::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, Opera */
        }
    </style>

    <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">
                                <div class="tab-pane show active lead-list bg-white" 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>Order (<span class="text-primary"
                                                style="font-weight: bold;" id="list_record_count"></span>)</b></div>
                                    <table id="datatable" class="table static_hover dt-responsive nowrap w-100 bg-white"
                                        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="job_workerdetail" 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>
    <script src="{{ asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/libs/kendo/kendo.all.min.js') }}"></script>

    <script type="text/javascript">
        var order_id = 0;
        var viewOpeningId = {{ $data['view_id'] ?? 0 }};
        var ajaxViewOpeningList = '{{ route('opening.ajax') }}'
        var AjaxSalesOrderGetData = '{{ route('opening.get.data') }}'
        var csrfToken = $("[name=_token").val();

        var usersPageLength = getCookie('usersPageLength') !== undefined ? getCookie('usersPageLength') : 10;

        var table = $('#datatable').DataTable({
            "aoColumnDefs": [{
                "bSortable": true,
                "aTargets": []
            }],
            "pageLength": 10,
            "scrollX": false,
            "scrollY": 600,
            "order": [
                [0, 'desc']
            ],
            "processing": true,
            "serverSide": true,
            "bInfo": false,
            "responsive": true, // <-- missing comma fixed here
            "ajax": {
                "url": ajaxViewOpeningList,
                "type": "POST",
                "data": {
                    "_token": csrfToken
                }
            },
            "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'
                });
            }
        });


        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 (viewOpeningId == null || viewOpeningId == "" || viewOpeningId == undefined || viewOpeningId == 0) {
                    viewOpeningId = responseData['FirstPageLeadId'];
                    getDataDetail(responseData['FirstPageLeadId']);
                } else {
                    getDataDetail(viewOpeningId);
                }
                $("#saveAdvanceFilter").html('<span>Save</span>');
                $('#list_data_loader').hide();
            }
            $('#list_record_count').html(responseData['recordsTotal']);
        });
        function reloadTable() {
            table.ajax.reload();
        }
        function getDataDetail(id) {

            client_point_id = id;
            viewOpeningId = id;

            if (id != 0 && id != null && id != undefined) {

                $('#part_detail .lead-custom-scroll-2').prop('scrollTop');
                $("#client_user_" + id).parent().parent().addClass('active_lead');
                $(".p_text_white").removeClass('text-white'); // Remove from all p elements
                $(".h5_text_white").removeClass('text-white'); // Remove from all h5 elements
                isdetailload = 0;
                $('#list_data_loader').show();


                $.ajax({
                    type: 'GET',
                    url: AjaxSalesOrderGetData + "?id=" + id,
                    success: function (resultData) {
                        if (resultData['status'] == 1) {
                            $("#job_workerdetail").html(resultData['view']);

                            Load_Tooltip_Action();
                            $(".client_li").parent().parent().removeClass('active_lead');
                            $("#client_user_" + id).parent().parent().addClass('active_lead');
                            adjustContainerHeight();

                            $("#p_text_white_" + id).addClass('text-white');
                            $("#h5_text_white_" + id).addClass('text-white');
                            $('#list_data_loader').hide();
                        }
                    }
                })
            }
        }


        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");
            });
        }

        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() - 240;
            max_height = windowHeight - 100;
            $('#datatable').parent().css('max-height', max_height + 'px');
            $('#datatable').parent().css('height', max_height + 'px');
            $('#custom_height').css('height', windowHeight + 'px');
            $('#tab_content').parent().css('max-height', max_height + 'px');
            $('#tab_content').parent().css('height', max_height + 'px');
        }

    </script>
@endsection