@extends('admin.layout.master')
@push('css')

    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
    <style>

        table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child {
            border-right-width: 1px;
        }

        .input-group-btn {
            top: 13px;
        }
    </style>

@endpush
@section('content')

    <main id="app-main" class="app-main">

    <div class="wrap">
        <section class="app-content">
            <h3>@lang('admin.product_best_product')</h3>
        </section><!-- #dash-content -->
    </div><!-- .wrap -->


    <div class="col-md-12">
        <div class="widget">
            <header class="widget-header">
                <h4 class="widget-title">@lang('admin.product_best_product')</h4>
                <div class="alert alert-success">
                    @lang('admin.precentage_famous') : {{$percentage->personal_discount}} %
                </div>
            </header><!-- .widget-header -->


            <hr class="widget-separator">

            <div class="widget-body">
                <div class="text-danger">
                    <div>@lang('admin.total_sales') :
                        <span id="total">0</span>
                    </div>
                </div>


                <div class="text-danger">
                    <div>@lang('admin.precentage_famous') :
                        <span id="precentage_famous">0</span>
                    </div>
                </div>


                <div class="row">
                    <div class="table-responsive">
                        <div id="default-datatable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                            <div class="row">
                                <div class="col-md-12">
                                    <div>
                                        <div class="col-md-12">
                                            <div class="widget">

                                                <div class="widget-body">
                                                    <table id="reports_famouse"
                                                           class="table table-striped table-bordered"
                                                           style="width:100%">
                                                    </table>
                                                </div>
                                            </div><!-- .widget-body -->
                                        </div><!-- .widget -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </main>
        @endsection

        @push('js')
            <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
            <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
            <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
            <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
            <script>

                $('#datetimepicker1').datetimepicker();
                $('#datetimepicker2').datetimepicker();

                $('#btnFiterSubmitSearch').click(function () {
                    $('#reports_famouse').DataTable().draw(true);
                });

                $(document).ready(function () {
                    var table = $('#reports_famouse').DataTable({
                        responsive: true,
                        processing: true,
                        serverSide: true,
                        bStateSave: true,
                        stateSave: true,
                        bSortable: false,
                        bRetrieve: false,
                        order: [[0, "desc" ]],
                        ordering: false,

                        ajax: {
                            url: "{{ route('reports_famouse',request()->id) }}",
                            type: 'GET',

                            // data: function (d) {
                            //     d.company_id = $('#company_id').val();
                            // }
                        },
                        dom: 'Blfrtip',
                        buttons: [
                            'copy', 'csv', 'excel', 'pdf', 'print'
                        ],
                        lengthMenu: [
                            [10, 25, 50, -1], [10, 25, 50, "All"]
                        ],
                        columns: [
                            {data: 'order_id', name: 'order_id', title: "@lang('admin.order_id')"},
                            {data: 'value', name: 'value', title: "@lang('admin.value')"},
                            {data: 'code', name: 'code', title: "@lang('admin.code')"},
                            {data: 'total_price', name: 'total_price', title: "@lang('admin.total_price')"},
                        @if (auth()->user()->hasRole('super_admin') == 'true' || auth()->user()->hasRole('SecondAdmin') == 'true')
                        {data: 'action', name: 'action', title: "@lang('admin.action')"},
                            @endif
                            {{--{data: 'image', name: 'image', title: "@lang('admin.image')"},--}}
                            {{--{data: 'name', name: 'name', title: "@lang('admin.name')"},--}}
{{--                            {data: 'quantity', name: 'quantity', title: "@lang('admin.quantity')"},--}}
                            {{--{data: 'product', name: 'product', title: "@lang('admin.product')"},--}}

                        ],
                        footerCallback: function (tfoot, data, start, end, display) {
                            var api = this.api();
                            console.log(api);
                            this.api().columns(3).every(function () {
                                var column = this;
                                var sum = column
                                    .data()
                                    .reduce(function (a, b) {
                                        var x = parseFloat(a) || 0;
                                        var y = parseFloat(b) || 0;
                                        return x + y;
                                    }, 0);
                                $('#total').html($.number(sum,3));
                                $('#precentage_famous').html($.number(sum * "{{$number}}" ,3));
                            });
                        }

                    });
                });
            </script>


    @endpush