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

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

        thead,
        tfoot {
            display: none !important
        }

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

    }

    @font-face {
        font-family: 'Amiri';
        /* src: url('{{ public_path(' font/Amiri-Regular.ttf') }}') format('truetype'); */
        src: url('{{ asset('font/Amiri-Regular.ttf') }}') format('truetype');
    }
</style>
<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-2 font-size-18">Order</h4>

                    <a class="btn btn-primary waves-effect waves-light" href="{{ route('add.order') }}" role="button"><i
                            class="bx bx-plus font-size-16 align-middle me-2"></i>Add Order</a>
                </div>
            </div>
        </div>
        <!-- end page title -->
        <!-- start row -->


        <div class="row">

            <div class="card">
                <div class="card-body">
                    {{-- @include('../users/comman/tab') --}}
                    <div class="table-responsive">
                        <table id="datatable"
                            class="table align-middle table-nowrap table-hover table-striped dt-responsive nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Detail</th>
                                    <th>Order By</th>
                                    <th>Client Detail</th>
                                    <th>Payment Amount</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>


                            <tbody>

                            </tbody>
                        </table>

                    </div>

                    <!-- start model -->


                    <div class="modal fade" id="modalOrder" data-bs-backdrop="static" data-bs-keyboard="true"
                        tabindex="-1" role="dialog" aria-labelledby="modalOrderLabel" aria-hidden="true">

                        <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable"
                            role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="modal-title">Order</h5>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <h5 class="modal-title">Edit Order</h5>&nbsp;&nbsp;&nbsp;&nbsp;
                                    @if (Auth::user()->type == 1)
                                    <label class="switch" id="is_edit_switch_div">

                                    </label>
                                    @endif

                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>


                                <div class="modal-body" id="modal">

                                </div>
                                <div class="modal-footer">
                                    <a href="javascript:void(0)" class="btn btn-primary" id="itempdfPrint">Print</a>
                                    <a href="javascript:void(0)" target="_blank" class="btn btn-secondary"
                                        id="itempdfdownload">Download</a>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ennd model -->
            <br>


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




<!-- end row -->
</div>
<!-- container-fluid -->
</div>
<!-- End Page-content -->






@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/css/font.css') }}"></script> --}}
<script src="{{ asset('assets/libs/kendo/kendo.all.min.js') }}"></script>

