@extends('layouts.app')
@section('breadcrumb')
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
    <li class="breadcrumb-item active" aria-current="page">Cumpleaños</li>
  </ol>
</nav>
@stop


@section('content')
    <div v-html="mensaje_respuesta"></div>
    <div class="bgc-white p-20 bd">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card mb-3">
                        <div class="card-body">
                        <b-form-group horizontal label="Usuario" label-for="nombre">
                            <b-form-input v-model="nombre" id="nombre" placeholder=""></b-form-input>
                        </b-form-group>
                            <b-form-group horizontal label="Seleccione Dirección" label-for="direccion">
                                <v-select v-model="direccionesSeleccionadas" id="direccion" name="direccion"
                                          :options="direcciones"
                                          label="nombre"
                                          multiple>
                                    <template slot="option" slot-scope="item">
                                        <div class="d-flex justify-content-between">
                                            <div>@{{ item.nombre }}</div>
                                            <div style="{backgroundColor: item.color, width: '50px', height: '20px'}"></div>
                                        </div>
                                    </template>
                                </v-select>
                            </b-form-group>
                        </div>
                       <div class="card-footer">
                            <div class="d-flex justify-content-end">
                                <button type="button" class="btn btn-primary" @click="filtrar">Filtrar</button>
                            </div>
                        </div>

                    </div>

                    <full-calendar ref="calendar" :event-sources="eventSources" @event-selected="onEventClick" :config="config"></full-calendar>
                </div>
            </div>
        </div>
    </div>
    <b-modal v-model="modalShow" size="lg" title="Información" ok-only>
        <b-media tag="li">
        <template v-slot:aside>
            <b-img  width="128" alt="placeholder" v-bind:src="modalData.imagen" ></b-img>
        </template>
        <h4 class="mt-0 mb-1">@{{modalData.title }}</h4>
        <p class="mb-0"><b>Fecha de Naciminto</b>: @{{modalData.cumpleanio}}<span style="color:white"> ( @{{modalData.edad}} Años ) </span></p>
        <p class="mb-0"><b>Email</b>: @{{modalData.email}}</p>
        <p class="mb-0"><b>Dirección</b>: @{{modalData.direccion}}</p>
        </b-media>

    </b-modal>
@endsection

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                direccionesSeleccionadas: [],
                direcciones: @json($direcciones),
                mensaje_respuesta: "",
                nombre:"",
                modalShow:false,
                modalData:{data:{direccion:{}}},
                config: {
                    weekends: true,
                    editable: false,
                    stick:true,
                    defaultView: 'month',
                    locale: 'es',
                    header: {
                        left: 'title',
                        center: '',
                        right: 'today prev,next'
                    }
                }
            }),

            methods: {
                filtrar() {
                    this.$refs.calendar.fireMethod('refetchEvents')
                },
                onEventClick(event, jsEvent, view) {
                    console.log("onEventClick");
                    console.log(event)
                    console.log(jsEvent)

                    jsEvent.preventDefault()

                    this.eventMenuStyle = {
                        top: jsEvent.clientY + 'px',
                        left: jsEvent.clientX + 'px'
                    }
                    this.modalData = event;
                    this.modalShow = true;
                    


                },   

            },

            computed: {
                eventSources() {
                    const direcciones = this.direccionesSeleccionadas.map(e => e.nombre)
                    const nombre = this.nombre
                    return [
                        {
                            events(start, end, timezone, callback) {
                                axios.get(`{{ route('users.cumpleanios.eventos') }}`, {
                                    params: {
                                        'start': start.format('YYYY-MM-DD'),
                                        'end': end.format('YYYY-MM-DD'),
                                        'direccion': direcciones,
                                        'nombre':nombre
                                    }
                                }).then(response => {
                                    console.log(response.data.data)
                                    callback(response.data.data)
                                })
                            },
                            textColor: 'white !important'
                        }
                    ]
                }
            }
        })
    </script>
@endpush