<?php $__env->startSection('search-bar'); ?>
    <div class="row g-3 mb-4 align-items-center justify-content-between">
        <div class="col-auto">
            <h1 class="app-page-title mb-0" style="color: #404242">LES CATEGORIES</h1>
        </div>
        <div class="col-auto">
            <div class="page-utilities">
                <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                    <div class="col-auto">
                        <form action="<?php echo e(route('search.categories')); ?>" method="GET"
                            class="table-search-form row gx-1 align-items-center">
                            <div class="col-auto">
                                <input type="text" name="search" class="form-control search-orders"
                                    placeholder="Recherche ... ">
                            </div>
                        </form>

                    </div><!--//col-->
                    <div class="col-auto">
                        <?php if(auth()->user()->role == 'super-admin'): ?>
                            <a class="btn app-btn-secondary" href="<?php echo e(route('categories.pdf')); ?>"><i class="fas fa-file-pdf"></i> Exporter en pdf </a>
                            <a href="<?php echo e(route('export.categories')); ?>" class="btn app-btn-secondary"><i class="fas fa-file-excel"></i> Exporter en excel</a>
                        <?php elseif(auth()->user()->role == 'admin'): ?>
                            <a class="btn app-btn-secondary" href="<?php echo e(route('categories.pdf')); ?>"><i class="fas fa-file-pdf"></i> Exporter en pdf</a>
                            <a href="<?php echo e(route('export.categories')); ?>" class="btn app-btn-secondary"><i class="fas fa-file-excel"></i> Exporter en excel</a>

                        <?php endif; ?>
                    </div>
                </div><!--//row-->
            </div><!--//table-utilities-->
        </div><!--//col-auto-->
    </div><!--//row-->
<?php $__env->stopSection(); ?>

<?php $__env->startSection('parties-prenantes'); ?>
<nav id="orders-table-tab" class="orders-table-tab app-nav-tabs nav shadow-sm flex-column flex-sm-row mb-4">
    <a href="#" class="flex-sm-fill text-sm-center nav-link active">Categories</a>
    <a href="/productsSection" class="flex-sm-fill text-sm-center nav-link">Sous-Categories</a>
