@extends('layouts.layout')

@section('title', 'Shop Orders')

@section('content')

    <section class="content-inner">
        <div class="main-right-teaser">
            <div class="permission-block">
                <div class="permission-header d-flex justify-content-between">
                    <h3>Shop Orders</h3>
                    <div class="d-flex custom-gap">
                        @if (Auth::user()->role_id == 7)
                            <a href="javascript:void(0)" class="btn download-pdf disabled-form allocation-btn">Download pdf
                                <div class="allocation-loader d-none"><img src="{{ asset('images/loader-white.svg') }}" /></div>
                            </a>

                            <a href="javascript:void(0)" class="btn download-csv disabled-form allocation-btn">Download csv
                                <div class="allocation-loader d-none"><img src="{{ asset('images/loader-white.svg') }}" /></div>
                            </a>
                        @endif

                        <select name="order_status" id="order_status" onchange="order_status_change()"
                            class="form-select width-auto">
                            <option value="all">Order Status: All</option>
                            <option value="complete">Order Status: Dispatched</option>
                            <option value="pending">Order Status: Not Dispatched</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="permission-block">

                <div class="table-wrap-class">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>
                                    <div class="form-check">
                                        <input style="margin-left: -16px;" class="form-check-input" type="checkbox" name="multipleselect" id="multipleselect">
                                    </div>
                                </th>
                                <th>Order ID</th>
                                <th>Date / Time Ordered</th>
                                <th>Customer Name</th>
                                <th>Customer Address</th>
                                <th>Status</th>
                                <th>Items</th>
                                <th>CTA</th>
                            </tr>
                        </thead>
                        <tbody>

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

    <div class="modal fade small-modal" id="orderNotesModal" >
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">

                <div class="modal-body text-center">
                    <button type="button" class="close" onclick="clode_view_notes()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="mt-2">Order Notes</h4>


                    <div id="orderNotes"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>

    <script type="text/javascript">

        var user_id = "{{ $shopSuppliersId }}";

        $('#multipleselect').click(function() {
            if ($("#multipleselect").prop('checked') == true) {
                $('.download-csv').removeClass('disabled-form');
                $('.download-pdf').removeClass('disabled-form');
                $(".selectmultiple").prop("checked", true);

                var arr = $('input[name="checkbox[]"]:checked').map(function(){
                    return this.value;
                }).get();

                $(".download-csv").attr('href','/shop-venor-product-excel-export/'+arr+'/'+user_id);
                $(".download-csv").attr('onclick','mark_as_csv_and_packging_list_download("'+arr+'", '+user_id+', "bulk")');
                $(".download-pdf").attr('href','/shop-venor-product-pdf-export/'+arr+'/'+user_id);
                $(".download-pdf").attr('onclick','mark_as_csv_and_packging_list_download("'+arr+'", '+user_id+', "bulk")');
            } else {
                $('.download-csv').addClass('disabled-form');
                $('.download-pdf').addClass('disabled-form');
                $(".selectmultiple").prop("checked", false);
                $(".download-csv").attr('href','javascript:void(0)');
                $(".download-csv").attr('onclick','');
                $(".download-pdf").attr('href','javascript:void(0)');
                $(".download-pdf").attr('onclick','');
            }


        });

        function checkuncheck() {
            if ($('input[name="checkbox[]"]:checked').length > 0) {
                $('.download-csv').removeClass('disabled-form');
                $('.download-pdf').removeClass('disabled-form');

                var arr = $('input[name="checkbox[]"]:checked').map(function(){
                    return this.value;
                }).get();
                $(".download-csv").attr('href','/shop-venor-product-excel-export/'+arr+'/'+user_id);
                $(".download-csv").attr('onclick','mark_as_csv_and_packging_list_download("'+arr+'", '+user_id+', "bulk")');

                $(".download-pdf").attr('href','/shop-venor-product-pdf-export/'+arr+'/'+user_id);
                $(".download-pdf").attr('onclick','mark_as_csv_and_packging_list_download("'+arr+'", '+user_id+', "bulk")');
            } else {
                $('.download-csv').addClass('disabled-form');
                $(".download-csv").attr('href','javascript:void(0)');
                $(".download-csv").attr('onclick','');

                $('.download-pdf').addClass('disabled-form');
                $(".download-pdf").attr('href','javascript:void(0)');
                $(".download-pdf").attr('onclick','');
            }
        }

        function mark_as_csv_and_packging_list_download(order_id, supplier_id, type) {

            var formData = new FormData();
            formData.append('order_id', order_id);
            formData.append('supplier_id', supplier_id);
            formData.append('type', type);

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '/update-csv-and-packging-download-file-status',
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(response) {
                    $('.table-wrap-class .table').DataTable().ajax.reload();
                },
            })
        }

        function clode_view_notes() {
            $("#orderNotesModal").modal('hide');
        }

        function view_notes(notes) {

            var orderNotes = "<p>"+ notes +"</p>";
            $("#orderNotes").html(orderNotes);
            $("#orderNotesModal").modal('show');
        }

        function order_status_change() {
            $('.table-wrap-class .table').DataTable().ajax.reload();
        }

        $(function() {

            var role_id = "{{ Auth::user()->role_id }}";

            var table = $(".table-wrap-class .table").DataTable({
                processing: true,
                serverSide: true,
                "order": [],

                dom: '<"custom-table-info"<"custom-table-left"><"custom-table-right"frlp>><"custom-table"t>p',
                language: {
                    searchPlaceholder: "Search",
                },
                language: {
                    searchPlaceholder: "Search",
                    "lengthMenu": '<select class="form-select">' +
                        '<option value="50">Show: 50</option>' +
                        '<option value="75">Show: 75</option>' +
                        '<option value="100">Show: 100</option>' +
                        '<option value="150">Show: 150</option>' +
                        '<option value="-1">Show: All</option>' +
                        '</select> '
                },
                pageLength: 50,
                ajax: {
                    url: "{{ route('shop-vendor-orders') }}",
                    data: function(d) {
                        d.search = $('input[type="search"]').val();
                        d.order_status = $('#order_status').val();
                    }
                },
                columns: [
                    {
                        data: 'multipleselect',
                        name: 'multipleselect',
                        orderable: false,
                        searchable: false,
                        visible: ((role_id == "7") ? true : false)
                    },
                    {
                        data: 'order_number',
                        name: 'order_number',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        serachable: true
                    },
                    {
                        data: 'first_name',
                        name: 'first_name'
                    },
                    {
                        data: 'customer_address',
                        name: 'customer_address'
                    },
                    {
                        data: 'order_shipping_status',
                        name: 'order_shipping_status',
                        orderable: false
                    },
                    {
                        data: 'items',
                        name: 'items'
                    },
                    {
                        data: 'cta',
                        name: 'cta',
                        visible: ((role_id == "7") ? true : false)
                    }
                ],
                fnDrawCallback: function(oSettings, json) {

                    // $("html, body").animate({
                    //         scrollTop: $(".table-wrap-class").offset().top,
                    //     },
                    //     "slow"
                    // );
                    if ($('.table-wrap-class').find(".dataTables_paginate").eq(0).find('span').find("a")
                        .length > 1) {
                        $('.table-wrap-class').find(".dataTables_paginate").show();
                    } else {
                        $('.table-wrap-class').find(".dataTables_paginate").hide();
                    }
                },
                "createdRow": function( row, data, dataIndex) {

                    if(data['is_csv_and_packging_list_download'] == 1){
                        $(row).addClass('shop-vendor-row');
                    }
                },
                ordering: true,
                buttons: [{
                        extend: "excelHtml5",
                        orientation: "landscape",
                        pageSize: "LEGAL",
                    },
                    {
                        extend: "pdfHtml5",
                        orientation: "landscape",
                        pageSize: "LEGAL",
                    },
                    {
                        extend: "print",
                        customize: function(win) {
                            $(win.document.body).css("font-size", "10pt");

                            $(win.document.body)
                                .find("table")
                                .addClass("compact")
                                .css("font-size", "inherit");
                        },
                    },
                ],
            });

        });

        function order_item_shipping_status(order_id, supplier_id, shipping_status) {
            Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger'
                },
                buttonsStyling: false
            }).fire({
                title: 'Are you sure?',
                text: ((shipping_status == "1") ? `You want this mark as dispatched?` : `You want this mark as not dispatched?`),
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {

                    var formData = new FormData();
                    formData.append('order_id', order_id);
                    formData.append('supplier_id', supplier_id);
                    formData.append('shipping_status', shipping_status);
                    formData.append('shipping_status_updated_by','vendor');

                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/update-shipping-status',
                        type: 'POST',
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(response) {

                            var obj = JSON.parse(response);
                            if (obj.status == true) {
                                $('.table-wrap-class .table').DataTable().ajax.reload();
                            } else {
                                alert(obj.message);
                            }

                        },
                    })
                }
            });
        }
    </script>
@endsection