@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>Cart</li>
    </ul>
  </div>
</div> -->
@endsection
@section('content')
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
    <div class="container-indent" ng-init="getcartdetails();getcurrentuser();pickupproductbranches();" ng-cloak>
      
        <div class="container " ng-if="!continueshipping">
            <h1 class="tt-title-subpages noborder">SHOPPING CART</h1>
            <div class="tt-shopcart-table-02">
                <div class="tt-shopcart-btn">
                    <div class="col-left">
                        <a class="btn-link" href="{{route('frontpage')}}"><i class="icon-e-19"></i>CONTINUE SHOPPING</a>
                    </div>
                    <div class="col-right">
                        <a class="btn-link" href="" ng-click="removeallcart()"><i class="icon-h-02"></i>CLEAR SHOPPING CART</a>
                    </div>
                </div>
                <table>
                    <tbody>
                        <tr ng-repeat = "product in customercart track by $index">
                            <td>
                                <div class="tt-product-img">
                                    <img ng-src="{$ 'assets/products'+product.display_image $}" ng-click="detailview(product)" onerror="this.src='images/default_product.png' " alt="">
                                </div>
                            </td>
                            <td>
                                <h4 class="tt-title">
                                    <a href="#">{$product.product_name$}</a>
                                </h4>
                                <p ng-if="product.product_price[0].market_price > 0">Other Market Price - SAR {$product.product_price[0].market_price$}</p>
                                <p ng-if="product.discount > 0" class="tt-label-location">
                                    <span class="tt-label-sale">GET {$product.discount$}% OFF</span>
                                </p>
                                <ul class="tt-list-parameters">
                                    <li>
                                        <div class="tt-price" ng-if="product.actual_selling_amount > 0">
                                            <span style="font-size: small;font-weight: 100;" ng-if="product.actual_selling_amount > 0" class="old-price">SAR {$product.price$}</span>
                                            <span>SAR {$product.actual_selling_amount$} ({$product.quantity$} {$product.product_quantity.display_name$})
                                            </span>
                                        </div>
                                        <div class="tt-price" ng-if="product.actual_selling_amount == 0">
                                            <span>SAR {$product.price$} ({$product.quantity$} {$product.product_quantity.display_name$})</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="detach-quantity-mobile"></div>
                                    </li>
                                    <li>
                                        <div class="tt-price subtotal">
                                            SAR {$product.finalamount$}
                                        </div>
                                    </li>
                                </ul>
                            </td>
                            <td>
                                <div class="tt-price" ng-if="product.actual_selling_amount > 0">
                                    <span style="font-size: small;font-weight: 100;" ng-if="product.actual_selling_amount > 0" class="old-price">SAR {$product.price$}</span>
                                    <span>SAR {$product.actual_selling_amount$} ({$product.quantity$} {$product.product_quantity.display_name$})
                                    </span>
                                </div>
                                <div class="tt-price" ng-if="product.actual_selling_amount == 0">
                                    <span>SAR {$product.price$} ({$product.quantity$} {$product.product_quantity.display_name$})</span>
                                </div>
                            </td>
                            <td>
                                <div class="detach-quantity-desctope">
                                    <div class="tt-input-counter style-01">
                                        <span class="minus-btn" ng-click="cartqunatitychange(product,'0')"></span>
                                        <input type="text" value="{$product.cartquantity$}" ng-model="product.cartquantity" ng-change="cartqunatitychange(product,'2','list')" size="5">
                                        <span class="plus-btn" ng-click="cartqunatitychange(product,'1')"></span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="tt-price subtotal">
                                    SAR {$product.finalamount$}
                                </div>
                            </td>
                            <td>
                                <a href="#" ng-click="removecartitem(product)" class="tt-btn-close"></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tt-shopcart-col">
                <div class="row">
                    <div class="col-md-6 col-lg-4" ng-if="pickup">
                        <h4 class="tt-title">
                            NOTE
                        </h4>
                        <p>Add special instructions for your order...</p>
                        <form class="form-default">
                            <textarea ng-model="order.remark" class="form-control" rows="3"></textarea>
                        </form>
                    </div>
                    <div class="col-md-6 col-lg-4" ng-if="loggedin">
                        <div class="tt-shopcart-box">
                            <h4 class="tt-title">
                                SELECT DELIVERY ADDRESS
                            </h4>
                            <p>Enter your destination to get a shipping estimate.</p>
                            <button align="right" ng-click="addnewaddress()">Add address</button>
                            <div class="form-group" ng-repeat="addres in address track by $index">
                                <input type="radio" name="addressselection" ng-model="order.addressselection" value="{$addres.id$}"><span><button ng-click="editadddress(addres)">EDIT</button></span><br>
                                        <b>{$addres.first_name$} &nbsp; {$addres.last_name$}</b><p>{$addres.location$} <br> {$addres.city$} {$addres.district$} <br>{$addres.country$}</p><h4>Ph: {$addres.country_code$} {$addres.contact_no$}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="tt-shopcart-box" ng-if="loggedin">
                            <div class="form-group">
                                <label>Delivery Date</label>
                                <input type="date" id="datefield" min='1899-01-01' max='2000-13-13' ng-model="order.receivingdate" placeholder="dd/mm/yyyy" ng-change="getneededtimeslots(order.receivingdate);">
                            </div>
                            <div class="form-group">
                                <label>Delivery Time</label>
                                <select class="form-control" placeholder="Select timeslot" ng-model="order.selectedtime">
                                    <option ng-repeat="time in timeslots track by $index" value="{$time.id$}">{$time.open_time_formatted$} - {$time.close_time_formatted$}</option> 
                                </select>
                            </div>
                        </div>
                        <div class="tt-shopcart-box" ng-if="pickup">
                            <div class="form-group">
                                <label>Pickup Date</label>
                                <input style="margin:15px" type="date" id="dafield" min='1899-01-01' max='2000-13-13' ng-model="order.receivingdate" placeholder="dd/mm/yyyy" ng-change="getneededtimeslots(order.receivingdate);">
                            </div>
                            <div class="form-group">
                                <label>Pickup Time</label>
                                <select class="form-control" placeholder="Select timeslot" ng-model="order.selectedtime">
                                    <option ng-repeat="time in timeslots track by $index" value="{$time.id$}">{$time.open_time_formatted$} - {$time.close_time_formatted$}</option> 
                                </select>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-lg" ng-click="pickuplist()">Change Branch</button>
                            </div>
                        </div>
                        <div class="tt-shopcart-box" ng-if="loggedin">
                            <div class="form-group">
                                <h4 class="tt-title">
                                    YOUR PAYMENT
                                </h4>
                                <div class="form-group">
                                    <label> <input type="radio" ng-model="order.payment_type" value="cod" name="payment_method"> <span> Cash on Delivery </span>  </label>
                                    <p> <strong>We also accept Mada cards,visa cards,Master cards,STC pay and American Express cards.</strong> </p>
                                </div>
                            </div>
                            <h4 class="tt-title">
                                NOTE
                            </h4>
                            <p>Add special instructions for your order...</p>
                            <form class="form-default">
                                <textarea ng-model="order.remark" class="form-control" rows="3"></textarea>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4" ng-if="!loggedin && !pickup">
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="tt-shopcart-box tt-boredr-large">
                      <!--        <div class="row">
                                
                                <div class="col-9">
                                     <div class="row">
                                             <tbody>
                                                <tr>
                                                   <th>SUBTOTAL</th>
                                                       <td>SAR {$subtotalamount$}</td>
                                                </tr>
                                              </tbody>
                                     </div>
                                        <div class="row">

                                            <tfoot>
                                    <tr>
                                        <th>GRAND TOTAL</th>
                                        <td>SAR {$subtotalamount$}</td>
                                    </tr>
                                    <tr ng-if="saveamount > 0">
                                        <th>TOTAL SAVINGS</th>
                                        <td>SAR {$saveamount$}</td>
                                    </tr>
                                    <tr ng-if="loggedin">
                                        <th>DELIVERY AMOUNT</th>
                                        <td>{$deliverycharge$}</td>
                                    </tr>
                                    <tr ng-if="loggedin">
                                        <th>TOTAL AMOUNT</th>
                                        <td>SAR {$totalamount$}</td>
                                    </tr>
                                </tfoot>
                                        </div>
                                </div>
 
                                <div class="col-3">
                                    <div style=" border-left: 2px solid green;
                                        " class="vl">
                                     <tr ng-if="saveamount > 0">
                                        <th>TOTAL SAVINGS</th>
                                        <td>SAR {$saveamount$}</td>
                                    </tr>
                                    </div>
                                </div>
 
                             </div> -->
                                
                            <table class="tt-shopcart-table01">
                                <tbody>
                                    <tr>
                                        <th>SUBTOTAL</th>
                                        <td>SAR {$subtotalamount$}</td>
                                    </tr>
                             
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>GRAND TOTAL</th>
                                        <td>SAR {$subtotalamount$}</td>
                                    </tr>

                                    <tr ng-if="saveamount > 0">
                                        <th>TOTAL SAVINGS</th>
                                        <td>SAR {$saveamount$}</td>
                                    </tr>
                                    <tr ng-if="loggedin">
                                        <th>DELIVERY AMOUNT</th>
                                        <td>{$deliverycharge$}</td>
                                    </tr>
                                    <tr ng-if="loggedin">
                                        <th>TOTAL AMOUNT</th>
                                        <td>SAR {$totalamount$}</td>
                                    </tr>

                                </tfoot>

                            </table>
               
                            <div>
                                <button ng-if="!loggedin && !pickup" ng-click="proceedtocheckout()" class="btn btn-lg"><span class="icon icon-check_circle"></span>PROCEED TO CHECKOUT <i style=" font-size: 21px;
                                  margin-left: 30%;" class='fas fa-arrow-alt-circle-right'></i></button>
                                <button ng-if="loggedin" ng-click="placeorder()" class="btn btn-lg"><span class="icon icon-check_circle"></span>Confirm Order</button>
                                <button ng-if="pickup" ng-click="placeorder()" class="btn btn-lg"><span class="icon icon-check_circle"></span>Confirm Order</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin-bottom: 15px" class="container" ng-if="continueshipping">
            <div style="font-size: 20px;
    text-align: center;
    color: black;
    border: 1px solid white;
    background: #f4f5f3;margin-bottom:40px">{$message$}</div>
            <div  class="row d-flex justify-content-center">
            <a  style="width:auto;margin:5px 10px;" class="btn btn-lg" href="{{route('frontpage')}}">CONTINUE SHOPPING</a>
            <a style="width:auto;margin:5px 10px;min-width: 182px;" class="btn btn-lg" href="{{ URL::to('/orderhistory')}}">VIEW ORDER</a>
        </div>
        </div>
    <script>
        function addDays(dateObj, numDays) {
           dateObj.setDate(dateObj.getDate() + numDays);
           return dateObj;
        }
        var maxdate = addDays(new Date(), 7);
        var maxdd = maxdate.getDate();
        var maxmm = maxdate.getMonth()+1; //January is 0!
        var maxyyyy = maxdate.getFullYear();
         if(maxdd<10){
                maxdd='0'+maxdd
            } 
            if(maxmm<10){
                maxmm='0'+maxmm
            } 

        maxdate = maxyyyy+'-'+maxmm+'-'+maxdd; 
        document.getElementById("datefield").setAttribute("max", maxdate);
        document.getElementById("dafield").setAttribute("max", maxdate);
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();
         if(dd<10){
                dd='0'+dd
            } 
            if(mm<10){
                mm='0'+mm
            } 

        today = yyyy+'-'+mm+'-'+dd; 
        document.getElementById("datefield").setAttribute("min", today);
        document.getElementById("dafield").setAttribute("min", today);
    </script>

    <style>
h1.tt-title-subpages.noborder {
    background: #578442e8;
    color: white;
    font-size: 15px;
        padding: 0px;
}
.btn-lg{
    width:100%;
        height: 50px;
}

</style>
</div>
        
        
  @include('customer.footer')

    

	@endsection

    @section('js')  

@endsection