<div id="topOfThePage"></div>


<?php $__env->startSection('content'); ?>
    <div class="container">
        <div>
            <h2 class="pb-2">Cartographie</h2>
        </div>

        <?php echo $__env->make('layouts.commons.errors', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
        <?php echo $__env->make('layouts.commons.success', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
        <?php echo $__env->make('layouts.commons.alerts', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

        <?php if($isHeadersCustomerExists ?? ''): ?>
            <?php if(Auth::user()->hasRole(ROLE::SUPER_ADMINISTRATEUR) || Auth::user()->hasRole(ROLE::ADMINISTRATEUR_STRUCTURE)): ?>
                <?php echo $__env->make('components.importCSVForm', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            <?php endif; ?>
            
            <?php echo $__env->make('cartographie.index.layouts.filtres', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

            
            <ul class="nav nav-tabs mt-4" id="cartographieTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-synthese"
                       role="tab" aria-controls="nav-synthese" aria-selected="true">Synthèse</a>
                </li>
                <li class="nav-item">
                    <a class="nav-item nav-link" id="nav-famille-tab" data-toggle="tab" href="#nav-famille"
                       role="tab"
                       aria-controls="nav-famille" aria-selected="false">Familles</a>
                </li>
                <li class="nav-item">
                    <a class="nav-item nav-link" id="nav-fournisseurs-tab" data-toggle="tab"
                       href="#nav-fournisseurs"
                       role="tab" aria-controls="nav-fournisseurs" aria-selected="false">Fournisseurs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-item nav-link" id="nav-marches-tab" data-toggle="tab" href="#nav-marches"
                       role="tab"
                       aria-controls="nav-marches" aria-selected="false">Marchés</a>
                </li>
            </ul>
            <?php if($verifyAllDataIsSend ?? ''): ?>
                <div class="pt-2">
                    <div class="alert" role="alert">
                        <h4 class="alert-heading">Aucune donnée disponible</h4>
                        <p>Vous devez changer vos filtres de recherche ou importer un fichier CSV pour afficher les
                            données
                            de la cartographie.</p>
                    </div>
                </div>
            <?php else: ?>
    </div>
    <div class="col p-5">
        <div class="tab-content" id="cartographieTabContent">
            <div class="tab-pane fade" id="nav-synthese" role="tabpanel" aria-labelledby="nav-home-tab">
                <?php echo $__env->make('cartographie.charts.overviewCharts', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            </div>
            <div class="tab-pane fade" id="nav-famille" role="tabpanel" aria-labelledby="nav-famille-tab">
                <?php echo $__env->make('cartographie.charts.familyCharts', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            </div>
            <div class="tab-pane fade" id="nav-fournisseurs" role="tabpanel" aria-labelledby="nav-fournisseurs-tab">
                <?php echo $__env->make('cartographie.charts.suppliersCharts', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            </div>
            <div class="tab-pane fade" id="nav-marches" role="tabpanel" aria-labelledby="nav-fournisseurs-tab">
                <?php echo $__env->make('cartographie.charts.marketCharts', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            </div>
        </div>
    </div>
    <div class="col p-5 fixed-bottom">
        <a href="#topOfThePage">
            <i id="anchorIcon" class="fas fa-arrow-up bg-primary text-white p-2 rounded position-sticky" style="left: 100%"></i>
        </a>
    </div>
    <?php endif; ?>
    <?php else: ?>
        <div class="pt-2">
            <div class="alert" role="alert">
                <h4 class="alert-heading">Aucun matching</h4>
                <p>L'Administrateur doit réaliser un matching et votre Administrateur structure doit importer un csv
                    pour que vous visualisez vos données</p>
            </div>
        </div>
    <?php endif; ?>
<?php $__env->stopSection(); ?>

<script>
    const retrieveCurrentTab = () => {
        document.querySelectorAll('.nav-tabs .nav-link').forEach(tab => {
            tab.addEventListener('click', function () {
                const activeTab = tab.getAttribute('id');
                localStorage.setItem('activeTab', activeTab);
                console.log(activeTab)
            });
        });
    }

    function selectTab(tabId) {
        document.querySelectorAll('.nav-item .nav-link').forEach(tab => {
            tab.classList.remove('active');
        });
        document.querySelectorAll('.tab-pane').forEach(content => {
            content.classList.remove('show', 'active');
        });
        const selectedTabLink = document.getElementById(tabId);
        const selectedTabContentId = selectedTabLink.getAttribute('href').substring(1);
        const selectedTabContent = document.getElementById(selectedTabContentId);
        if (selectedTabLink && selectedTabContent) {
            selectedTabLink.classList.add('active');
            selectedTabContent.classList.add('show', 'active');
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        retrieveCurrentTab();

        const savedTabId = localStorage.getItem('activeTab');
        const defaultTabId = savedTabId ? savedTabId : 'nav-home-tab';

        selectTab(defaultTabId);

        document.querySelectorAll('.nav-item .nav-link').forEach(tab => {
            tab.addEventListener('click', function () {
                const tabId = this.getAttribute('id');
                selectTab(tabId);
                localStorage.setItem('activeTab', tabId);
            });
        });
    });

    window.addEventListener('scroll', function () {
        const scrollPosition = window.scrollY;
        const anchorIcon = document.getElementById('anchorIcon');

        if (scrollPosition === 0) {
            anchorIcon.style.opacity = '0';
            anchorIcon.style.transition = 'opacity 0.5s ease';

        } else {
            anchorIcon.style.opacity = '1';
            anchorIcon.style.transition = 'opacity 0.5s ease';

        }
    });
</script>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/resources/views/cartographie/index/index.blade.php ENDPATH**/ ?>