    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <style>
        th{
            padding-top: 8px !important;
            text-transform: none !important; 
            text-align: center !important;
            font-size: 14px !important;
        }
        
        .table .thead-light th {
            color: #fff;
            background-color: #40dcfd;
            border-color: #40dcfd;
        }
    </style>
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h3 style="color: #40dcfd; text-transform: lowercase;">Cart</h3>
                        </div>
                    </div>
                </div>
                <!-- end page title -->
                
                <?php $this->load->view('template/message.php');?>
                <div id="alert"></div>

                <div class="row">
                    <div class="col-xl-9">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <?php echo form_open('', array('method' => 'post'));?>
                                        <input type="hidden" name="edit_id" id="edit_id">
                                        <table class="table table-centered mb-0 table-nowrap">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th>Merchandise</th>
                                                    <th>SKU</th>
                                                    <th>Description</th>
                                                    <th>Size</th>
                                                    <th>Price</th>
                                                    <th>Quantity</th>
                                                    <th>Total</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php 
                                                    if(count($cart_list) > 0){
                                                        
                                                        $total_val = 0;
                                                        
                                                        foreach($cart_list as $key => $val){
                                                ?>
                                                    <tr>
                                                        <td class="text-center">
                                                            <a href="javascript:;" onclick="get_album_func('<?php echo $val['album_id'];?>');">
                                                                <img src="http://d1z6a3vjnfowyr.cloudfront.net/<?php echo $val['comp_photo_url'];?>" alt="product-img" title="<?php echo $val['title'];?>" class="avatar-md" style="width: 90px !important; height: 90px !important; border-radius: 10px;" />
                                                            </a>
                                                        </td>
                                                        <td class="text-center">
                                                            <p class="mb-0"><?php echo $val['sku'];?></p>
                                                        </td>
                                                        <td class="text-center">
                                                            <p class="mb-0"><?php echo $val['description'];?></p>
                                                        </td>
                                                        <td class="text-center">
                                                            <?php echo $val['title']; ?>
                                                        </td>
                                                        <td class="text-center">
                                                            <?php echo $val['symbol'];?>
                                                            <?php 
                                                                if($val['discount'] != 0){
                                                                    $discount_price = number_format($val['price'] * $val['discount'] / 100, 2);
                                                                    echo number_format(($val['price'] - $discount_price), 2);
                                                                    
                                                                    $total_val += number_format(($val['price'] - $discount_price) * $val['amount'], 2);
                                                                }else{
                                                                    echo $val['price'];
                                                                    $total_val += number_format($val['price'] * $val['amount'], 2);
                                                                }
                                                            ?>
                                                        </td>
                                                        <td class="text-center">
                                                            <div style="width: 120px; margin: 0px auto;">
                                                                <input type="text" value="<?php echo $val['amount'];?>" name="demo_vertical" id="merchandise_count<?php echo $val['id'];?>" onchange="get_total_price('<?php if($val['discount'] != 0){ $discount_price = $val['price'] * $val['discount'] / 100; echo ($val['price'] - $discount_price); }else{ echo $val['price']; }?>', '<?php echo $val['symbol'];?>', '<?php echo $val['id'];?>');">
                                                            </div>
                                                        </td>
                                                        <td id="row_total_price<?php echo $val['id'];?>" class="text-center">
                                                            <?php echo $val['symbol'];?>
                                                            <?php 
                                                                if($val['discount'] != 0){
                                                                    $discount_price = $val['price'] * $val['discount'] / 100;
                                                                    echo number_format(($val['price'] - $discount_price) * $val['amount'], 2);
                                                                }else{
                                                                    echo number_format($val['price'] * $val['amount'], 2);
                                                                }
                                                            ?>
                                                        </td>
                                                        <td class="text-center">
                                                            <button type="submit" class="btn btn-danger action-icon" name="del_btn" value="ok" title="Delete" onclick="del_func('<?php echo $val['id'];?>');" style="border-radius: 50px;">
                                                                <i class="mdi mdi-trash-can"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                <?php
                                                        }
                                                    }else{
                                                ?>
                                                    <tr>
                                                        <td class="text-center" colspan="8">
                                                            <span>No Data</span>
                                                        </td>
                                                    <tr>
                                                <?php
                                                    }
                                                ?>
                                            </tbody>
                                        </table>
                                    </form>
                                </div>
                                <div class="row mt-4">
                                    <div class="col-sm-12">
                                        <div class="text-sm-right mt-2 mt-sm-0">
                                            <button type="button" class="btn" <?php if(count($cart_list) == 0){?>disabled<?php }?> style="border-radius: 50px; background-color: #40dcfd; color: #fff;" onclick="checkout_func();">
                                                <i class="mdi mdi-cart-arrow-right mr-1"></i> Checkout 
                                            </button>
                                        </div>
                                    </div> <!-- end col -->
                                </div> <!-- end row-->
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-xl-3">
                         <div class="card">
                            <div class="card-body">
                                <h5 class="mb-3" style="color: #40dcfd; text-transform: lowercase;">Order Summary</h5>
    
                                <div class="table-responsive">
                                    <table class="table mb-0">
                                        <tbody>
                                            <tr>
                                                <th>Total :</th>
                                                <th id="total_val"><?php if(count($cart_list) > 0){echo $cart_list[0]['symbol']." ".number_format($total_val, 2);}else{echo 0;}?></th>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- end table-responsive -->
                            </div>
                        </div>
                        <!-- end card -->
                    </div>
                </div>
                <!-- end row -->
            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->
        
        <!--  Modal content for the above example -->
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title mt-0" id="myLargeModalLabel">Album</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid">
                            <div class="row" id="album"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        
        <!-- Modal -->
        <div class="modal fade checkOutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Checkout Details</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div>
                                            <div class="custom-control custom-radio custom-control-inline mr-4">
                                                <input type="radio" id="customRadioInline1" name="isDelivery" value="0" class="custom-control-input" checked onchange="sel_delivery_func(0)">
                                                <label class="custom-control-label" for="customRadioInline1">
                                                    <i class="fas fa-lock font-size-20 align-top"></i> Pick Up
                                                </label>
                                            </div>
                                            <div class="custom-control custom-radio custom-control-inline mr-4">
                                                <input type="radio" id="customRadioInline3" name="isDelivery" value="1" class="custom-control-input" onchange="sel_delivery_func(1)">
                                                <label class="custom-control-label" for="customRadioInline3">
                                                    <i class="fas fa-shipping-fast font-size-20 align-top"></i> Delivery
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                 
                                <div class="card" id="shipping_div" style="display: none;">
                                    <div class="card-body">
                                        <div class="tab-content" id="v-pills-tabContent">
                                            <div class="tab-pane fade show active" id="v-pills-shipping" role="tabpanel" aria-labelledby="v-pills-shipping-tab">
                                                <div>
                                                    <h4 class="card-title">Shipping information</h4>
                                                    <p class="card-title-desc">Fill all information below</p>
                                                    <div class="form-group row mb-4">
                                                        <label for="billing-name" class="col-md-2 col-form-label">Name</label>
                                                        <div class="col-md-10">
                                                            <input type="text" class="form-control" id="name" placeholder="Enter your name">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row mb-4">
                                                        <label for="billing-phone" class="col-md-2 col-form-label">Phone</label>
                                                        <div class="col-md-10">
                                                            <input type="text" class="form-control" id="phone" placeholder="Enter your Phone no.">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row mb-4">
                                                        <label for="billing-address" class="col-md-2 col-form-label">Address</label>
                                                        <div class="col-md-10">
                                                            <textarea class="form-control" id="address" rows="3" placeholder="Enter full address"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row mb-4">
                                                        <label class="col-md-2 col-form-label">Country</label>
                                                        <div class="col-md-10" style="padding-top: 8px;">
                                                            <span><?php echo $country_data['title'];?></span>
                                                        </div>
                                                        <input type="hidden" name="country" value="<?php echo $country_data['id'];?>">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                        
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-3">Summary</h4>
                                        <div class="table-responsive">
                                            <table class="table mb-0">
                                                <tbody>
                                                    <tr id="checkout_subtotal_tr" style="display: none;">
                                                        <td>Sub Total :</td>
                                                        <td id="checkout_subtotal_val"></td>
                                                    </tr>
                                                    <tr id="shipping_fee_tr" style="display: none;">
                                                        <td>Shipping Fee :</td>
                                                        <td id="shipping_fee_val"></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Total :</th>
                                                        <th id="checkout_total_val"></th>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="site_id" id="site_id" value="<?php if(count($cart_list) > 0){echo $cart_list[0]['site_id'];}else{echo '0';}?>">
                    <input type="hidden" name="total_price" id="total_price" value="">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="payfunc(<?php echo $cart_list[0]['currency_rate'];?>)">Pay at Retail</button>
                        <button type="button" class="btn btn-primary" onclick="checkoutfunc(<?php echo $cart_list[0]['currency_rate'];?>)">Checkout</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        
        <script>
            var total_val = '<?php echo number_format($total_val, 2);?>';
            var currency = '<?php echo $cart_list[0]["symbol"];?>';
            var shipping_fee = '<?php echo number_format($country_data['tax'], 2);?>';
            
            function get_total_price(price, symbol, id){
                
                var merchandise_count = $("#merchandise_count"+id).val();
                
                $.ajax({
                    method: "POST",
                    url: "<?php echo base_url();?>CartController/update_amount_func",
                    data: {
                        id: id, 
                        amount: merchandise_count
                    }
                })
                .done(function(msg) {
                    var json_obj = JSON.parse(msg);
                    
                    var merchandise_count = $("#merchandise_count"+id).val();
                    var row_total_price = parseFloat(merchandise_count * price).toFixed(2);
                    $("#row_total_price"+id).html(symbol + row_total_price);
                    
                    total_val = parseFloat(parseFloat(total_val)+parseFloat(price)).toFixed(2);
                    currency = symbol;
                    
                    $("#total_val").html(currency + total_val);
                });
            }
            
            function get_album_func(album_id){
                $.ajax({
                    method: "POST",
                    url: "<?php echo base_url();?>GalleryController/cart_album_func",
                    data: {
                        album_id: album_id
                    }
                })
                .done(function(msg) {
                    var json_obj = JSON.parse(msg);

                    var shtml = '';
                    
                    if(json_obj.length > 0){
                        for (let i = 0; i < json_obj.length; i++) {
                            shtml += ' <div class="col-md-6 mt-3 mb-3">';
                            shtml += '     <img src="http://d1z6a3vjnfowyr.cloudfront.net/'+json_obj[i].process_comp_file_url+'">';
                            shtml += ' </div> ';
                        }                     
                    }
			
                    $("#album").html(shtml);
                });
                
                $(".bs-example-modal-lg").modal('show');
            }
            
            function del_func(id){
                if(confirm("Are you sure?")){
					$("#edit_id").val(id);
				}
            }
            
            function checkout_func(){
                $("#total_price").val(total_val);
                $("#checkout_total_val").html(currency+' '+total_val);
                $(".checkOutModal").modal('show');
            }
            
            function sel_delivery_func(id){
                if(id == 0){
                    $("#total_price").val(total_val);
                    $("#checkout_total_val").html(currency+' '+(parseFloat(total_val)).toFixed(2));
                    $("#checkout_subtotal_tr").hide();
                    $("#shipping_fee_tr").hide();
                    $("#shipping_div").hide();
                }else if(id == 1){
                    $("#total_price").val((parseFloat(total_val) + parseFloat(shipping_fee)).toFixed(2));
                    $("#checkout_subtotal_val").html(currency+' '+total_val);
                    $("#checkout_total_val").html(currency+' '+(parseFloat(total_val) + parseFloat(shipping_fee)).toFixed(2));
                    $("#shipping_fee_val").html(currency+' '+parseFloat(shipping_fee).toFixed(2));
                    $("#checkout_subtotal_tr").show();
                    $("#shipping_fee_tr").show();
                    $("#shipping_div").show();
                }
            }
            
            function payfunc(currency_rate){
                $.ajax({
                    method: "POST",
                    url: "<?php echo base_url();?>CartController/payfunc",
                    data: {
                        isDelivery: $("input[name='isDelivery']:checked").val(),
                        total_price: parseFloat($("#total_price").val()).toFixed(2),
                        total_price_usd: parseFloat($("#total_price").val() * currency_rate).toFixed(2),
                        site_id: $("#site_id").val(),
                        name: $("#name").val(),
                        phone: $("#phone").val(),
                        address: $("#address").val(),
                        country: $("#country").val()
                    }
                    
                })
                .done(function(res) {
                    var json_obj = JSON.parse(res);
                    if(json_obj.status == 200){
                        $("#alert").html(json_obj.msg);
                    }
                    
                    $(".checkOutModal").modal('hide');
                    
                    setTimeout(function(){
    					window.location.reload();
    				}, 1500);
                });
            }
            
            function checkoutfunc(currency_rate){
                var isDelivery = $("input[name='isDelivery']:checked").val();
                var total_price = parseFloat($("#total_price").val()).toFixed(2);
                var total_price_usd = parseFloat($("#total_price").val() * currency_rate).toFixed(2);
                var site_id = $("#site_id").val();
                var name = $("#name").val();
                var phone = $("#phone").val();
                var address = $("#address").val();
                var country = $("#country").val();
                document.location.href = "<?php echo base_url();?>CartController/purchase?isDelivery="+isDelivery+"&total_price_usd="+total_price_usd+"&total_price="+total_price+"&site_id="+site_id+"&name="+name+"&phone="+phone+"&address="+address+"&country="+country;
            }
        </script>