@section('vendor_scripts')
    <script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/datatables.bootstrap4.min.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/responsive.bootstrap4.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <script src="{{ asset('dashboardAssets') }}/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
@endsection

@section('page_scripts')
<script src="{{ asset('dashboardAssets') }}/js/scripts/tables/table-datatables-basic.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>
    $(window).on('load', function() {
        if (feather) {
            feather.replace({
                width: 14,
                height: 14
            });
        }
    });
    var bills_list=[];
    $(document).ready(function() {
        // $('.print_btn_list').click(function() {
        //     $('.check_list').each(function() { $(this).prop('checked', false) });
        //     bills_list=[];
        // });
        $('#mashi_karim').select2();
    });
    
    function change_print_status(bill_id) {
        // e.preventDefault();
        // var bill_id = $(this).val();
        // alert(bill_id);
        $.ajax({
            url: "{{ route('dashboard.bill.change_print_status') }}",
            type: 'post',
            data: "bill_id=" + bill_id +"&_token=" + "{{ csrf_token() }}",
            dataType:"json",
            success: function (data) {
                console.log(data);
                if (data['print_status'] == 1) {
                    $('#customSwitch' + data['bill_id']).attr("checked", true);
                    $('.bill_lable' + data['bill_id']).text(data['text']);
                }else{
                    $('#customSwitch' + data['bill_id']).removeAttr("checked");
                    $('.bill_lable' + data['bill_id']).text(data['text']);
                }
            },
        });
    }

        function getData() {
            $(".datatable-new-ajax").DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('dashboard.bill-ajax.index') }}?"+$.param(@json(request()->query())),
                    type: 'GET',
                    dataSrc: 'data'
                },
                columnDefs: [
                      {
                         orderable: false,
                         targets: 0,
                         checkboxes: {
                            selectRow: true
                         }
                      }
                  ],
                  order:[7,'desc'],
                columns: [
                  
                  {
                    data: function (data) {
                            return  `<div class="vs-checkbox-con vs-checkbox-primary justify-content-center">
                            <input type="checkbox" class="check_list" value="${data.id}" name="bill_list[]"/>
                            <span class="vs-checkbox">
                                <span class="vs-checkbox--check">
                                    <i class="vs-icon feather icon-check"></i>
                                </span>
                            </span></div>`;
                    }
                  },

                  {
                    class: 'text-center',
                    data: "id"
                  },
                  {
                    class : "product-img sorting_1",
                    data: function(info) {
                        return `<a href="${ info.qr_code }" data-fancybox="gallery">
                        <div class="avatar">
                        <img src="${ info.qr_code }" alt="" style="width:60px; height:60px;" class="img-thumbnail rounded">
                        <span class="avatar-status-busy avatar-status-md" id="online_${ info.id }"></span>
                        </div>
                        </a>`;
                    }
                  },
                  {
                    class: 'text-center',
                    data: "company_name"
                  },
                  {
                    class: 'text-center',
                    data: "company_nickname"
                  },
                  {
                    class: 'text-center',
                    data: "category_name"
                  },
                  {
                    class: 'text-center',
                    data: "customer_name"
                  },
                  {
                    class: 'text-center',
                    data: "total_amount"
                  },
                  {
                  
                    class: 'text-center',
                    data: "print_status"
                  },
                  {
                    class: 'text-center',
                    data: function(info) {
                        return `<div class="badge badge-primary display-1 badge-md mr-1 mb-1">${info.created_at}</div>`;
                    }
                  },
                  {
                    class : "text-center font-weight-bolder",
                    data: function(data) {
                        return `<a onclick="deleteItem('${data.id}' , '${data.destroy_link}')" class="text-danger" title="{!! trans('dashboard.general.delete') !!}">
                        <i class="icofont-ui-delete text-bold font-medium-3"></i>
                        </a>
                        <a target="_blank" href="${data.print_link}" class="text-primary mr-2" title="{!! trans('dashboard.general.print') !!}">
                        <i class="icofont-print text-bold font-medium-3"></i>
                                </a>
        
                        <a target="_blank" href="${data.edit_link}" class="text-success" title="{!! trans('dashboard.general.edit') !!}">
                        <i class="icofont-edit text-bold font-medium-3"></i>
                        </a>`;
                    }
                  }
                ],
                dom:
                  '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-right"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                buttons: [
                  {
                    extend: 'collection',
                    className: 'btn btn-outline-secondary dropdown-toggle mr-2',
                    text: feather.icons['share'].toSvg({ class: 'font-small-4 mr-50' }) + 'Export',
                    buttons: [
                      {
                        extend: 'print',
                        text: feather.icons['printer'].toSvg({ class: 'font-small-4 mr-50' }) + 'Print',
                        className: 'dropdown-item',
                        exportOptions: { columns: ':not(:last-child)' }
                      },
                      {
                        extend: 'csv',
                        text: feather.icons['file-text'].toSvg({ class: 'font-small-4 mr-50' }) + 'Csv',
                        className: 'dropdown-item',
                        exportOptions: { columns: ':not(:last-child)' }
                      },
                      {
                        extend: 'excel',
                        text: feather.icons['file'].toSvg({ class: 'font-small-4 mr-50' }) + 'Excel',
                        className: 'dropdown-item',
                        exportOptions: { columns: ':not(:last-child)' }
                      },
                      {
                        extend: 'pdf',
                        text: feather.icons['clipboard'].toSvg({ class: 'font-small-4 mr-50' }) + 'Pdf',
                        className: 'dropdown-item',
                        exportOptions: { columns: ':not(:last-child)' }
                      },
                      {
                        extend: 'copy',
                        text: feather.icons['copy'].toSvg({ class: 'font-small-4 mr-50' }) + 'Copy',
                        className: 'dropdown-item',
                        exportOptions: { columns: ':not(:last-child)' }
                      }
                    ],
                    init: function (api, node, config) {
                      $(node).removeClass('btn-secondary');
                      $(node).parent().removeClass('btn-group');
                      setTimeout(function () {
                        $(node).closest('.dt-buttons').removeClass('btn-group').addClass('d-inline-flex');
                      }, 50);
                    }
                    },
                    {
                      text: feather.icons['plus'].toSvg({ class: 'mr-1 font-small-2' }) + '{{ trans('dashboard.bill.add_bill') }}',
                      className: 'create-new btn btn-primary',
                      attr: {
                        'onclick': 'location.href="{{ route('dashboard.bill.create') }}"',
                      },
                      init: function (api, node, config) {
                        $(node).removeClass('btn-secondary');
                      }
                    }
                ],
                lengthMenu: [[10,25, 100], [10,25, 100]],
                pageLength: 10,
                createdRow: function(row, data) {
                    $(row).addClass(`${data.id}`);
                    $('a.fancybox', row).fancybox();
                },
                language: {
                  paginate: {
                    // remove previous & next text from pagination
                    previous: '&nbsp;',
                    next: '&nbsp;',
                  }
                }
            });
            $('div.head-label').html('<h4 class="mb-0">{{ trans('dashboard.bill.bills') }}</h4>');
        }
    </script>
@endsection