@extends('layouts.main')
@section('title', $data['title'])
@section('content')
    <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;
            margin-top: 10px;
        }



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

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

        .payment-filter {
            padding-top: 9px;
            float: right;
            padding-right: 8px;
        }

        .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-link.notification-tab span.d-sm-block {
            color: #495057;
        }
         

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

        {{--  ul.nav.nav-tabs .nav-item .nav-link {

            padding: 30px;
        }  --}}

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

        table.dataTable thead th {
            padding: 5px;
            color: #74788d;
            border-top: 2px solid #d6deec;
            border-bottom: 2px solid #d6deec !important;
        }

        table#issue_datatable,
        table#return_datatable {
            margin: 0 !important;
        }

        #issue_datatable td,
        #return_datatable td,
        #payment_datatable td,
        #issue_datatable td {
            padding: 5px;
            vertical-align: middle;
            font-size: 13px;
            color: #000 !important;
        }

        @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 */
        }

        {{--  .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 */
        }

        .select2-container .select2-selection--single {
            font-size: 12px;
            height: 40px !important;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            line-height: 37px !important;
        }


           @media (min-width: 768px) and (max-width: 1023px){
     
        .row.ms-1.payment-responsive-center{
            padding-left: 1.5rem !important;
        }

    }

    .page-content{
        padding-bottom:8rem !important;
    }
    

   
    </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 payment-responsive-center">
                    <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>Payment (<span class="text-primary"
                                                style="font-weight: bold;" id="list_record_count"></span>)</b>
                                    </div>
                                    {{-- <div class="payment-filter">
                                        <div>
                                            <select id="payment_status" class="form-select">
                                            </select>
                                        </div>
                                    </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/css/font.css') }}"></script> --}}
    <script src="{{ asset('assets/libs/kendo/kendo.all.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

    <script type="text/javascript">
        var order_id = 0;
        var viewSalesId = {{ $data['view_id'] ?? 0 }};
        var viewType = '{{ $data['view_type'] ?? 0 }}';
        var ajaxURL = "{{ route('payment.transaction.ajax') }}";
        var AjaxSalesOrderGetData = "{{ route('payment.transaction.get.data') }}";
        var ajaxURLSalesOrderPlaseViewData = "{{ route('sales.order.plase.view.data') }}";
        var ajaxURLSalesOrderPaymentTags = "{{ route('search.sales.order.payment.tags') }}";
        var csrfToken = $("[name=_token").val();
        var usersPageLength = getCookie('usersPageLength') !== undefined ? getCookie('usersPageLength') : 10;


        function ViewOrder(id) {
            let ajaxURLprintUrl = "{{ route('print.sales.order.template') }}";

            $.ajax({
                type: 'GET',
                url: ajaxURLprintUrl,
                data: {
                    id: id,
                },
                success: function(response) {
                    if (response.status === 1) {
                        $('#salesPrintModal').html(response.data);

                        $('#modalprint').modal('show');
                    } else {
                        alert('Failed to fetch data');
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error:", error);
                }
            });
        }

        function printDiv() {
            // let content = document.getElementById('salesPrintModal').innerHTML;
            let content = document.getElementById('salesPrintModal').innerHTML;
            let myWindow = window.open('', '', 'width=1200,height=600');
            myWindow.document.write('<html><head><title>Invoice</title>');
            myWindow.document.write(
                '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">'
            );
            myWindow.document.write('</head><body>');
            myWindow.document.write(content);
            myWindow.document.write('</body></html>');
            myWindow.document.close();
            myWindow.focus();
            setTimeout(function() {
                myWindow.print();
                myWindow.close();
            }, 500);
        }

        $(document).keydown(function(event) {
            if (event.altKey && event.key.toLowerCase() === "n") {
                event.preventDefault();
                localStorage.removeItem("party_detail");
                $("#SalesOrderAdd")[0].click();
            }
        });

        $('#SalesOrderAdd').on('click', function() {
            localStorage.removeItem("party_detail");
        });


        var table = $('#datatable').DataTable({
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": []
            }],
            "pageLength": usersPageLength,
            "scrollX": false,
            "scrollY": 600,
            "order": [
                [0, 'desc']
            ],
            "processing": true,
            "serverSide": true,
            "bInfo": false,
            "responsive": true, // <-- missing comma fixed here
            "ajax": {
                "url": ajaxURL,
                "type": "POST",
                data: function(d) {
                    d._token = csrfToken;
                    d.payment_tag_id = $('#payment_status').val();
                }
            },
            "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'
                });
            }
        });
        $('#datatable').on('length.dt', function(e, settings, len) {
            setCookie('usersPageLength', len, 100);

        });

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

        function reloadTable() {
            table.ajax.reload();
        }

        document.getElementById("PrintSalesOrderBtn").addEventListener("click", async function() {
            const modalContent = document.getElementById("salesPrintModal");

            const {
                jsPDF
            } = window.jspdf;
            const pdf = new jsPDF({
                orientation: 'portrait', // or 'landscape'
                unit: 'mm',
                format: 'a4'
            });

            await pdf.html(modalContent, {
                callback: function(pdf) {
                    pdf.save("sales-order-" + viewSalesId + ".pdf");
                },
                x: 10,
                y: 10,
                width: 190, // 210mm A4 width - 20mm total margin
                windowWidth: 800 // optional: helps responsive layout render better
            });
        });


        function getDataDetail(id) {

            client_point_id = id;
            viewSalesId = 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();

                            // let baseUrl = "{{ route('print.sales.order.template.download') }}";
                            // $('#PrintSalesOrderBtn').attr('href', baseUrl + '?id=' + id);
                        }
                    }
                })
            }
        }


        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() {
            if (viewType == 'WORK_ORDER') {
                console.log('WORK_ORDER');
                setTimeout(function() {
                    $('.nav-tabs .nav-item .nav-link').removeClass('active');
                    $('.nav-tabs .nav-item .nav-link.work_order').addClass('active');
                    $('#tab-content .tab-pane').removeClass('active');
                    $('#tab-content #work_order_payemnt').addClass('active');
                }, 2000);
            }
            adjustContainerHeight();
            $(window).on('resize', adjustContainerHeight);
        });

        function adjustContainerHeight() {
            var windowHeight = $(window).height() - 135;
            var windowWidth = $(window).width();
            if (windowWidth <= 1440) {
                $('body').addClass('vertical-collpsed');
            }
            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');
        }

        // 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');
        //     $('#tab-content').parent().css('height', max_height + 'px');
        //     $('#tab-content').parent().css('max-height', max_height + 'px');
        //     $('.scrollable-tab').css('height', max_height + 'px');
        //     $('.scrollable-tab').css('max-height', max_height + 'px');
        //     $('#custom_height').css('height', windowHeight + 'px');
        // }

        $('#modalprint').on('hidden.bs.modal', function() {
            $(this).find('.modal-body').html('');
        });

        $('#payment_status').select2({
            allowClear: true,
            ajax: {
                url: ajaxURLSalesOrderPaymentTags,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    const results = data.results.map(item => ({
                        id: item.id,
                        text: item.text,
                    }));
                    return {
                        results: results,
                        pagination: {
                            more: data.pagination?.more || false
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Payment Tag',
            dropdownParent: $('#chat')
        });
        $('#payment_status').on('change', function() {
            table.ajax.reload();
        });
    </script>
@endsection