<div class="modal fade" id="MainAppModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen w-100">
        <div class="modal-content border-4 border border-success">

            <div class="modal-header border-0 mx-3">
                <h5 class="modal-title" id="MainModalTitle">Control Panel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body custom_scroll">
                <div class="container-fluid">

                    <div id="graphsBlock" class="app-section" style="display:none;">
                        {include file='./left-menu-modals/graphs.tpl'}
                    </div>

                    <div id="usersBlock" class="app-section" style="display:none;">
                        {include file='./left-menu-modals/users.tpl'}
                    </div>

                    <div id="fieldsBlock" class="app-section" style="display:none;">
                        {include file='./left-menu-modals/additional-fields.tpl'}
                    </div>

                    <div id="categoriesBlock" class="app-section" style="display:none;">
                        {include file='./left-menu-modals/categories.tpl'}
                    </div>

                    <div id="contentBlock" class="app-section" style="display:none;">
                        {include file='./left-menu-modals/content.tpl'}
                    </div>

                    <div id="fatBlock" class="app-section" style="display:none;">
                        {include file='./left-menu-modals/files-templates.tpl'}
                    </div>

                    <div id="ordersBlock" class="app-section" style="display:none;">
                        {include file='./left-menu-modals/orders-applications.tpl'}
                    </div>

                    <div id="seoBlock" class="app-section" style="display:none;">
                        {include file='./left-menu-modals/seo.tpl'}
                    </div>

                    <div id="wabBlock" class="app-section" style="display:none;">
                        {include file='./left-menu-modals/widgets.tpl'}
                    </div>

                    <div id="toolsBlock" class="app-section" style="display:none;">
                        {include file='./left-menu-modals/tools.tpl'}
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="largeModalCenter">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body large-modal">
                <!-- Content will be dynamically loaded here -->
            </div>
        </div>
    </div>
</div>

<div class="modal" id="smallModalCenter">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body small-modal">
                <!-- Content will be dynamically loaded here -->
            </div>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var mainModal = document.getElementById('MainAppModal');
    
    mainModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        
        var targetId = button.getAttribute('href');
        
        var titleText = button.querySelector('span').innerText;
        document.getElementById('MainModalTitle').innerText = titleText;

        var sections = document.querySelectorAll('.app-section');
        sections.forEach(function(sec) {
            sec.style.display = 'none';
        });

        var activeSection = document.querySelector(targetId);
        if (activeSection) {
            activeSection.style.display = 'block';
        }
    });
});
</script>