<?php $__env->startSection('content'); ?>
<?php $currency =  setting_by_key("currency"); ?>
 <!-- Header Area Start 
    ====================================================== -->
    <section class="banner-sec internal-banner" style="background-image:url(assets/frontend/img/menu-page.jpg)">
    
        <!-- Start: slider-overview -->
        <div class="balck-solid">
        
            <!-- Start: slider -->
            <div class="container">
                <div class="banner-mid-text internal-header">
                
                    <!-- Start: flexslider -->
                    <div class="flexslider">
                        <ul>
                            <!-- Start: flexslider-one -->
                            <li>
                                <h2>Our menu</h2>
                                <div class="hr-outtr-line"><hr><i class="fa fa-heart" aria-hidden="true"></i><hr></div>
                            </li>
                            <!-- End: flexslider-one -->
                        </ul>
                    </div>
                    <!-- End: flexslider -->
            
                </div>
            </div> 
            <!-- End: slider -->
            
        </div>  
        <!-- End: slider-overview -->
    </section>
    <!-- =================================================
    Header Area End -->
    
    
    <!-- Reservation  Area Start 
    ====================================================== -->
    <section class="resrvation-top-area our-top-sec" id="Welcome">

    	<div class="container text-center">
            <div class="row">
                <h2><span>real taste</span>categories</h2>
                <div class="hr-outtr-line"><hr><i class="fa fa-heart" aria-hidden="true"></i><hr></div>
            </div>
        </div>
    </section>
    <!-- =================================================
    AReservation Area End -->
    
    
    <!--  Amenities  Area Start 
    ====================================================== -->
    <section class="our-menu-bg">
        <div class="container">
            <div class="row">
            
                <!-- Start: Our-menu-Mains************************Section-one -->
                <div class="our-menu-details">
                                    
                    <div class="col-xs-12 col-sm-2 col-lg-2 bg-grey menu-list no-pad">
                        <h5>Categories</h5>
                        <ul class="">
                            <li class="fil-cat" data-rel="all">All</li>
                            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li class="fil-cat" data-rel="<?php echo e($cat->id); ?>"><?php echo e($cat->name); ?></li>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            
                        </ul>
                        
                    </div>

                    <!-- Start: Our-menu-one -->
                    <div class="col-xs-12 col-sm-7 col-lg-7 " id="portfolio">
                        <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php $__currentLoopData = $cat->products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pro): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                       
                        <div class="clearfix <?php echo e($pro->category_id); ?> all marginBtn">
                            <div class="col-sm-2"><img class="img-circle" width="100" src="<?php echo e(url('uploads/products/thumb/' . $pro->id . '.jpg')); ?>" class="img-responsive"></div>
                            <!-- Start: Our-menu-lft -->
                            
                            <div class="or-lft-menu col-sm-7">
                                <h5><span><?php echo e($pro->name); ?></span></h5>
                                <p class="hidden-xs"><?php echo e($pro->description); ?></p>
                            </div>
                            
                            <!-- End: Our-menu-lft -->
                            <!-- Start: Our-menu-rgt -->
            <?php 
                                        $prices = json_decode($pro->prices); 
                                        $titles = json_decode($pro->titles); 
            ?>
                                        <?php $__currentLoopData = $titles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key=>$t): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            
                                <div class="or-rgt-menu col-xs-12 col-sm-3">
                                    <h1><?php echo e($t); ?> <strong class="pull-right"><?php echo $currency; ?><?php echo e($prices[$key]); ?></strong></h1>
                                    <h2 style="cursor:pointer;" class="AddToCart" data-price="<?php echo e($prices[$key]); ?>" data-id="<?php echo e($pro->id); ?>" data-key="<?php echo e($key); ?>" data-size="<?php echo e($t); ?>" data-name="<?php echo e($pro->name); ?>">+</h2>
                                </div>
                            
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            

                            <!-- End: Our-menu-rgt -->
                        </div>
                        <!-- End:  -->
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        
                       
                    </div>
                    <div class="col-xs-12 col-sm-3 col-lg-3 bg-grey menu-list no-pad">
                        <h5>Your Order <i class="fa fa-shopping-cart white pull-right"></i></h5>                        
                        <ul id="CartHTML"> 
                            <li class="list-pad">VAT(8%) &ensp;<span class="pull-right"> 0.00</li>
                            <li class="list-pad">Delivery Fee &ensp;<span class="pull-right">0.00</li>
                        </ul>  
                        <a type="submit" data-toggle="modal" data-target="#myModal" class="btn addTo-cart btn-group-justified" value="">Checkout</a>                        
                    </div>
                </div>
                <!-- End: Our-menu-Mains -->           
               
            </div>
        </div>
    </section>
    <!-- =================================================
    Amenities  Area End -->

    		<div id="myModal" class="modal fade" role="dialog">
		  	<div class="modal-dialog">
			    <!-- Modal content-->
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal">&times;</button>			        
					<h4 class="text-center sub-heading1">Ready to get started</h4>
			      </div>
			      <div class="modal-body col-sm-12">
			      	<div class="col-sm-12 form-group"> <div style="color:red" id="errors"> </div>
            		</div>
						<div class="col-sm-6 col-lg-6 form-group">
							<label>Full Name</label>
							<input type="text" class="form-control" id="name" name="name" placeholder="Name" autocomplete="off" data-field_type="input">
						</div>
						<div class="col-sm-6 col-lg-6 form-group">
							<label>Email</label>
							<input type="email" class="form-control" id="email" name="email" placeholder="Email">
						</div>
						<div class="col-sm-6 col-lg-6 form-group">
							<label>Phone</label>
							<input type="text" class="form-control"  id="phone" name="phone" placeholder="Phone">
						</div>
						<div class="col-sm-6 col-lg-6 form-group">
							<label>Address</label>
							<input type="text" class="form-control"  id="address" name="company" placeholder="Company">
						</div>
						<div class="col-sm-12 col-lg-12 form-group">
							<label>Comment</label>
							<textarea class="form-control" rows="5" placeholder="Message" id="comment" name="message"></textarea>
						</div>
						<div class="col-sm-6">
							<div class="col-xs-12 col-sm-12">					
								<button type="submit" class="btn submit-btn col-sm-12" data-dismiss="modal">Cancel</button>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="col-xs-12 col-sm-12">					
								<button type="submit" class="btn submit-btn col-sm-12 ConfirmOrder">Complete</button>
							</div>							
						</div>
			      </div>
			      	<div class="modal-footer">
				        
				    </div>
			    </div>
		  	</div>
		</div>

    
    <!-- <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 id="myModalLabel">Please Add Your Details</h3>
        </div>
        <div class="modal-body" >
            <div class="col-sm-12 form-group"> <div style="color:red" id="errors"> </div>
            </div>

            <div class="col-sm-12 form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" placeholder="Jane Doe" id="name">
                      </div>
                      <div class="col-sm-12 form-group">
                        <label>Email</label>
                        <input type="email" id="email" class="form-control" placeholder="jane.doe@example.com">
                      </div>
                      <div class="col-sm-12 form-group">
                        <label>Phone number</label>
                        <input type="text" id="phone" class="form-control" placeholder="Phone #">
                      </div>
                      <div class="col-sm-12 form-group">
                        <label>Address</label>
                        <input type="text" id="address" class="form-control" placeholder="Write Address">
              
                      </div>
                      <div class="col-sm-12 form-group">
                        <label>Comment</label>
                       <textarea id="comment" class="form-control" rows="3"></textarea>
                      </div>
			</div>
		<div class="modal-footer col-sm-12">
	        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
	        <button class="btn btn-primary ConfirmOrder">Confirm Order</button>
        </div>
      </div>
    </div>
  </div> -->
  
 
    <link href="<?php echo e(url('assets/css/plugins/sweetalert/sweetalert.css')); ?>" rel="stylesheet">
    <script src="<?php echo e(url('assets/js/plugins/sweetalert/sweetalert.min.js')); ?>"></script>
    <script src="<?php echo e(url('assets/js/lodash.min.js')); ?>"></script>
   
    <script>
    $("body").on("click" , ".ConfirmOrder" , function() {
        var msg = "";
        
        if(cart.length  < 1) {
                swal("" , "Cart is Empty" , "error");
                return false;
        }
        var name = $("#name").val();
        var email = $("#email").val();
        var phone = $("#phone").val();
        var address = $("#address").val();
        var comment = $("#comment").val();
        var msg = "";
        if(name == "") { 
            msg+= "Name is Required<br>";
        }
        
        if(email == "") { 
            msg+= "Email is Required<br>";
        }
        
        if(phone == "") { 
            msg+= "Phone is Required<br>";
        }
        if(address == "") { 
            msg+= "Address is Required<br>";
        }
        if(msg) { 
                swal("" , msg, "error");
                return false;
        }
        
        var form_data = {
                name: name,
                email: email,
                phone: phone,
                address: address,
                comment: comment,
                type: "order",
                status: 2,
                //discount: $("#discount").val(),
                //cashier_id: $("#cashier_id").val(),
                //customer_id: $("#customer_id").val(),
                items: _.map(cart, function(cart){
                    return {
                        product_id: cart.product_id,
                        size: cart.size,
                        quantity: cart.quantity,
                        price: cart.price
                    }
                })
        };
        
        $(".ConfirmOrder").html('<i class="fa fa-spinner fa-spin" style="font-size:18px"></i>');
        $.ajax({
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '<?php echo url("sales/complete_sale"); ?>',
                        data: form_data,
                        success: function (msg) {
                            $("#myModal").modal("hide");
                            cart = [];
                            $("#comments").val("");
                            $(".ConfirmOrder").html('Order Confirm');
                            swal({
                              title: '',
                              type: 'success',
                              text: 'Thank you for your Order.'
                            })

                            show_cart();
                        }    
                    });    

        $("#name").val("");
        $("#email").val("");
        $("#phone").val("");
        $("#address").val("");
        $("#comment").val("");
        
                
                
    });

    var products = new Array();
