@extends('templates.prefeitura3.layout2')

@section('content')

    @php $madara = 0 @endphp
    @php $madara1 = 0 @endphp

<style>
    .card { border: none!important;}
    .list-group-item {border: none!important;  color: #414141;;}
</style>


    <div style=" background-color: #F9F9F9 ; height: auto; padding-top: 20px; padding-bottom: 20px; " >

        <div class="container"  style="background-color: #F8F8F8; border: #EBEBEB solid 2px; padding: 40px; border-radius: 15px; border-top:6px solid var( --backgroud-header);">
            <div class="row" style="background-color: #F2F2F2; margin-bottom: 20px; padding: 20px; border: #EBEBEB solid 2px; border-radius: 10px;" >
                <div class="col-md-4">
                    <i class="fa fa-suitcase" style="font-size: 25px; color:var( --backgroud-header);  font-weight: bold;" aria-hidden="true"></i> <span style="font-size: 25px; font-weight: bold; color: #000000; padding-left: 10px;" > Secretarias</span>
                </div>
                <div class="col-md-8" style="text-align: right;">
                    <span style="color:var( --backgroud-header); border-right: 2px solid var( --backgroud-header); font-weight: bold; padding-right: 20px; ">Acesso rápido</span>
                    @php $linkscont = 0; @endphp
                    @foreach($links as $link)



                            <a href="{{$link->url}}" @if($link->outraba == 'on')target="_blank" @endif class="btn  span_noti "  style=" color: #ADADAD; font-size: 20px; ">

                                <i class=" fa {{$link->icon}} " aria-hidden="true" style="padding-right: 5px;"></i>

                            </a>



                        @php $linkscont++ @endphp

                    @endforeach
                </div>
            </div>
            <div class="row" style="">
                <div class="div col-md-12" >
                    <a href="" style="color: #000;">Secretarias</a> <span style="font-weight: bold;"> > </span>  <a href="" style="color: var( --backgroud-header);">{{$pages->titulo}}</a>
                </div>
                <div class="div col-md-12" style=" height: auto; margin-bottom:20px; padding-top: 30px;  padding-bottom: 30px; " >

                    <div class="row" style="background-color:#FFF; border: 2px solid #EBEBEB;border-radius: 10px; ">
                        <div class="div col-md-4" style="padding: 20px; border-right: 2px solid #EBEBEB; " >
                            <div class="list-group">

                                <a id="ap_c" style="color: #0027FF;" onclick="selecionar('ap')" href="#" class="list-group-item">Apresentação
                                    <i id="ap_1" style="float: right; " class="fa fa-angle-down" aria-hidden="true"></i>

                                </a>
                                <a id="es_c" style="color: #646464;"  onclick="selecionar('es')" href="#"   class="list-group-item">Estrutura Administrativa
                                    <i id="es_1" style="float: right; " class="fa fa-angle-right" aria-hidden="true"></i>

                                </a>
                                <a id="se_c" style="color: #646464;"  onclick="selecionar('se')" href="#"   class="list-group-item">Serviços
                                    <i id="se_1" style="float: right; " class="fa fa-angle-right" aria-hidden="true"></i>

                                </a>
                                <a id="do_c"  style="color: #646464;" onclick="selecionar('do')"  href="#"  class="list-group-item">Downloads
                                    <i id="do_1" style="float: right; " class="fa fa-angle-right" aria-hidden="true"></i>

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

                        <div class="div col-md-8" style="padding: 20px;" >
                        <div id="ap" style="">{!!$pages->apresentacao!!}</div>
                        <div id="es" style="display: none;">{!!$pages->estrutura!!}</div>
                        <div id="se" style="display: none;">{!!$pages->servicos!!}</div>
                        <div id="do" style="display: none;">{!!$pages->download!!}</div>
                        </div>

                    </div>





                </div>

            </div>



        </div>

    </div>





@endsection



@section('post-script')

    <script>
      function  selecionar(id) {
          if(id =='ap'){
              $('#ap').css('display','block');
              $('#es').css('display','none');
              $('#se').css('display','none');
              $('#do').css('display','none');

              $('#ap_1').attr('class','fa fa-angle-down');
              $('#es_1').attr('class','fa fa-angle-right');
              $('#se_1').attr('class','fa fa-angle-right');
              $('#do_1').attr('class','fa fa-angle-right');

              $('#ap_c').css('color','#0027FF');
              $('#es_c').css('color','#646464');
              $('#se_c').css('color','#646464');
              $('#do_c').css('color','#646464');
          }
          if(id =='es'){
              $('#ap').css('display','none');
              $('#es').css('display','block');
              $('#se').css('display','none');
              $('#do').css('display','none');

              $('#ap_1').attr('class','fa fa-angle-right');
              $('#es_1').attr('class','fa fa-angle-down');
              $('#se_1').attr('class','fa fa-angle-right');
              $('#do_1').attr('class','fa fa-angle-right');

              $('#ap_c').css('color','#646464');
              $('#es_c').css('color','#0027FF');
              $('#se_c').css('color','#646464');
              $('#do_c').css('color','#646464');
          }
          if(id =='se'){
              $('#ap').css('display','none');
              $('#es').css('display','none');
              $('#se').css('display','block');
              $('#do').css('display','none');

              $('#ap_1').attr('class','fa fa-angle-right');
              $('#es_1').attr('class','fa fa-angle-right');
              $('#se_1').attr('class','fa fa-angle-down');
              $('#do_1').attr('class','fa fa-angle-right');

              $('#ap_c').css('color','#646464');
              $('#es_c').css('color','#646464');
              $('#se_c').css('color','#0027FF');
              $('#do_c').css('color','#646464');
          }
          if(id =='do'){
              $('#ap').css('display','none');
              $('#es').css('display','none');
              $('#se').css('display','none');
              $('#do').css('display','block');

              $('#ap_1').attr('class','fa fa-angle-right');
              $('#es_1').attr('class','fa fa-angle-right');
              $('#se_1').attr('class','fa fa-angle-right');
              $('#do_1').attr('class','fa fa-angle-down');

              $('#ap_c').css('color','#646464');
              $('#es_c').css('color','#646464');
              $('#se_c').css('color','#646464');
              $('#do_c').css('color','#0027FF');
          }




        }
    </script>



@endsection