@extends('layouts.app')

@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('/plugins/dataTables/datatables.min.css') }}" >
    <style>
        .table.table-striped{
            width: 100% !important;
        }
    </style>
@endsection

@section('content')

    <div class="studio98_websters">
        <div class="studio98_websters" >
            <div class="ibox float-e-margins">
            <div class="ibox-title2">
                        <h5>Manage Products</h5>
                        <div class="pull-right">
                            <a class="btn btn-primary" href="{!! ecommerce_url('product/add') !!}" >
                                Add Product
                            </a>
                        </div>
                    </div>
                <div class="ibox-content p-md">
                    @include('flash::message')
                    <div class="clearfix"></div>
                    <div class="table-responsive">
                        <div class="clearfix"></div>
                        <table class="table table-striped table-bordered table-hover" id="prodcut_listing">
                            <thead>
                            <tr>
                                <th>Product Title</th>
                                <th>Brand</th>
                                <th>SKU</th>
                                <th>Category</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script src="{{ asset('/plugins/dataTables/datatables.min.js') }}"></script>
    <script src="{{ asset('/plugins/dataTables/dataTables.bootstrap4.min.js') }}"></script>    <script>
        $(document).ready(function() {
            $('#prodcut_listing').dataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                bSort: true,
                pageLength: 25,
                dom: 'lftip',
                language: {
                    lengthMenu: " _MENU_ ",
                    searchPlaceholder: "Search...",
                    search: '', /* removed search label */
                },
                ajax : {
                    url: "{{ ecommerce_url('product/show') }}",
                    data: function (data) {
                    }
                },
                aoColumnDefs: [
                    {
                        bSortable: false,
                        'aTargets': ['nosort']
                    }
                ],
            });
        });
    </script>
@endsection