@extends('templates.prefeitura1.layout')

@section('content')

    @php $madara = 0 @endphp
    @php $madara1 = 0 @endphp
    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="border-bottom: 5px solid var(--backgroud-header) ;">
        <ol class="carousel-indicators">

            @foreach($sliders as $slider)

                <li data-target="#myCarousel" data-slide-to="{{$madara1}}" @if ($madara1 == 0) class="active" @endif></li>



                @php $madara1++ @endphp
            @endforeach
        </ol>
        <div class="carousel-inner">


            @foreach($sliders as $slider)



                    <div class="carousel-item @if ($madara == 0) active @endif">

                        @if ($slider->url == '')
                            <img class="first-slide d-block w-100"  src="{{asset($slider->img)}}" alt=" slide">
                        @else
                            <a href="{{$slider->url }}">
                                <img class="first-slide d-block w-100"  src="{{asset($slider->img)}}" alt=" slide">
                            </a>

                        @endif


                        <div class="container">
                        <div class="carousel-caption text-left">
                            @if ($slider->url == '')
                                <h1>{{$slider->titulo}}</h1>
                                <p>{{$slider->subtitulo}}</p>
                            @else

                                <a style="color: #fff" href=""><h1>{{$slider->titulo}}</h1></a>
                                <a style="color: #fff" href=""><p>{{$slider->subtitulo}}</p></a>
                            @endif

                        </div>


                    </div>
                </div>

                @php $madara++ @endphp
            @endforeach



        </div>
        <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>




    <div class="container"  data-aos="zoom-in-left" >
        <div class="row icones" style="text-align: center;">

            <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8 offset-2 " >

                <h3 class="fonttitle"> GESTÃO À VISTA DE TODOS </h3>
                <div class="border"></div>

            </div>


            @php $linkscont = 0; @endphp
            @foreach($links as $link)


                <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6 {{$linkscont}} @if ($linkscont == 0) offset-xl-1 @endif " >
                    <a href="{{$link->url}}" @if($link->outraba == 'on')target="_blank" @endif>
                        <div class="circulo">
                            <i class=" fa {{$link->icon}} fa-3x" aria-hidden="true"></i></div>
                        <p class="fontsite">{{$link->titulo}}</p></a>
                </div>


                @php $linkscont++ @endphp



            @endforeach







        </div>
    </div>

    <div style=" background-color: @if ($account->cornoticia == "#FFF")var(  --backgroud-header)@else {{$account->cornoticia}} @endif ; height: auto;" >

        <div class="container" >
            <div class="row" style="padding-top: 20px;">
                <h5 style="background-color: var(  --text-header) ; padding: 5px; padding-left: 30px; padding-right:30px;  margin-bottom: -10px; z-index: 1000;"> Notícias</h5>
                <div class="div col-md-12"style="background-color:#FFF; height: auto; margin-bottom:20px; " >

                    <div class="row">

                        <div class="col-md-8">



                            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="margin-top: 20px; margin-bottom: 10px ">

                                @php
                                    $noticiacont = 0;
                                    $noticiacont2 = 0;

                                @endphp


                                <div class="carousel-inner">
                                    @foreach($noticias as $noticia)

                                        <div class="carousel-item   @if($noticiacont2 == 0)  active @endif" style="height: 400px; ">
                                            <img class="d-block w-100" src="{{asset($noticia->img)}}" alt="{{$noticia->titulo}}">
                                            <div class="carousel-caption d-none d-md-block titulonoticia" style="background-color: rgb(0, 0, 0,0.7); width: 100%; right: 0%; left: 0%;padding-top:10px; padding-bottom:10px;">
                                                <a href="{{routeTenant('site.noticias',['pg'=>$noticia->url])}}"> <h5 style="color: #FFF;">{{$noticia->titulo}}</h5></a>

                                            </div>
                                        </div>

                                        @php $noticiacont2++ @endphp
                                    @endforeach
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>




                        </div>
                        <div class="col-md-4"style="padding-left: 0; padding-right: 0;">


                            @foreach($noticia2s as $noticia)

                                <div class="img-canvas" style="margin-top: 20px; height: 192px;">
                                    <a href="{{url('noticia/'.$noticia->url) }}">
                                        <img src="{{asset($noticia->img)}}" class="img-thumbnail"
                                             alt="{{$noticia->titulo}}" title="{{$noticia->titulo}} ">
                                        <div class="caption">
                                            <a href="{{routeTenant('site.noticias',['pg'=>$noticia->url])}}"><h5> {{$noticia->titulo}}</h5></a>
                                        </div> </a>
                                </div>


                            @endforeach



                        </div>

                    </div>






                </div>

            </div>
        </div>

    </div>


    <div class="container">
        <div class="row">
            <div class="col-md-6" style="text-align: center;" >
                <h3 class="fonttitle" style="margin-top: 20px;"> VÍDEOS </h3>
                <div class="border"></div>

                <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" style="margin-top: 20px; ">

                    <div class="carousel-inner">

                        @php $linkscont3 = 0; @endphp
                        @foreach($videos as $video)


                            <div class="carousel-item @if($linkscont3 == 0) active @endif" style="max-height: 500px; ">

                                @php


                                    $itens = parse_url ($video->url);
                                    if(isset($itens['query'])){
                                    parse_str($itens['query'], $params);


                                @endphp
                                <iframe class="yt-hd-thumbnail" width="100%" height="480"
                                        src="https://www.youtube.com/embed/{{$params['v']}}?rel=0&controls=0&;showinfo=0"
                                        class="d-block w-100" alt="First slide" frameborder="0"
                                        allow="accelerometer; autoplay; encrypted-media; gyroscope;
                                 picture-in-picture" allowfullscreen >

                                </iframe>

                                @php } $linkscont3++; @endphp
                            </div>
                        @endforeach
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators2"  style="top: -170px;" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators2" style="top: -170px;"  role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>




            </div>
            <div class="col-md-5 offset-xl-1 offset-lg-1 offset-md-1 " style="text-align: center;" >

                <h3 class="fonttitle" style="margin-top: 20px;"> DIÁRIO OFICIAL </h3>
                <div class="border"></div>
                <center>
                    <div id='calendar'></div>
                </center>
            </div>
        </div>
    </div>
    @if(isset($modal->status))
        @if($modal->status ==1)
            <div class="modal fade" id="madara" style="z-index: 100000;" tabindex="-1" role="dialog" aria-
                 labelledby="myLargeModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header" style="background-color: var(--backgroud-header); color: var(--text-header);">
                            <h5 class="modal-title"> {{$modal->titulo}}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <center> <img style="text-align: center;" src="{{$modal->corpo}}" width="100%" alt=""></center>

                        </div>

                    </div>
                </div>
            </div>
        @endif
    @endif
    <div class="modal fade " id="exampleModal2"  tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document" style="margin:100px  auto;">
            <div class="modal-content">

                <div class="modal-header colorbg text-white">
                    <h5 class="modal-title " id="exampleModalLabel"> </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>

                </div>

            </div>

        </div>

    </div>


    <div class="modal fade " id="exampleModal"  tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document" style="margin:100px  auto;">
            <div class="modal-content">

                <div class="modal-header colorbg text-white">
                    <h5 class="modal-title " id="exampleModalLabel">BAIXAR DIÁRIO OFICIAL</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    Tem certeza de que deseja baixar  o Diário Oficial?


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <a download="" class="btn colorbg text-white" id="dataComfirmOK">BAIXAR</a>

                    <a target="_blank" class="btn colorbg text-white" id="dataComfirmvisu">VISUALIZAR</a>
                </div>

            </div>

        </div>

    </div>