{{-- PDF --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>

@include('../users/comman/modal')

<script type="text/javascript">
    var order_id = 0;
                            var ajaxURlOrderActive = '{{ route('users.order.active') }}'
                            var ajaxURL = '{{ route('users.order.ajax') }}';
                            var ajaxOrderDetail = '{{ route('users.order.orderEdite') }}';
                            var csrfToken = $("[name=_token").val();

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


                            var table = $('#datatable').DataTable({
                                "aoColumnDefs": [{
                                    "bSortable": false,
                                    "aTargets": []
                                }],
                                "order": [
                                    [0, 'desc']
                                ],
                                "processing": true,
                                "serverSide": true,
                                "pageLength": usersPageLength,
                                "ajax": {
                                    "url": ajaxURL,
                                    "type": "POST",
                                    "data": {
                                        "_token": csrfToken,
                                    }
                                },
                                "aoColumns": [{
                                        "mData": "id"
                                    },
                                    {
                                        "mData": "order_by"
                                    },
                                    {
                                        "mData": "customer_name"
                                    },
                                    {
                                        "mData": "payment_detail"
                                    },
                                    {
                                        "mData": "status"
                                    },
                                    {
                                        "mData": "action"
                                    },

                                ]
                            });


                            $('#datatable').on('length.dt', function(e, settings, len) {
                                setCookie('usersPageLength', len, 100);
                            });


                            function ViewOrder(id) {
                                order_id = id;
                                $("#modalOrder").modal('show');
                                $("#modal-title").html("Order #" + id);
                                $("#orderDetailLoading").show();
                                $('#loadr').hide();
                                $("#orderDetailBody").hide();
                                $.ajax({
                                    type: 'GET',
                                    url: ajaxOrderDetail + "?order_id=" + id,
                                    success: function(resultData) { 
                                        $('#modal').html(resultData['view']);
                                        if (resultData['status'] == 1) {
                                            if (resultData['data']['Order']['is_edit'] == 1) {
                                                $('#is_edit_switch_div').html(
                                                    '<input name="someSwitchOption001" value="" class="ads_Checkbox modal-checkbox" type="checkbox" id="Active_switch" onchange="InvoiceActive(' +
                                                    id + ', 0)" checked="" /><span class="slider"></span>')
                                            } else {
                                                $('#is_edit_switch_div').html(
                                                    '<input name="someSwitchOption001" value="" class="ads_Checkbox modal-checkbox" type="checkbox" id="Active_switch" onchange="InvoiceActive(' +
                                                    id + ', 1)"/><span class="slider"></span>')
                                            }
                                        }
                                    }
                                });
                            }
                        
                            

                            {{--  var ajaxInvoicePDF = '{{ route('users.order.invoicePDF') }}';
                            $('#itempdfdownload').on('click', function() {
                                $('#itempdfdownload').attr('href', ajaxInvoicePDF + "?order_id=" + order_id)
                            })    --}}

                            $(document).ready(function() {
                                $('#itempdfdownload').on('click', function(e) {
                                    e.preventDefault();
                                    var $btn = $(this);  
                                    var modalContent = document.getElementById('modal');  
                                    const customerName = $("#PrintCustomerName").val();
                                    const filename = `${order_id}_${customerName.replace(/\s+/g, '_').toLowerCase()}.pdf`;
                                
                                    $btn.prop('disabled', true).text('Downloading...');

                                   var opt = {
                                        margin: [5, 5, 2, 5], // Top, Right, Bottom, Left margins
                                        filename: filename,
                                        image: { type: 'png', quality: 100 },
                                        html2canvas: { scale: 3 },
                                        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
                                    };


                                    html2pdf()
                                        .from(modalContent)
                                        .set(opt)
                                        .save()
                                        .then(function() {
                                            $btn.prop('disabled', false).text('Download');
                                        })
                                        .catch(function(error) {
                                            console.error('Error generating PDF:', error);
                                            $btn.prop('disabled', false).text('Download');
                                        });
                                    });
                                });

                            
                        {{--  $('#itempdfPrint').on('click', function() {
                                const customerName = $("#PrintCustomerName").val();
                                const filename = `${order_id}_${customerName.replace(/\s+/g, '_').toLowerCase()}.pdf`;

                                var divToPrint = document.getElementById('modal');
                                var newWin = window.open('', 'Print-Window');
                                newWin.document.open();
                                newWin.document.write('<html><head><title>' + filename + '</title></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
                                newWin.document.close();

                                setTimeout(function() {
                                    newWin.close();
                                }, 1000);   
                            });  --}}

                            $('#itempdfPrint').on('click', function () {
                                const customerName = $("#PrintCustomerName").val();
                                const filename = `${order_id}_${customerName.replace(/\s+/g, '_').toLowerCase()}.pdf`;

                                var divToPrint = document.getElementById('modal');
                                var newWin = window.open('', 'Print-Window');

                                newWin.document.open();
                                newWin.document.write(`
                                    <html>
                                    <head>
                                        <title>${filename}</title>
                                        <style>
                                            /* General body styling */
                                            body {
                                                color: #C09055 !important;
                                                font-family: 'Amiri', serif;
                                                margin: 6mm;   /* Adjust margin as needed */
                                            }

                                            /* Page-specific margin for PDF */
                                            @page {
                                                size: A4;
                                                margin: 2mm;  /* Ensure the margin works in PDF context */
                                            }

                                            /* Hide table header and footer on the invoice table */
                                            .invoice-table thead,
                                            .invoice-table tfoot {
                                                display: none !important;
                                            }

                                            /* Styling for table header */
                                            .terms-header {
                                                display: table-header-group !important;
                                                text-align: right;
                                                font-weight: bold;
                                            }

                                            /* General table styling */
                                            table {
                                                width: 100%;
                                                border-collapse: collapse;
                                            }

                                            /* Table cell styling */
                                            td, th {
                                                padding: 5px 8px;
                                                vertical-align: top;
                                            }

                                            /* Font-face for Amiri */
                                            @font-face {
                                                font-family: 'Amiri';
                                                src: url('{{ asset('font/Amiri-Regular.ttf') }}') format('truetype');
                                            }
                                        </style>


                                    </head>
                                    <body onload="window.print()">
                                        ${divToPrint.innerHTML}
                                    </body>
                                    </html>
                                `);
                                newWin.document.close();

                                setTimeout(function () {
                                    newWin.close();
                                }, 1000);
                            });


                            function InvoiceActive(id, is_edit) {
                                $.ajax({
                                    type: 'POST',
                                    url: ajaxURlOrderActive,
                                    data: {
                                        'id': order_id,
                                        'is_edit': is_edit,
                                        '_token': $("[name=_token]").val()
                                    },
                                    success: function(resultData) {
                                        if (resultData['status'] == 1) {
                                            toastr["success"](resultData['msg']);
                                        } else {
                                            toastr["error"](resultData['msg']);
                                        }
                                    }
                                })
                            }
</script>

@include('../users/comman/script')
@endsection