@extends('admin.layouts.main')
@section('styles')
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@endsection
@section('content')
    <div class="container-fluid">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h4 class="text-themecolor">Orders</h4>
            </div>
            <div class="col-md-7 align-self-center text-right">
                <div class="d-flex justify-content-end align-items-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Orders</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Start Page Content -->
        <!-- ============================================================== -->
        <div class="form-group row">
            <div class="col-sm-12">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
            <div class="col-sm-12">
                @if (session()->has('message'))
                    <div class="alert alert-success">
                        {{session('message')}}
                    </div>
                @endif
            </div>
            <div class="col-sm-12">
                @if (session()->has('hasError'))
                    <div class="alert alert-danger">
                        {{session('hasError')}}
                    </div>
                @endif
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Orders</h4>
                         
                         
                          <input type="text" id="myInput" class="form-control col-3 mb-2 pull-right" onkeyup="myFunction()" placeholder="Search Orders..">
                         <select class="form-control col-3 pull-right mr-2" onchange="myFunction2()" id="status_filter">
                                    <option value="">--select Status--</option>
                                     <option value="Placed" selected>Placed</option>
                                    <option value="Picked">Picked</option>
                                    <option value="On The Way">On the Way</option>
                                    <option value="Delivered">Delivered</option>
                                    <option value="Finished">Finished</option>
                          </select>
                          <input type="text" id="date_filter" class="form-control col-3 pull-right mr-2" onchange="myFunction3()" placeholder="Select Date" >
                        <div class="table-responsive">
                            <table class="table" id="myTable">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>User Name</th>
                                    <th>Delivery Address</th>
                                    <th>Date</th>
                                    <th>Items</th>
                                    <th>Total Price</th>
                                    <th>Payment Method</th>
                                    <th>Order Status</th>
                                    <th>Action</th>

                                </tr>
                                </thead>
                                <tbody id="tb-body">
                                </tbody>
                            </table>

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


@endsection
@section('custom-script')
<script src="http://www.datejs.com/build/date.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
    
    function dynamicSort(property) {
    var sortOrder = 1;
    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    }
    return function (a,b) {
        /* next line works with strings and numbers, 
         * and you may want to customize it to your needs
         */
        var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
        return result * sortOrder;
    }
}
    $('#date_filter').datepicker({dateFormat: "dd/mm/yy"});

        var database = firebase.database();

        // This is reference to tha database, to fetch data from database use below code:
       window.onload = function () {
           swal.fire({
               imageUrl:"https://i.pinimg.com/originals/78/e8/26/78e826ca1b9351214dfdd5e47f7e2024.gif",
               title: 'Loading Data!',
               text: 'Please Wait...',
               showConfirmButton: false,
               allowOutsideClick : false
           });
       }
        var starCountRef = firebase.database().ref('Orders');
        // Add ref of child if any
        starCountRef.on('value', function(snapshot) {
            var order_arr=[];
            $('table tbody tr').remove();
            snapshot.forEach(function(childNodes){

                var data=childNodes.val();

              
                var date=childNodes.key;

                var count=0;
                for(let[key,value] of Object.entries(data)){
                    var data2=value;

                    for(let[key2,value2] of Object.entries(data2)){
                         $('#tb-body').append("<tr><td>"+value2.placed_time_in_milis+"</td><td>"+value2.user_name+"</td><td>"+value2.delivery_address+"</td><td>"+value2.placed_time+"</td>" +
                            "<td>"+value2.cart_items_count+"</td><td>"+value2.total_charges+"</td>" +
                            "<td>"+value2.payment_method+"</td><td>"+value2.order_status+"</td><td><a href='{{url('admin/orders/details')}}?id="+key2+"&date="+date+"&number="+key+"' class='btn btn-primary'>Details</a></td>"+
                            "</tr>");
                       
                    }



                }
            
            });
               
             
         $('#myTable').dataTable({
              "order": [[ 0, "desc" ]],
             
              "bPaginate": false
         });                
         swal.close();



        })


        function myFunction2(){
              // Declare variables
            var input = document.getElementById("status_filter");
            var filter = input.value.toUpperCase();
            var table = document.getElementById("myTable");
            var trs = table.tBodies[0].getElementsByTagName("tr");

            // Loop through first tbody's rows
            for (var i = 0; i < trs.length; i++) {

                // define the row's cells
                var tds = trs[i].getElementsByTagName("td");

                // hide the row
                trs[i].style.display = "none";

                // loop through row cells
                for (var i2 = 0; i2 < tds.length; i2++) {

                    // if there's a match
                    if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {

                        // show the row
                        trs[i].style.display = "";

                        // skip to the next row
                        continue;

                    }
                }
            }
        }

  function myFunction3() {

            // Declare variables
            var input = document.getElementById("date_filter");
           
            var filter = input.value.toUpperCase();
            var table = document.getElementById("myTable");
            var trs = table.tBodies[0].getElementsByTagName("tr");

            // Loop through first tbody's rows
            for (var i = 0; i < trs.length; i++) {

                // define the row's cells
                var tds = trs[i].getElementsByTagName("td");

                // hide the row
                trs[i].style.display = "none";

                // loop through row cells
                for (var i2 = 0; i2 < tds.length; i2++) {

                    // if there's a match
                    if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {

                        // show the row
                        trs[i].style.display = "";

                        // skip to the next row
                        continue;

                    }
                }
            }

        }

        function myFunction() {

            // Declare variables
            var input = document.getElementById("myInput");
            var filter = input.value.toUpperCase();
            var table = document.getElementById("myTable");
            var trs = table.tBodies[0].getElementsByTagName("tr");

            // Loop through first tbody's rows
            for (var i = 0; i < trs.length; i++) {

                // define the row's cells
                var tds = trs[i].getElementsByTagName("td");

                // hide the row
                trs[i].style.display = "none";

                // loop through row cells
                for (var i2 = 0; i2 < tds.length; i2++) {

                    // if there's a match
                    if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {

                        // show the row
                        trs[i].style.display = "";

                        // skip to the next row
                        continue;

                    }
                }
            }

        }

        function confirmDelete(id) {
            let choice=confirm("Are you sure, You want to delete Club");
            if (choice){
                document.getElementById("delete-blog-"+id).submit();
            }
        }
    </script>
@endsection