@extends('layouts.app')


@section('content')
<b-modal v-model="showAusenciaModal" hide-footer title="Ausencia">
    <div v-html="ausenciaContent"></div>
</b-modal>

<b-modal v-model="showContactoModal" hide-footer title="Contacto">
    <div v-html="contactoContent"></div>
</b-modal>

<div class="row">
    <div class="col-sm-9 px-1 order-sm-1 order-2 masonry-item">
        <div class="layers bd bgc-white">
            <div class="w-100 ">
                <h5 class="bdB p-5 bg-muni c-white title">Noticias</h5>
                <div class="container">


<section class="d-none">
    <div class="row">
        <div class="col-12 pb-5">
            <section class="row noticiasv2">
                <div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1">
                    <div id="featured" class="carousel slide carousel" data-ride="carousel">
                        <div class="carousel-inner">
                            <div v-if="noticias[0]!=undefined" class="carousel-item active">
                                <div class="card border-0 rounded-0 text-light overflow zoom">
                                    <div class="position-relative">
                                        <div class="ratio_left-cover-1 image-wrapper">
                                            
                                            <a :href="router('noticias.show',{'noticia':noticias[0].id})">
                                           
                                                <img v-if="noticias[0].media[0]!=undefined" class="img-fluid w-100"
                                                     :src="router('index')+'storage/'+noticias[0].media[0].directory+'/'+noticias[0].media[0].filename+'.'+noticias[0].media[0].extension"
                                                     :alt="noticias[0].titulo"/>
                                            </a>
                                        </div>
                                        <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
                                            <!--title-->
                                            <a :href="router('noticias.show',{'noticia':noticias[0].id})">
                                                <h2 class="h3 post-title text-white my-1">@{{ noticias[0].titulo }}</h2>
                                            </a>
                                            <!-- meta title -->
                                            <div class="news-meta">
                                                <span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span>
                                                <span class="news-date">Oct 22, 2019</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>     
                </div>
                <div class="col-12 col-md-6 pt-2 pl-md-1 mb-3 mb-lg-4">
                    <div class="row">
                        <!--news box-->
                        <div class="col-6 pb-1 pt-0 pr-1">
                            <div v-if="noticias[1]!=undefined" class="card border-0 rounded-0 text-white overflow zoom">
                                <div class="position-relative">
                                    <!--thumbnail img-->
                                    <div class="ratio_right-cover-2 image-wrapper">
                                        <a :href="router('noticias.show',{'noticia':noticias[1].id})">
                                            <img v-if="noticias[1].media[0]!=undefined" class="img-fluid"
                                                 :src="router('index')+'storage/'+noticias[1].media[0].directory+'/'+noticias[1].media[0].filename+'.'+noticias[1].media[0].extension"
                                                 :alt="noticias[1].titulo"/>
                                        </a>
                                    </div>
                                    <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
                                        <!-- category -->
                                        <a class="p-1 badge badge-primary rounded-0" :href="router('noticias.show',{'noticia':noticias[1].id})">Lifestyle</a>

                                        <!--title-->
                                        <a :href="router('noticias.show',{'noticia':noticias[1].id})">
                                            <h2 class="h5 text-white my-1">@{{ noticias[1].titulo }}</h2>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!--news box-->
                        <div class="col-6 pb-1 pl-1 pt-0">
                            <div v-if="noticias[2]!=undefined" class="card border-0 rounded-0 text-white overflow zoom">
                                <div class="position-relative">
                                    <!--thumbnail img-->
                                    <div class="ratio_right-cover-2 image-wrapper">
                                        <a :href="router('noticias.show',{'noticia':noticias[2].id})">
                                            <img v-if="noticias[2].media[0]!=undefined" class="img-fluid"
                                                 :src="router('index')+'storage/'+noticias[2].media[0].directory+'/'+noticias[2].media[0].filename+'.'+noticias[2].media[0].extension"
                                                 :alt="noticias[2].titulo"/>
                                        </a>
                                    </div>
                                    <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
                                        <!-- category -->
                                        <a class="p-1 badge badge-primary rounded-0" :href="router('noticias.show',{'noticia':noticias[2].id})">Motocross</a>
                                        <!--title-->
                                        <a :href="router('noticias.show',{'noticia':noticias[2].id})">
                                            <h2 class="h5 text-white my-1">@{{ noticias[2].titulo }}</h2>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!--news box-->
                        <div class="col-6 pb-1 pr-1 pt-1">
                            <div v-if="noticias[3]!=undefined" class="card border-0 rounded-0 text-white overflow zoom">
                                <div class="position-relative">
                                    <!--thumbnail img-->
                                    <div class="ratio_right-cover-2 image-wrapper">
                                        <a :href="router('noticias.show',{'noticia':noticias[3].id})">
                                            <img v-if="noticias[3].media[0]!=undefined" class="img-fluid"
                                                 :src="router('index')+'storage/'+noticias[3].media[0].directory+'/'+noticias[3].media[0].filename+'.'+noticias[3].media[0].extension"
                                                 :alt="noticias[3].titulo"/>
                                        </a>
                                    </div>
                                    <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
                                        <!-- category -->
                                        <a class="p-1 badge badge-primary rounded-0" :href="router('noticias.show',{'noticia':noticias[3].id})">Fitness</a>
                                        <!--title-->
                                        <a :href="router('noticias.show',{'noticia':noticias[3].id})">
                                            <h2 class="h5 text-white my-1">@{{noticias[3].titulo}}</h2>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!--news box-->
                        <div class="col-6 pb-1 pl-1 pt-1">
                            <div v-if="noticias[0]!=undefined" class="card border-0 rounded-0 text-white overflow zoom">
                                <div class="position-relative">
                                    <!--thumbnail img-->
                                    <div class="ratio_right-cover-2 image-wrapper">
                                        <a :href="router('noticias.show',{'noticia':noticias[4].id})">
                                            <img v-if="noticias[4].media[0]!=undefined" class="img-fluid"
                                                 :src="router('index')+'storage/'+noticias[4].media[0].directory+'/'+noticias[4].media[0].filename+'.'+noticias[4].media[0].extension"
                                                 :alt="noticias[4].titulo"/>
                                        </a>
                                    </div>
                                    <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
                                        <!-- category -->
                                        <a class="p-1 badge badge-primary rounded-0" :href="router('noticias.show',{'noticia':noticias[4].id})">Adventure</a>
                                        <!--title-->
                                        <a :href="router('noticias.show',{'noticia':noticias[4].id})">
                                            <h2 class="h5 text-white my-1">@{{ noticias[4].titulo }}</h2>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end news box-->
                    </div>
                </div>
                <!--End box news-->
            </section>
            <!--END SECTION-->
        </div>
    </div>
    </section>
    <!--end code-->



                    <section class="noticias">
                    <div class="row ">
                            @foreach($noticias as $noticia)
                            <div class="col-sm-12 col-md-6 col-lg-4 mb-4 p-5">
                            <div class="card text-dark card-has-bg click-col" style="background-image:url('{{ (($noticia->getMedia('portada')->first()!=null)?$noticia->getMedia('portada')->first()->getUrl() : asset('img/logo.png')) }}');">
                                <img class="card-img d-none" src="{{ (($noticia->getMedia('portada')->first()!=null)?$noticia->getMedia('portada')->first()->getUrl() : asset('img/logo.png')) }}" alt="{{$noticia->titulo}}">
                                <div class="card-img-overlay d-flex align-items-end">
                                    <div class="text-light">
                                    <small><i class="far fa-clock"></i> {{ fechaFormato($noticia->created_at, 'd/m/Y') }}</small>
                                        <h4 class="card-title mt-0 "><a class="text-white" href="{{ route('noticias.show', ['noticia' => $noticia]) }}">{{ $noticia->titulo}}</a></h4>         
                                    </div>
                                    <div class="position-absolute text-light" style="bottom: 0;right: 0;">
                                        <div class="m-10">
                                            <a class="text-light" href="javascript:void(0)" @click="likeNoticia({{$noticia->id}})">
                                                <i class="fa-regular fa-thumbs-up"></i> <span id="like-noticia-{{$noticia->id}}">{{ $noticia->likes_count}}</span>
                                            </a>

                                            <a class="text-light" href="{{ route('noticias.show', ['noticia' => $noticia]) }}#boton-comentar">
                                                <i class="fa-regular fa-comments"></i> {{ $noticia->allcomentarios_count}}
                                            </a>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            @endforeach
                    </div>

                    </section>

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

        @if($noticias->count() === 0)
        <b-card>
            No hay noticias por el momento
        </b-card>
        @endif
    </div>

    <div class="col-sm-3 px-1 order-1 masonry-item">
        <div class="layers bd bgc-white">
            <div class="layer w-100 mB-20">
                <h5 class="bdB p-5 bg-muni c-white title">Firmantes de hoy ({{ date('d/m/Y') }})</h5>
                <div class="body p-5">
                    <div class="mb-2"><strong></strong></div>

                    @foreach($firmantes as $firmante)
                    <div class="mb-1">
                        <!-- <h5>{{ $firmante->direccion }}</h5> -->
                        <!-- <div>{{ $firmante->firmante->label }}</div>-->
                        <div>
                            <strong>
                                @if($firmante->nota)
                                *
                                @endif
                                {{$firmante->firmante->nombres}}
                            </strong>
                            - {{$firmante->firmante->puesto}}
                        </div>
                    </div>
                    @endforeach


                    <div v-if="showOtrosFirmantes">

                        @foreach($otrosfirmantes as $firmante)
                        <div class="mb-1">
                            <div>
                                <strong>
                                    @if($firmante->nota)
                                    *
                                    @endif
                                    {{$firmante->firmante->nombres}}
                                </strong>
                                - {{$firmante->firmante->puesto}}
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @if($firmantes->count() === 0)
                    <div>No se asignaron firmantes para hoy</div>
                    @endif


                    <div class="d-flex justify-content-end mt-1">
                        <button @click="showOtrosFirmantes =!showOtrosFirmantes" class="btn btn-link"><span v-if="!showOtrosFirmantes">Ver más</span><span v-if="showOtrosFirmantes">Ver menos</span></button>
                    </div>
                    <div class="d-flex justify-content-end mt-1">
                        <a href="{{ route('calendario-firmante.index') }}" class="btn btn-link">Ver Todos</a>
                    </div>

                </div>
            </div>


            <div class="layer w-100 mB-20">
                <h5 class="bdB p-5 bg-muni c-white title">Cumpleaños de Hoy ({{ date('d/m/Y') }})</h5>
                <div class="body p-5">

                    @foreach($cumpleanios as $cumple)
                    <b-media tag="li" vertical-align="top">
                        <template v-slot:aside>
                            <a href="#" v-b-modal.modal-saludocumpleanios @click.preventDefault="userCumple = {{ json_encode($cumple) }}" ><b-img width="24" alt="" src="{{$cumple['imagen'] }}"></b-img></a>
                        </template>
                        <a href="#" v-b-modal.modal-saludocumpleanios @click.preventDefault="userCumple = {{ json_encode($cumple) }}" class=" mt-0 mb-1"><b>{{$cumple['nombre'] }}</b></a>
                    </b-media>
                    @endforeach
                    <modal-cumpleanios :user="userCumple"></modal-cumpleanios>
                    <div class="d-flex justify-content-end">
                        <a href="{{route('users.cumpleanios.index') }}" class="btn btn-link">Ver Todos</a>
                    </div>
                </div>
            </div>

            <div class="layer w-100 mB-20">
                <h5 class="bdB p-5 bg-muni c-white title">Funcionarios Ausentes</h5>
                <div class="body p-5">

                    @foreach($ausentes as $ausente)
                    <div class="mb-1">
                        <div style="cursor: pointer" @click="mostrarAusencia({{ $ausente->id }})">
                            {{ $ausente->funcionario->full_name }}
                            <span class="fa fa-eye"></span>
                        </div>
                    </div>
                    @endforeach
                    <div class="d-flex justify-content-end mt-1">
                        <a href="{{ route('funcionarios-ausentes.index') }}" class="btn btn-link">Ver Todos</a>
                    </div>
                </div>
            </div>

            <widget-clima></widget-clima>


        </div>

      
    @endsection

    @push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                showAusenciaModal: false,
                showOtrosFirmantes: false,
                ausenciaContent: '',
                telefono: '',
                contactos: [],
                showContactoModal: false,
                contactoContent: '',
                modal_responder: null,
                onLoadContactosBounced: null,
                buttonClicked: false,
                selenc: [],
                selected: -1,
                sel_encuesta: [],
                click_enabled: true,
                userCumple:{},
                noticias:@json($noticias),
                loading: false,
                errors: {},
                disabled: false,
                status: null,
                count: 0,
                opciones: [],
                preguntas: [],
                resultado: [],
                encuesta_id: "",
                datos: [],
                respuestas: [],
                cumpleanios: @json($cumpleanios),
            }),

            created() {
               // console.log(Router())
                //this.onLoadContactosBounced = this.onLoadContactos()
                console.log(route);
            },

            methods: {
                router(nombre,params){
                    return route(nombre,params);
                },
                likeNoticia(id) {
                    this.$http.post(route('noticias.like'), {'idnoticia': id})
                    .then(
                        res => {
                            $("#like-noticia-" + id).animate({
                                opacity: 0
                            }, 0);
                            $("#like-noticia-" + id).animate({
                                opacity: 1
                            }, 1000);
                            $("#like-noticia-" + id).html(res.data.likes);


                        }
                    ).catch(
                        err => {

                            if (err.response.status === 500) {
                                alert(err.response.data.message)
                            }

                            if (err.response.status === 422) {
                                alert(err.response.data.errors)
                            }
                        }
                    );
                },
                mostrarAusencia(id) {
                    this.$http.get(
                        route('funcionarios-ausentes.showid', {id}
                        )
                    ).then(
                        res => {
                            this.ausenciaContent = res.data.content
                            this.showAusenciaModal = true
                        }
                    );
                },

                onChange($event) {
                    if (this.selected != -1) {
                        this.click_enabled = false;
                    } else {
                        this.click_enabled = true;
                    }
                },

                onLoadContactos() {
                    return this.$_.debounce(() => {
                        $("#icono-boton-contactos").removeClass("ti ti-search").addClass(
                            "fa fa-spinner fa-pulse fa-fw");
                        $("#icono-boton-contactos").parent("button").attr("disabled", "disabled");
                        this.$http.get( route('anexos-actualizados.contactos.index') , {
                                    params: {
                                        buscar: this.telefono
                                    }
                                })
                            .then(res => {
                                this.contactos = res.data
                                $("#icono-boton-contactos").removeClass("fa fa-spinner fa-pulse fa-fw")
                                    .addClass("ti ti-search");
                                $("#icono-boton-contactos").parent("button").removeAttr("disabled");
                            })
                    }, 500)
                },

                onShowContacto(id) {
                    this.$http.get(route('anexos-actualizados.contactos.show', {
                            id
                        }))
                        .then(res => {
                            this.contactoContent = res.data.content
                            this.showContactoModal = true
                        })
                },

                Responder(encuestas) {
                    this.modal_responder = !this.modal_responder;
                    this.sel_encuesta = encuestas[this.selected];
                },

                onSubmitResponder() {
                    this.disabled = true;
                    var pregs = this.sel_encuesta.preguntas;
                    var j = 0;

                    this.opciones.forEach(
                        (el, index) => {
                            this.respuestas.push({
                                pregunta_id: pregs[j].id,
                                opcion_id: el
                            });
                            console.log(index);
                            j++;
                        }
                    );

                    const formData = new FormData;
                    formData.append(
                        'respuestas',
                        JSON.stringify(this.respuestas)
                    );

                    formData.append(
                        'encuesta_id',
                        this.sel_encuesta.id
                    );

                    // this.$http.post(
                    //     route('encuestas.respuesta'),
                    //     formData
                    // ).then(
                    //     res => {
                    //         window.location = '{{ route('home') }}'
                    //     }
                    // ).catch(
                    //     err => {
                    //         if (err.response.status === 500) {
                    //             this.status = err.response.data.status
                    //         }

                    //         if (err.response.status === 422) {
                    //             this.errors = err.response.data.errors
                    //         }
                    //     }
                    // );
                },

                toggleModal() {
                    this.$refs['my-modal'].toggle('#toggle-btn')
                },
            },

            watch: {
                showAusenciaModal(value) {
                    if (!value) {
                        this.ausenciaContent = ''
                    }
                },

                showContactoModal(value) {
                    if (!value) {
                        this.contactoContent = ''
                    }
                },

                telefono(value) {
                    console.log(value)
                    if (value.trim() != "") {
                        this.onLoadContactosBounced();
                    } else {
                        this.contactos = []
                    }

                }
            }
        })
    </script>
    @endpush