<style>
    .files .displaySize{
        position: absolute;
        top: 8px;
        left: auto;
        right: 65px;
        font-size: 11px;
    }
    .files .displaySize.displayProductSize{right: 35px;}
</style>
<section class="files py-2 h-100">
    <div class="container h-100">
        <div class="card">
            <div class="files__grid filesGrid <?php echo isset($tfi_display_view) && $tfi_display_view === 'list' ? 'list' : ''; ?> h-100">
                <div class="sidebar">
                    <div id="menuBtnClose" class="d-none">
                        <svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z"></path></svg>
                    </div>
                    <div class="sidebar__list">
                        <?php
                        	$array['favorites_active'] = 1;
                        	$this->load->view('templates/products/product_sidebar', $array);
                        ?>
                    </div>
                </div>
                <div class="flex-grow-1">
                    <div class="files__header d-flex align-items-center gap-3">
                        <div id="menuBtnOpen" class="cursor-pointer">
                            <svg class="d-none d-lg-inline-block" fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z"></path></svg>
                            <svg class="d-lg-none" fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"></path></svg>
                        </div>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb" id="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="<?php echo base_url(); ?>">
                                        <svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24" style="padding-bottom: 2px;"><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"></path></svg>
                                    </a>
                                </li>

                                <li class="breadcrumb-item">
								    <a href="javascript:;">Favorites</a>
								</li>


                            </ol>
                        </nav>
                        <div class="viewToggleBtn text-end flex-grow-1 w-auto cursor-pointer <?php echo isset($tfi_display_view) && $tfi_display_view === 'list' ? 'list' : ''; ?>">
                            <svg class="listView" fill="currentColor" width="24" height="24" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M3,4H7V8H3V4M9,5V7H21V5H9M3,10H7V14H3V10M9,11V13H21V11H9M3,16H7V20H3V16M9,17V19H21V17H9"><!----></path></svg>
                            <svg class="gridView" fill="currentColor" width="24" height="24" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3"><!----></path></svg>
                        </div>

                    </div>
                    <?php
                        if($count > 0){
                    ?>
                        <div class="row align-items-center p-2 top_check_header px-4">
                            <div class="col-auto">
                                <input type="checkbox" id="select_all" class="form-check-input"/>
                            </div>
                            <div class="col-7 col-md-10">
                                <button id="downloadButton" class="btn btn-secondary py-2 px-2 px-sm-3" style="display: none;">
                                    Download Selected
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16px" viewBox="0 0 24 24"><path d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z"></path></svg>
                                </button>
                            </div>
                            <!-- <div class="col-3 col-md-1 fs-14 ps-0">Size</div> -->
                        </div>
                    <?php
                        }
                    ?>
                    <div class="card-body">
                        <div class="applications">
                            <div class="applications__list row" id="data">
                            	<?php
                            		echo $data;
                            	?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<script type="text/javascript">
    $(document).ready(function(){

    });

    function load_data(){
        var base_url = '<?php echo base_url(); ?>';
        var url = base_url+"products/get_favorites";

        $.ajax({
            type: "POST",
            dataType: "json",
            url: url,
            data:{
                is_ajax: 1
            },
            //async: false,
            global : false,
            beforeSend:function(){

            },
            success: function(result) {

                if(result["status"] === false){
                    alert(result['message']);
                }else{
                    $('#data').html(result['data']);
                    if(result['count'] == 0){
                        $("#select_all").hide();
                    }
                }
            },
            error: function() {
                alert("Failed to load the documents.");
            }
        });
    }

    $(document).on("click", ".remove_favorites", function(){
        var base_url = '<?php echo base_url(); ?>';
        var id = $(this).attr("data-favorites-id");
        var url = base_url+"products/delete_favorites";

        $.ajax({
            type: "POST",
            dataType: "json",
            url: url,
            data: {
                id: id
            },
            //async: false,
            global : false,
            beforeSend:function(){

            },
            success: function(result) {

                if(result["status"] === false){
                    alert(result['message']);
                }else{
                    load_data();
                }
            },
            error: function() {
                alert("Failed to perform this action.");
            }
        });
    });

    $(".viewToggleBtn").on("click", function () {

        var base_url = '<?php echo base_url(); ?>';
        var url = base_url+"products/save_view";

        var thisValue = $(this);

        $.ajax({
            type: "POST",
            dataType: "json",
            url: url,
            data: {
                is_ajax: 1
            },
            //async: false,
            global : false,
            beforeSend:function(){

            },
            success: function(result) {

                if(result["status"] === false){

                }else{
                    $(".filesGrid").toggleClass("list");
                    thisValue.toggleClass("list");
                }
            },
            error: function() {
                alert("Failed to perform this action.");
            }
        });
    });


    $('#select_all').on('change', function() {
        var isChecked = $(this).prop('checked');
        $('.folder-checkbox').prop('checked', isChecked);
        updateSelectAllLabel();
    });

    $(document).on("change", '.folder-checkbox', function(){
        updateSelectAllLabel();
    });

    function updateSelectAllLabel() {
        var totalCheckboxes = $('.folder-checkbox').length;
        var checkedCheckboxes = $('.folder-checkbox:checked').length;

        if (checkedCheckboxes === 0) {
            $('#select_all').prop('checked', false).prop('indeterminate', false);
            $('#downloadButton').hide();
        } else if (checkedCheckboxes === totalCheckboxes) {
            $('#select_all').prop('checked', true).prop('indeterminate', false);
             $('#downloadButton').show();
        } else {
            $('#select_all').prop('indeterminate', true);
             $('#downloadButton').show();
        }
    }


    function download_zip(secure_token){
        var base_url = '<?php echo base_url(); ?>';
        var url = base_url+"products/downloadFolder";

        // Create a hidden form element
        var form = document.createElement('form');
        form.style.display = 'none'; // Hide the form element

        // Set form attributes (method and action)
        form.method = 'POST';
        form.action = url; // Specify the URL of your controller method

        // Create hidden input for each selected folder
        secure_token.forEach(function(folder) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'selected_folders[]'; // Use array notation for multiple values
            input.value = folder;
            form.appendChild(input); // Append input to the form
        });

        // Append form to the document body
        document.body.appendChild(form);

        // Submit the form to trigger file download
        form.submit();

        // Clean up: remove the form element after submission
        document.body.removeChild(form);
    }

    $(document).on("click", ".downloadBtn", function(){
        var secure_token = [$(this).attr('data-token')];
        download_zip(secure_token);
    });

    document.getElementById('downloadButton').addEventListener('click', function() {
        // Select all checkboxes within the container with class "checkboxBtn"
        var checkboxes = document.querySelectorAll('.checkboxBtn input[type="checkbox"]:checked');
        
        // Array to store the values of checked checkboxes
        var checkedValues = [];

        // Iterate over each checked checkbox and push its value to the array
        checkboxes.forEach(function(checkbox) {
            checkedValues.push(checkbox.value);
        });

        // Call a function to handle downloading based on the checked values
        // For example:
        download_zip(checkedValues); // Pass the checked values to a download function

        var checkboxes1 = document.querySelectorAll('.checkboxBtn input[type="checkbox"]:checked');

        // Iterate over each checked checkbox and uncheck it
        checkboxes1.forEach(function(checkbox) {
            checkbox.checked = false;
        });
        $('#downloadButton').hide();
        $('#select_all').prop('checked', false).prop('indeterminate', false);
    });
</script>