@extends('layouts.seller-app')
	

<style type="text/css">
    .content-page {
        background-color: #f1f1f1;
    }
    .text-red-dark{
        color: #c23e34 !important;
        margin-bottom: 0px;
    }
    .comn-header-title{
        color: #c23e34;
        font-weight: 700;
    }
    .page-title-box .page-title{
        color: #808080 !important;
    }
    .text-grey-dark{
        color: #808080;
    }
    .comn-single-item-box{
        text-align: center;
    }
    .item-img{
        width: 100%;
        height: 100px;
        object-fit: contain;
    }
    .content-page{
        height: 100% !important;
        overflow: scroll !important;
    }
    .right-order-box{
        text-align: right;
        position: relative;
        height: 100%;
    }
    .custom-dropdown-btn{
        background: #3f92c9 !important;
        border-radius: 30px !important;
        width: 160px !important;
        position: relative;
        height: 44px;
    }
    .custom-dropdown-btn::before {
        content: "";
        position: absolute;
        right: 8px;
        top: 18px;
        border-top: 10px solid #ffffff;
        border-bottom: 8px solid transparent;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
    }
    .dropdown-menu {
        padding: 0px !important;
    }
    .dropdown-item{
        background-color: #d9d9d9 !important;
        color: #3f92c9 !important;
        transition: 0.5s ease;
    }
    .dropdown-item:hover{
        background-color: #3f92c9 !important;
        color: #ffffff !important;
    }
    .more-detail-fixed-btn{
        position: absolute;
        width: 115px;
        bottom: 0px;
        right: 0px;
        background: #c43d31 !important;
    }
    .filter-btn-box{
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 10px 0px;
    }
    .comn-filter-btn{
        bottom: 0px;
        right: 0px;
        background: #c43d31 !important;
        white-space: nowrap;
        margin-right: 10px;
        width: 200px;
    }
    .mb-5, .my-5 {
    margin-bottom: 2rem!important;
}
.filter-btn-box button{
    background:#c32e44 !important;
}

</style>
@section('content')

<div class="content-page">
    <div class="content">
        <!-- Start Content-->
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row"> 
                <div class="col-12">
                    <div class="page-title-box">
                        <h3 class="page-title">Your Orders</h3>
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-12 col-md-12">
                    <div class="filter-btn-box">
                        <form>
                            @csrf
                        <button  type="submit" name ="today_order" value='today' class="btn btn-danger" style="border-radius: 25px;">Orders for Today</button>
                        <button  type="submit" name ="Tomorrow_order" value='Tomorrow_order' class="btn btn-danger" style="border-radius: 25px;">Orders for Tomorrow</button>
                        <button  type="submit" name ="Week_order" value='Week_order' class="btn btn-danger" style="border-radius: 25px;">Order for This Week Detail</button>
                        <button  type="submit" name ="All_order" value='All_order' class="btn btn-danger" style="border-radius: 25px;">All orders</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- end row -->
            <div class="row">
                    <div class="col-sm-4">
                        <div class="page-title-box">
                            <p class="page-title">
                                <i class="mdi mdi-format-list-bulleted"></i> Products List
                            </p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        
                    </div>
                    <div class="col-sm-4 text-right mt-3">
                                            
                        <div class="dropdown d-inline-block" id="filterDropdown" style="position: relative;">
                        <button class="btn btn-secondary dropdown-toggle mr-3" type="button" id="dropdownMenu2" data-toggle="modal" data-target="#exampleModal">
                            <i class="mdi mdi-filter"></i> Filter
                        </button>
                       
                        </div>
                    </div>
                    
            </div>
        
			<br />
<b>Warning</b>:  Undefined variable $orders in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/seller/orders/index.blade.php</b> on line <b>161</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/seller/orders/index.blade.php</b> on line <b>161</b><br />
            <!-- end row-->
        </div>
        <!-- container -->
    </div>
    <!-- content -->
