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

    
@endsection
@section('breadcrumb')
<!-- CONTENT + SIDEBAR -->
<!-- <div class="tt-breadcrumb">
   <div class="container">
    <ul>
        <li><a href="{{route('frontpage')}}">Home</a></li>
        <li>Assign Pickup</li>
    </ul>
  </div>
</div> 
background: #eae7e74d;
-->
@endsection
@section('content')
            <div class="container" ng-init="getorders();" ng-cloak>
                <input type="text" id="customer_id" hidden>
                <h1 style="padding: 4px; margin-top: 24px;" class="tt-title-subpages noborder">Pickup</h1>
                <form id="assignForm" name="assignForm">
                <div ng-if="cartlistshow">
                    
                    <div style="margin-bottom:46px;margin-top:30" class="picform">
                    <div class="row">
                        <div class="col-sm-3 col-xs-12">
                            <label>Name</label>
                        </div>
                        <div class="col-sm-3">
                            <input type="text" ng-model="assign.name" class="form-control" required>
                        </div>
                        <div class="col-sm-3 col-xs-12" >
                            <label>Mobile Number</label>
                        </div>
                        <div class="col-sm-3">
                            <input type="number" ng-model="assign.number" class="form-control" required>
                        </div>
                        <div class="col-sm-3">
                            <label>Email</label>
                        </div>
                        <div class="col-sm-3">
                            <input type="email" ng-model="assign.email" class="form-control" required>
                        </div>
                        <div class="col-sm-3">
                            <label>Relationship</label>
                        </div>
                        <div class="col-sm-3">
                            <input type="text" ng-model="assign.relationship" class="form-control" required>
                        </div>
                        <div class="col-sm-3">
                            <label>order Id</label>
                        </div>
                        <div class="col-sm-3">
                            <select ng-model="assign.order_id" ng-change="assiproduct()" class="form-control" required>
                                <option value="" disabled selected></option>
                                <option ng-repeat="x in orderpickup" value="{$x.id$}">{$x.order_id$}</option>
                            </select>
                        </div>
                        <div class="col-sm-3">
                            <label>Branch</label>
                        </div>
                        <div class="col-sm-3">
                            <input type="text" id="branch_id" ng-model="assign.branch_id" value={$assignedproduct.branch_id$} hidden>
                           <input type="text" class="form-control"
                           value="{$assignedproduct.branch_name$}"readonly>
                        </div>
                        <div class="col-sm-3">
                            <label>Pickup Date</label>
                        </div>
                        <div class="col-sm-3">
                            <input type="text"class="form-control"
                            value="{$assignedproduct.receivingdate$}" readonly>
                        </div>
                        <div class="col-sm-3">
                            <label >Pickup Timing</label>
                        </div>
                        <div class="col-sm-3">
                            <input type="text"class="form-control"
                           value="{$assignedproduct.timeslot$}"
                           readonly>
                        </div>

                    </div>
                   </div> 
                <table class="tt-shopcart-table01">
                    <thead>
                        <tr  >
                            <th style="text-align: center;">S.No</th>
                            <th style="text-align: center;">Product Name</th>
                            <th style="text-align: center;">Qty</th>
                            <th style="text-align: center;">Price/Unit</th>
                            <th style=" text-align: center;">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="tabletr" ng-repeat="product in assignedproduct.products track by $index">
                            <td style="text-align: center;" >{$$index+1$}</td>
                            <td style="text-align: center;">{$product.product.product_name$}</td>
                            <td style="text-align: center;">{$product.quantity$}</td>
                            <td style="text-align: center;">
                                SAR {$product.selling_amount$}
                            </td>
                            <td style="text-align: center;">SAR {$product.total_amount$}</td>
                        </tr>     
                          
                    </tbody>
                </table>
               <!--  <div class="col-md-4 col-lg-4" style="width:250px">
                    <div class="tt-shopcart-box tt-boredr-large">
                        <table class="tt-shopcart-table01">
                            <tbody>
                                <tr>
                                    <th>SUBTOTAL</th>
                                    <td>SAR {$assignedproduct.subtotal$}</td>
                                </tr>
                            </tbody>
                        </table>
                         
                        <button ng-if="orderchange" ng-click="assignForm.$valid && assignedpickup()" class="btn btn-lg"><span class="icon icon-check_circle"></span>Confirm</button>
                    </div>
                
                        <a href="{{route('driverpickup')}}" class="btn">view All</a>
                 
                    </div>
   -->

                         <div class="row d-flex justify-content-between"">   
                              <a id="anch-btn" href="{{route('driverpickup')}}" class="btn">view All</a>

                      <div class="col-md-4 col-lg-4" style="width:215px">
                    <div class="tt-shopcart-box tt-boredr-large">
                        <table class="tt-shopcart-table01">
                            <tbody>
                                <tr>
                                    <th>SUBTOTAL</th>
                                    <td>SAR {$assignedproduct.subtotal$}</td>
                                </tr>
                            </tbody>
                        </table>
                         
                        <button  id="btn-confirm"  ng-if="orderchange" ng-click="assignForm.$valid && assignedpickup()" class="btn btn-lg"><span class="icon icon-check_circle"></span>Confirm</button>
                    </div>
                
                       
                 
                    </div>


                               <!-- <button ng-if="orderchange" ng-click="   assignForm.$valid && assignedpickup()" class="btn btn-lg"><span class="icon icon-check_circle"></span>Confirm</button> -->
                  
                              
                         </div>
             
              </div>

            </div>
        </form>

        <style>
       #anch-btn{
margin-top:53px;
}
.picform {
 
    padding: 20px;
    
    box-shadow: 0 0 4px;
    border: 1px solid #eae8e87d;
}
 

#btn-confirm
{
 margin-left: 68%;
  
}
 @media (max-width:1100px) {
#btn-confirm
{
 margin-left:55%;
  
}
}
 @media (max-width:800px) {
#btn-confirm
{
 margin-left:36%;
  
}
}
@media (max-width:800px){

#btn-confirm
{
 margin-left:36%;
  
}
}
 @media (max-width: 600px) {
       #anch-btn{
margin-top:47px;

     }
  #btn-confirm
{
 margin-left:45%;
  
}
    }

</style>

        </div>


@include('customer.footer')

    @endsection

    @section('js')  
                        
@endsection