<style>
    body {
        background-color: #f8f9fa;
    }

    .job-card {
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        page-break-inside: avoid;
        /* Add this line to avoid breaking onto a new page */
    }

    .job-card-header {
        background-color: rgb(24, 48, 44);
        color: #fff;
        padding: 10px;
        text-align: center;
        display: flex;
        align-items: center;
    }

    .job-card-header i {
        margin-right: 10px;
    }

    .job-card-body {
        padding: 20px;
    }

    .job-title {
        font-size: 1.5rem;
        font-weight: bold;
        color: #fff;
    }

    .job-description {
        margin-top: 10px;
        color: #555;
    }

    .apply-btn {
        margin-top: 20px;
    }

    .job-number {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        background-color:;
        color: #fff;
        text-align: center;
        font-size: 1rem;
        border-radius: 50%;
        margin-right: -14px;
    }

    .job-deadline {
        margin-top: 10px;
        display: flex;
        align-items: center;
        color: #555;
    }

    .job-deadline i {
        margin-right: 5px;
    }

    .company-info {
        display: flex;
        align-items: center;
        margin-top: 10px;
    }

    .company-icon {
        width: 30px;
        height: 30px;
        margin-right: 10px;

    }

    .job-offer-icon {
        margin-right: 10px;
    }

    .header-color1 {
        background-color: #18751c;
        color: #fff;
    }

    .header-color2 {
        background-color: #28a745;
        color: #fff;
    }
</style>



<?php echo $__env->make('takaback.layouts.header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<main id="main">
    <!-- ======= Breadcrumbs Section ======= -->
    <section class="breadcrumbs">
        <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="mb-4">
                <i class="fas fa-balance-scale job-offer-icon"></i> lois
            </h1>
            <?php $__currentLoopData = $resultats; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $key): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="job-card">
                    <div class="job-card-header toggle-details">
                        <div class="job-number"></div>
                      <p class="job-title"><img src="<?php echo e(asset('png250px/' . $key->flags)); ?>" width="50" height="30" alt="" srcset=""> <?php echo e($key->nomPays); ?></p>
                    </div>
                    <div class="job-card-body hidden">
                        <!-- Ajouter les informations de l'entreprise ici -->
                        
                        <?php
                            $loisParPays = explode(',', $key->id_et_loi_par_pays);
                        ?>
                        <ul class="liste-lois">
                            <?php $__currentLoopData = $loisParPays; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $loi): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php
                                    // Utilisez une expression régulière pour extraire l'ID de la loi
                                    preg_match('/(\d+)\s+(.+)/', $loi, $matches);
                                    $loiId = $matches[1];
                                    $loiTexte = $matches[2];
                                    $encodedId = base64_encode($loiId);
                                ?>

                                <li>
                                    <a href="<?php echo e(route('Lois.show', ['encodedId' => $encodedId ])); ?>" ><?php echo e($loiTexte); ?></a>
                                </li>

                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </ul>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>


</main>
<!-- End #main -->
</section>

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

<!-- Ajouter le script JavaScript ici -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Sélectionnez tous les éléments avec la classe 'loi-link'
        var loiLinks = document.querySelectorAll('.loi-link');

        // Ajoutez un gestionnaire d'événement de clic à chaque lien
        loiLinks.forEach(function (link) {
            link.addEventListener('click', function (event) {
                // Empêchez le comportement par défaut du lien
                event.preventDefault();

                // Récupérez l'ID de la loi à partir du texte du lien
                var loiId = link.getAttribute('data-loi-id');

                // Affichez l'ID dans une boîte d'alerte
                alert('ID de la loi : ' + loiId);
            });
        });
    });
</script>

<?php /**PATH /home/damala/Téléchargements/takaback/resources/views/takaback/lois.blade.php ENDPATH**/ ?>