</div>
<script>
	$(function(){
		var modalLoading = `<p align="center"><strong>Loading</strong></p>
					        <div class="d-flex justify-content-center">
					        	<div class="spinner-grow text-blue" role="status"></div>
						    </div>`;
		$(document).on('click','.updateOrderStatusBtn',function(){
			var opid = $(this).data('order-product-id');
			var url = $(this).data('url');
			
			$('#statusModal').modal('show');
			
			$.ajax({
	           type:'POST',
	           url:url,
	           data:{_token:$('meta[name="csrf-token"]').attr('content'),opid:opid},
	           beforeSend:function(){
	           	 $('.statusBody').html(modalLoading);
	           },
	           success:function(data) {
	           		if(data!=0){
	           			$('.statusBody').html(data);
		           		$('.statusBody').find(".datetimePicker").flatpickr({
							enableTime : !0,
							dateFormat : "d-M-Y H:i"
						});
	           		} else {
	           			$('.statusBody').html(`<div class="alert alert-warning">Something went wrong. Try again after page refresh.</div>`);
	           		}
	           		
	           }
	        });
			
			
		});
		
		
		
		$('#statusModal').on('hidden.bs.modal', function (e) {
		  $('.statusBody').html(modalLoading);
		});
		
		
		$(document).on('change','.statusSelectBox',function(){
			var thisStatus = $(this).val();
			var deliveredDiv = $('#deliveredDiv');
			var shippedDiv = $('#shippedDiv');
			
			if(thisStatus=='Delivered'){
				deliveredDiv.show().find('.form-control').prop('disabled',false);
				shippedDiv.hide().find('.form-control').prop('disabled',true);
			} else if(thisStatus=='Shipped') {
				shippedDiv.show().find('.form-control').prop('disabled',false);
				deliveredDiv.hide().find('.form-control').prop('disabled',true);
			} else {
				deliveredDiv.hide().find('.form-control').prop('disabled',true);
				shippedDiv.hide().find('.form-control').prop('disabled',true);
			}
		});
		
	});
</script>
<!--Status Update Modals-->
<div class="modal fade"  tabindex="-1" role="dialog" id="statusModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-danger">
          <h5 class="modal-title text-white"><i class="mdi mdi-update"></i> Update Order Status</h5>
          <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body statusBody">
            
        </div>
        
      </div>
    </div>
  </div>
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        
        <div class="modal-body">
            {{-- <div class="dropdown-menu dropdown-menu-right"  aria-labelledby="dropdownMenu2" style="min-width:350px; position: absolute;"> --}}
                <form method="get" class="px-2 py-2">
                    
                        <div class="form-group mb-3">
                            <label for="">Order Number</label>
                            <input type="text" name="order_number" value="{{@$query['order_number']}}" class="form-control">
                        </div>
                        <div class="form-group mb-3">
                            <label for="">Customer Name</label>
                            <input type="text" name="user_name" value="{{@$query['user_name']}}" class="form-control" >
                        </div>
                        <div class="form-group mb-3">
                            <label for="">Order Status</label>
                            <select class="form-control" name="order_status">
                                <option value=""></option>
                                                                    <option value="Pending">Pending to Acknowledge</option>
                                                                    <option value="Acknowledged">Acknowledged</option>
                                                                    <option value="Processing">Processing the Order</option>
                                                                    <option value="Out for Delivery">Out for Delivery</option>
                                                                    <option value="Rejected">Order Rejected</option>
                                                                    <option value="Delivered">Order Delivered</option>
                                                                    <option value="Shipped">Shipped</option>
                                                                
                            </select>
                        </div>
                        
                        <div class="form-group mb-3">
                            <label for="">Ranges Date</label>
                            <input type="text" id="range-datepicker" value="{{@$query['date_range']}}" name="date_range" class="form-control" placeholder="2018-10-03 to 2018-10-10">
                        </div>
                        <div class="form-group mb-3">
                            <label for="">Price Range</label>
                            <input type="text" name="price_range" value="{{@$query['price_range']}}" id="price_range_picker">
                        </div>
                        <button type="submit" class="btn btn-danger btn-rounded waves-effect waves-light">
                            <span class="btn-label"><i class="mdi mdi-filter"></i></span>Apply
                        </button> 
                        <a href="{{route('orders.index')}}" class="btn btn-secondary btn-rounded waves-effect waves-light float-right">
                            <span class="btn-label"><i class="mdi mdi-refresh"></i></span>
                            Clear
                        </a>
                    </form>
                {{-- </div> --}}
        </div>
      </div>
    </div>
  </div>
  <script>
	$(function(){
		<br />
<b>Warning</b>:  Undefined variable $minPrice in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/seller/orders/index.blade.php</b> on line <b>365</b><br />
<br />
<b>Warning</b>:  Undefined variable $maxPrice in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/seller/orders/index.blade.php</b> on line <b>366</b><br />
		$("#price_range_picker").ionRangeSlider({
			type : "double",
			grid : !0,
			min : <br />
<b>Warning</b>:  Undefined variable $minPrice in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/seller/orders/index.blade.php</b> on line <b>376</b><br />
,
			max : <br />
<b>Warning</b>:  Undefined variable $maxPrice in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/seller/orders/index.blade.php</b> on line <b>377</b><br />
,
			from : ,
			to : ,
			prefix : "<i class='mdi mdi-currency-inr'></i>",
			step : 20
		});
	});
</script>

@endsection