HOME

Mini Shell 1.0
DIR:/home/costmasters.in/www/application/modules/admin/views/items/
Current File : //home/costmasters.in/www/application/modules/admin/views/items/view_items.php
<style>
    .custom-checkbox {
        display: block;
        padding: 5px;
    }

    .dropdown-menu {
        max-height: 300px;
        overflow-y: auto;
        display: none;
    }

    .checkbox-cell {
        text-align: center;
    }

    .loading-message {
        font-size: 0.9em;
        color: grey;
    }
    #show-btn{
            padding: 18px;
    }
</style>

<div id="main-content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row clearfix">
                <div class="col-xl-6 col-md-5 col-sm-12">
                    <h1>Commodity</h1>
                    <span>Home / Manage Commodity</span>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2>Commodity</h2>
                    </div>
                    <div class="body">
                        <div class="panel-body">
                            <form id="commodity-form">
                                <div class="row">
                                    <div class="col-12 col-sm-6">
                                        <div class="form-group">
                                            <label for="commodities">Commodity Head</label>
                                            <div class="dropdown">
                                                <input class="form-control" id="dropdownMenuButton"
                                                    placeholder="--Select Commodity Items--">
                                                <div class="dropdown-menu" id="commodity-dropdown" style="width: 100%;">
                                                    <div class="custom-checkbox">
                                                        <input type="checkbox" id="select-all">
                                                        <label for="select-all">Select All</label>
                                                    </div>
                                                    <?php foreach ($category as $commodity): ?>
                                                        <?php if ($commodity['cat_status'] == 1): ?>
                                                            <div class="custom-checkbox">
                                                                <input type="checkbox" name="commodities_head[]"value="<?= $commodity['category_name']; ?>"
                                                                    id="commodity-head-<?= $commodity['category_name']; ?>">
                                                                <label
                                                                    for="commodity-head-<?= $commodity['category_name']; ?>"><?= $commodity['category_name'];?></label>
                                                            </div>
                                                        <?php endif; ?>
                                                    <?php endforeach; ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-sm-6" id="show-btn">
                                        <button type="button" id="show-commodities"
                                            class="btn btn-light css">Show</button>
                                    </div>
                                </div>
                                

                                <div class="table-responsive">
                                    <table class="table table-hover">                                        
                                        <tbody id="item-list">
                                            <!-- Items will be populated here -->
                                        </tbody>
                                    </table>
                                </div>

                                <div class="col-12">
                                    <div class="form-group">
                                        <button type="submit" id="submit-commodities"
                                            class="btn btn-primary theme-bg gradient">Submit</button>
                                    </div>
                                </div>
                            </form>

                            <div class="form-group">
                                <div id="message"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    $(document).ready(function () {
        let itemsToUpdate = [];
        let firstCommoditySelected = localStorage.getItem('firstCommoditySelected') === 'true';  
        let changesMade = localStorage.getItem('changesMade') === 'true';

        // Toggle dropdown menu
        $('#dropdownMenuButton').click(function () {
            $('#commodity-dropdown').toggle();
        });

        // "Select All" functionality for dropdown
        $('#select-all').change(function (e) {
            e.stopPropagation(); // Prevent dropdown from closing
            $('#commodity-dropdown input[type="checkbox"]').not(this).prop('checked', this.checked);
        });

        // Close dropdown when clicking outside
        $(document).click(function (event) {
            if (!$(event.target).closest('#dropdownMenuButton, #commodity-dropdown').length) {
                $('#commodity-dropdown').hide();
            }
        });

        // Function to reset the state on form submission or any action where data is saved
        function resetState() {
            localStorage.removeItem('firstCommoditySelected');
            localStorage.removeItem('changesMade');
            firstCommoditySelected = false;
            changesMade = false;
        }
        

        // Show commodities when "Show" button is clicked
        $('#show-commodities').click(function () {         
            const selectedHeads = $('input[name="commodities_head[]"]:checked').map(function () {
                return $(this).val();
            }).get();   

            if (selectedHeads.length === 1 && !firstCommoditySelected) {
                firstCommoditySelected = true;
                localStorage.setItem('firstCommoditySelected', 'true'); // Save state to localStorage

            }       

 if (changesMade && selectedHeads.length > 1 && firstCommoditySelected) {
        event.preventDefault(); // Prevent switching commodities
        if (confirm("You have unsaved changes. Are you sure you want to switch commodities without submitting?")) {
            // Allow switching if user confirms
        }
    } else {
        if (selectedHeads.length > 0) {
            $('#dropdownMenuButton').val(selectedHeads.join(', '));
            $('.page-loader-wrapper').show();
            $('#dropdownMenuButton').prop('disabled', true);
            $.ajax({
                url: '<?= base_url('admin/items/commodity'); ?>',
                method: 'POST',
                data: { commodities_heads: selectedHeads },
                dataType: 'json',
                success: function (data) {
                    $('.page-loader-wrapper').hide();
                    $('#item-list').empty();
                    if (Array.isArray(data) && data.length) {
                        // Add header row with "Select All" checkboxes
                        $('#item-list').append(`
                            <tr>
                                <th>#</th>
                                <th>Name of Commodity</th>
                                <th class="checkbox-cell">CIR Applicability <input type="checkbox" id="select-all-cir-items" aria-label="Select All CIR"> (<span id="cir-count" style="color:blue;">0</span>)</th>
                                <th class="checkbox-cell">CIR Lite Applicability <input type="checkbox" id="select-all-litecir-items" aria-label="Select All CIR Lite"> (<span id="litecir-count" style="color:blue;">0</span>)</th>
                            </tr>
                        `);

                        // Populate items dynamically
                        data.forEach((item, index) => {
                            $('#item-list').append(`
                                <tr>
                                    <td scope="row">${index + 1}</td>
                                    <td>${item.item_name}</td>
                                    <td class="checkbox-cell">
                                        <input type="checkbox" class="cir-applicability" ${item.cir_applicability == 1 ? 'checked' : ''} data-id="${item.item_name}">
                                    </td>
                                    <td class="checkbox-cell">
                                        <input type="checkbox" class="cir-lite-applicability" ${item.cir_lite_applicability == 1 ? 'checked' : ''} data-id="${item.item_name}">
                                    </td>
                                </tr>
                            `);
                        });
                        updateSelectAllCheckbox();
                        // Update counts for CIR and CIR Lite checkboxes
                        updateCheckboxCounts(data.length);
                    } else {
                        $('#item-list').append('<tr><td colspan="4">No items found.</td></tr>');
                    }
                    $('#dropdownMenuButton').prop('disabled', false);
                },
                error: function () {
                    $('#item-list').html('<tr><td colspan="4">Error fetching items. Please try again later.</td></tr>');
                    $('.page-loader-wrapper').hide();
                    $('#dropdownMenuButton').prop('disabled', false);
                }
            });
        } else {
            alert("Please select at least one commodity head.");
        }
    }
});
         function updateSelectAllCheckbox() {
            const CirtotalItems = $('.cir-applicability').length;
            const CirselectedItems = $('.cir-applicability:checked').length;
            const LiteCirtotalItems = $('.cir-lite-applicability').length;
            const LiteCirselectedItems = $('.cir-lite-applicability:checked').length;
            $('#select-all-cir-items').prop('checked', CirtotalItems === CirselectedItems);
            $('#select-all-litecir-items').prop('checked', LiteCirtotalItems === LiteCirselectedItems);

        }

        // Function to update the count of selected CIR and CIR Lite checkboxes
        function updateCheckboxCounts(totalCount) {
            let cirCount = $('.cir-applicability:checked').length;
            let liteCirCount = $('.cir-lite-applicability:checked').length;

            // Update the counts in the header in the format selected/total
            $('#cir-count').text(`${cirCount}/${totalCount}`);
            $('#litecir-count').text(`${liteCirCount}/${totalCount}`);
        }


        // Event listener to update the count when checkboxes are checked or unchecked
        $(document).on('change', '.cir-applicability, .cir-lite-applicability', function () {
            const totalCount = $('.cir-applicability').length;
            updateCheckboxCounts(totalCount);
             updateSelectAllCheckbox();
        });

        // Handle "Select All CIR" checkbox
        $(document).on('change', '#select-all-cir-items', function () {
            const isChecked = $(this).is(':checked');
            $('#item-list input.cir-applicability').prop('checked', isChecked);
            updateCheckboxCounts($('.cir-applicability').length);
             updateSelectAllCheckbox();
        });

        // Handle "Select All CIR Lite" checkbox
        $(document).on('change', '#select-all-litecir-items', function () {
            const isChecked = $(this).is(':checked');
            $('#item-list input.cir-lite-applicability').prop('checked', isChecked);
            updateCheckboxCounts($('.cir-applicability').length);
            updateSelectAllCheckbox();
        });

        // Handle form submission
        $('#submit-commodities').click(function (event) {
                resetState();

            event.preventDefault(); // Prevent default form submission

            // Collect items to update based on checkbox states
            let itemsToUpdate = [];
            $('#item-list tr').each(function () {
                const itemId = $(this).find('.cir-applicability, .cir-lite-applicability').data('id');
                if (itemId) {
                    const isCIRApplicable = $(this).find('.cir-applicability').is(':checked');
                    const isCIRLiteApplicable = $(this).find('.cir-lite-applicability').is(':checked');

                    itemsToUpdate.push({
                        id: itemId,
                        cir_applicability: isCIRApplicable,
                        cir_lite_applicability: isCIRLiteApplicable
                    });
                }
            });

            if (itemsToUpdate.length === 0) {
                alert("Please select at least one commodity item to update.");
                return;
            }

            // Disable button and show loading message
            $(this).prop('disabled', true);
            const loadingMessage = $('<span class="loading-message">Updating...</span>');
            // $(this).parent().append(loadingMessage);
            $('.page-loader-wrapper').show();
            // AJAX request to update the items
            $.ajax({
                url: '<?= base_url('admin/items/selectupdate'); ?>',
                        method: 'POST',
                        data: { items: itemsToUpdate },
                        dataType: 'json',
                           success: function(data) {
                            $('.page-loader-wrapper').hide();
                            if (data.status == false) {

                                jQuery('#message').html(data.message);
                                var a = data['errors'];
                                jQuery.each(data.errors, function(key, value) {
                                    jQuery("input[name='" + key + "'],select[name='" + key +
                                        "'],textarea[name='" + key + "']").css('border',
                                        '2px solid red');
                                    jQuery("input[name='" + key + "'],select[name='" + key +
                                        "'],textarea[name='" + key + "']").after("<small class='mes'>" +
                                        value + "</small>");
                                });
                            }
                            if (data.status == true) {

                                jQuery("input[type=text],select,textarea").css('border', '1px solid #1abb9c').delay(
                                    2000).css('border', '1px solid #e2e2e4');
                                jQuery('#message').html(data.message);
                                jQuery("#message").fadeIn(100);
                                jQuery("html, body").animate({
                                    scrollTop: jQuery("#message").offset().top - 100
                                }, 1000);
                                jQuery("#message").delay(3000);
                                jQuery("#message").fadeOut(100);
                                setTimeout(function() {
                                    window.location.href = "<?= base_url(); ?>admin/items";
                                }, 2000);
                            }
                        }
                    });
        });


        // Update item checkboxes based on selection of commodity heads
        $('input[name="commodities_head[]"]').change(function () {
            changesMade = true;
            const selectedHeads = $('input[name="commodities_head[]"]:checked').map(function () {
                return $(this).val();
            }).get();

            $('#item-list input[type="checkbox"]').each(function () {
                const itemId = $(this).data('id');
                $(this).prop('checked', selectedHeads.includes(itemId));
            });

            $('#dropdownMenuButton').val(selectedHeads.join(', ') || '--Select Commodity Items--');            
        });

        });
</script>