{% extends 'FrontofficeAr/base.html.twig' %}
{% block activeLois %}main-menu-active{% endblock %}
{% block titre %}القوانين {% endblock %}
{% block body %}
<style>

    .block_pub{
        height:500px;
        max-height:800px;
        overflow:auto;
    }
    .yellowLine{
        height: 5px;
        background: gold;
        width: 60%;
        margin: 0% 20% 0% 20%;
        border-radius: 30px;
                
    }


    .titlee-page:hover {
        background-color: red;
        color: white;
        padding: 1px;
        width: 40%;
        margin-left: 30%;
        border-bottom-right-radius: 50px;
        border-bottom-left-radius: 50px;
    }
    .navListe,
    .navListe ul {
    margin:0;
    padding:0;
    list-style: none;
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background:#fff;
    font-family:Arial, sans-serif;
    }
    .navListe {
    position:relative;
    margin:0 auto;
    width:100%;
    max-width: 1200px;
    }
    .navListe ul {
    display: none;
    position:absolute;
    left:0;
    }
    .navListe ul { z-index:1; }
    .navListe ul ul { z-index:2; }
    .navListe ul ul ul { z-index:3; }
    .navListe ul ul ul ul { z-index:4; }
    /* ------------------------ */
    .navListe li {
    /*position:relative;*//*NON : important*/
    width:25%; /* 4 par ligne */
    min-width:120px;
    box-sizing:border-box;
    }
    .navListe li div {
    position:relative;
    display: block;
    height: auto;

    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 5px #333;
    border:1px solid #666;

    margin: 5px;
    padding: 5px;

    font-size: 14px;
    text-align: right;
    line-height: 24px;
    color:#000;
    }
    /* ------------------------ */
    .navListe li.hasSub > div {
    cursor:pointer;
    }
    .navListe li.hasSub > div:after { 
    content:'+';
    position:absolute;
    display:block;
    bottom:5px;
    right:90%;
    font-size:200%;
    }
    /* triangle */
    .navListe li.hasSub.active > div:after { 
    position:absolute;
    content:'';
    display:block;
    bottom:-8px;
    left:10px;
    width:0;
    height:0;
    border-style:solid;
    border-width:8px 8px 0 8px;
    border-color:deepskyblue transparent transparent transparent;
    z-index:9;
    }
    .navListe li:not(.blurred) > div {
    background-color: #ffffff;
    }
    /* ------------------------ */
    .navListe li.blurred:not(.active) > div {
    filter: blur(2px);
    box-shadow: 0 0 0 transparent;
    }
    .navListe li.blurred.active > div {
    box-shadow: 0 0 0 transparent;
    }
    /* ------------------------ */
    .navListe li div.dir {
    background-color: lightblue;
    color:midnightblue;
    }
    .navListe li.active > div.dir, .navListe li:hover > div.dir {
    background-color: deepskyblue;
    }
    .navListe li:not(.blurred):hover > div.fil {
    background-color: lemonchiffon;
    }

    .navListe li div.dir:before {
    display:inline-block;
    content:'';
    width:16px;
    height:16px;
    margin-right:5px;
    background:url(https://www.jerome-reaux-creations.fr/DVP/scripts/explorateur_dossier3/images/folder.png) no-repeat;
    }
    /* ------------------------ */
    /* TABLET */
    @media screen and (max-width:768px) {
    .navListe li {
        width:33.33%; /* 3 par ligne */
    }
    }
    /* PHONE */
    @media screen and (max-width:640px) {
    .navListe li {
        width:33.33%; /* 3 par ligne */
    }
    }
    @media screen and (max-width:480px) {
    .navListe li {
        width:50%; /* 2 par ligne */
    }
    }
    /* ------------------------ */
    .bi-folder{
        color: #e8b154;
        font-size: x-large;
        padding: 4px;
    }

    .dir::before {
        content: '📁' !important;
        font-size: 24px;
        position: absolute;
        top: 6px;
        right: -5px;
        transform: translateX(-10%);
    }
    @media (max-width: 768px) {
        .navListe li div
        {
            position: relative;
            display: block;
            height: auto;
            background-color: #ffffff;
            border-radius: 5px;
            box-shadow: 0 0 5px #333;
            border: 1px solid #666;
            margin: 5px;
            padding: 7px;
            font-size: 10px;
            text-align: right;
            line-height: 24px;
            color: #000;
        }

        .bi-folder
        {
            color: #e8b154;
            font-size: 5px;
            padding: 4px;
        }

        .dir::before
        {
            content: '📁' !important;
            font-size: 13px;
            position: absolute;
            top: 6px;
            left: 4px;
            transform: translateX(-10%);
        }
    }

    .btn-primary{
            background: #e8b154;
            border: 1px solid #d5ad3e;
            margin-left: 6px;
        }


</style>

    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("/assets/Backoffice/images/logo-fcpm.png") }}" />
            <h3 class="title-page" style="color:white;">قوانين</h3>
        </div>
    </div>
    <div class="block_pub">
        <ul class="navListe">
            {% macro render_dossiers(dossiers) %}
                {% for item in dossiers %}
                    <li class="{{ item.enfants is not empty ? 'hasSub' : '' }}">
                        <div class="dir">
                            <i class="bi bi-folder"></i>{{ item.dossier.nomAr }}
                        </div>

                        {# Affichage des fichiers du dossier #}
                        {% if item.lois is not empty %}
                            <ul>
                                {% for loi in item.lois %}
                                    <li>
                                        <div class="fil">
                                            <strong>{{ loi.titreAr }}</strong>
                                            <p>{{ loi.textAr }}</p>
                                            {% if loi.fichierAr %}
                                                <a href="{{ loi.fichierAr }}" class="btn btn-sm btn-primary" download>
                                                    تحميل
                                                </a>
                                            {% endif %}
                                        </div>
                                    </li>
                                {% endfor %}
                                
                                {% if item.enfants is not empty %}
                                    {{ _self.render_dossiers(item.enfants) }}
                                {% endif %}
                            </ul>

                        {% else %}
                            <ul>
                                {% if item.enfants is not empty %}
                                    {{ _self.render_dossiers(item.enfants) }}
                                {% endif %}
                            </ul>
                        {% endif %}
                    </li>
                {% endfor %}
            {% endmacro %}

            {{ _self.render_dossiers(lois) }}
        </ul>
    </div>

{% endblock %}
{% block js %}
<script>
    $(function(){
        $('.navListe').each( function(){
                $(this).find('li').each(function() 
                {
                    if( $(this).find('ul').length > 0) 
                    {
                        $(this).addClass('hasSub'); // avec sous-menu
                    }
                });
        });
    });
    
    $(document).on('click', '.navListe li > div.dir', function(event) {
        event.stopPropagation(); // important
        var this_li = $(this).parent('li');
        var this_ul = $(this).parent('li').find('ul:first');

        $('.navListe li').addClass('blurred').removeClass('active');
        this_li.parents('li').addClass('active');

        if( this_ul.length > 0 ) // il existe un sous-menu
        {
            if( this_ul.is(':visible') )
            {
                this_ul.fadeOut('slow');
                this_ul.find('ul').fadeOut('slow');
                this_li.removeClass('blurred');
                this_li.siblings('li').removeClass('blurred');
            }
            else
            {
                this_li.siblings('li').find('ul').not(this_ul).fadeOut('slow');
                this_ul.fadeIn('slow').css({'display':'flex'});

                this_li.addClass('blurred active');
                this_li.find('li').removeClass('blurred');
            }
        } else { // pas de sous-menu
            this_li.siblings('li').find('ul').fadeOut('slow');
            this_li.removeClass('blurred');
            this_li.siblings('li').removeClass('blurred');
        }
    });

    $(document).on('click', '.navListe li > div input', function(event) {
        event.stopPropagation(); // important
    });

    $(document).on('click', '.navListe li > div input.checkAll', function(event) {
        event.stopPropagation(); // important
    $(this).parent().parent().find( 'ul input[type="checkbox"]' ).prop('checked',( $(this).is(':checked') ) );
    });


</script>
{% endblock %}