@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">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">

    <style>
        .emoji-picker {
            top: 82px !important;
            right: 19px!important;
        }
        .pp{
            margin: 5px 24px 10px !important;
        }

    </style>
    <style>
        /* =========== PRODUCTS ============ */
        .prod-box{border:1px solid #E1E1E1; overflow:hidden; margin-bottom:15px; margin-top:15px;}
        .prod-box .img-holder{ height:200px; position:relative; overflow:hidden;text-align:center;  }
        .prod-box .img-holder img{max-width:100%; min-height:100%}
        .prod-box .anons{background-color:#fff; border-top:1px solid #E1E1E1; padding:15px 10px}

        .prod-box .anons .title{margin:0; font-size:15px;  padding-bottom:10px; color:#333}
        .prod-box .price{ font-size:18px; display:block; color:#333 }

        .btn-order{ background-color:#3498DB; color:#fff;}
        .btn-order:hover{ background-color:#2980B9; color:#fff;}

        .prod-box:hover .item-hover{opacity:1; bottom:0; }
        .prod-box .item-hover{position:absolute; text-align:left; opacity:0;  bottom:-50%; left:0; width:100%; height:50%; color:#fff; background-color:rgba(0,0,0,.7);  z-index:99; transition: all 200ms ease-in-out 0s; padding:7px; font-size:13px;}

        .prod-box .item-hover p{margin:0;font-size:13px; }
        .prod-box .item-hover p a{color:aqua; display:inline-block; padding:3px;}
        .prod-box .item-hover p a:hover{ }

        .inventory{
            border: 1px solid #ddd;
            padding-left: 30px;
            padding-right: 28px;
        }
        .place {
            background: green;
            color: white;
            padding: 4px;
            border-radius: 25px;
        }
        #i-have-a-tooltip {
            font-family:Helvetica,Arial,sans-serif;
            font-weight:100;
            font-size:20px;
            text-align:center;
            margin:40px auto;
            background:white;
            position:relative;
            border-radius:5px;
            box-shadow:10px 10px 0px rgba(0,0,0,.05);
        }

        #i-have-a-tooltip:before {
            content:attr(data-description);
            box-sizing:border-box;
            display:block;
            background:rgba(0,0,0,.7);
            color:white;
            padding:20px;
            position:absolute;
            left:50%;
            top:-30px;
            margin-left:-100px;
            width:200px;
            height:65px;
            line-height:25px;
            border-radius:5px;
            opacity:0;
            transition:.25s ease-in-out;
        }

        #i-have-a-tooltip:after {
            content:'';
            display:block;
            position:absolute;
            top:35px;
            left:50%;
            margin-left:-8px;
            height:0;
            width:0;
            border-left:8px solid transparent;
            border-right:8px solid transparent;
            border-top:8px solid rgba(0,0,0,.7);
            transition:.25s ease-in-out;
            opacity:0;
        }

        #i-have-a-tooltip:hover:before {
            opacity:1;
            top:-50px;
        }

        #i-have-a-tooltip:hover:after {
            opacity:1;
            top:15px;
        }

        .titleQ {
            font-size: 15px;
        }

        #change_status_driver:hover {
    cursor: pointer;
}
    </style>


@endpush
@section('content')
{{-- @dd(implode(',',auth()->user()->getRoles())) --}}
<main id="app-main" class="app-main">

    <div class="wrap">
        <section class="app-content">

{{--            <h3>{{ auth()->user()->hasRole('Drivers') == 'true'  ?  trans('admin.welcome'). auth()->user()->name :trans('admin.dashboard')}}</h3>--}}
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">@lang('admin.dashboard')</a></li>
                </ol>
            </nav>
        </section><!-- #dash-content -->
    </div><!-- .wrap -->

    @if(implode(',',auth()->user()->getRoles()) == 'Tager')


    @elseif(auth()->user()->hasRole('super_admin') == 'true')
        <div class="container-fluid">
        <div class="row">

            <div class="col-md-12" >




                @if(auth()->user()->hasPermission('read_products'))


                    <div class="col-md-12 col-xs-12 pull-right">
                        <div class="widget stats-widget" style="    background-color: #7BD7C2;">
                            <div class="widget-body clearfix">
                                <div class="pull-left">
                                    <h3 class="widget-title text-danger"><span class="counter" data-plugin="counterUp">{{$productsCount}}</span></h3>
                                    <small class="text-color">@lang('admin.productactiveCount')</small>
                                </div>
                                <span class="pull-right big-icon watermark"><img class="img-responsive"
                                                                                 src="{{asset(\Illuminate\Support\Facades\Storage::url('images/settings/'.setting('image')))}}"
                                                                                 alt="avatar" style="width: 50px"/></span>
                            </div>
                        </div><!-- .widget -->
                    </div>
                @endif

            </div>


            <div class="col-md-12">
                <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 class="col-md-6">
                                        <div class="widget">
                                            <h5 href="#">@lang('admin.products')</h5>

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

                                    <div class="col-md-6" style="float: right">
                                        <div class="widget">
                                            <h5 href="#">@lang('admin.categories')</h5>

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



                            </div>
                        </div>
                    </div>
                </div>

        </div>
        </div>






        </div>




    </main>





            @endif

@endsection
@push('js')





<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});


