@extends('admin.layouts.main')
@section('styles')
    <style>
       #print-table{
		   visibility: hidden;
	   }
        @media print {

            body * {
                visibility: hidden;
            }
            #details, #details * {
                visibility: visible;
              
            }
			#noneprint-table{
				display: none;
			}
			
			#change_status *{
			  display: none;
			}
		
          
        }
    </style>
@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>
		  <button type="button" onclick="window.print()" class="btn btn-primary mb-2" style="width: 150px">Print Details</button>
                                      
        <div class="row" id="details">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Order Details</h4>
                        <div>
                             <div class="row mb-5">
                                 <div class="col-sm-4">
                                     <h5>UserName : <span class="text-primary" id="username"></span></h5>
                                     <h5>Address : <span class="text-primary" id="address"></span></h5>
                                     <h5>Total Items : <span class="text-primary" id="items"></span></h5>
                                     <h5>Total Price : <span class="text-primary" id="total"></span></h5>
                                     <h5>OrderStatus : <span class="text-primary" id="status"></span></h5>
                                     <div id="delivery_boy">

                                     </div>
                                     <div id="delivery_details">

                                     </div>
                                     <div id="reviews">

                                     </div>
                                 </div>
                                 <div class="col-sm-4">

                                      <div id="qrcode"></div>


                             </div>
                            <div class="col-sm-4 text-center" id="change_status">

                                 <label for="order_status">Change Status :</label>
                                <select id="order_status" class="form-control col-7">
                                    <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>
                                <button type="button" onclick="update_status()" class="btn btn-success mt-1">Submit</button>
                            </div>



                        </div>


                            <h4 class="card-title">Items Details</h4>
                            <div class="table-responsive" id="noneprint-table">
                                <table class="table" id="myTable">
                                    <thead>
                                    <tr>

                                        <th>Product Name</th>
                                        <th>Quantity</th>
                                        <th>Total Price</th>
                                        <th>Image</th>
                                        <th>Category</th>


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

                            </div>
							<div  id="print-table">
							 <div class="table-responsive">
                                <table class="table" id="myTable">
                                    <thead>
                                    <tr>

                                        <th>Product Name</th>
                                        <th>Quantity</th>
                                        <th>Total Price</th>
                                       

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

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

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


@endsection
@section('custom-script')
    <script type="text/javascript">


        firebase.database().ref('Orders/{{$date}}/+{{$number}}/{{$id}}').update({
            is_new:0
        });



        function update_status() {

            swal.fire({
                imageUrl:"https://i.pinimg.com/originals/78/e8/26/78e826ca1b9351214dfdd5e47f7e2024.gif",
                title: 'Uploading Data!',
                text: 'Please Wait...',
                showConfirmButton: false,
                allowOutsideClick : false
            });

            var status=$('#order_status').val();

            var node="order_status";
            firebase.database().ref('Orders/{{$date}}/+{{$number}}/{{$id}}').update({
                [node]:status
            },function(error){
                if(error){
                    swal.close();
                    swal.fire({
                        title: "Error!",
                        text: error.message,
                        icon: "error",
                        button: "Close!",
                    });
                }else{

                    swal.close();
                    swal.fire({
                        title: "Success!",
                        text: "Status Updated!",
                        icon: "success",
                        button: "Close!",
                    });

                }
            });

        }

        function getData(){
            swal.fire({
                imageUrl:"https://i.pinimg.com/originals/78/e8/26/78e826ca1b9351214dfdd5e47f7e2024.gif",
                title: 'Loading Data!',
                text: 'Please Wait...',
                showConfirmButton: false,
                allowOutsideClick : false
            });
            firebase.database().ref('Orders/{{$date}}/+{{$number}}/{{$id}}').orderByChild('cart_items_count').once('value').then(function(snapshot){

                //get data from firebase
                var data=snapshot.val();
             //   console.log(data);

               var cartitems=data.cartItemsList;
                cartitems.forEach(resp =>{
                    $('#tb-body').append("<tr><td>"+resp.product_name+"</td><td>"+resp.product_quantity+"</td>" +
                        "<td>"+resp.total_price+"</td><td class='pro_image'><img src='"+resp.product_image+"' style='height:30px;width:30px;'></td>" +
                        "<td class='pro_cat'>"+resp.category+"</td>"+
                        "</tr>");
						
						 $('#print-body').append("<tr><td>"+resp.product_name+"</td><td>"+resp.product_quantity+"</td>" +
                        "<td>"+resp.total_price+"</td>"+
                        "</tr>");
                });


                $('#username').text(data.user_name);
                $('#address').text(data.delivery_address);
                $('#items').text(data.cart_items_count);
                $('#total').text(data.total_charges);
                $('#status').text(data.order_status);
                $('#qrcode').qrcode({width:300,height: 300,text: '{{$id}}'});
               $('#order_status').val(data.order_status);


               if (data.order_status=="Picked" || data.order_status=="On The Way" || data.order_status=="Delivered" || data.order_status=="Finished") {

                   firebase.database().ref('Assigned_orders').once('value').then(function(snapshot){
                      snapshot.forEach(function (childNodes) {

                          if (childNodes.val().order_id=='{{$id}}'){

                              var delivery_boy_id=childNodes.val().delivery_boy_id;
                              var picked_time=childNodes.val().picked_time;

                              firebase.database().ref('Delivery_boys/'+delivery_boy_id).once('value').then(function(snapshot2){
                                 var user=snapshot2.val();
                                 console.log(user);
                                  $('#delivery_boy').append('<h4 style="font-weight: 500;">DeliveryBoy Information:</h4><h5>Name : <span class="text-primary">'+user.firstName+' '+user.lastName+'</span></h5><h5>Phone : <span class="text-primary">'+user.phoneNumber+'</span></h5><h5>Bike Number : <span class="text-primary">'+user.bikeNumber+'</span></h5><h5>Picked Time : <span class="text-primary">'+picked_time+'</span></h5>');

                              });


                          }
                      })
                   });


               }

                if (data.order_status=="Delivered" || data.order_status=="Finished") {

                   $('#delivery_details').append('<h4 style="font-weight: 500;">Delivery Information:</h4><h5>Delivered Time : <span class="text-primary">'+data.delivered_time+'</span></h5><h5>User Paid Amount : <span class="text-primary">'+data.amount_paid_in_cash+'</span></h5><h5>User Wallet Balance : <span class="text-primary">'+data.user_wallet_balance+'</span></h5>');

                }

                if (data.order_status=="Finished") {

                    var ratings='';
                    for(var i=1;i<=5;i++){
                        if (i<=data.no_of_stars_given_by_user){
                            ratings = ratings+'<i class="text-warning fa fa-star"><i>';
                        }

                    }

                    $('#reviews').append('<h4 style="font-weight: 500;">User Review:</h4><h5>Ratings : <span>'+ratings+'</span></h5>');
                    $('#reviews').append('<h5>Review : <span class="text-primary">'+data.user_review+'</span></h5>');
                }
                    //now pass this data to our posts div
                //we have to pass our data to for loop to get one by one
                //we are passing the key of that post to delete it from database

                swal.close();

            });
        }

        getData();

    </script>
@endsection