<?php echo $__env->make('takaback.layouts.header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f8f9fa;
        color: #495057;
        margin: 0;
        padding: 0;
    }

    .inner-page {
        background-color: #fff;
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        margin: 20px auto;
        max-width: 1000px;
        -webkit-touch-callout: none;
        /* Désactiver le menu contextuel sur les appareils mobiles */
        -webkit-user-select: none;
        /* Désactiver la sélection de texte sur Safari */
        -moz-user-select: none;
        /* Désactiver la sélection de texte sur Firefox */
        -ms-user-select: none;
        /* Désactiver la sélection de texte sur Internet Explorer/Edge */
        user-select: none;
        /* Désactiver la sélection de texte sur les autres navigateurs */
    }

    .company-icon,
    .job-icon {
        color: #36cc57;
        font-size: 1.5em;
        margin-right: 10px;
    }

    h1 {
        color: rgb(24, 48, 44);
        text-align: center;
        margin-bottom: 30px;
    }

    .job-details {
        font-size: 1.0em;
        line-height: 1.6;
        color: #6c757d;
    }

    .job-details p {
        margin-left: 30px;
        /* Ajoutez cette ligne pour décaler le paragraphe vers la gauche */
    }

    .apply-btn {
        display: inline-block;
        padding: 10px 20px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        margin-top: 30px;
        transition: background-color 0.3s;
    }


    .taille {
        font-size: 12px;
    }



    .search-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #28b947;
        color: #fff;
        font-size: 1.5em;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1001;
        animation: bounceAnimation 1s ease-in-out infinite;
    }

    @keyframes bounceAnimation {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-20px);
        }
        60% {
            transform: translateY(-10px);
        }
    }


    .search-modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    /* Styles for the search input and close button */
    .search-input {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    .search-btn-modal {
        background-color: #28b947;
        color: #fff;
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
    }

    .close-btn-modal {
        background-color: #c52d2d;
        color: #fff;
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
    }

    /* Styles pour les boutons sur mobile */
    @media only screen and (max-width: 767px) {
        .search-btn {
            bottom: 70px;
        }

        .search-modal {
            top: 10%;
            padding: 20px;
            width: 80%;
            /* Ajustez la largeur du modal selon vos besoins */
        }

        .search-btn-modal,
        .close-btn-modal {
            width: 100%;
            margin-right: 0;
            margin-top: 3px;
        }
    }

    /* Styles pour les boutons sur mobile */

    /* Styles pour les boutons sur grand écran (ordinateur) */
    @media only screen and (min-width: 768px) {
        .search-btn {
            /* Aucun changement pour les boutons sur grand écran */
        }

        .search-modal {
            /* Aucun changement pour la position et le style sur grand écran */

        }

        .search-input,
        .search-btn-modal,
        .close-btn-modal {
            /* Aucun changement pour la largeur et la marge sur grand écran */
        }
    }

    /* Reste du CSS inchangé */
    .search-btn {
        position: fixed;
        bottom: 80px;
        right: 5px;
        background-color: #28b947;
        color: #fff;
        font-size: 1.5em;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1001;
    }

    .search-modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    /* Styles pour la recherche et les boutons sur grand écran */
    .search-input {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    .search-btn-modal,
    .close-btn-modal {
        color: #fff;
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
    }
</style>
<div class="search-btn" id="searchBtn">
    <i class="fas fa-search"></i>
</div>

<div class="search-modal" id="searchModal">
    <form id="searchForm" action="<?php echo e(route('recherche')); ?>" method="POST" enctype="multipart/form-data">
        <?php echo csrf_field(); ?>
        <input type="text" class="search-input" name="search" placeholder="Rechercher..." required>
        <input type="hidden" value="<?php echo e($detailLois->id); ?>" name="idDetailLoi" />
        <button id="rechercheBtn" class="search-btn-modal btn btn-primary" onclick="performSearch()">
            <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
            <span class="sr-only">Loading...</span>
            Recherche
        </button>

        <button type="button" class="close-btn-modal" onclick="toggleSearchModal()">Fermer</button>
    </form>
</div>

<?php echo $__env->make('sweetalert::alert', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<main id="main">
    <!-- ======= Breadcrumbs Section ======= -->
    <section class="">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">

            </div>
        </div>
    </section>
    <!-- End Breadcrumbs Section -->
    <section class="inner-page">
        <div class="container">
            <h1 class="mt-4 mb-4">
                <i class="fas fa-gavel job-offer-icon"></i> <strong><?php echo e($detailLois->nom_loi); ?> </strong>
            </h1>
            <?php
                $dateLoi = $detailLois->date_loi;
                $dateFormatee = date('d-m-Y', strtotime($dateLoi));
            ?>
            <div class="taille">En vigueur depuis le <?php echo e($dateFormatee); ?></div>
            <div class="job-details">
                <div></div>
                <p><?php echo $detailLois->txtLoi; ?></p>
            </div>
        </div>
    </section>


</main>
<script>
    function toggleSearchModal() {
        var modal = document.getElementById('searchModal');
        modal.style.display = (modal.style.display === 'none' || modal.style.display === '') ? 'block' : 'none';
    }

    // Fermer la modal si l'utilisateur clique en dehors de celle-ci
    window.onclick = function(event) {
        var modal = document.getElementById('searchModal');
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    };
</script>

<!-- End #main -->
<?php echo $__env->make('takaback.layouts.footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

<script>
    var searchBtn = document.getElementById('searchBtn');
    var searchModal = document.getElementById('searchModal');

    var isDragging = false;

    searchBtn.addEventListener('mousedown', function(event) {
        if (event.button === 0) { // Clic gauche
            isDragging = true;

            var offsetX = event.clientX - searchBtn.getBoundingClientRect().left;
            var offsetY = event.clientY - searchBtn.getBoundingClientRect().top;

            function moveSearchBtn(event) {
                if (isDragging) {
                    searchBtn.style.left = event.clientX - offsetX + 'px';
                    searchBtn.style.top = event.clientY - offsetY + 'px';
                }
            }

            function stopMove() {
                isDragging = false;
                document.removeEventListener('mousemove', moveSearchBtn);
                document.removeEventListener('mouseup', stopMove);
            }

            document.addEventListener('mousemove', moveSearchBtn);
            document.addEventListener('mouseup', stopMove);
        }
    });

    searchBtn.addEventListener('contextmenu', function(event) {
        event.preventDefault();
        toggleSearchModal();
    });

    function toggleSearchModal() {
        var modal = document.getElementById('searchModal');
        modal.style.display = (modal.style.display === 'none' || modal.style.display === '') ? 'block' : 'none';
    }

    // Fermer la modal si l'utilisateur clique en dehors de celle-ci
    window.onclick = function(event) {
        var modal = document.getElementById('searchModal');
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    };
</script>
<script>
    var searchBtn = document.getElementById('searchBtn');
    var searchModal = document.getElementById('searchModal');

    searchBtn.addEventListener('click', function() {
        toggleSearchModal();
    });

    function toggleSearchModal() {
        var modal = document.getElementById('searchModal');
        modal.style.display = (modal.style.display === 'none' || modal.style.display === '') ? 'block' : 'none';
    }

    function performSearch() {
        var rechercheBtn = document.getElementById('rechercheBtn');
        var searchForm = document.getElementById('searchForm');
        var searchInput = searchForm.querySelector('.search-input');

        // Get the search term from the input field
        var searchTerm = searchInput.value.trim();

        // Check if the search term is not empty
        if (searchTerm !== '') {
            // Disable the button and show the loading spinner
            rechercheBtn.disabled = true;
            rechercheBtn.innerHTML =
                '<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>Loading...';

            // Introduce a delay (e.g., 2 seconds) before submitting the form
            setTimeout(function() {
                // Set the value of the input field to the trimmed search term (optional)
                searchInput.value = searchTerm;

                // Submit the form
                searchForm.submit();
            }, 2000); // Adjust the delay time as needed
        } else {
            // Optionally, you can show an alert or provide feedback if the search term is empty
            alert('Please enter a search term.');
        }
    }


    // Fermer la modal si l'utilisateur clique en dehors de celle-ci
    window.onclick = function(event) {
        var modal = document.getElementById('searchModal');
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    };
</script>
<?php /**PATH /home/damala/Téléchargements/takaback/resources/views/takaback/detailLois.blade.php ENDPATH**/ ?>