@extends('layouts.app')
@section('head')

@endsection
@section('content')
<div class="page-container" ng-controller="productController" ng-init="getstatus();getdeliverystore();getbranchdeliveryboys();getcategory('4');getsubcategory('2');" ng-cloak>
    <div class="left-content">
	    <div class="mother-grid-inner">
		    <div id="loadercontainer" style="display:none"><div class="loader pull-right"></div></div>
            <div class="clearfix"> </div>
            <div class="validation-form" ng-if="!newproductshow">
         	    <form>
                 	<div class="vali-form">
                        <div class="col-md-2 form-group1 group-mail">
                           <input type="text" placeholder="ORDER No" ng-model="search.order_no" ng-enter="getdeliveryorderbysearch()" ng-blur="getdeliveryorderbysearch()" >
                        </div>
                        <div class="col-md-2 form-group2 group-mail">
                            <select ng-model="search.payment_type" placeholder="SELECT PAYMENT TYPE" ng-change="getdeliveryorderbysearch()">
                                <option value="cod">Cash On Delivery</option>
                                <option value="payment">Online Payment</option>
                            </select>
                        </div>
                        <div class="col-md-2 form-group2 group-mail">
                          <!-- <label class="control-label">Phone Number</label> -->
                            <select ng-model="search.status" ng-change="getdeliveryorderbysearch()">
                              <option value=''>Search By Status</option>
                              <option ng-repeat="status in statuslist" value="{$status.id$}">{$status.name$}</option>
                            </select>
                        </div>
                        <div class="col-md-2 form-group1">
                            <!-- <label class="label-color">Order Date</label> -->
                               <input type="date" placeholder="ORDER DATE" ng-model="search.order_date" ng-enter="getdeliveryorderbysearch()" ng-blur="getdeliveryorderbysearch()" >
                            </div>
                        <div class="col-md-2 form-group margin-top">
                            <button type="button" ng-click="getdeliveryorderbysearch()" class="btn btn-default searchbutton">Go</button>
                            <span  ng-click="resetdeliveryorder()" data-toggle="tooltip" data-placement="right" title="refresh" id="refresh" style="cursor: pointer;padding-left: 8px;"><i class="fa fa-refresh" aria-hidden="true" style="padding-top: 45px;"></i></span>
                            <!-- <button type="reset" ng-click="resetstoreorder()" class="btn btn-default searchbutton">Reset</button> -->
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </form>
                <div class="inbox-mail">
                	<div ng-if="!newproductshow">
                	    <div class="w3l-table-info table-responsive">
                			<table id="table">
                				<thead>
                					<tr>
                						<th>Order No</th>
                            <th>Customer Name</th>
                            <th>Mobile no</th>
                            <th>Status</th>
                            <th>Quantity</th>
                            <th>price</th>
                            <th>Ordertype</th>
                            <th>Order Date</th>
                            <th>Remark</th>
                            <th>Action</th>
                					</tr>
                				</thead>
                				<tbody>
                					<tr ng-repeat="product in productsfinallist track by $index">
                						<td>{$product.order_id$}</td>
                            <td>{$product.customer.first_name$} {$product.customer.last_name$}</td>
                            <td>{$product.address.contact_no$}</td>
                            <td ng-repeat="status in statuslist track by $index" ng-if="status.id == product.status">{$status.name$}</td>
                						<td>{$product.quantity$}</td>
                            <td>SAR {$product.subtotal$}</td>
                            <td class="camelcase">{$product.delivery_type$}</td> 
                            <td>{$product.created_at$}</td>
                            <td>{$product.remark$}</td>
                            <td><a href="javascript:void(0)"><i class="fa fa-pencil" ng-click="editorder(product)" aria-hidden="true"></i></a></td>
                					</tr>
                				</tbody>
                			</table>
                		</div>
                        <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6 pagin">
                			<div class="short_pul pull-right" ng-if="!mailread" ng-cloak ng-show="total=='true'">
                			{$begin$} - {$end$} of {$totallength$} <a href="javascript:void(0)"><i class="fa fa-fast-backward i-arrow" ng-click="previousdeliveryorderpage()" ng-show="previousdisable=='true'"></i></a>  <a href="javascript:void(0)"><i class="fa fa-fast-forward i-arrow" ng-click="nextdeliveryorderpage()" ng-show="nextdisable=='true'"></i></a>
                			</div>
                	   </div>
                    </div>
                </div>
            </div>
        	<div class="validation-form" ng-if="newproductshow">
         	    <form>
                    <div class="col-md-12 ">
                        <div class="">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6 form-group1">
                                      <label class="label-color">Order Id :</label>
                                      <span class="light-black">{$order.order_id$}</span>
                                    </div>
                                    <div class="col-md-3 form-group1">
                                      <label class="label-color">Order Type :</label>
                                      <span class="light-black camelcase">{$order.delivery_type$}</span>
                                    </div>
                                    <div class="col-md-3 form-group1">
                                      <label class="label-color">Payment Type :</label>
                                      <span class="light-black camelcase">{$order.payment_type$}</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 form-group1 form-last">
                                      <label class="label-color">Customer Name :</label>
                                      <span class="light-black">{$order.customer.first_name$} {$order.customer.last_name$}</span>
                                    </div>
                                    <div class="col-md-6 form-group1 form-last" ng-if="order.delivery_type=='pickup'">
                                      <label class="label-color">Mobile No :</label>
                                      <span class="light-black">{$order.customer.country_code$} {$order.customer.phone_no$}</span>
                                    </div>
                                </div>
                                <div class="row">
                                   <div class="col-md-6 form-group2 group-mail" ng-if="order.status !=10">
                                      <label class="label-color">Status :</label>
                                      <select ng-model="order.status" id="status">
                                      <option value="13"> Completed</option>
                                      <option value="7"> Ordered</option>
                                      <option value="12"> Confirmed</option>
                                      <option value="8"> Shipped</option>
                                      <option value="11"> Picked</option>
                                      <option value="9"> Delivered</option>
                                      <option value="10" ng-if="role_name != DELIVERY BOY"> Cancelled</option>
                                      <option value="14"> Ready</option>
                                      <option value="4"> Pending</option>
                                      <option value="16"> Customer Unavailable</option>
                                      </select>
                                    </div>
                                    <div class="col-md-6 form-group2 group-mail" ng-if="order.status ==10">
                                        <label class="label-color">Status :</label>
                                        <label>Cancelled</label>
                                    </div>
                                    <div class="col-md-3 form-group1 form-last">
                                      <label class="label-color">Receive date:</label>
                                      <span class="light-black">{$order.receivingdate$}</span>
                                    </div>
                                    <div class="col-md-3 form-group1 form-last">
                                      <label class="label-color">Time:</label>
                                      <span class="light-black">{$order.time_slot.open_time_formatted$} - {$order.time_slot.close_time_formatted$}</span>
                                    </div>  
                                </div>
                                <div class="row" ng-hide="role_name =='DELIVERY BOY'" >
                                <div class="row" ng-hide="order.delivery_type =='pickup'" >
                                    <div class="col-md-5 form-group2 group-mail" >
                                        <label class="label-color">Delivery Boy</label>
                                        <select ng-model="order.deliveryboy" ng-disabled="order.status == '13'">
                                            <option value="">Select Delivery Boy</option>
                                            <option ng-repeat="deliveryboy in branchdeliveryboys track by $index" value="{$deliveryboy.id$}">{$deliveryboy.first_name$} {$deliveryboy.last_name$}</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2 form-group2 group-mail" style="padding-top: 50px;">
                                        <span ><a href="javascript:void(0)" ng-click="updatedeliveryBoy(order.id,order.deliveryboy,order.branch)"><i class="fa fa-check fa-lg"></i></a><a href="javascript:void(0)" ng-click="canceldeliveryboy(order)"><i class="fa fa-times fa-lg" aria-hidden="true"></i></a></span>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6" style="margin-top: -35px;">
                            <div class="row" style="display:  -webkit-box;">
                                <div class="form-group2 group-mail" ng-hide="order.delivery_type =='pickup'">
                                    <!-- <label class="label-color">Address</label> -->
                                    <div class="address-border pull-right">
                                        <div class="address-size">
                                            <div class="address-text">
                                                <h2 style="font-size: 22px;margin-bottom: 3px;">{$order.address.first_name$}&nbsp;{$order.address.last_name$} </h2>
                                                <p class="test">{$order.address.flat_name$},{$order.address.street_name$}  <br> 
                                                {$order.address.city$}<br> 
                                                {$order.address.country$}<br> 
                                                {$order.address.location$} <br>
                                                <a href="http://maps.google.com/maps?q=loc: {$order.address.latitude$},{$order.address.longitude$}&navigate=yes" target="_blank">show location</a><br>
                                                <h4>Ph: {$order.address.country_code$} &nbsp;{$order.address.contact_no$}</h4>
                                                <div class="row "></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"> </div>
                    <div class="col-md-12 form-group1 group-mail" style="margin-top: 150px;">
                        <div class="col-md-12 w3l-table-info table-responsive">
                            <table id="table">
                                <thead>
                                    <tr>
                                        <th>Product Name</th>
                                        <th>Product SKU</th>
                                        <th>Status</th>
                                        <th>Quantity</th>
                                        <th>Delivery Boy</th>
                                        <th>Price</th>
                                        <th>Total</th>
                                        <th>Action</th>
                                        <th><a ng-click="addnewproductorder()" href="javascript:void(0)"><i class="fa fa-plus i-black" aria-hidden="true"></a></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr  ng-repeat="productmana in order.product_management track by $index">
                                      <td >{$productmana.productname$} {$productmana.orderpricequantity$} {$productmana.order_quantity_name$}</td>
                                      <td >{$productmana.productsku$}</td>
                                      <td ng-repeat="status in statuslist track by $index" ng-if="status.id == productmana.status">{$status.name$}</td>
                                      <td>{$productmana.quantity$}</td>
                                      <td>{$productmana.delivery_boy.first_name$} {$productmana.delivery_boy.last_name$}</td>
                                      <td>SAR {$productmana.selling_amount$}</td>
                                      <td>SAR {$productmana.total_amount$}</td>
                                      <td>
                                        <i class="fa fa-trash" ng-click="removeorderedproduct(productmana,$index)" aria-hidden="true"></i>
                                      </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="row vali-form" style="float: right;">
                                Total : SAR {$order.subtotal$}
                            </div>
                        </div>
                        <div class="clearfix"> </div>
                        <div class="col-md-12 form-group1 group-mail" ng-if="newordershow">
                                <div class="col-md-12 w3l-table-info table-responsive">
                                    <h3 class="control-label">Add Product To The Order</h3>
                                    <button type="submit" class="btn btn-primary"  ng-click="hidenewproduct()">Hide</button>
                                    <div class="validation-form">
                                        <form>
                                            <div class="col-md-12">
                                                <div class="col-md-2 form-group1 group-mail">
                                                    <input type="text" ng-model="newproduct.search1.category_id" placeholder = "CATEGORY" uib-typeahead="category.id as category.name for category in categorylist | filter:$viewValue"  class="form-control" typeahead-show-hint="true" typeahead-input-formatter="formatInputsearchsugcategory($model,newproduct)" typeahead-min-length="0"> 
                                                </div>
                                                <div class="col-md-2 form-group1 group-mail">
                                                    <input type="text" ng-model="newproduct.search1.sub_category_id" placeholder="SUBCATEGORY" uib-typeahead="category.id as category.name for category in subcategorylist | filter:$viewValue"  class="form-control" typeahead-show-hint="true" typeahead-input-formatter="formatInputsearchsugsubcategory($model,newproduct)" typeahead-min-length="0"> 
                                                </div>
                                                <div class="col-md-3 form-group1 group-mail">
                                                    <input type="text" placeholder="PRODUCT NAME" ng-model="newproduct.search1.product_name" ng-enter="productssuggestpage(newproduct)" ng-blur="productssuggestpage(newproduct)" >
                                                </div>
                                                <div class="col-md-2 form-group1 group-mail">
                                                    <input type="text" placeholder="SKU" ng-model="newproduct.search1.product_sku" ng-enter="productssuggestpage(newproduct)" ng-blur="productssuggestpage(newproduct)" >
                                                </div>
                                                <div class="col-md-3 form-group pad-top1">
                                                    <button type="button" ng-click="productssuggestpage(newproduct)" class="btn btn-default searchbutton">Go</button>
                                                    <span  ng-click="resetsuggest()" data-toggle="tooltip" data-placement="right" title="refresh" id="refresh" style="cursor: pointer;padding-left: 8px;"><i class="fa fa-refresh" aria-hidden="true" ></i></span>
                                                </div>
                                                <div class="clearfix"> </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="checkbox ">
                                        <!-- <div class="col-md-12 vali-form">
                                            <label style="padding: 1em 0 1em 2.5em;" class="col-md-3 compose checkbox_list" ng-repeat="position in newproduct.search1.categorys track by $index">
                                                <input type="checkbox" class="styled" ng-click="checkboxsuggest(newproduct.search1,position)" ng-model="position.check" id="sugcheck{$position.id$}">{$ position.product_name $}
                                                <span class="checkbox-decorator"><span class="check"></span></span>
                                            </label>
                                        </div> -->

                                        <div class="col-md-12 w3l-table-info table-responsive">
                                        <table id="table1">
                                            <thead>
                                                <tr>
                                                    <th>Product Name</th>
                                                    <th>Product SKU</th>
                                                    <th>Qty</th>
                                                    <th>Price</th>
                                                    <th>Discount</th>
                                                    <th>Total</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr  ng-repeat="productmana in newproduct.search1.categorys track by $index">
                                                <td >{$productmana.product_name$} {$productmana.quantity$} {$productmana.product_quantity.name$}</td>
                                                <td >{$productmana.product_sku$}</td>
                                                <td><input type="number" class="form-control" id="quantityorder{$$index$}" placeholder="Quantity" ng-model="productmana.quantity" ng-blur="priceCalculation(productmana,'1')"></td>
                                                <td><input type="number" class="form-control" id="priceorder{$$index$}" placeholder="Product Selling Price" ng-model="productmana.price" ng-blur="priceCalculation(productmana,'1')"></td>
                                                <td><input type="number" class="form-control" id="discountorder{$$index$}" placeholder="Discount Price" ng-model="productmana.saved_amount" ng-blur="priceCalculation(productmana,'1')"></td>{$productmana.discount$}</td>
                                                <td ng-if="productmana.total_amount == null">SAR {$productmana.price$}</td>
                                                <td ng-if="productmana.total_amount != null">SAR {$productmana.total_amount$}</td>
                                                <td><a href="javascript:void(0)" ng-click="addorderproduct(productmana)"><i class="fa fa-plus"  aria-hidden="true"></i></a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <!-- <div class="row vali-form" style="float: right;">
                                            Total : SAR {$order.subtotal$}
                                        </div> -->
                                    </div>
                                    
                                    </div>
                                    <div class="clearfix"> </div>
                                    <!-- <div class="checkbox ">
                                        <div class="col-md-12 vali-form">
                                        <h3>Suggestion Products</h3>
                                        <div class="clearfix"> </div>
                                            <label style="padding: 1em 0 1em 2.5em;" class="col-md-3 compose checkbox_list" ng-repeat="position in newproduct.search1.checkedproduct track by $index">
                                                    <input type="checkbox" class="styled" ng-click="checkedboxsuggest(newproduct.search1,position)" ng-model="position.checked" id="sugchecked{$position.id$}">{$ position.product_name $}
                                                    <span class="checkbox-decorator"><span class="check"></span></span>
                                            </label>
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                        <h4>Transaction Details</h4>
                        <div class="col-md-12 w3l-table-info table-responsive">
                            <table id="table">
                                <thead>
                                    <tr>
                                        <th>Product Name</th>
                                        <th>Status</th>
                                        <!-- <th>Branch</th> -->
                                        <th>Delivery Boy</th>
                                        <th>Updated By</th>
                                        <th>Description</th>
                                        <th>Transaction Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr  ng-repeat="transaction in order.order_log track by $index" ng-if="transaction.product_management != null" >
                                      <td ><span ng-if="transaction.product_management == null">Other Product in Ordered</span><span>{$transaction.product_management.product.product_name$}</span></td>
                                      <td >
                                        <div ng-repeat="status in statuslist track by $index" ng-if="status.id == transaction.status">
                                          <span ng-if="transaction.status != null ">{$status.name$}</span>
                                          <span ng-if="transaction.status == null "></span>
                                        </div>
                                      </td>
                                     <!--  <td>
                                        <span ng-if="transaction.branch != null">{$transaction.branch.branch_name$}</span>
                                        <span ng-if="transaction.branch == null"></span>
                                      </td> -->
                                      <td>
                                        <span ng-if="transaction.delivery_boy != null">{$transaction.delivery_boy.first_name$} {$transaction.delivery_boy.last_name$}</span>
                                        <span ng-if="transaction.delivery_boy == null"></span>
                                      </td>
                                      <td>{$transaction.changed_by.first_name$} {$transaction.changed_by.last_name$}</td>
                                      <td>{$transaction.description$}</td>
                                      <td>{$transaction.created_at$}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="clearfix"> </div>
                    <div class="col-md-12 form-group" ng-if="edittrue">
                        <button type="submit" ng-click="updateorder(order)" class="btn btn-primary">Update</button>
                        <button type="reset" ng-click="showlistscrren()" class="btn btn-default">Cancel</button>
                    </div>
                </form>
            </div>
            <div class="inner-block"></div>
        </div>
	   @include('users.admin.sidebar')
	</div>
</div>
@endsection
@section('js') 
	<link rel="stylesheet" type="text/css" href="{{ asset('css/table-style.css') }}" />
	<link rel="stylesheet" type="text/css" href="{{ asset('css/basictable.css') }}" />
	<script type="text/javascript" src="{{ asset('js/jquery.basictable.min.js') }}"></script>
    <script src="{{ asset('bower_components/ng-file-upload/ng-file-upload.js')}}"></script>  
    <script src="{{ asset('js/angular_library/ng-file-upload-shim.min.js') }}"></script>
    <script src="{{ asset('js/angular_library/ng-file-upload.min.js') }}"></script>
    <script src="{{ asset('js/angular_library/ng-file-upload-all.min.js') }}"></script>
    <script src="{{ asset('js/angular_controllers/productcontroller.js') }}"></script>
@endsection