<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;">
                                    <form action="<?=base_url('cart')?>" method="post" id="add_cart_form">
                                  
                                       <?php
                                            $paidUCount;
                                            foreach($paidusercount as $paidkey => $paidval){
                                               $paidUCount = $paidval['paidUserCount'];
                                            }
                                        ?>

                                    <?php
                                    $im = 0;
                                    $total_combo = 0;
                                    foreach($combo_array as $valueC)
                                    {
                                        $total_combo = $total_combo + $valueC['data']['photo_num'];
                                    ?>
                                                                         
                                    <div style="display: grid;grid-template-columns: auto 100px;width: 100%; margin-bottom: 10px;">
                                       <label style="text-align: left;margin-bottom: 0px;margin-top: 6px;" class="radio">
                                            <?=$valueC['data']['title']?>  <span style="background: #3992a1;padding: 2px 8px;border-radius: 5px;color: #fff; margin-left: 10px;" id="get_combo_select_<?=$detail['id']?><?=$valueC['data']['id']?>">0</span>
                                       </label>
                                       <input type="hidden" name="combo[<?=$im?>][album_id]" id="get_combo_album_<?=$detail['id']?><?=$valueC['data']['id']?>">
                                       <input type="hidden" name="combo[<?=$im?>][merchandise_id]" value="<?=$valueC['data']['id']?>">
                                       <input type="hidden" name="combo[<?=$im?>][sel_layout]" value="1">
                                       <input type="hidden" name="combo[<?=$im?>][qty]" class="get_qty_all_item_combo" id="get_qty_all_item_combo_<?=$detail['id']?><?=$valueC['data']['id']?>">

                                       <button type="button" style="padding: 5px;" onclick="sel_album('<?php echo $valueC['data']['site_id'];?>','<?php echo $paidUCount; ?>', '<?php echo $valueC['data']['photo_num'];?>', '<?=$detail['id']?><?php echo $valueC['data']['id'];?>');"  class="btn btn-success add_cart_btns">Select Photo</button>
                                    </div>

                                    <?php 

                                     $im++;
                                    }
                                    ?>

                                    <div class="mb-2">
                                        <span><?php echo $detail['sku'];?></span>
                                    </div>
                                    
                                    <?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">
                                                    <input type="hidden" name="size" id="size<?php echo $val["id"];?>"> 
                                                    <input type="hidden" name="size_id" value="<?php echo $val["id"];?>">
                                                </div>

                                                <div class="pt-3" style="text-align: left;">
                                                    <h4 style="color: #fe0100;" id="price"><?php echo $val["symbol"];?><?php echo $val["price"];?></h4>
                                                </div>
                                            <?php
                                                $i++;
                                            }
                                        }
                                    ?>
                                    
                              
                                    
                                    <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>
                                        <div>              

                                           <input type="hidden" name="merchandise_id" value="<?php echo $detail["id"];?>">  
                                           <input type="hidden" name="site_id" value="<?php echo $detail["site_id"];?>">  
                                           <input type="hidden" name="add_cart_btn" value="ok">
                                           <input type="hidden" name="is_combo" value="1">
                                           
                                                

                                            <button type="submit" class="btn btn-primary waves-effect waves-light mt-2 mr-1" disabled id="sel_album_btn" style="border-radius: 50px;">
                                                Add to Cart
                                            </button>                                                        
                                        </div> 

                           


                                    </div>

                                    </form>
                                </div>
                            </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 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 id="" data-val="" type="button" class="btn btn-primary m-0 ml-2 get_combo_album_count" onclick="return add_cart_func('<?php echo $detail["photo_num"];?>', '<?php echo $detail["site_id"];?>');">Add</button>
                            </div>
                        
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->

        <script>
            var total_combo = '<?php echo $total_combo;?>';

            function sel_album(site_id, paidUCount, photo_num, combo_id) {

                $('.get_combo_album_count').attr('id', photo_num);
                $('.get_combo_album_count').attr('data-val', site_id);
                $('.get_combo_album_count').attr('data-combo', combo_id);
                
                

                $.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" class="get_album_chk_id" 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(){
                
                var photo_num = $('.get_combo_album_count').attr('id');
                var site_id   = $('.get_combo_album_count').attr('data-val');
                var combo_id  = $('.get_combo_album_count').attr('data-combo');
                

                var shtml = '';
                
                var checked_items = document.querySelectorAll("input[name='album_chk_id[]']:checked").length;
               var checked_items2 = document.querySelectorAll("input[name='album_chk_id[]']:checked");
                if(photo_num == checked_items)
                {
                    <?php
                    if(!empty($cart_list))
                    {

                            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
                                {                
                                        var checked_itemsAll = [];
                                        for (var i = 0; i < checked_items2.length; i++) {
                                            checked_itemsAll.push(checked_items2[i].value)
                                        }

                                        $('#get_combo_album_'+combo_id).val(checked_itemsAll);
                                        $('#get_combo_select_'+combo_id).html(checked_itemsAll.length);          
                                        $('#get_qty_all_item_combo_'+combo_id).val(checked_itemsAll.length); 
                                        $(".bs-example-modal-lg").modal('hide');


                                        var checked_items_sum = 0;

                                        $(".get_qty_all_item_combo").each(function( index ) {
                                            var qty = $(this).val();
                                            if(qty != "" && qty != 0)
                                            {
                                                checked_items_sum = parseInt(checked_items_sum) + parseInt(qty);    
                                            }
                                        });

                                        if(total_combo == checked_items_sum)
                                        {
                                            $('#sel_album_btn').prop('disabled', false);
                                        }
                                        else
                                        {
                                            $('#sel_album_btn').prop('disabled', true);
                                        }

                                        return true;
                                }
                    <?php
                        }
                    
                    }
                    else
                    {
                        ?>

                            var checked_itemsAll = [];
                            for (var i = 0; i < checked_items2.length; i++) {
                                checked_itemsAll.push(checked_items2[i].value)
                            }

                            $('#get_combo_album_'+combo_id).val(checked_itemsAll);
                            $('#get_combo_select_'+combo_id).html(checked_itemsAll.length);          
                            $('#get_qty_all_item_combo_'+combo_id).val(checked_itemsAll.length); 
                            $(".bs-example-modal-lg").modal('hide');


                            var checked_items_sum = 0;

                            $(".get_qty_all_item_combo").each(function( index ) {
                                var qty = $(this).val();
                                if(qty != "" && qty != 0)
                                {
                                    checked_items_sum = parseInt(checked_items_sum) + parseInt(qty);    
                                }
                            });

                            if(total_combo == checked_items_sum)
                            {
                                $('#sel_album_btn').prop('disabled', false);
                            }
                            else
                            {
                                $('#sel_album_btn').prop('disabled', true);
                            }

                            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>