$(function (){
    var table = $('#orders').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        bStateSave: true,
        stateSave: true,
        bSortable: false,
        bRetrieve: false,
        order: [[ 5, "DESC" ]],
        ordering: false,
        bFilter: false, bInfo: false,
        // sPaginationType: "full_numbers",
        ajax: {
            url: "{{ route('order.index') }}",
            type: 'GET',

        },
        dom: 'Blfrtip',

        // select: true,
        columns: [
            {data: 'id', name: 'id' ,title:'id'},
            {data: 'order_number', name: 'order_number',title: "@lang('admin.order_number')" },
            {data: 'order_done_date', name: 'order_done_date',title: "@lang('admin.order_done_date')" },
            {data: 'status', name: 'status',title: "@lang('admin.status')" },
            {data: 'user_id', name: 'user_id',title: "@lang('admin.user_phone')" },

                {{--{data: 'total_price_shipping', name: 'total_price_shipping',title: "@lang('admin.total_price_shipping')" },--}}

                {{--{data: 'quantity', name: 'quantity',title: "@lang('admin.quantity')" },--}}
            {data: 'total_price', name: 'total_price',title: "@lang('admin.total_price')" },
                {{--{data: 'payment_method', name: 'payment_method',title: "@lang('admin.payment_method')" },--}}
                {{--{data: 'image', name: 'image',title: "@lang('admin.image')" },--}}
            {data: 'action', name: 'action',title:'action' ,searchable: 'false'},
            // {data: 'add_lang', name: 'add_lang',title:'add_lang' ,searchable: 'false'}
        ],

    });
    var table = $('#products').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        bStateSave: true,
        stateSave: true,
        bFilter: false,


        sPaginationType: "full_numbers",

        ajax: {
            url: "{{ route('products.index' ,['status'=>'active']) }}",
            type: 'GET',

        },
        dom: 'Blfrtip',
        buttons: [
            'copy', 'excel', 'print'
        ],
        lengthMenu: [
            [10, 25, 50, -1], [10, 25, 50, "All"]

        ],
        // select: true,
        columns: [



            {data: 'id', name: 'id' ,title:'id'},

            {data: 'image', name: 'image',title: "@lang('admin.image')" },
            {data: 'name', name: 'name',title: "@lang('admin.name')" },
            {data: 'discount', name: 'discount',title: "@lang('admin.price')" },

                {{--{data: 'searchable', name: 'searchable',title: "@lang('admin.searchable')" },--}}
            {data: 'action', name: 'action',title:'action' ,searchable: 'false'},



            // {data: 'add_lang', name: 'add_lang',title:'add_lang' ,searchable: 'false'}
        ]
        // footerCallback: function (tfoot, data, start, end, display) {
        //     var api = this.api();
        //     // var api = this.api(), data;
        //     //
        //     // // Remove the formatting to get integer data for summation
        //     // var intVal = function ( i ) {
        //     //     return typeof i === 'string' ?
        //     //         i.replace(/[\$,]/g, '')*1 :
        //     //         typeof i === 'number' ?
        //     //             i : 0;
        //     // };
        //     // total = api
        //     //     .column( 10 )
        //     //     .data()
        //     //     .reduce( function (a, b) {
        //     //         return intVal(a) + intVal(b);
        //     //     }, 0 );
        //     // $('#total').html(total);
        //
        //     this.api().columns(10).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(sum);
        //     });
        // }
    });
    var table = $('#categories').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        bStateSave: true,
        sPaginationType: "full_numbers",
        ajax: {
            url: "{{ route('categories.index') }}",
            type: 'GET',
        },
        // select: true,
        columns: [
            {data: 'id', name: 'id' ,title:'id'},
            {data: 'name', name: 'name',title: "@lang('admin.name')" },
            {data: 'image', name: 'image',title: "@lang('admin.image')" },
            {data: 'categories', name: 'categories',title: "@lang('admin.categories')" },

            {data: 'action', name: 'action',title:'action' ,searchable: 'false'},
            // {data: 'add_lang', name: 'add_lang',title:'add_lang' ,searchable: 'false'}
        ]
    });
    var table = $('#tager').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('tagers.index') }}",
            type: 'GET',
        },
        // select: true,
        columns: [
            {data: 'id', name: 'id' ,title:'id'},
            {data: 'name', name: 'name',title: "@lang('admin.name')" },
            {data: 'email', name: 'email',title: "@lang('admin.email')" },
            {data: 'shop_name', name: 'shop_name',title: "@lang('admin.shop_name')" },
            {data: 'Installed', name: 'Installed',title: "@lang('admin.Installed')" },
            {data: 'installed_tager', name: 'installed_tager',title: "@lang('admin.installed_tager')" },
            {data: 'roles', name: 'roles',title: "@lang('admin.roles')" },
            {data: 'categories', name: 'categories',title: "@lang('admin.categories')" },
                {{--{data: 'work_start', name: 'work_start',title: "@lang('admin.work_start')" },--}}
                {{--{data: 'work_end', name: 'work_end',title: "@lang('admin.work_end')" },--}}
            {data: 'status', name: 'status',title: "@lang('admin.status')" },
            // {data: 'QrCode', name: 'QrCode',title: "@lang('admin.QrCode')" },
            {data: 'action', name: 'action',title:'action' ,searchable: 'false'},
            // {data: 'add_lang', name: 'add_lang',title:'add_lang' ,searchable: 'false'}
        ]
    });


    $('body').on('submit','#delform',function (e) {
        e.preventDefault();
        var url = $(this).attr('action');
        // alert(url);

        $.ajax({
            url: url,
            method: "delete",
            data: {
                _token: '{{ csrf_token() }}',
            },
            success: function (response) {

                if (response.status == 'success'){
                    new Noty({
                        type: 'success',
                        layout: 'topRight',
                        text: "تم الحذف بنجاح",
                        timeout: 2000,
                        killer: true
                    }).show();
                    window.location.reload();
                }
                // console.log(response);
                // window.location.reload();
            }
        });
    });

    $('body').on('submit','.stat',function (e) {
        e.preventDefault();

        var url = $(this).attr('action');

        $.ajax({
            url: url,
            method: "post",
            data: new FormData(this),
            dataType: 'json',

            cache       : false,
            contentType : false,
            processData : false,

            success: function (response) {
                if(response.status == 'failed'){
                    new Noty({
                        type: 'warning',
                        layout: 'topRight',
                        text: "@lang('admin.failed')",
                        timeout: 2000,
                        killer: true
                    }).show();
                }else{
                    if(response.status == 'success'){
                        new Noty({
                            type: 'success',
                            layout: 'topRight',
                            text: "@lang('admin.done_the_statues_is_changed')",
                            timeout: 2000,
                            killer: true
                        }).show();
                        // window.location.reload();

                    }

                    table.ajax.reload();


                    // $("#addform")[0].reset();
                }
                // window.location.reload();
            },

        });

    });

    //line chart
    var line = new Morris.Line({
        element: 'line-chart',
        resize: true,
        data: [
                @foreach ($sales_data as $data)
            {
                ym: "{{ $data->year }}-{{ $data->month }}", sum: "{{ $data->sum == 'null' ? 0 : $data->sum }}"
            },
            @endforeach
        ],
        xkey: 'ym',
        ykeys: ['sum'],
        labels: ['@lang('admin.total')'],
        lineWidth: 2,
        hideHover: 'auto',
        gridStrokeWidth: 0.4,
        pointSize: 4,
        gridTextFamily: 'Open Sans',
        gridTextSize: 10
    });



});





    </script>

<script>
    $('body').on('change','#category_id',function (e) {
        e.preventDefault();
        var val = $(this).val();
        // $('#cates').html(val);
    });


    $(document).on('click', '.pagination a', function(event){
        event.preventDefault();
        var page = $(this).attr('href').split('page=')[1];
        // var search =$('#RequestSearch').html();
        // var cates = $('#cates').html();

        fetch_data(page);
    });

    function fetch_data(page,search)
    {
        $.ajax({
            url:"{{route('get-main-page')}}" + "?page="+page,
            // data : {
            //     search : search,
            //     cates : cates
            // },
            success:function(data)
            {
                $('#table_data').html(data);
            }
        });
    }





</script>


@endpush