<?php include_once "template/common.php" ?>

<link rel="stylesheet" href="<?php echo base_url();?>files/assets/css/style.ed12.css">

<style type="text/css">
    #album img {
        width: 100%;
    }

button:disabled,
button[disabled]{
    border: 1px solid #d3d3d3;
    background-color: #d3d3d3;
    color: #949494;
}


  .gallery-item label {
        width: 100%;
    }

.gallery-item img {
      width: 100%;
      height: 153px;
      border-radius: 10px;
}

.cmn--btn2:hover {
  color: #fff;
}

@media (max-width:576px) {
 .gallery-item img {
      width: 100%;
      height: 112px;
      border-radius: 10px;
    }

     .gallery-item label {
        width: 100%;
    }
}

body {
    overflow: hidden;
}

@media (max-width: 576px) {
    .show--wrapper-area {
        padding: 20px 0px !important;   
        margin-top: 30px !important;
        height: 80vh !important;
    }
    .body-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .shop-wrapper {
        height: 100%;
    }
    
}

</style>

<div class="body-content position-rel overflow-h">
    <div class="section-thumb d-none d-sm-block">
        <!-- <img src="<?php echo base_url();?>files/assets/images/shape/shop-bg.png" alt="thumb" style="object-fit: contain; height: auto;" class="object-point-none"> -->
    </div>
    <div class="section-thumb d-sm-none">
        <!-- <img src="<?php echo base_url();?>files/assets/images/shape/shop-bg-mobile.png" alt="thumb" style="object-fit: contain; height: auto;" class="object-point-none"> -->
    </div>
    <div class="section-thumb-bottom d-sm-none">
        <!-- <img src="<?php echo base_url();?>files/assets/images/shape/body-bottom.png" alt="thumb" style="object-fit: contain; height: auto;"> -->
    </div>
    <div class="show--wrapper-area" style="border-radius: 20px;">
        <div class="shop-wrapper header-title-mt-two" style="border-radius: 10px; padding-left: 20px; padding-right: 20px;">
            <div class="row justify-content-center gy-4">

                  <?php 
                    if(count($merchandise_list2) > 0){
                        $divideid = 100;
                        foreach($merchandise_list2 as $key => $val){

                         if($val['visibility'] == "Both" || $val['visibility'] == "FrontEnd" || $val['visibility'] == "WebApp" || $val['visibility'] == "RetailWebApp")
                         {


                            $getCombo = $this->SouvenirModel->getCombo($val['id']);

                            $combo_array = array();
                            foreach($getCombo as $combo)
                            {
                                $combo_data = $this->SouvenirModel->get_rows(" and souvenir_tb.id = '" . $combo->join_id . "' group by souvenir_tb.id");

                                $query_c_size = $this->SouvenirModel->get_size_rows(" where souvenir_size_tb.souvenir_id = '" . $combo->join_id . "'");

                                $data_c['join_id'] = $combo->join_id;
                                $data_c['query_c_size'] = $query_c_size[0];
                                $data_c['data'] = $combo_data[0];
                                $combo_array[] = $data_c;
                            }
                        ?>

                <div class="col-xl-4 col-sm-6">
                    <div class="cart-item">
                        <img style="height: 150px; object-fit: contain;" src="http://d38x82mkkml5o1.cloudfront.net/<?php echo $val['comp_photo_url'];?>" alt="thumb">
                        <div class="cart-content-wrapper px-xxl-3 px-2">

                             <form action="<?=base_url()?>cart" method="post">

                                <?php
                                 $detail_size = $this->SouvenirModel->get_size_rows(" where souvenir_size_tb.id > 0 and souvenir_size_tb.isDeleted = 0 and souvenir_size_tb.souvenir_id = '".$val['id']."'");
           
                                    if(count($detail_size) > 0)
                                    {
                                        foreach($detail_size as $valSize)
                                        { ?>      
                                             <input type="hidden" name="size_id" id="size_id" value="<?php echo $valSize["id"];?>" id="size<?php echo $valSize["id"];?>">                                                
                                    <?php
                                        }
                                    }

                                ?>

                            <div class="content d-flex flex-wrap justify-content-between align-items-center pt-4 py-3">
                                <div class="cart-left">
                                    <h4 class="title pb-xxl-2 pb-1">
                                        <?php 
                                         if($val['type'] == 'DigitalPackage')
                                         {
                                             echo $val['pack_name'];
                                         }else{
                                            echo $val['title'];  
                                         }
                                         ?>
                                    </h4>

                                     <?php 

                                        if($val['discount'] != 0)
                                        {
                                            $discount_price = $val['price'] * $val['discount'] / 100;
                                            if($val['type'] == 'DigitalPackage')
                                            {
                                                $price = ($val['pack_price'] - $discount_price);
                                            }
                                            else
                                            {
                                                $price = ($val['price'] - $discount_price);
                                            }
                                        }
                                        else
                                        {
                                            if($val['type'] == 'DigitalPackage')
                                            {
                                                $price = ($val['pack_price']);
                                            }
                                            else
                                            {
                                                $price = $val['price'];
                                            }
                                        }

                                        ?>
                                    <h4 class="price text--three"><?php echo $val['symbol'];?><?=$price?></h4>
                                </div>
                                <div class="cart-right">
                                    <div class="d-flex align-items-center">
                                        <span class="minus-plus cart-minus CheckQtyPlusMinus"  data-val="<?php echo $val['id']?><?=$divideid?>" id="<?=$val['id']?>"><i class="fas fa-minus"></i></span>
                                        <input type="text" value="1" id="getQty<?=$val['id']?>" name="qty" required class="product-number mx-xxl-3 mx-2 text-center">
                                        <span class="minus-plus cart-plus CheckQtyPlusMinus"  data-val="<?php echo $val['id']?><?=$divideid?>" id="<?=$val['id']?>"><i class="fas fa-plus"></i></span>
                                    </div>
                                </div>
                            </div>

                                <?php

                                $paidUCount = 0;
                                foreach($paidusercount as $paidkey => $paidval){
                                   $paidUCount = $paidval['paidUserCount'];
                                }

                                if(!empty($combo_array))
                                {
                                    ?>
                                    <input type="hidden" name="is_combo" value="1">

                                    <?php
                                    $im = 0;
                                    $total_combo = 0;
                                    $iC = 1;
                                    foreach($combo_array as $valueC)
                                    {
                                        $total_combo = $total_combo + $valueC['data']['photo_num'];
                                    ?>
                                     
                                   <input type="hidden" value="<?=$valueC['data']['photo_num']?>" id="<?=$val['id']?><?=$valueC['data']['id']?><?=$iC?>" class="getPhotoNumber<?=$val['id']?>">

                                    <div style="margin-bottom: 10px; display: grid;grid-template-columns: auto 100px;">
                                       <label style="text-align: left;margin-bottom: 0px;margin-top: 6px;" class="radio">
                                            <?=$valueC['data']['title']?>  
                                       </label>
                                       <input type="hidden" name="combo[<?=$im?>][album_id]" id="get_combo_album_<?=$val['id']?><?=$valueC['data']['id']?><?=$iC?>">
                                       <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_<?=$val['id']?><?=$valueC['data']['id']?><?=$iC?>">
                              
                                <div style="text-align: right;">
                                    <span style="font-size: 13px;" id="get_combo_select_<?=$val['id']?><?=$valueC['data']['id']?><?=$iC?>">0</span>
                                    <span>/</span> 
                                    <span style="font-size: 13px;" id="putComboSelect<?=$val['id']?><?=$valueC['data']['id']?><?=$iC?>"><?php echo $valueC['data']['photo_num'];?></span>


                                       <button type="button" style="margin-left: 10px; font-size: 13px;padding: 5px;margin-top: 2px; background: #BEDD5C; border: #BEDD5C;" id="add_remove_class_<?=$val['id']?><?=$valueC['data']['id']?><?=$iC?>" data-val="<?php echo $valueC['data']['photo_num'];?>" onclick="sel_album('<?php echo $valueC['data']['site_id'];?>','<?php echo $paidUCount; ?>', '<?php echo $valueC['data']['photo_num'];?>', '<?=$val['id']?><?=$valueC['data']['id']?><?=$iC?>' ,'1', '<?php echo $val['id']?><?=$divideid?>');"  class="btn btn-success add_cart_btns">Select</button>
                                       </div>
                                    </div>

                                    <?php 
                                     $im++;
                                     $iC++;
                                    }
                                    ?>

                                    <input type="hidden" id="getTotalCombo<?php echo $val['id']?><?=$divideid?>" value="<?=$total_combo?>">
                                    <?php
                                }
                                else
                                {
                                    ?>
                                        <input type="hidden" name="is_combo" value="0">
                                        <div style="text-align: right;"> 
                                        <button type="button" class="btn btn-success waves-effect waves-light mt-2 mr-1" id="sel_album_btn" onclick="sel_album('<?php echo $val["site_id"];?>','<?php echo $paidUCount; ?>', '<?php echo $val["photo_num"];?>', '', '0', '<?php echo $val['id']?><?=$divideid?>');" style="margin-bottom: 10px;padding: 10px; background: #BEDD5C; border: #BEDD5C; width: 100%;">
                                            Select
                                            <i class="bx bx-image"></i>
                                        </button> 
                                        </div>

                                    <?php
                                }
                                ?>

                                <input type="hidden" name="site_id" value="<?php echo $val["site_id"];?>">
                                <input type="hidden" name="merchandise_id" value="<?php echo $val['id']?>">
                                <input type="hidden" name="album_chk_id" id="get_album_chk_id<?php echo $val['id']?><?=$divideid?>" value=""> 

                                <button name="add_cart_btn" id="add_cart_btn<?php echo $val['id']?><?=$divideid?>" disabled value="ok" class="cmn--btn cmn--btn2 btn--lg d-block text-center theme-button" style="width: 100%;border: none;color: white !important;">Add to Cart</button>
                            </form>


                        </div>
                    </div>
                </div>


                <?php
                        $divideid++;
                        }                    
                    }
                }
                        
                ?>  

            </div>
        </div>
    </div>