var cart = new Array();
$("body").on("click" , ".AddToCart" , function() {
            var ids = _.map(cart, 'id');
                var item = {
                    id : $(this).attr("data-id") + $(this).attr("data-key"),
                    product_id : $(this).attr("data-id"),
                    price : $(this).attr("data-price"),
                    size : $(this).attr("data-size"),
                    name : $(this).attr("data-name")
                };
                console.log(item);
                
            if (!_.includes(ids, item.id)) {
                item.quantity = 1;
                item.p_qty = 1;
                cart.push(item);
            } else {
                var index = _.findIndex(cart, item);
                 cart[index].quantity = cart[index].quantity + 1
            }
            

        //toastr.success('Successfully Added to Cart')            
        show_cart();    
            
    
});


$("body").on("click" , "#ClearCart" , function() {
    
    var cart = [];
    $(".TotalAmount").html(0);
            $("#CartHTML").html("");
});
$("body").on("click" , ".DecreaseToCart" , function() {
                var item = {
                    id : $(this).attr("data-id")
                };
            var index = _.findIndex(cart, item);
            
            if (cart[index].quantity == 1) {
                deleteItemFromCart(item);
            } else {
                cart[index].quantity = cart[index].quantity - 1;
            }    
            //console.log(cart[index].quantity);
         //toastr.success('Successfully Updated')       
        show_cart();            
    
});

