@section('content')


    <div class="row mt-5">
        <div class="col-md-4">
            <div class="card p-2">
                <h3>Produits de la semaine</h3>
                <table class="table table-striped bonuses-table">
                    <thead>
                    <tr>
                        <th>Produits</th>
                        <th>Vendeur</th>
                        <th>Commission</th>
                        @if(auth()->user()->phone=='98611913')
                            <th>action</th>
                            @endif
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($products as$product)
                        <tr>
                            <td>{{$product->admin}}</td>
                            <td>{{$product->product}}</td>
                            <td>{{$product->bonus}}</td>
                            @if(auth()->user()->phone=='98611913')
                                <th><a href=""><i class="fa fa-trash text-danger"></i></a></th>
                            @endif
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

        </div>
        @if(auth()->user()->phone=='98611913' || auth()->user()->phone=='56525990')
        <div class="col-md-8">

            <div class="card p-2">
                <h3>Mon Historique de commission</h3>

                <h4>Total A payer : <span id="total" class="text-success"></span> TND</h4>
                @if(in_array(auth()->user()->phone,['56525990','98611913']))
                <form action="{{route('admin.bl.payBulkBonus')}}" method="POST" style="display: inline" id="bulk_submit" class="mb-1" target="_blank">
                    @csrf

                    <button type="submit" class="btn btn-success btn-rounded waves-effect waves-light ml-1 mt-1" id="payBonus">
                        <span class="btn-label"><i class="fa fa-dollar-sign"></i></span> Payer Tous
                    </button>

                    <input type="hidden" id="bulk_submit_details" name="payBonus">
                </form>
                @endif
                <div id="example_wrapper mb-4" class="dataTables_wrapper">
                    <div class="row ">
                        <div class="col-md-3">
                            <label>Du</label>
                            <input autocomplete="off"  required type="date" class="form-control  filter-field"
                                   name="from" placeholder="De" id="from">
                        </div>
                        <div class="col-md-3">
                            <label>Au</label>
                            <input autocomplete="off"  required type="date" class="form-control  filter-field"
                                   name="to" placeholder="Au" id="to">
                        </div>
                        <div class="col-md-3">
                            <label>Vendeur</label>
                            <select class="form-control" name="seller" id="seller">
                                <option value="">Tous</option>
                                @foreach($admins as $admin)
                                    <option value="{{$admin->id}}">{{$admin->name}}</option>
                                @endforeach
                            </select>

                        </div>
                        <div class="col-md-3">
                            <label>Etat</label>
                            <select class="form-control " name="" id="statusfilter">
                                <option value="">Tous</option>
                                <option value="paid">Payé</option>
                                <option value="">Non payé</option>
                            </select>
                        </div>



                    </div>
                </div>


                <table class="table table-striped bonus_tbl" id="key-datatable">
                    <thead>
                    <tr>

                        <th>
                            <div class="checkbox checkbox-info">
                                <input type="checkbox" class="main_select" id="main_select">
                                <label for="main_select" id="main_select_label">
                                </label>
                            </div>
                        </th>
                        <th>Vendeur</th>
                        <th>BL</th>
                        <th>Produits</th>
                        <th>Prix</th>

                        <th>Quantité</th>
                        <th>Commission</th>
                        <th>Total</th>
                        <th>Date</th>
                        <th>Etat</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                    <tfoot>
                    <tr>

                        <th ></th>
                        <th class="team">Vendeur</th>
                        <th class="searchable">BL</th>
                        <th class="searchable">Produits</th>
                        <th class="searchable">Prix</th>
                        <th class="searchable">Quantité</th>
                        <th class="searchable">Commission</th>
                        <th class="">Total</th>
                        <th class="date">Date</th>
                        <th class="option">Etat</th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
            @endif
    </div>


@stop
@include('admin.header')
@include('admin.topbar')
@include('admin.sidebar')
@include('admin.footer')

@yield('header')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
<!-- Plugins css -->
<link href="{{URL::asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{URL::asset('assets/libs/datatables/dataTables.bootstrap4.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{URL::asset('assets/libs/datatables/responsive.bootstrap4.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{URL::asset('assets/libs/datatables/buttons.bootstrap4.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{URL::asset('assets/libs/datatables/select.bootstrap4.css')}}" rel="stylesheet" type="text/css"/>

