@extends('layouts.master-voyo')

@section('header')

@stop

@section('content')
<!-- Page Header --> 
<header class="titlebar titlebar1">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="page-title pull-left page-title1">Shopping Cart</h1>
                <ol class="breadcrumb pull-right">
                    <li><a href="#">Home</a></li>
                    <li class="active">Shopping Cart</li>
                </ol>
            </div>
        </div>
    </div>
</header> <!-- END Page Header -->
<section class="section-4">
    <div class="container">
        <div class="col-md-12">
            <form id="shippingForm" method="post" class="form-horizontal" action="">
                <div class="col-sm-12 col-md-12">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th class="col-md-2">Product Image</th>
                                    <th class="col-md-3">Product Name</th>
                                    <th class="col-md-1">Quantity</th>
                                    <th class="col-md-2"><span class="pull-right">Price</span></th>
                                    <th class="col-md-2"><span class="pull-right">Total</span></th>
                                    <th class="col-md-2"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="pd_img_border">
                                            <div class="pd_img_wrap">
                                                <img src="{{ URL:: asset('site/images/products/dress4.jpg')}}" alt="">
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p>Dress 1</p>
                                    </td>
                                    <td class="qty_input_selection">
                                        <div class="form-group qty_input" id="product-qty">
                                            <input type="text" value="0" class="form-control pd_qty_input" />
                                            <div class="select_arow_qty_wrap">
                                                <i id="up" class="fa fa-caret-up select_up_arw"></i>
                                                <i id="down" class="fa fa-caret-down select_down_arw"></i>
                                           </div>
                                        </div>
                                    </td>
                                    <td align="right">
                                        <p>S$275</p>
                                    </td>
                                    <td align="right">
                                        <p>S$275</p>
                                    </td>
                                    <td align="right">
                                        <!-- <a class="btn voyo-btn btn-blue"><i class="fa fa-edit"></i>Edit</a> -->
                                        <a class="btn voyo-btn btn-red"><i class="fa fa-trash-o"></i>Delete </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="pd_img_border">
                                            <div class="pd_img_wrap">
                                                <img src="{{ URL:: asset('site/images/products/dress2.jpg')}}" alt="">
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p>Dress 2</p>
                                    </td>
                                    <td>
                                        <div class="form-group qty_input" id="product-qty">
                                            <input type="text" value="0" class="form-control pd_qty_input" />
                                            <div class="select_arow_qty_wrap">
                                                <i id="up1" class="fa fa-caret-up select_up_arw"></i>
                                                <i id="down1" class="fa fa-caret-down select_down_arw"></i>
                                           </div>
                                        </div>
                                    </td>
                                    <td align="right">
                                        <p>S$550</p>
                                    </td>
                                    <td align="right">
                                        <p>S$550</p>
                                    </td>
                                    <td align="right">
                                        <!-- <a class="btn voyo-btn btn-blue"><i class="fa fa-edit"></i>Edit</a> -->
                                        <a class="btn voyo-btn btn-red"><i class="fa fa-trash-o"></i>Delete </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="pd_img_border">
                                            <div class="pd_img_wrap">
                                                <img src="{{ URL:: asset('site/images/products/apple-img2.jpg')}}" alt="">
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p>Iphone 5C</p>
                                    </td>
                                    <td>
                                        <div class="form-group qty_input" id="product-qty">
                                            <input type="text" value="0" class="form-control pd_qty_input" />
                                            <div class="select_arow_qty_wrap">
                                                <i id="up2" class="fa fa-caret-up select_up_arw"></i>
                                                <i id="down2" class="fa fa-caret-down select_down_arw"></i>
                                           </div>
                                        </div>
                                    </td>
                                    <td align="right">
                                        <p>S$550</p>
                                    </td>
                                    <td align="right">
                                        <p>S$550</p>
                                    </td>
                                    <td align="right">
                                        <!-- <a class="btn voyo-btn btn-blue"><i class="fa fa-edit"></i>Edit</a> -->
                                        <a class="btn voyo-btn btn-red"><i class="fa fa-trash-o"></i>Delete </a>
                                    </td>
                                </tr>
                                <tr class="total_price_border">
                                    <td colspan="4" align="right">
                                        <span class="color_green"><b>Subtotal</b></span>
                                    </td>
                                    <td align="right">
                                        <span>S$1100</span>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td colspan="4" align="right">
                                        <span class="color_green"><b>Shipping</b></span>
                                    </td>
                                    <td align="right">
                                        <span>S$20</span>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td colspan="4" align="right">
                                        <span class="color_green"><b>Order Total</b></span>
                                    </td>
                                    <td align="right">
                                        <span class="color_red"><b>S$1120</b></span>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td colspan="6" align="right">
                                        <div class="form-group">
                                            <div class="">
                                                <button type="submit" class="btn btn-new m-right rounded pull-right" name="submit-order" value="">Continue Shopping</button>
                                                <button type="submit" class="btn btn-new m-right rounded pull-right" name="submit-order" value="">Submit Order</button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>

    <!-- footer links -->
    @include('site.bottom-menu')
@stop

@section('footer')
<script type="text/javascript">
    $(document).ready(function(){
       $('.pd_qty_input').val(1);
       $('#up').on('click',function(){
            if (isNaN(parseInt($('.pd_qty_input').val()))){$('.pd_qty_input').val(1);}
            else {$('.pd_qty_input').val(parseInt($('.pd_qty_input').val())+1);}
       });
       $('#down').on('click',function(){
            if (isNaN(parseInt($('.pd_qty_input').val()))){$('.pd_qty_input').val(1);}
            else {  if(parseInt($('.pd_qty_input').val())<=1){  }
                    else {$('.pd_qty_input').val(parseInt($('.pd_qty_input').val())-1);}}
       });
    });
</script>
@stop