@extends('layouts.main')
@section('title', $data['title'])
@section('content')

    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href=" {{ asset('assets/css/dataTables.bootstrap5.css') }}">

    <style type="text/css">
        @media print {

            thead,
            tfoot {
                display: none !important
            }

            @page {
                size: 'a4';
                margin: 0mm;
            }
        }

        li.list-inline-item.px-2 {
            padding-left: 0 !important;
        }

        #div_start_end_datepicker .form-group.col-6:first-child {
            padding-right: 30px;
        }

        .order-detail {
            text-align: center;
            vertical-align: middle;
        }

        .order-detail .mb-0.mt-1.fw-bold {
            line-height: 1;
        }

        .input-group.date .input-group-text {
            height: 100%;
            /* Match the height of the input box */
            display: flex;
            align-items: center;
            /* Center the icon vertically */
            padding: 0 10px;
            /* Add padding to make it look consistent */
            border-radius: 0 0.25rem 0.25rem 0;
            /* Optional: Make sure it matches input's border-radius */
            cursor: pointer;
            /* Indicate the icon is clickable */
        }

        .input-group.date .form-control {
            border-radius: 0.25rem 0 0 0.25rem;
            /* Adjust input's border-radius for consistency */
        }

        #datePickerModal {
            align-content: center;
        }



        .datepicker table {
            /* font-family: Arial, Helvetica, sans-serif; */
            font-family: 'Montserrat', sans-serif !important;
            width: 100%;
            color: #495057;
            border-spacing: 0;
            border-collapse: collapse;
            font-size: 14px;
        }



        #datatable thead th:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        #datatable thead th:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;

        }

        #datatable thead th {
            color: #000;
            font-size: 13px;
            text-align: left;
            padding: 12px;
            font-weight: 600;
            /* font-family: 'Almarose Semibold', sans-serif; */
            font-family: 'Montserrat', sans-serif !important;
            /* background-color: rgb(225 232 242) !important; */
            background-color: #F1F4F9;
            border-bottom: none;
        }

        #datatable tbody td {
            font-size: 14px;
            font-family: 'Montserrat', sans-serif !important;
            text-align: left;
            /* background-color: #fff !important; */
            color: #000;
            /* border-top: 1px solid #e5e9f2; */
        }

        #datatable_filter input {
            width: 500px;
            height: 36px;
            font-size: 12px;
        }

        .title-row {
            font-size: 22px;
            font-weight: bold;
            color: #333;
        }

        .form-control-sm {
            padding: 0px 11px !important;

        }

        @media (max-width:1743px) {
            #datatable_filter input {
                width: 450px;
            }


        }

        @media (max-width:1643px) {
            #datatable_filter input {
                width: 400px;
            }


        }

        @media (max-width:1543px) {
            #datatable_filter input {
                width: 300px;
            }


        }

        @media (max-width:1384px) {
            #datatable_filter input {
                width: 270px;
            }


        }

        @media (max-width:1343px) {
            #datatable_filter input {
                width: 254px;
            }


        }

        @media (max-width:1283px) {
            #datatable_filter input {
                width: 240px;
            }


        }

        @media (max-width:1264px) {
            #datatable_filter input {
                width: 200px;
            }


        }

        @media (max-width:1223px) {
            #datatable_filter input {
                width: 200px;
            }


        }

        @media (max-width:1184px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: 16px !important; */

            }

        }

        @media (max-width:1156px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: 5px !important; */

            }

        }

        @media (max-width:1134px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: -10px !important; */

            }

        }


        @media (max-width:1106px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: -20px !important; */

            }

        }




        @media (max-width:1043px) {
            #datatable_filter input {
                width: 250px;
                /* margin-left: 2px !important; */

            }

        }



        @media (max-width: 992px) {
            .vertical-menu {
                transform: translateX(-100%);
            }

            .vertical-menu.open {
                transform: translateX(0);
            }
        }

        .btn-primary {
            background-color: #408dfb;
            border: none;
            border-radius: 10px;
        }

        .clicked-border {
            animation: pulse 0.5s ease-in-out;
        }

        .clicked-border {
            border: 3px solid #dadada !important;
            border-radius: 5px;
            transform: scale(0.98);
            transition: transform 0.2s ease, border-color 0.2s ease;
        }

        .modal-header {
            padding: 0px 7px;
        }

        #modal-title {
            color: #3751A1;
            font-weight: bold;
        }

        .modal-body .table-responsive {
            width: 100%;
            max-height: 500px;
            /* Adjust as needed */
            overflow-x: auto;
            overflow-y: auto;
            position: relative;
        }

        .modal-body .table {
            width: 260%;
            /* Ensures the table overflows horizontally */
        }

        .modal-body .table thead {
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
        }

        .card {
            border: none !important;
        }

        table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
            box-shadow: none !important;
        }

        .card-body {
            padding: 1.25rem 1.25rem !important;
        }

        div.dt-container div.dt-length label {
            font-size: 14px;
        }

        .dt-length,
        div.dt-container div.dt-paging {
            margin-top: 10px;
        }

        div.dt-container div.dt-paging ul.pagination {
            justify-content: flex-end;
        }

        div.dataTables_wrapper div.dataTables_length label {
            font-size: 14px;
        }

        div#datatable_info {
            display: none;
        }

        div#datatable_processing {
            display: none !important;
        }

        .form-select.form-select-sm {
            padding-right: 25px !important;
            width: auto;
            display: inline-block;
            margin-right: 0.5em;
        }

        .dt-length label {
            font-size: 14px;
        }

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

        button#addBtnMainMaster {
            font-size: .8125rem;
        }

        .custom-modal-close img {
            width: 24px;
            height: 24px;
            cursor: pointer;
        }

        button.custom-modal-close {
            padding: 0;
            background: transparent;
            border: none;
            margin-left: 5px;
        }

        .left-icon .custom-modal-close img {
            width: 24px;
            height: 24px;
            cursor: pointer;
        }

        .left-icon img {
            width: 21px;
            height: 21px;
            cursor: pointer;
        }

        .info-icon-wrapper:hover #shortcut_keys {
            display: inline !important;
            font-size: 10px;
        }

        table.dataTable thead>tr>th.dt-orderable-asc:hover,
        table.dataTable thead>tr>th.dt-orderable-desc:hover,
        table.dataTable thead>tr>td.dt-orderable-asc:hover,
        table.dataTable thead>tr>td.dt-orderable-desc:hover {
            outline: none !important;
        }

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

        .tab-content {
            max-height: 650px !important;
        }

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

        .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: 9px;
            left: 20px;
        }

        .dt-length,
        div.dt-container div.dt-paging {
            margin-top: 10px;
        }

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

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

        div#datatable_length {
            float: right;
        }

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

        .form-select.form-select-sm {
            padding-right: 20px !important;
        }

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

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

        div.dt-scroll-body {
            border-bottom: 1px solid #e1e1e147;
        }

        ul.nav.nav-tabs {
            border: none;
        }

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

    <div class="page-content">
        <div class="container-fluid">
            {{-- <div class="row align-items-center mb-2 mt-2">
                <div class="col-12 col-md-4">
                    <div id="datatable-search-container" class="me-3 w-md-auto"></div>
                </div>
                <div class="col-12 col-md-8 d-flex justify-content-end">
                    <a class="btn btn-primary waves-effect waves-light" id="addQuotation"
                        href="{{ route('quotation.add') }}" role="button"><i
                            class="bx bx-plus font-size-16 align-middle me-2 add_new_btn text-nowrap"></i>Add
                        Quotation
                        <small>(Alt + N)</small> </a>
                </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 bg-white"
                                        style="display: none;"></i><b>Quotation (<span class="text-primary"
                                            style="font-weight: bold;" id="list_record_count"></span>)</b>
                                </div>
                                <table id="datatable" class="table table-striped dataTable no-footer dtr-inline"
                                    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>
            <!-- end row -->
        </div>
        <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
    <div class="modal fade" id="ShowItemModal" tabindex="-1" aria-labelledby="ShowQuotationModal" aria-hidden="true"
        data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content" style="padding: 22px;border-radius: 13px;">

                <div class="modal-header mb-2">
                    <h5 class="modal-title" id="ShowQuotationModal">Show Quotation Items</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <input type="hidden" id="QuotationId" value="">
                <div class="modal-body" id="printModal">

                </div>
                <div class="text-end">
                    <button type="button" class="btn btn-primary" onclick="Download()">Print</button>
                </div>
                <div class="modal d-none" id="quotation-print">

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

    @endsection('content')
    @section('custom-scripts')

        <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 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/js/dataTables.js') }}"></script>
        <script src="{{ asset('assets/js/dataTables.bootstrap5.js') }}"></script>
        <script src="{{ asset('assets/js/dataTables.buttons.min.js') }}"></script> --}}
        {{--
        <script src="{{ asset('assets/css/font.css') }}"></script> --}}
        <script src="{{ asset('assets/libs/kendo/kendo.all.min.js') }}"></script>
        <script type="text/javascript">
            var order_id = 0;
            var ajaxURL = '{{ route('quotation.ajax') }}';
            var ajaxURLShowItemDetail = '{{ route('quotation.item.detail') }}';
            var csrfToken = $("[name=_token").val();
            var order_id = 0;
            var viewLeadId = 0;

            document.querySelectorAll('.card').forEach(card => {
                card.addEventListener('click', function() {
                    document.querySelectorAll('.card').forEach(c => c.classList.remove('clicked-border'));
                    card.classList.add('clicked-border');
                });
            });



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

                let recordCount = responseData['recordTotal'] ?? 0;
                $('#list_record_count').text(recordCount);
            });

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

            function getDataDetail(id) {

                client_point_id = id;
                viewLeadId = 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: ajaxURLShowItemDetail + "?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 ResetInput() {
                $('#show_item_img').attr('src', '');
                $('#show_label_no').val();
                $('#show_certificate_no').val();
                $('#show_pcs').val();
                $('#show_diamond_type').val();
                $('#show_diamond_pcs').val();
                $('#show_gold_color').val();
                $('#show_gold_purity').val();
                $('#show_gross_weight').val();
                $('#show_net_weight').val();
                $('#show_labour_per').val();
                $('#show_labour_amount').val();
                $('#show_cost_rate').val();
                $('#show_cost_amount').val();
                $('#show_sales_amount').val();
                $('#show_discount_per').val();
                $('#show_discount_amount').val();
                $('#show_mrp').val();
                $('#show_description').val();
            }

            function viewItems(ID) {
                let ajaxURLViewUrl = "{{ route('view.quotation.template') }}";

                $.ajax({
                    type: 'GET',
                    url: ajaxURLViewUrl,
                    data: {
                        id: ID,
                    },
                    success: function(response) {
                        if (response.status === 1) {
                            $('#printModal').html(response.data);
                            $('#QuotationId').val(ID);

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

            function printItem(callback) {
                let ajaxURLprintUrl = "{{ route('print.quotation.template') }}";
                var quotationId = document.getElementById("QuotationId").value;

                $.ajax({
                    type: 'GET',
                    url: ajaxURLprintUrl,
                    data: {
                        id: quotationId,
                    },
                    success: function(response) {
                        if (response.status === 1) {
                            $('#quotation-print').html(response.data);
                            if (callback && typeof callback === 'function') {
                                callback();
                            }
                        } else {
                            alert('Failed to fetch data');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("Error:", error);
                    }
                });
            }

            function Download() {
                printItem(downloadPDF);
            }

            function downloadPDF() {
                var modalContent = document.getElementById("quotation-print");

                if (!modalContent) {
                    console.error("Error: quotation-print not found.");
                    return;
                }

                var csrfTokenMeta = document.querySelector('meta[name="csrf-token"]');
                if (!csrfTokenMeta) {
                    console.error("Error: CSRF token meta tag is missing.");
                    return;
                }

                var csrfToken = csrfTokenMeta.getAttribute('content');
                var downloadUrl = "{{ url('/download-quotation-pdf') }}";

                fetch(downloadUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({
                            content: modalContent.innerHTML
                        })
                    })
                    .then(response => {
                        if (!response.ok) {
                            return response.text().then(text => {
                                throw new Error(`Error ${response.status}: ${text}`);
                            });
                        }
                        return response.blob();
                    })
                    .then(blob => {
                        if (blob.size < 100) {
                            console.error("Error: Received an invalid or empty PDF file");
                            return;
                        }

                        var link = document.createElement('a');
                        link.href = window.URL.createObjectURL(blob);
                        link.download = "quotation.pdf";
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    })
                    .catch(error => console.error('Error:', error));
            }
            $('#addQuotation').on('click', function() {
                localStorage.removeItem("party_detail");
            });
            // function printDiv() {
            //             let content = document.getElementById('printModal').innerHTML;
            //             let myWindow = window.open('', '', 'width=1200,height=600');
            //             myWindow.document.write('<html><head><title>Print</title></head><body>');
            //             myWindow.document.write(content);
            //             myWindow.document.write('</body></html>');
            //             myWindow.document.close();
            //             myWindow.focus();
            //             myWindow.print();
            //             myWindow.close();
            //         }

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

            function convertToOrder(id) {
                localStorage.clear();
                localStorage.setItem("quot_id", id);
                window.location.href = "{{ route('quotation.sales.order.add') }}";
            }
        </script>
    @endsection