{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
@yield('topbar')
@yield('sidebar')
@yield('content')
@yield('footer')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
<script src="{{URL::asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jquery-knob/jquery.knob.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jquery-sparkline/jquery.sparkline.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.js')}}"></script>
<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.time.js')}}"></script>
<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.tooltip.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.selection.js')}}"></script>
<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.crosshair.js')}}"></script>
<!-- third party js -->
<script src="{{URL::asset('assets/libs/select2/select2.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/datatables/jquery.dataTables.js')}}"></script>
<script src="{{URL::asset('assets/libs/datatables/dataTables.bootstrap4.js')}}"></script>
<script src="{{URL::asset('assets/libs/datatables/dataTables.responsive.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/datatables/responsive.bootstrap4.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/datatables/dataTables.buttons.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/datatables/buttons.bootstrap4.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/datatables/buttons.html5.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/datatables/buttons.flash.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/datatables/buttons.print.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/datatables/dataTables.keyTable.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/datatables/dataTables.select.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{URL::asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/multiselect/jquery.multi-select.js')}}"></script>
<script src="{{URL::asset('assets/libs/bootstrap-maxlength/bootstrap-maxlength.min.js')}}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.colVis.min.js" type="text/javascript"></script>



<!-- third party js ends -->
<!-- Dashboar 1 init js-->
<script src="{{URL::asset('assets/js/pages/dashboard-1.init.js')}}"></script>

<script>
    !function (o) {
        "use strict";
        var t = function () {
            this.$body = o("body")
        };
        t.prototype.createCombineGraph = function (t, a, e, i) {
            var r = [{label: e[0], data: i[0], lines: {show: !0, fill: !0}, points: {show: !0}},
                /*{
                label: e[1],
                data: i[1],
                lines: {show: !0},
                points: {show: !0}
                }, {label: e[2], data: i[2], bars: {show: !0, barWidth: .7}}*/
            ], l = {
                series: {shadowSize: 0},
                grid: {hoverable: !0, clickable: !0, tickColor: "#f1556c", borderWidth: 1, borderColor: "#eeeeee"},
                colors: ["#4fc6e1", "#4a81d4", "#1abc9c"],
                tooltip: !0,
                tooltipOpts: {defaultTheme: !1},
                legend: {
                    position: "ne",
                    margin: [0, -32],
                    noColumns: 0,
                    labelBoxBorderColor: null,
                    labelFormatter: function (o, t) {
                        return o + "&nbsp;&nbsp;"
                    },
                    width: 30,
                    height: 2
                },
                yaxis: {axisLabel: "Orders", tickColor: "#f5f5f5", font: {color: "#bdbdbd"}},
                xaxis: {axisLabel: "Daily", ticks: a, tickColor: "#f5f5f5", font: {color: "#bdbdbd"}}
            };
            o.plot(o(t), r, l)
        }, t.prototype.init = function () {
            var o = [
                [

                    [ 1, 10 ],
                ],


            ];
            this.createCombineGraph("#sales-analytics", [

                [ 3, "10-12-2022" ],

            ], ["Pickup", "Email Marketing", "Marketplaces"], o)
        }, o.Dashboard1 = new t, o.Dashboard1.Constructor = t
    }(window.jQuery), function (o) {
        "use strict";
        o.Dashboard1.init()
    }(window.jQuery);
    $(".datepicker").flatpickr({mode: "range"});
</script>
<script>
    $('.bonuses-table').dataTable();
    var table = $('#key-datatable').DataTable({

        processing: true,
        serverSide: true,

        ajax: "{{ route('admin.dashboard.bonus') }}",
        columns: [
            { data: 'checkbox', name: 'checkbox',

                orderable: false,
                paging: false,
                searchable: false,
                bSearchable: false,
                exportable: false},
            { data: 'name', name: 'bls.admin_id' },
            { data: 'bl', name: 'bl' },
            { data: 'product_name', name: 'product_name' },
            { data: 'product_price_selling', name: 'product_price_selling' },
            { data: 'product_quantity', name: 'product_quantity' },
            { data: 'product_bonus', name: 'product_quantity' },
            { data: 'totalBonus', name: 'totalBonus' },
            { data: 'created_at', name: 'bl_details.created_at' },
            { data: 'options', name: 'options' },

        ],
        order: [[6, 'desc']],
        drawCallback: function(settings) {
            $('#total').text(parseFloat(settings.json.bonus).toFixed(3));
        },



        aLengthMenu: [
            [10, 25, 50, 100, 200, -1],
            [10, 25, 50, 100, 200, "All"]
        ],

        dom: 'Blfrtip',
        responsive:false,
        initComplete: function () {
            // Apply the search
            this.api()
                .columns()
                .every(function () {
                    var that = this;
                    $('input,select', this.footer()).on('keyup change clear', function () {
                        if (that.search() !== this.value) {
                            that.search(this.value).draw();
                        }
                    });
                });
        },
    });

    $('#key-datatable tfoot .searchable').each(function () {
        var title = $(this).text();
        $(this).html('<input class="form-control" type="text" placeholder="Search ' + title + '" />');
    });
    $('#key-datatable tfoot .date').each(function () {
        var title = $(this).text();
        $(this).html('<input class="form-control" type="date" placeholder="Search ' + title + '" />');
    });
    $('#key-datatable tfoot .team').each(function () {
        var title = $(this).text();
        let select=`<select class="form-control">

                        <option value=""></option>
                        @foreach($admins as $admin)
                        <option value="{{$admin->id}}">{{$admin->name}}</option>
                        @endforeach
                    </select>`;
        $(this).html(select);
    });
    function filter() {
        var queryString = '?' + new URLSearchParams(filter).toString();
        var url = @json(route('admin.dashboard.bonus'));
        table.ajax.url(url + queryString).load();
        table.draw();
    }

    $(document).on('change', '.filter-field', function(e) {
        var key = $(this).attr('id');
        var value = $(this).val();
        filter[key] = value;
        filter();
    });

    $(document).on('change', '#statusfilter', function(e) {
        var value = $(this).val();
        filter['statusfilter'] = value;
        filter();
    });
    $(document).on('change', '#seller', function(e) {
        var value = $(this).val();
        filter['seller'] = value;
        filter();
    });
    document.getElementById("main_select_label").onclick = function() {
        var ele=document.getElementsByClassName('order_check');
        for(var i=0; i<ele.length; i++){

            ele[i].click();
        }
    };
    function updateRecord(element){
        let row_id=element.getAttribute('data-id');
        let Form = element.parentNode;
        console.log(Form);
        let formData = new FormData(Form);
        swal({
            title: 'Are you sure?',
            text: "Marquer cette commission comme payé!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonClass: 'btn btn-confirm mt-2',
            cancelButtonClass: 'btn btn-cancel ml-2 mt-2',
            confirmButtonText: 'Oui & Continuer!'
        }).then(function (result) {
            if (result.value==true) {
                $.ajax({
                    type: 'post',
                    url: "/admin/bl/updatebonus/" + row_id,
                    headers: {
                        'X-CSRF-TOKEN': '{{csrf_token()}}'
                    },
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (data) {
                        if (data == 'success') {
                            $.toast({
                                heading: 'Payé',
                                text: 'Record  modifié avec succés',
                                icon: 'success',
                                loader: true,
                                position:'top-right',// Change it to false to disable loader
                                loaderBg: '#5ba035',  // To change the background
                                bgColor: '#1abc9c',  // To change the background
                            });
                            $('#key-datatable').DataTable().draw('page');
                        } else {
                            swal({
                                    title: 'Non Payé !',
                                    text: "Record non payé",
                                    type: 'info',
                                    confirmButtonClass: 'btn btn-confirm mt-2'
                                }
                            )
                        }
                    }, error: function (reject) {
                        swal({
                                title: 'Non Payé !',
                                text: "Record non payé",
                                type: 'info',
                                confirmButtonClass: 'btn btn-confirm mt-2'
                            }
                        )
                    }
                });
            }
        })

    }
</script>
<script>

    $('body').on('click', '#payBonus', function (e) {
        var mydata = [];
        e.preventDefault();
        $('.bonus_tbl > tbody  > tr').each(function () {
            var checkbox = $(this).find('td:first-child .order_check');
            if (checkbox.prop("checked") == true) {
                var order_id = $(checkbox).data('id');
                mydata.push(order_id);
            }
        });
        var order_data = mydata.join(',');

        $('#bulk_submit_details').val(order_data);
        let Form = $('#bulk_submit')[0];
        let formData = new FormData(Form);
        swal({
            title: 'Are you sure?',
            text: "Marquer cette commission comme payé!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonClass: 'btn btn-confirm mt-2',
            cancelButtonClass: 'btn btn-cancel ml-2 mt-2',
            confirmButtonText: 'Oui & Continuer!'
        }).then(function (result) {
            if (result.value==true) {
                $.ajax({
                    type: 'post',
                    url: "{{route('admin.bl.payBulkBonus')}}",
                    headers: {
                        'X-CSRF-TOKEN': '{{csrf_token()}}'
                    },
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (data) {
                        if (data == 'success') {
                            $.toast({
                                heading: 'Payé',
                                text: 'Record  modifié avec succés',
                                icon: 'success',
                                loader: true,
                                position:'top-right',// Change it to false to disable loader
                                loaderBg: '#5ba035',  // To change the background
                                bgColor: '#1abc9c',  // To change the background
                            });
                            $('#key-datatable').DataTable().draw('page');
                        } else {
                            swal({
                                    title: 'Non Payé !',
                                    text: "Record non payé",
                                    type: 'info',
                                    confirmButtonClass: 'btn btn-confirm mt-2'
                                }
                            )
                        }
                    }, error: function (reject) {
                        swal({
                                title: 'Non Payé !',
                                text: "Record non payé",
                                type: 'info',
                                confirmButtonClass: 'btn btn-confirm mt-2'
                            }
                        )
                    }
                });
            }
        })
    })
</script>
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}

@include('admin.end')