@extends(branchMenu())
@section('content')
    <?php Fun::lang()?>

    <div class="container-fluid">
        <div class="">
            <div class="top-content">
                <div class="row">
                    <div class="col-sm-12 col-xs-12">
                        <div class="title-add">
                            <div class="pull-left">
                                <h3>{{__('administrator.products')}} </h3>
                            </div>
                            <div class="pull-right">
                                @can('Products Create')
                                    <a href="{{route('products.create')}}" class="button_primary">
                                        <span class="fa fa-plus"></span> {{__('administrator.new_product')}}
                                    </a>
                                    <a data-name="Import" data-href="{{route('products-import-exel')}}" data-width="800px" class="button_info getHtmlForm">
                                        <span class="fa fa-upload"></span> {{__('administrator.import')}}
                                    </a>

                                    <a href="{{route('products-image-list')}}" class="button_info">
                                        <span class="fa fa-image"></span> {{__('administrator.upload')}}
                                    </a>

                                @endcan
                                <a href="{{route('products-print-barcode')}}" class=" button_success btn_print_list_barcode">
                                    <span class="fa fa-barcode"></span> {{__('administrator.barcode')}}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wrapper-table">
                <table id="datatable_products" class="table  table-striped table-hover">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>{{__('administrator.image')}}</th>
                        <th>{{__('administrator.product_code')}}</th>
                        <th>{{__('administrator.item_name')}}</th>
                        <th>{{__('administrator.brands')}}</th>
                        <th>{{__('administrator.category')}}</th>
                        @can('Show Purchase Item Price')
                            <th>{{__('administrator.cost')}}</th>
                        @endcan
                        <th>{{__('administrator.qty_alert')}}</th>
                        <th>{{__('administrator.created_at')}}</th>
                        <th>{{__('administrator.action')}}</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function () {
            $('#datatable_products').on('click', '.delete', function () {
                let _this = $(this);
                let url = _this.data('url');
                $.confirm({
                    'title': '{{__('administrator.delete')}}',
                    'content': '{{__('administrator.are_you_sure')}}',
                    'theme': 'modern',
                    buttons: {
                        delete: {
                            btnClass: 'button_danger',
                            text: '{{__('administrator.delete')}}',
                            action: function () {
                                $.ajax({
                                    url: url,
                                    async: false,
                                    success: function (data) {
                                        if (data === 'ok') {
                                            _this.closest('tr').remove();
                                        }
                                    }
                                });
                            }
                        },
                        cancel: {
                            btnClass: 'button_warning',
                            text: '{{__('administrator.cancel')}}',
                            action: function () {

                            }
                        },
                    }
                });
            });
            $(document).on('click', '.print_barcode', function () {
                $(this).printThis();
            });

            $(document).on('click', '.show_productsinfo', function () {
                let url = $(this).data('url');
                getHtmlFormShow(url, "60%")
            });
            $(document).on('click', '.edit', function () {
                window.location.href = $(this).data('url');
            });
            $('#datatable_products').DataTable({
                "oLanguage": {
                    "sSearch": "{{__('administrator.search')}}:",
                    "sLengthMenu": "{{__('administrator.display')}} _MENU_ {{__('administrator.record_per_page')}}",
                    "sZeroRecords": "{{__('administrator.Nothing_foundsorry')}}",
                    "sInfo": "{{__('administrator.showing')}} _START_ {{__('administrator.to')}} _END_ {{__('administrator.of')}} _TOTAL_ {{__('administrator.record')}}",
                    "sInfoEmpty": "{{__('administrator.showing')}} 0 {{__('administrator.to')}} 0 {{__('administrator.of')}} 0 {{__('administrator.record')}}",
                    "sInfoFiltered": "({{__('administrator.filter_form')}} _MAX_ {{__('administrator.total_records')}})",
                    "oPaginate": {
                        "sFirst": "{{__('administrator.first')}}",
                        "sLast": "{{__('administrator.last')}}",
                        "sNext": "{{__('administrator.next')}}",
                        "sPrevious": "{{__('administrator.previous')}}"
                    },
                },
                ordering: true,
                serverSide: true,
                lengthMenu: tbLeng,
                ajax: {},
                columns:
                    [
                        {data: 'DT_RowIndex', searchable: false, "orderable": "false"},
                        {
                            data: 'images', name: 'images',
                            render: function (data, type, full, meta) {
                                return "<div class=\"popover__wrapper\"><img src=\"" + data + "\" width=\"30\"/><div class=\"popover__content\"><img src=\"" + data + "\" width=\"350\"/></div></div>";
                            }
                        },
                        {data: 'barcode'},
                        {data: 'product_name', 'name': 'nso007_products.product_name'},
                        {data: 'brand', 'name': 'nso007_products.brand'},
                        {data: 'category_id'},
                            @can('Show Purchase Item Price')
                        {
                            data: 'cost_usd', 'searchable': false
                        },
                            @endif

                        {data: 'alert_qty', 'searchable': false},
                        {data: 'created_at', 'searchable': false},
                        {data: 'action'},

                    ],
                "initComplete": function (settings, json) {
                }

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