</div>




 <div class="modal fade" id="SelectviewModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg modal-widht">
            <div class="modal-content  bg-transparent border-0">
                <div class="modal-body p-0">
                    <!-- Share Popup -->
                    <div class="popup-wrapper share-modal2">
                        <div class="d-flex justify-content-between align-items-center mb-2 margin-bottom-20">
                            <h6 class="album-text fs-20">Album</h6>
                        </div>
                        <div class="row g-3" id="album" style="max-height: 400px;overflow: auto;">
                        </div>
                        <div class="mt-3 mt-sm-4 gap-2 destop-btn-wrapper">
                            <button id="" data-val="" data-combo="" data-iscombo="" data-merchandiseid="" type="button" class="cmn--btn w-100 flex-grow-1 btn-50 get_combo_album_count" onclick="add_cart_func()" style="border: none; color: white !important;" >Continue</button>
                            
                            <button class="cmn--btn w-100 active flex-grow-1 btn-50" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                    <!-- Share Popup -->
                </div>
            </div>
        </div>
    </div>




<div class="modal fade" id="ErrorMerchandiseModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-body p-0">
                <div class="popup-wrapper logout-modal">
                    <div class="text-center">
                        <img src="<?php echo base_url();?>files/assets/images/icon/alert.png" alt="thumb" class="mw-100">
                        <h4 class="mb-4 mb-sm-5 mt-4" id="getErrorMerchandise"></h4>
                    </div>
                    <a href="javascript:void(0)" style="background: #c0de5d; color: #fff !important;" data-bs-dismiss="modal" class="cmn--btn d-block text-center mt-3 active modal-cancel">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- <div class="modal fade bs-example-modal-lg" id="SelectviewModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-modal="true">
    <div class="modal-dialog modal-lg" style="width: auto;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="myLargeModalLabel">Album</h5>
                <button type="button" class="btn" style="padding: 0px;" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</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" style="margin-right: 10px !important;" data-bs-dismiss="modal">Close</button>
                <button id="" data-val="" data-combo="" data-iscombo="" data-merchandiseid="" type="button" class="btn btn-primary m-0 ml-2 get_combo_album_count" onclick="add_cart_func()" >Add</button>
            </div>
            
        </div>
    </div>
