@extends('layout.admin', ['title' => 'Product Export', 'active' => 'product_export'])
@section('content')
    <div class="app-content main-content">
        <div class="side-app">
            <div class="container-fluid main-container">

                <!--Page header-->
                <div class="page-header">
                    <div class="page-leftheader">
                        <h4 class="page-title">Product Exporter</h4>
                    </div>
                </div>
                <!--End Page header-->

                <!-- Row -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">Product Export</div>
                            </div>
                            <div class="card-body">
                                <div class="">
                                    <div class="table-responsive">
                                        <table id="example" class="table table-bordered text-nowrap key-buttons">
                                            <thead>
                                                <tr>
                                                    <th class="border-bottom-0">Title</th>
                                                    <th class="border-bottom-0">Stock</th>
                                                    <th class="border-bottom-0">Price</th>
                                                    <th class="border-bottom-0">Discounted Price</th>
                                                    <th class="border-bottom-0">Category(Sub)</th>
                                                    <th class="border-bottom-0">Order</th>
                                                    <th class="border-bottom-0">Rating</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($products as $product)
                                                    <tr>
                                                        <td>{{ Str::limit($product->title, 25) }}</td>
                                                        <td>{{ $product->sku }}</td>
                                                        <td>{{ $product->price }}</td>
                                                        <td>{{ $product->discounted_price }}</td>
                                                        <td>{{ $product->category->category_name }}({{ $product->subcategory->sub_category_name }})</td>
                                                        <td>{{ $product->order_count }}</td>
                                                        <td>{{ $product->rating }}</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="6"> <h4 class="text-center text-muted">No Data!</h4> </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                   <!-- /Row -->
            </div>
        </div>
        <!-- end app-content-->
    </div>
@endsection

@section('custom_js')
    @include('admin.widgets.datatablescript')
    <script>
        $(document).ready(function(){
            const dataTableTitle = 'Product Report';
            const dataTableOptions = {
                dom: 'Blfrtip',
                lengthMenu: [30, 50,
                    100, 200
                ],
                buttons: [
                    {
                        extend: 'colvis',
                        fade: 0,
                        className: 'btn btn-primary'
                    },
                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: ':visible'
                        },
                        title: dataTableTitle,
                        className: 'btn btn-primary'
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: ':visible'
                        },
                        title: dataTableTitle,
                        className: 'btn btn-primary'
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: ':visible'
                        },
                        title: dataTableTitle,
                        className: 'btn btn-primary'
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: ':visible',
                        },
                        title: dataTableTitle,
                        className: 'btn btn-primary'
                    }
                ],
                initComplete: function() {
                    $('.dt-buttons').addClass('btn-group');
                    $('.dt-button').removeClass('dt-button');
                }
            }
            $('#example').DataTable(dataTableOptions);
        });
    </script>

    <!-- Circle-progress js-->
    <script src="{{asset('assets/admin/js/vendors/circle-progress.min.js')}}"></script>

    <!-- Jquery-rating js-->
    <script src="{{asset('assets/admin/plugins/rating/jquery.rating-stars.js')}}"></script>
     <!-- Select2 js -->
     <script src="{{asset('assets/admin/plugins/select2/select2.full.min.js')}}"></script>
     <script src="{{asset('assets/admin/js/select2.js')}}"></script>

    <!-- Data tables -->

   


@endsection