<style>
        #detail_img{
            width: 100%;
            height: 100%;
        }

    
    </style>
   <!-- <script src="./assets/icon/feather.min.js"></script> -->
   <script src="https://unpkg.com/feather-icons"></script>
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <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>Merchandise / <?php echo $detail['title'];?></h3>
                        </div>
                    </div>
                </div>
                <!-- end page title -->
            </div>
            
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 mt-5">                    
                        <div class="product-detai-imgs">
                            <div class="page-title-box d-block d-lg-flex align-items-center justify-content-between">
                                <div class="col-lg-7 offset-lg-1 col-md-12 col-sm-12 mb-3">
                                    <div class="tab-content" id="v-pills-tabContent">
                                        <div class="tab-pane fade show active" role="tabpanel" aria-labelledby="product-1-tab">
                                            <div>
                                                <img src="http://d38x82mkkml5o1.cloudfront.net/<?php echo $detail['comp_photo_url'];?>" alt="" class="img-fluid mx-auto d-block" id="detail_img">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                    
                                <div class="col-md-3" stype="padding: 20px;">
                                    <div class="mb-2">
                                        <span><?php echo $detail['sku'];?></span>
                                    </div>

                                    <h5>Select Size</h5>
                                    
                                    <?php 
                                        if(count($detail_size) > 0){
                                            $i = 0;
                                            foreach($detail_size as $key => $val){
                                    ?>
                                                <div class="btn-group btn-group-toggle mt-2 mt-xl-0" data-toggle="buttons">
                                                    <label class="btn btn-primary" style="border-radius: 7px;">
                                                        <input type="radio" name="size" id="size<?php echo $val["id"];?>" onchange="sel_size('<?php echo $val["id"];?>', '<?php echo $val["symbol"];?>', '<?php echo $val["price"];?>', '<?php echo $val["discount"];?>');"> <?php echo $val["title"]?>
                                                    </label>
                                                </div>
                                    <?php
                                                $i++;
                                            }
                                        }
                                    ?>
                                    
                                    <div class="pt-3" style="text-align: left;">
                                        <h4 style="color: #fe0100;" id="price"></h4>
                                    </div>
                                    
                                    <div class="mt-4 mt-xl-3">
                                        <h4 class="mt-1 mb-3"> <?php echo $detail['title'];?></h4>
                                        
                                        <p class="text-muted mb-4">
                                            <?php echo $detail['description'];?>
                                        </p>
                                        <?php
                                            $paidUCount;
                                            foreach($paidusercount as $paidkey => $paidval){
                                               $paidUCount = $paidval['paidUserCount'];
                                            }
                                        ?>
                                                                                                                                
                                        <div>                                                
                                            <button type="button" class="btn btn-primary waves-effect waves-light mt-2 mr-1" disabled id="sel_album_btn" onclick="sel_album('<?php echo $detail["site_id"];?>','<?php echo $paidUCount; ?>');" style="border-radius: 50px;">
                                                Select Photo
                                                <i class="bx bx-image"></i>
                                            </button>                                                        
                                        </div> 

                                        <!--  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">
                                                    <?php echo form_open('cart', array('method'=>'post', 'id'=>'add_cart_form'));?>
                                                        <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 id="alert"></div>
                                                            <div class="container-fluid">
                                                                <div class="row" id="album"></div> 
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary m-0" data-dismiss="modal">Close</button>
                                                            <button type="submit" class="btn btn-primary m-0 ml-2" name="add_cart_btn" value="ok" onclick="return add_cart_func('<?php echo $detail["photo_num"];?>', '<?php echo $detail["site_id"];?>');">Add To Cart</button>
                                                        </div>
                                                        <input type="hidden" name="size_id" id="size_id">
                                                        <input type="hidden" name="site_id" value="<?php echo $detail["site_id"];?>">
                                                        <input type="hidden" name="merchandise_id" value="<?php echo $detail['id']?>">
                                                    </form>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal-dialog -->
                                        </div><!-- /.modal -->
                                    </div>
                                </div>
                            </div>
                        </div>                                    
                        <!-- end card -->
                    </div>
                </div>
                <!-- end row -->
            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->

        <script>
            var photo_num = '<?php echo $detail["photo_num"];?>';
            function sel_album(site_id, paidUCount){
                $.ajax({
                    method: "POST",
                    url: "<?php echo base_url();?>GalleryController/sel_album_func",
                    data: {
                        site_id: site_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-4 mt-3 mb-3" style="padding-left: 2px; padding-right: 2px;">';
                            shtml += ' <label class="label">';
                            if(paidUCount==0) {
                                shtml += '     <img src="http://d38x82mkkml5o1.cloudfront.net/'+json_obj[i].process_comp_file_url+'">';
                            } else {
                                shtml += '     <img src="http://d38x82mkkml5o1.cloudfront.net/'+json_obj[i].staff_comp_file_url+'">';
                            }
                            
                            shtml += '     <div class="form-group">';
                            shtml += '         <div class="mt-2" style="    position: relative; top: -32px; left: auto; right: 10px; float: right;">';
                            shtml += '             <input type="checkbox" name="album_chk_id[]" value="'+json_obj[i].id+'" style="width: 20px; height: 20px;"> ' ;
                            shtml += '         </div>';
                            shtml += '     </div>';
                            shtml += '   </label>';
                            shtml += ' </div> ';
                        }                     
                    }
			
                    $("#album").html(shtml);
                });
                
                $("#size_id").val($('input[name="size"]:checked').val());
                $(".bs-example-modal-lg").modal('show');
            }

            function add_cart_func(photo_num, site_id){
                
                var shtml = '';
                
                var checked_items = document.querySelectorAll("input[name='album_chk_id[]']:checked").length;
                if(photo_num == checked_items){
                    <?php
                        foreach($cart_list as $key => $val){
                    ?>
                            if(site_id != <?php echo $val['site_id']?>){
                                shtml += '<div class="alert alert-info fade show" role="alert">';
                                shtml += '  Sorry, you can not add to cart now. You need to checkout first in cart before new merchandise.';
                                shtml += '  <button type="button" class="close" data-dismiss="alert" aria-label="Close">';
                                shtml += '      <span aria-hidden="true">×</span>';
                                shtml += '  </button>';
                                shtml += '</div>';
                                
                                $("#alert").html(shtml);
                                
                                return false;
                            }else{
                                return true;
                            }
                    <?php
                        }
                    ?>
                    
                }else{
                    shtml += '<div class="alert alert-info fade show" role="alert">';
                    shtml += '  please confirm selected items. you can only select '+photo_num+' items';
                    shtml += '  <button type="button" class="close" data-dismiss="alert" aria-label="Close">';
                    shtml += '      <span aria-hidden="true">×</span>';
                    shtml += '  </button>';
                    shtml += '</div>';
                    
                    $("#alert").html(shtml);
                    
                    return false;
                }
            }
            
            function sel_size(id, symbol, price, discount){
                var discount_price = price - price * discount / 100;
                $("#price").html(symbol+discount_price);
                
                $("#size"+id).val(id);
                $('label.btn').removeClass('active');
                $("#sel_album_btn").prop('disabled', false);
            }
        </script>

        <script>
            feather.replace()
        </script>