$("body").on("click" , ".IncreaseToCart" , function() {	
                var item = {
                    id : $(this).attr("data-id")
                };
            var index = _.findIndex(cart, item);
            cart[index].quantity = cart[index].quantity + 1;        
            show_cart();            
    
});

$("body").on("click" , ".DeleteItem" , function() {
                var item = {
                    id : $(this).attr("data-id")
                };    
                
            deleteItemFromCart(item);
});

$("body").on("click" , ".DiscountItem" , function() {
                
});

function deleteItemFromCart(item) { 
    var index = _.findIndex(cart, item);
    cart.splice(index, 1);
    show_cart();
}


    
    function show_cart() { 
         if(cart.length > 0) { 
         var qty = 0;
         var total = 0;
         var cart_html = "";
             var obj = cart; 
                      
                 $.each( obj, function( key, value ) {

                          
                      cart_html += '<li><span><i data-id=' +  value.id + ' class="fa fa-minus-circle DecreaseToCart" aria-hidden="true"></i>&ensp;<i data-id=' +  value.id + ' class="fa fa-plus-circle IncreaseToCart" aria-hidden="true"></i></span>&ensp;<span class="">' + value.quantity +'x</span> ' + value.name + '<span class="pull-right">'+ value.price + ' <i class="fa fa-times-circle-o fa-lg DeleteItem" data-id=' +  value.id + '></i></span></li>';

                     qty = Number(value.quantity);
                     total = Number(total) + Number(value.price * qty);
                     
                 });
                 
                  cart_html += '<li class="list-pad">Subtotal &ensp;<span class="pull-right TotalAmount">'+ total +'</li>';
                        cart_html += '<li>Delivery Fee &ensp;<span class="pull-right"><?php echo $currency; ?><?php echo setting_by_key("delivery_cost"); ?></li>';
                        var vat = (Number(total) * <?php echo setting_by_key("vat"); ?>)/100;
                        cart_html += '<li>+ VAT (<?php echo setting_by_key("vat"); ?>%) &ensp;<span class="pull-right"><?php echo $currency; ?>' + vat + '</li>';
                        var total_cost = Number(total) + <?php echo setting_by_key("delivery_cost"); ?> +  vat;
                        cart_html += '<li class="list-pad">Total &ensp;<span class="pull-right bigTotal"><?php echo $currency; ?>'+ total_cost +'</li>';
                        
                    
                 
                 // cart_html += '<div class="panel-footer"> Total Items' ;
                 // cart_html += '<span class="pull-right"> ' + qty ;
                 // cart_html += '</span></div>' ;
                 
                 
                 $("#CartHTML").html("");
                 $("#CartHTML").html(cart_html);
        } else { 
            $(".TotalAmount").html(0);
            $("#CartHTML").html("");
        }
        
}
$(function() {
        var selectedClass = "";
        $(".fil-cat").click(function(){ 
        selectedClass = $(this).attr("data-rel"); 
     $("#portfolio").fadeTo(100, 0.1);
        $("#portfolio > div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
    setTimeout(function() {
      $("."+selectedClass).fadeIn().addClass('scale-anm');
      $("#portfolio").fadeTo(300, 1);
    }, 300); 
        
    });
});
</script>

    
<?php $__env->stopSection(); ?>

<?php echo $__env->make('frontend.appother', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>