{% extends 'FrontofficeAr/base.html.twig' %}
{% block activePresentation %}main-menu-active{% endblock %}
{% block titre %}المكتب{% endblock %}
{% block body %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

li div {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  height: 100%;
}

li div.active1 {
  background-color: #106eea;
  color: white;
}

li div:hover:not(.active) {
  background-color: #007293;
  color: white;
}

.cadre{
    padding: 1.5%;
    border-right: 1px solid #cbcbcb;
    color:white;
    border-radius: 10% 0% 0% 10%;
    font-size:50px;
}

.iconQ {
    font-size: 120px;
}

.wid {
    font-size:15px;
}

.yellowLine{
    height: 5px;
    background: gold;
    width: 60%;
    margin: 0% 20% 0% 20%;
    border-radius: 30px;
            
}

@media screen and (min-width: 600px) {
.mob{
    display:none;
    }

.pc{
    display:flex; 
    
   }   

}

.hov{
    background-color: #F5F3F3
}

.hov:hover{
    background :gold;
}

@media screen and (max-width: 600px) {
  h6 {
    font-size:10px;
  }
  .iconQ {
    font-size: 80px;
  }

  .cadre{
    padding: 2%;
    border-right: 1px solid #cbcbcb;
    color:white;
    border-radius: 10% 0% 0% 10%;
    font-size:30px;
   }  
   
   .wid {
    font-size: 12px;
   }

   .pc{
    display:none;
   }

   .mob{
    display:flex;
    flex-wrap: wrap;
    }

    .margt{
        margin-top:5%;
    }
}

.container1 {
    margin-left: 10% !important;
    margin-right: 10% !important;
}
</style>

    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("/assets/Backoffice/images/logo-fcpm.png") }}" />
            <h4 class="title-page" style="color:white;">أعضاء المكتب</h4>
        </div>
    </div>
    <div style='display:flex;justify-content: center;width:100%;margin:0%' class="row block_ac">
        <div style='margin-top:2%'>
            <div  id='sectionBureau'>
                <div class="row justify-content-center">
                    <div class="col-md-7 text-center">
                        <h3 class="heading-92913 text-black text-center">جامعة غرف الصيد البحري - المكتب</h3>
                    </div>
                </div>
                <div id="bureau" class="panel-collapse in container1" >
                     <div style='text-align:center;margin-top:0%'>
                            <div class="panel-body text-sm" >
                                <img style='width:160px;height:160px' src="{{ asset("/assets/Backoffice/images/logoFCPM.png") }}" />
                            </div>

                            <div style='display: flex;flex-direction: column;align-items: center;'>

                            <div class ='panel panel-primary col-md-2' style='margin-top:2%;background-color: #F5F3F3'>
                            <h6 class='titre_map'>الرئيس</h6>

                            <div style='display:flex;justify-content: space-evenly;width:100%;flex-direction: column;'>    
                                {% for b in membreBureau %}

                                {% if b.posteBureau == 1 %} 
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                <div class='card wid text-center' style='flex-direction: row;margin:1%;justify-content: center;'>
                                 <span style='padding:5%'> {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div> 
                          </div>

                          <div class='pc' style='border-left: 6px solid lightgrey;height: 50px'>
                          </div>

                          <div class='pc' style='border-top: 6px solid lightgrey;width:83.5%;'>
                          </div>


                          <div class='pc' style='flex-direction: row;justify-content: space-around;width:97.3%'>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>

                          </div>

                          <div class='pc' style='flex-direction: row;justify-content: space-between;width:100%'>

                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 24 %} 
                                <h6 class='titre_map view' style='margin:0%'>النائب الرابع</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                            <div  style='border-left: 6px solid lightgrey;height: 250px;'>
                            </div>


                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 23 %} 
                                <h6 class='titre_map view' style='margin:0%'>النائب الثالت</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                            <div  style='border-left: 6px solid lightgrey;height: 250px;'>
                            </div>


                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 22 %} 
                                <h6 class='titre_map view' style='margin:0%'>النائب الثاني</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                            <div  style='border-left: 6px solid lightgrey;height: 250px;'>
                            </div>


                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 21 %} 
                                <h6 class='titre_map view' style='margin:0%'>النائب الأول</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                          </div>

                            <div class='pc' style='flex-direction: row;justify-content: space-around;width:97%'>
                            <div style='border-top: 6px solid lightgrey;width:29%;'>
                            </div>

                            <div  style='border-left: 6px solid lightgrey;height: 6px;'>
                            </div>


                            <div style='border-top: 6px solid lightgrey;width:29%;'>
                            </div>

                          </div>

                           <div class='pc' style='flex-direction: row;justify-content: space-around;width:97%'>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid #F5F3F3;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid #F5F3F3;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>


                          </div>

                            <div class='pc' style='flex-direction: row;justify-content: space-between;width:100%'>

                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 4 %} 
                                <h6 class='titre_map view' style='margin:0%'>أمين المال</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                            <div  style='border-left: 6px solid #F5F3F3;height: 250px;'>
                            </div>


                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 5 %} 
                                <h6 class='titre_map view' style='margin:0%'>نائب الأمين</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                            <div  style='border-left: 6px solid lightgrey;height: 250px;'>
                            </div>


                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 6 %} 
                                <h6 class='titre_map view' style='margin:0%'>الكاتب</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                            <div  style='border-left: 6px solid #F5F3F3;height: 250px;'>
                            </div>


                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 7 %} 
                                <h6 class='titre_map view' style='margin:0%'>نائب الكاتب</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                          </div>


                            <div class='pc' style='flex-direction: row;justify-content: space-evenly;width:95%;'>
                            <div class ='panel panel-primary col-md-12' style='background-color: #F5F3F3;width: 100%;;'>
                            <h6 class='titre_map'>المستشارون</h6>;
                            <div style='display:flex;justify-content: space-evenly;width:100%;flex-wrap:wrap;direction: rtl;'>
                                {% for b in membreBureau %}

                                {% if b.posteBureau == 3 %} 
                                <div class='card wid text-center col-md-5' style='flex-direction: row;margin:1%'>
                                {% if b.img != '' %} 
                                <img class='image' style='width:80px;height:80px' src="{{ asset(b.img) }}" />
                                {% else %}
                                 <i class="bi bi-person-fill icon-muted cadre" style='background-color:gold;display:flex;align-items:center'></i>
                                {% endif %}
                                 <span class="pctext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %} 
                                {% endfor %}
                            </div>
                            </div>

                        </div>



                          <div class='mob' style='flex-direction: row;justify-content: space-between;width:100%;margin:5%'>

                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 21 %} 
                                <h6 class='titre_map view' style='margin:0%'>النائب الأول</h6>
                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span style='padding:5%'> {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>



                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 22 %} 
                                <h6 class='titre_map view' style='margin:0%'>النائب الثاني</h6>
                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span style='padding:5%'> {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>


                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 23 %} 
                                <h6 class='titre_map view' style='margin:0%'>النائب الثالت</h6>
                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span style='padding:5%'> {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>


                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 24 %} 
                                <h6 class='titre_map view' style='margin:0%'>النائب الرابع</h6>
                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span style='padding:5%'> {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                          </div>

                          <div class='mob' style='flex-direction: row;justify-content: space-between;width:100%;margin-top: 5%;'>

                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 4 %} 
                                <h6 class='titre_map view' style='margin:0%'>امين المال</h6>
                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="mobtext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                            <div  style='border-left: 6px solid #F5F3F3;height: 150px;'>
                            </div>


                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 5 %} 
                                <h6 class='titre_map view' style='margin:0%'>نائب امين المال</h6>
                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="mobtext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 6 %} 
                                <h6 class='titre_map view' style='margin:0%'>الكاتب</h6>
                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="mobtext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                            <div  style='border-left: 6px solid #F5F3F3;height: 150px;'>
                            </div>


                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 7 %} 
                                <h6 class='titre_map view' style='margin:0%'>نائب الكاتب</h6>
                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="mobtext" style='padding:5%'>  {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                          </div>

                        <div class='mob' style='flex-direction: row;justify-content: space-evenly;width:95%;direction:rtl;margin-top:5%'>
                            <div class ='panel panel-primary col-md-12' style='background-color: #F5F3F3;width: 100%;;'>
                            <h6 class='titre_map'>المستشارين</h6>
                            <div style='display:flex;justify-content: space-evenly;width:100%;flex-wrap:wrap'>
                                {% for b in membreBureau %}

                                {% if b.posteBureau == 3 %} 
                                <div class='card wid text-center col-md-5' style='flex-direction: row;margin:1%'>
                                {% if b.img != '' %} 
                                <img class='image' style='width:60px;height:60px' src="{{ asset(b.img) }}" />
                                {% else %}
                                 <i class="bi bi-person-fill icon-muted cadre" style='background-color:gold;display:flex;align-items:center'></i>
                                {% endif %}
                                 <span class="mobtext" style='padding:5%'> {{b.nomAr}}  {{b.prenomAr}}</span>   
                                </div> 
                                {% endif %} 
                                {% endfor %}
                            </div>
                            </div>

                        </div>


                        </div>
                    </div>
                    
                </div>
            </div>

        </div>
          
        </div>
    </div>

{% endblock %}
{% block js %}

    <script type="text/javascript">


        $("#Vice-Pr").on("click", function(e){
           $("#panelVice").css("display","block");
           $("#panelSecr").css("display","none");
           $("#panelCons").css("display","none");
           $("#panelAutr").css("display","none");


        });
        $("#Secr").on("click", function(e){
           $("#panelVice").css("display","none");
           $("#panelSecr").css("display","block");
           $("#panelCons").css("display","none");
           $("#panelAutr").css("display","none");


        });
        $("#Cons").on("click", function(e){
           $("#panelVice").css("display","none");
           $("#panelSecr").css("display","none");
           $("#panelCons").css("display","block");
           $("#panelAutr").css("display","none");


        });
        $("#Autr").on("click", function(e){
           $("#panelVice").css("display","none");
           $("#panelSecr").css("display","none");
           $("#panelCons").css("display","none");
           $("#panelAutr").css("display","block");


        });



    </script>  
{% endblock %}