@extends('layouts.dashboard')
@section('pg-body')
<section class="wf100 subheader">
    <div class="container">
        <h2>Leis que Todas as Mulheres Precisam Conhecer</h2>
        <ul>
            <li> <a href="{{url('home')}}">Home</a> </li>
            <li> <a href="{{url('portal-transparencia')}}">Transparência</a> </li>
            <li>Leis Femininas</li>
        </ul>
    </div>
</section>

<style>
    #banner-leis-femininas .owl-nav {
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        pointer-events: none;
    }
    #banner-leis-femininas .owl-nav button.owl-prev,
    #banner-leis-femininas .owl-nav button.owl-next {
        pointer-events: auto;
        width: 44px;
        height: 44px;
        line-height: 44px;
        border-radius: 50%;
        background: rgba(0,0,0,0.4) !important;
        color: #fff !important;
        font-size: 22px !important;
        text-align: center;
        transition: background 0.3s;
    }
    #banner-leis-femininas .owl-nav button.owl-prev:hover,
    #banner-leis-femininas .owl-nav button.owl-next:hover {
        background: var(--background-color6) !important;
    }
    #banner-leis-femininas .owl-dots {
        text-align: center;
        margin-top: 10px;
    }
    #banner-leis-femininas .owl-dots .owl-dot span {
        width: 12px;
        height: 12px;
        margin: 3px 5px;
        background: #d6d6d6;
    }
    #banner-leis-femininas .owl-dots .owl-dot.active span {
        background: var(--background-color6);
    }
</style>
<div class="main-content p60" id="p60">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="city-updates">
                    <div class="owl-carousel owl-theme" id="banner-leis-femininas" style="position: relative;">
                        <div class="item"><img src="{{asset('front/images/banner_leis_femininas.jpg')}}" style="width: 100%;"></div>
                        <div class="item"><img src="{{asset('front/images/banner_leis_femininas2.jpg')}}" style="width: 100%;"></div>
                    </div>
                    <hr>
                    <p>Conheça as principais leis brasileiras de proteção e garantia de direitos das mulheres.</p>

                    <div id="div_table_listagem">
                        <ul>
                            @foreach($leis_femininas as $list)
                            <li>
                                <strong style="font-weight: bold; color: black;"> Lei Nº {{$list->numero.'/'.$list->ano}} </strong>
                                <strong style="color: black;">{{$list->nome}} </strong>
                                @if(!empty($list->data))<span class="post-date" style="font-weight: bold; color: #337ab7;"><i class="fa fa-calendar" style="font-weight: bold; color: #337ab7;"></i> {{dataBrasileira($list->data)}}</span>@endif
                                @if(!empty($list->arquivo))
                                    <span class="post-date" style="font-weight: bold; color: #337ab7;"><a href="{{asset('upload/leis_femininas').'/'.$list->arquivo}}" target="_blank"><i class="fa fa-download" aria-hidden="true" style="font-weight: bold; color: #337ab7;"></i> Baixar</a></span>
                                @endif
                                @if(!empty($list->descricao))
                                <p style="margin: 5px 0 0; font-family: 'Lato', sans-serif; color: #777; font-size: 14px; font-weight: 400;">{!! $list->descricao !!}</p>
                                @endif
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>

            @include('sidebar')
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        $("#banner-leis-femininas").owlCarousel({
            loop: true,
            margin: 0,
            nav: true,
            dots: true,
            autoplay: true,
            autoplayTimeout: 7000,
            smartSpeed: 1200,
            autoplayHoverPause: true,
            items: 1
        });
    });
</script>
@endsection