@extends('layouts.SellerMasterLayout')
@yield('sessions')
@section('content')
<style>

.active {
background:#C91F37;}

.del {
background:#2ecc71;}

</style>
    <!-- Row -->
    <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
            <div class="panel panel-danger card-view pa-0">
                <div class="panel-wrapper collapse in">
                    <div class="panel-body pa-0" id="newpanel">
                        
                        <a href="/Seller/Neworders">

                            
                            <div class="sm-data-box">
                                <div class="container-fluid">
                                <div class="row">
                                    <div class="col-xs-6 text-center pl-0 pr-0 data-wrap-left">
                                        <span class="txt-dark block counter new"><span class="counter-anim" id="new">0</span></span>
                                        <span class="weight-500 uppercase-font block font-13">New Orders</span>
                                    </div>
                                    <div class="col-xs-6 text-center  pl-0 pr-0 data-wrap-right">
                                        <i class="icon-user-following data-right-rep-icon txt-light-grey"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
            <div class="panel panel-default card-view pa-0">
                <div class="panel-wrapper collapse in">
                    <div class="panel-body pa-0">
                        <a href="/Seller/myearing">

                            <div class="sm-data-box">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-xs-6 text-center pl-0 pr-0 data-wrap-left">
                                            <span class="txt-dark block counter"><span class="counter-anim" id="earned">0</span></span>
                                            <span class="weight-500 uppercase-font block">Total Earned</span>
                                        </div>
                                        <div class="col-xs-6 text-center  pl-0 pr-0 data-wrap-right">
                                            <i class="icon-control-rewind data-right-rep-icon txt-light-grey"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                            
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
            <div class="panel panel-default card-view pa-0">
                <div class="panel-wrapper collapse in">
                    <div class="panel-body pa-0">
                        <a href="/Seller/allorders">
                            <div class="sm-data-box">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-xs-6 text-center pl-0 pr-0 data-wrap-left">
                                            <span class="txt-dark block counter"><span class="counter-anim" id="total">0</span></span>
                                            <span class="weight-500 uppercase-font block">Total Orders</span>
                                        </div>
                                        <div class="col-xs-6 text-center  pl-0 pr-0 data-wrap-right">
                                            <i class="icon-layers data-right-rep-icon txt-light-grey"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>


                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
            <div class="panel panel-default card-view pa-0">
                <div class="panel-wrapper collapse in">
                    <div class="panel-body pa-0" id="delpanel">
                        
                        <a href="/Seller/SendDelivery">

                            <div class="sm-data-box">
                                <div class="container-fluid">
                                <div class="row">
                                    <div class="col-xs-6 text-center pl-0 pr-0 data-wrap-left">
                                        <span class="txt-dark block counter"><span class="counter-anim" id="delivery">0</span></span>
                                        <span class="weight-500 uppercase-font block">Wait for delivery</span>
                                    </div>
                                    <div class="col-xs-6 text-center  pl-0 pr-0 pt-25  data-wrap-right">
                                        <div id="sparkline_4" style="width: 100px; overflow: hidden; margin: 0px auto;"></div>
                                    </div>
                                </div>
                                </div>
                            </div>
                        
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Row -->

    <!-- Row -->
    <div class="row">
    
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="panel panel-default card-view panel-refresh">
                <div class="refresh-container">
                    <div class="la-anim-1"></div>
                </div>
                <div class="panel-heading">
                    <div class="pull-left">
                        <h6 class="panel-title txt-dark">Latest Orders</h6>
                    </div>
                    <div class="pull-right">
                        <a href="#" class="pull-left inline-block refresh mr-15">
                            <i class="zmdi zmdi-replay"></i>
                        </a>
                        <a href="#" class="pull-left inline-block full-screen mr-15">
                            <i class="zmdi zmdi-fullscreen"></i>
                        </a>
                        <div class="pull-left inline-block dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false" role="button"><i class="zmdi zmdi-more-vert"></i></a>
                            <ul class="dropdown-menu bullet dropdown-menu-right"  role="menu">
                                <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon wb-reply" aria-hidden="true"></i>Edit</a></li>
                                <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon wb-share" aria-hidden="true"></i>Delete</a></li>
                                <li role="presentation"><a href="javascript:void(0)" role="menuitem"><i class="icon wb-trash" aria-hidden="true"></i>New</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="panel-wrapper collapse in">
                    <div class="panel-body row pa-0">
                        <div class="table-wrap">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0" id="myTabledash">
                                    <thead>
                                    <tr>
                                        <th>Order No</th>
                                        <th>Item</th>
                                        <th>QTY</th>
                                        <th>Status</th>
                                        <th>Time</th>
                                    </tr>
                                    </thead>
                                    <tbody id="orders">
                                    
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Row -->
    </div>



    <meta name="_token" content="{{ csrf_token() }}">
    {{-- <audio src="/notification.mp3" controls id="boom" autoplay hidden=""></audio> --}}
@endsection
@section('scripts')

<script>

        // function play2() {
        //                 //  var audio = document.getElementsByTagName("audio");
        //     document.getElementById('boom').play();
        //                 //  audio.play();
        //             }

        // setInterval(function(){ 

        //     $.ajaxSetup({
        //     headers:
        //         {'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')}
        // });

        // $.ajax({

        //     method: "post",
        //     url: "/sellerdashboardcharts",
    
        //      // data:{data:"ok inside"},
        //     success: function (response) {

        //         var neworders = response.split("(+)")[0]
        //         var totalorders = response.split("(+)")[1]
        //         var deliveryorders = response.split("(+)")[2]
        //         var totalearned = response.split("(+)")[3]
        //         var json = JSON.parse(response.split("(+)")[4])

        //         // alert(response.split("(+)")[4])

        //         var current = $("#new").text();
        //         // alert('new '+neworders)
        //         // alert('current '+current)
        //         // if(current != neworders || neworders != 0){
        //         if(current != neworders){

        //             // alert("IFF")

        //             play2();
        //             $("#newpanel").addClass('active');
                    
        //         }else{
                    
        //             // alert("ELSE")
        //             $("#newpanel").removeClass('active');

        //         }


                
        //         var delcurrent = $("#delivery").text();
        //         // alert('new '+neworders)
        //         // alert('current '+current)
        //         // if(current != neworders || neworders != 0){
        //         if(delcurrent != deliveryorders){

        //             // alert("IFF")

        //             play2();
        //             $("#delpanel").addClass('del');
                    
        //         }else{
                    
        //             // alert("ELSE")
        //             $("#delpanel").removeClass('del');

        //         }


        //         $("#total").text(totalorders);
        //         $("#new").text(neworders);
        //         $("#delivery").text(deliveryorders);
        //         $("#earned").text(totalearned);

        //         $("#myTable").DataTable({
                        
        //                 data: json,
        //                 columns: [
        //                     {data: 'order_id'},
        //                     {data: 'name'},
        //                     {data: 'qty'},
        //                     {data: 'status'},
        //                     {data: 'created_at'},
                         
        //                 ],
        //                 destroy: true,
        //                 "order": [[ 0, "desc" ]],
        //                 paging:false,
        //                 // "searching": false

        //             });
                

        //  }


        // });


        //  }, 5000);

    

</script>

@endsection