</div>
 -->




<script src="<?php echo base_url();?>files/assets/js/lib/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
            function sel_album(site_id, paidUCount, photo_num, combo_id, is_combo, dub_merchandise_id)
            {
                if(combo_id != "")
                {
                    var photo_num = $('#add_remove_class_'+combo_id).attr('data-val');
                }
                else
                {
                    var photo_num = photo_num;    
                }                

                $.ajax({
                    method: "POST",
                    url: "<?php echo base_url();?>GalleryController/sel_album_func",
                    data: {
                        site_id: site_id
                    }
                })
                .done(function(msg) {

                    $('#SelectviewModal').modal('show');

                    $('.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);
                    $('.get_combo_album_count').attr('data-iscombo', is_combo);
                    $('.get_combo_album_count').attr('data-merchandiseid', dub_merchandise_id);
                    
                    
                

                    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-6">';
                                shtml += '<div class="gallery-item">';
                                    shtml += '<div class="form-group select-item position-relative">';
                                        shtml += '<input type="checkbox" name="album_chk_id_pop[]" value="'+json_obj[i].id+'">';
                                        shtml += '<label for="check01">';

                                            if(paidUCount==0) {
                                                shtml += '     <img style="border-radius: 10px;" src="http://d38x82mkkml5o1.cloudfront.net/'+json_obj[i].process_comp_file_url+'">';
                                            } else {
                                                shtml += '     <img style="border-radius: 10px;" src="http://d38x82mkkml5o1.cloudfront.net/'+json_obj[i].staff_comp_file_url+'">';
                                            }

                                        shtml += '</label>';
                                    shtml += '</div>';
                                shtml += '</div>';
                            shtml += '</div>';


                            // shtml += ' <div class="col-md-4 " 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_pop[]" value="'+json_obj[i].id+'" style="width: 20px; height: 20px;"> ' ;
                            // shtml += '         </div>';
                            // shtml += '     </div>';
                            // shtml += '   </label>';
                            // shtml += ' </div> ';
                        }                     
                    }
            
                    $("#album").html(shtml);
                });
                
            }

            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 is_combo  = $('.get_combo_album_count').attr('data-iscombo');
                var merchandiseid = $('.get_combo_album_count').attr('data-merchandiseid');

                var  total_combo = $('#getTotalCombo'+merchandiseid).val();
                

                var shtml = '';
                
                var checked_items = document.querySelectorAll("input[name='album_chk_id_pop[]']:checked").length;
                var checked_items2 = document.querySelectorAll("input[name='album_chk_id_pop[]']: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']?>)
                                {

                                    $('#getErrorMerchandise').html('Sorry, you can not add to cart now. You need to checkout first in cart before new merchandise.');
                                    $('#ErrorMerchandiseModal').modal('show');
                                    return false;
                                }
                                else
                                {
                                    var checked_itemsAll = [];
                                    for (var i = 0; i < checked_items2.length; i++) {
                                        checked_itemsAll.push(checked_items2[i].value)
                                    }

                                    if(is_combo == 1)
                                    {
                                        $('#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); 


                                        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)
                                        {
                                            $('#add_cart_btn'+ merchandiseid).prop('disabled', false);
                                        }
                                        else
                                        {
                                            $('#add_cart_btn' + merchandiseid).prop('disabled', true);
                                        }


                                    }
                                    else
                                    {
                                        $('#get_album_chk_id' + merchandiseid).val(checked_itemsAll);  
                                        $('#add_cart_btn'+ merchandiseid).prop('disabled', false);   
                                    }
                                    
                                    

                                    $("#SelectviewModal").modal('hide');
                                    return true;
                                }
                        <?php
                        }
                        ?>
                    <?php
                    }
                    else
                    {
                    ?>
                            var checked_itemsAll = [];
                            for (var i = 0; i < checked_items2.length; i++) {
                                checked_itemsAll.push(checked_items2[i].value)
                            }


                            if(is_combo == 1)
                            {
                                $('#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); 

                                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)
                                {
                                    $('#add_cart_btn'+ merchandiseid).prop('disabled', false);
                                }
                                else
                                {
                                    $('#add_cart_btn' + merchandiseid).prop('disabled', true);
                                }
                            }
                            else
                            {
                                $('#get_album_chk_id' + merchandiseid).val(checked_itemsAll);
                                $('#add_cart_btn'+ merchandiseid).prop('disabled', false);     
                            } 

                            $("#SelectviewModal").modal('hide');

                            return true;

                        <?php
                    }
                    ?>


                   
                    
                }else{

                    $('#getErrorMerchandise').html('Please confirm selected items. You can only select '+photo_num+' items.');
                    $('#ErrorMerchandiseModal').modal('show');
                    return false;
                }
            }
                


    $('body').delegate('.CheckQtyPlusMinus', 'click', function() {
            var merchandise_id = $(this).attr('id');

            var merchandise_id_devided = $(this).attr('data-val');
            var qty = $('#getQty'+merchandise_id).val();

            
            var total = 0;
            $('.getPhotoNumber'+merchandise_id).each(function() {
                var photo = $(this).val();
                var join_id  = $(this).attr('id');
                var select_photo = parseInt(photo) * parseInt(qty);

                total = parseInt(total) + select_photo;
                
                $('#get_combo_select_'+join_id).html(0);
                $('#get_combo_album_'+join_id).val('');


                $('#add_remove_class_'+join_id).removeClass('btn-orange-active');
                $('#add_remove_class_'+join_id).addClass('btn-orange-select');
                
                $('#putComboSelect'+join_id).html(select_photo);
                $('#add_remove_class_'+join_id).attr('data-val', select_photo);
                
            });

            $('#add_cart_btn' + merchandise_id_devided).prop('disabled', true);       
            
            $('#getTotalCombo'+merchandise_id_devided).val(total)
    });
      
        </script>

        <style>
            .loadingModalBackground {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(20, 20, 20, 0.4);
                z-index: 1000;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .loadingModal {
                max-width: 350px;
                width: 90%;
                padding: 50px;
                background: transparent;
                border-radius: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .loading {
                padding: 40px;
                background: white;
                border-radius: 50%;
                border: solid 10px #eee;
                border-top: solid 10px #c0de5d;
                background: transparent;
                animation: loadingAnimation 0.5s linear infinite;
            }
            @media (max-width: 500px) {
                .loading {
                    padding: 30px;
                }
            }
            @keyframes loadingAnimation {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }
        </style>
        <div class="loadingModalBackground hidden" id="loading" style="display: none">
            <div class="loadingModal">
                <div class="loading"></div>
            </div>
        </div>

        <script>
            function openLoading() {
                document.getElementById("loading").style.display = "flex";
            }
            function hideLoading() {
                document.getElementById("loading").style.display = "none";
            }
            // openLoading();
        </script>