</nav>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('errorContent'); ?>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var modalType = document.getElementById('modals').getAttribute('data-error');

            if (modalType === 'update') {
                var updateModal = new bootstrap.Modal(document.getElementById('updateCategoryModal'));
                updateModal.show();
            } else if (modalType === 'default') {
                var addModal = new bootstrap.Modal(document.getElementById('ModalAddCategory'));
                addModal.show();
            }
        });
    </script>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
    <div>
        <div id="modals" style="display:none;" data-error="<?php echo e(session('modalType')); ?>"></div>
        <!-- Modal -->
        <form action="/addCategory" method="POST">
            <?php echo csrf_field(); ?>
            <div class="modal fade" id="ModalAddCategory" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Ajouter une catégorie</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="form-label"><strong class="det">Nom de la catégorie</strong></label>
                                <input type="text" class="form-control" name="nom_categorie"
                                    placeholder="Entrer la catégorie" value="<?php echo e(old('nom_categorie')); ?>" />
                                <?php $__errorArgs = ['nom_categorie', 'default'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <span class="text-danger"><?php echo e($message); ?></span> 
                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <input type="submit" class="btn btn-success" data-bs-dismiss="modal" value="Ajouter">
                        </div>
                    </div>
                </div>
            </div>
        </form>


        <div class="page-inner">


            <div class="tab-content" id="orders-table-tab-content">
                    <div class="app-card app-card-orders-table shadow-sm mb-5">
                        <div class="app-card-body">
                            <div class="table-responsive">
                                <table class="table app-table-hover mb-0 text-left">
                                    <thead>
                                        <tr>
                                            <th class="cell">Nom de la catégorie</th>
                                            <th class="cell text-end">
                                                <?php if(auth()->user()->role == 'super-admin'): ?>
                                                <button type="button" class="btn app-btn-secondary" data-bs-toggle="modal"
                                                    data-bs-target="#ModalAddCategory">
                                                    Ajouter
                                                </button>
                                                <?php elseif(auth()->user()->role == 'admin'): ?>
                                                <button type="button" class="btn app-btn-secondary" data-bs-toggle="modal"
                                                    data-bs-target="#ModalAddCategory">
                                                    Ajouter
                                                </button>
                                                <?php endif; ?>
                                            </th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $categorie): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <tr>
                                                <td class="cell2"><?php echo e($categorie->nom_categorie); ?></td>

                                                <?php if(auth()->user()->role == 'super-admin'): ?>
                                                <td>
                                                    <button type="button" class="btn btn-outline-primary border-btn me-5" data-bs-toggle="modal" data-bs-target="#updateCategoryModal" data-id=<?php echo e($categorie->id); ?> data-name=<?php echo e($categorie->nom_categorie); ?>>
                                                        Modifier</button>
                                        
                                                    <button type="button" class="btn btn-outline-info border-btn me-5 detailButton" data-bs-toggle="modal"
                                                        data-bs-target="#ModalCategoryDetail-<?php echo e($categorie->id); ?>" data-name="<?php echo e($categorie->nom_categorie); ?>">
                                                        Details
                                                    </button>
                                        
                                                    
                                                        <form action="<?php echo e(route('category.destroy', $categorie->id)); ?>" method="POST" style="display: inline; border-radius: 1cap; border-style: inherit; color: transparent;"
                                                            id="delete-form-<?php echo e($categorie->id); ?>">
                                                            <?php echo csrf_field(); ?>
                                                            <?php echo method_field('DELETE'); ?>
                                                            <button type="button" class="btn btn-outline-danger border-btn"
                                                                onclick="confirmDelete(<?php echo e($categorie->id); ?>)">Supprimer</button>
                                                        </form>
                                        
                                                    
                                                </td>
                                                <?php elseif(auth()->user()->role == 'admin'): ?>
                                                    <td>
                                                        <button type="button" class="btn btn-outline-primary border-btn me-5" data-bs-toggle="modal"
                                                            data-bs-target="#updateCategoryModal"
                                                            data-id=<?php echo e($categorie->id); ?>

                                                            data-name=<?php echo e($categorie->nom_categorie); ?>>
                                                            Modifier</button>
                                                   
                                                        <button type="button" class="btn btn-outline-info border-btn me-5 detailButton"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#ModalCategoryDetail-<?php echo e($categorie->id); ?>"
                                                            data-name="<?php echo e($categorie->nom_categorie); ?>">
                                                            Details
                                                        </button>
                                                </td>
                                                <?php elseif(auth()->user()->role == 'utilisateur'): ?>
                                                        <td>
                                                <button type="button" class="btn btn-outline-info border-btn me-5 detailButton"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#ModalCategoryDetail-<?php echo e($categorie->id); ?>"
                                                    data-name="<?php echo e($categorie->nom_categorie); ?>">
                                                    Details
                                                </button>
                                            </td>
                                                <?php endif; ?>


                                                <div class="modal fade" id="ModalCategoryDetail-<?php echo e($categorie->id); ?>" tabindex="-1"
                                                    aria-labelledby="detailsCategoryLabel" aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="detailsCategoryLabel">Catégorie</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                
                                                            <div class="modal-body">
                                                                <div class="row">
                                                                    <!-- Catégorie -->
                                                                    <div class="col-4 det" style="font-size: 18px">Catégorie :</div>
                                                                    <div class="col-6 show-category">
                                                                        <span style="font-size: 18px" id="showCategory-<?php echo e($categorie->id); ?>"></span>
                                                                    </div>
                                                            
                                                                    <div class="col-4 det" style="font-size: 18px;">Les Produits :</div>
                                                            
                                                                    <div class="col-8">
                                                                        <?php if($categorie->sousCategories->isEmpty()): ?>
                                                                            <div class="text-muted" style="font-size: 18px;">Aucun produit trouvé</div>
                                                                        <?php else: ?>
                                                                            <?php $__currentLoopData = $categorie->sousCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                                <div class="info-category" style="font-size: 18px;"><?php echo e($product->nom_produit); ?></div>
                                                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                                        <?php endif; ?>
                                                                    </div>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div class="row">
                                                                    <!-- Label Produit -->
                                                                    
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </tr>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="modal fade" id="updateCategoryModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <form action="/updateCategory" method="POST">
                            <?php echo csrf_field(); ?>
                            <input type="hidden" name="id" id="updateCategorieId">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Modifier la catégorie</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <div>
                                        <label class="det">Nom de la catégorie</label>
                                        <input type="text" class="form-control" id="updateCategoryName"
                                            name="newNom_categorie" placeholder="Entrer la catégorie" />
                                        <?php if($errors->has('newNom_categorie')): ?>
                                            <span class="text-danger">
                                                <?php echo e($errors->first('newNom_categorie')); ?></span>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <input type="submit" class="btn btn-primary" data-bs-dismiss="modal" value="Modifier">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <?php echo e($categories->links('vendor.pagination.bootstrap-4')); ?>

        
                </div>
            </div>
        </div>
    <?php $__env->stopSection(); ?>
    <?php $__env->startSection('content2'); ?>
        <div class="modal fade" id="QueryModalCategoryDetail" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">

                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="show-info-category show-category">
                            <label class="label-detail-category">Catégorie</label>
                            <h6 class="info-category" id="showCategory">
                            </h6>
                        </div>

                        <div class="show-info-category show-product-category">
                            <label class="label-detail-category">Les produits</label>
                            <p class="info-category" id="showProductsCategory">
                            </p>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" data-bs-dismiss="modal">Fermer</button>

                    </div>
                </div>
            </div>
        <?php $__env->stopSection(); ?>

        <?php $__env->startSection('script'); ?>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const select = document.getElementById('pagination-select');
                const form = document.getElementById('pagination-form');
                const perPageInput = document.getElementById('per-page-input');

                select.addEventListener('change', function() {
                    perPageInput.value = this.value;
                    form.submit();
                });
            });
        </script>
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    const updateCategoryModal = document.getElementById('updateCategoryModal');
                    updateCategoryModal.addEventListener('show.bs.modal', event => {
                        const button = event.relatedTarget;
                        const categorieId = button.getAttribute('data-id');
                        const categorieName = button.getAttribute('data-name');
                        const categorieFournisseurId = button.getAttribute('data-fournisseur_id');

                        document.getElementById('updateCategorieId').value = categorieId;
                        document.getElementById('updateCategoryName').value = categorieName;
                        document.getElementById('updateCategorySupplierId').value = categorieFournisseurId;
                    })

                })
            </script>
            <script>
                function confirmDelete(categoryId) {
                    Swal.fire({
                        title: 'Supprimer la catégorie !',
                        text: "êtes-vous sûr que vous voulez supprimer cette catégorie ?",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#3085d6',
                        cancelButtonText: 'Annuler',
                        confirmButtonText: 'Oui, Supprimer !'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            document.getElementById('delete-form-' + categoryId).submit();
                            Swal.fire(
                                "Supprimé !",
                                "La catégorie a été supprimé avec succès.",
                                "success"
                            );
                        }
                    });
                }
            </script>
            <script>
                document.querySelectorAll('.detailButton').forEach(button => {
                    button.addEventListener('click', function() {

                        const categoryId = this.getAttribute('data-bs-target').split('-').pop();
                        const categoryName = this.getAttribute('data-name')
                        const supplierName = this.getAttribute('data-supplier')

                        document.querySelector(`#showCategory-${categoryId}`).innerText = categoryName
                        document.querySelector(`#showSupplier-${categoryId}`).innerText = supplierName
                    })

                });
            </script>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const searchInput = document.querySelector('input[name="search"]');

                    searchInput.addEventListener('keydown', function(event) {
                        if (event.key === 'Enter') {
                            event.preventDefault();
                        }
                    });

                    const tbody = document.querySelector('tbody');

                    searchInput.addEventListener('input', function() {
                        const inputValue = searchInput.value;

                        if (inputValue.length > 0) {
                            fetch(`/search-categories?search=${inputValue}`)
                                .then(response => response.json())
                                .then(data => {
                                    console.log(data);
                                    tbody.innerHTML = '';


                                    data.forEach(category => {
                                        console.log(category)

                                        let products = 'Pas de produit associé';

                                        if (category.sous_categories && category.sous_categories
                                            .length > 0) {
                                            products = category.sous_categories.map(product => product
                                                .nom_produit).join(', ');
                                        }


                                        const row = document.createElement('tr');
                                        const role = "<?php echo e(auth()->user()->role); ?>"
                                        row.innerHTML = `

                                                <td class="cell2">${category.nom_categorie}</td>
                                                 ${role === "super-admin" ? `
                                                 <td>
                                                        <button type="button" class="btn btn-outline-primary border-btn me-5" data-bs-toggle="modal"
                                                            data-bs-target="#updateCategoryModal"
                                                            data-id="${category.id}"
                                                            data-name="${category.nom_categorie}"
                                                        >Modifier
                                                        </button>
                                                        
                                                        <button type="button" class="btn btn-outline-info border-btn me-5 "
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#QueryModalCategoryDetail"
                                                                data-name="${category.nom_categorie}"
                                                                data-product="${products}">
                                                                Details
                                                        </button>
                                                        
                                                        <form action="/category/destroy/${category.id}"
                                                            method="POST" style="display: inline; border-radius: 1cap; border-style: inherit; color: transparent;"
                                                            id="delete-form-${category.id}">
                                                            <?php echo csrf_field(); ?>
                                                            <?php echo method_field('DELETE'); ?>
                                                            <button type="button" class="btn btn-outline-danger border-btn"
                                                                onclick="confirmDelete(${category.id})">Supprimer</button>
                                                        </form>
                                                </td>


                                                ` : ""
                                                     }
                                                    ${role == 'admin' ?
                                                    `
                                                <td>
                                                        <button type="button" class="btn btn-outline-primary border-btn me-5" data-bs-toggle="modal"
                                                            data-bs-target="#updateCategoryModal"
                                                            data-id="${category.id}"
                                                            data-name="${category.nom_categorie}"
                                                        >Modifier
                                                        </button>
                                                        
                                                        <button type="button" class="btn btn-outline-info border-btn me-5 "
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#QueryModalCategoryDetail"
                                                                data-name="${category.nom_categorie}"
                                                                data-product="${products}">
                                                                Details
                                                        </button>
                                                </td>


                                               ` : ""

                                                    }  ${role == 'utilisateur' ?  `
                                                        <td>
                                                            <button type="button" class="btn btn-outline-info border-btn me-5 "
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#QueryModalCategoryDetail"
                                                                    data-name="${category.nom_categorie}"
                                                                    data-product="${products}">
                                                                    Details
                                                            </button>
                                                        </td>

                                                      
                                                    ` : ""}
                                            `

                                        ;
                                        tbody.appendChild(row);
                                    });

                                    document.querySelectorAll('button[data-bs-toggle="modal"]').forEach(
                                        button => {
                                            button.addEventListener('click', function() {

                                                const categoryName = this.getAttribute('data-name');

                                                const products = this.getAttribute('data-product');

                                                document.getElementById(
                                                        `showCategory`).innerText =
                                                    categoryName;

                                                const productsList = document.getElementById(
                                                    `showProductsCategory`)


                                                // productsList.innerHTML = '';

                                                products.split(', ').forEach(product => {
                                                    const option = document.createElement(
                                                        'option');
                                                    option.textContent = product;
                                                    option.disabled = true;
                                                    productsList.appendChild(option);
                                                });
                                            })
                                        })

                                })
                                .catch(error => {
                                    console.error('Error fetching categories:', error);
                                });
                        } else {

                            location.reload();
                        }
                    });
                });
            </script>
        <?php $__env->stopSection(); ?>

<?php echo $__env->make('myApp.admin.adminLayout.adminPage', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/nettoyagecasabla/fournisseurs.materiel-levage-maroc.com/resources/views/myApp/admin/links/categories.blade.php ENDPATH**/ ?>