@endsection



@section('post-script')

    <script src='{{ asset('templates/prefeitura1/js/core/main.js') }}'></script>
    <script src='{{ asset('templates/prefeitura1/js/daygrid/main.js') }}'></script>



    <script src='{{ asset('templates/prefeitura1/js/interaction/main.min.js') }}'></script>
    <script src='{{ asset('templates/prefeitura1/js/timegrid/main.min.js') }}'></script>
    <script src='{{ asset('templates/prefeitura1/js/core/locales/pt-br.js') }}'></script>



    <script>





        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {



                plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
                monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],

                locale: 'pt-br',
                defaultView: 'dayGridMonth',
                contentHeight:"auto",

                header: {
                    left: 'prev ',
                    center: 'title',
                    right: 'next'
                },
                dayRender: function(date, cell) {


                },
                events: [

                        @foreach($diarios as $diario)
                    {

                        title: '  Baixar',
                        allDay : true,
                        start: '{{$diario->dataversite->format('Y-m-d')}}',
                        url: '{{$diario->url_pdf}}',
                        color: 'var(--backgroud-header)'


                    },

                        @endforeach

                        @foreach($feriados as $diario)
                    {

                        title: 'Feriado',
                        allDay : true,
                        start: '{{$diario->data->format('Y-m-d')}}',
                        url: '{{$diario->name}}',
                        color: '{{$diario->cor}}'

                    },

                    @endforeach


                ],
                eventClick: function(info) {
                    info.jsEvent.preventDefault(); // don't let the browser navigate

                    if (info.event.title == 'Feriado' ) {

                        $('#exampleModal2').modal('show');
                        $('#exampleModal2').find('.modal-title').text('Feriado de '+info.event.url)

                    }
                    else{


                        if (info.event.url) {
                            console.log('madara');

                            $('#exampleModal').modal('show');
                            $('#dataComfirmOK').attr('href', info.event.url);
                            $('#dataComfirmvisu').attr('href', info.event.url);
                        }
                    }
                }

            });




            calendar.render();
        });

        $(document).ready(function() {
            $('#madara').modal('show');
        })
        $('#myCarousel').carousel({
            interval: 10000
        })
        $('#carouselExampleIndicators2').carousel({
            pause: true,
            interval: false

        })
    </script>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>

    <script type="text/javascript">



        $(document).ready(function(){
            $('.madara').click(function(ev){
                var href = $(this).attr('href');
                if(!$('#confirm-delete').length){
                    $('body').append('<div class="modal fade" style="z-index: 30000;" id="confirm-delete" tabindex="-1" role="dialog" ' +
                        'aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog">' +
                        '<div class="modal-content"><div class="modal-header colorbg text-white">BAIXAR DIÁRIO OFICIAL' +
                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                        '<span aria-hidden="true">&times;</span></button></div><div class="modal-body">' +
                        'Tem certeza de que deseja baixar  o Diário Oficial?</div><div class="modal-footer">' +
                        '<button type="button" class="btn btn-success" data-dismiss="modal">Cancelar' +
                        '</button><a class="btn colorbg text-white" id="dataComfirmOK">BAIXAR</a><' +
                        '/div></div></div></div>');
                }
                $('#dataComfirmOK').attr('href', href);
                $('#confirm-delete').modal({show: true});
                return false;

            });
        });

    </script>
    <script src="{{ asset('js/jQuery.YouTube.HD.Thumbnail.js')}}"></script>
    <script>
        (function ($) {
            $('iframe.yt-hd-thumbnail').youTubeHDThumbnail({darkenThumbnail: false});
            $('iframe.yt-hd-thumbnail-darken').youTubeHDThumbnail({darkenThumbnail: true});
        })(jQuery);
    </script>
@endsection