@extends('layouts.app')

@push('head')
    <style>
        .event-menu {
            position: absolute;
            min-height: 120px;
            min-width: 300px;
            z-index: 1050;
            background-color: white;
            padding: 20px;
        }
        .vdr{
            top: 0;
            left: 0;
            width:0px!important;
            height:0px!important;
            z-index: 9999!important;
        }
    </style>
@endpush

@section('content')
    <div v-html="mensaje_respuesta"></div>
    <div class="bgc-white p-20 bd">
        @can('calendario-firmante.edit')
        <b-modal id="asignar-firmante" hide-footer title="Asignar Firmante al Calendario" size="lg">
            <b-form @submit="onSubmit">
                <b-form-group horizontal label="Dirección" label-for="direccion">
                    <v-select
                        @change="onChange($event)"
                        v-model="direccionActual"
                        label="nombre"
                        :options="direccionesCreate">
                    </v-select>
                </b-form-group>

                <template v-if="direccionActual">
                    <b-form-group horizontal label="Firmante" label-for="firmante">
                        <v-select @change="onChange($event)" v-model="firmanteActual" id="firmante"
                                  :options="direccionActual.firmantes">
                        </v-select>
                    </b-form-group>
                </template>

                <b-form-group horizontal label="Nota" label-for="nota">
                    <input v-model="nota" class="form-control" type="text" name="nota">
                </b-form-group>

                <b-form-group v-if="actionType === 'CREATE' || actionType === 'EDIT'" horizontal
                              label="Selección Fecha">
                    <b-radio-group v-model="dateType" id="dateType" name="dateType">
                        <b-radio value="SINGLE">Simple</b-radio>
                        <b-radio value="RANGE">Rango</b-radio>
                    </b-radio-group>
                </b-form-group>

                <b-form-group label-cols-sm label="Fecha" label-for="fecha">
                    <datepicker v-model="fecha"
                                id="fecha" name="fecha"
                                bootstrap-styling calendar-button calendar-button-icon="fa fa-calendar"
                                monday-first
                                :language="dateLang" :format="customFormat"></datepicker>
                </b-form-group>

                <template v-if="dateType === 'RANGE'">
                    <template v-if="actionType === 'CREATE' || actionType === 'EDIT'">
                        <b-form-group horizontal label="Fecha Fin" label-for="fecha_fin">
                            <datepicker v-model="fecha_fin"
                                        id="fecha_fin" name="fecha_fin"
                                        bootstrap-styling calendar-button calendar-button-icon="fa fa-calendar"
                                        monday-first
                                        :language="dateLang" :format="customFormat">
                            </datepicker>
                        </b-form-group>
                    </template>
                </template>
                    <div class="d-flex justify-content-end">
                        <button class="btn btn-primary" :disabled="sending">Guardar</button>
                    </div>
            </b-form>
        </b-modal>
        @endcan


        <vue-draggable-resizable :resizable="false">
            <div v-if="currentEvent" class="event-menu shadow" :style="eventMenuStyle" tabindex="0"
                 @keyup.esc="onClickAway">

                <div class="d-flex justify-content-end">
                    @can('calendario-firmante.edit')
                        <div class="mr-3" style="cursor: all-scroll;">
                            <span class="fa fa-trash" @click="onDeleteClick(currentEvent.data)"></span>
                        </div>

                        <div class="mr-3" style="cursor: all-scroll;">
                            <span class="fa fa-edit" @click="onEditClick(currentEvent)"></span>
                        </div>
                    @endcan

                    <div @click="onClickAway" style="cursor: all-scroll;">
                        <span class="fa fa-close"></span>
                    </div>
                </div>

                <div class="row mb-2">
                    <div class="col-2">
                        <div class="d-flex justify-content-center align-items-center">
                            <div style="width: 10px; height: 10px"
                                 :style="{backgroundColor: currentEvent.color}"></div>
                        </div>
                    </div>
                    <div class="col-10">
                        <div>@{{ currentEvent.title }}</div>
                        <div>@{{ currentEvent.start.format('dddd, DD MMMM') }}</div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-2">
                        <span class="fa fa-calendar"></span>
                    </div>
                    <div class="col-10">@{{ currentEvent.data.user.name }}</div>
                </div>

                <div class="row">
                    <div class="col-2">
                        <span class="fa fa-edit"></span>
                    </div>
                    <div class="col-10">@{{ currentEvent.data.nota }}</div>
                </div>
            </div>
        </vue-draggable-resizable>

        <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="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" :config="config"
                                   @can('calendario-firmante.edit') @day-click="onDayClick" @endcan
                                   @event-selected="onEventClick"
                    ></full-calendar>
                </div>
            </div>
        </div>
    </div>
@endsection

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

            methods: {
                filtrar() {
                    this.$refs.calendar.fireMethod('refetchEvents')
                }
            },

            computed: {
                eventSources() {
                    const direcciones = this.direccionesSeleccionadas.map(e => e.nombre)

                    return [
                        {
                            events(start, end, timezone, callback) {
                                axios.get(`{{ route('calendario-firmante.eventos') }}`, {
                                    params: {
                                        start: start.format('YYYY-MM-DD'),
                                        end: end.format('YYYY-MM-DD'),
                                        direccion: direcciones
                                    }
                                }).then(response => {
                                    console.log(response.data.data)
                                    callback(response.data.data)
                                })
                            },
                            textColor: 'white !important'
                        }
                    ]
                }
            }
        })

        window.pageMix.push({
            data: () => ({
                direccionesCreate: @json($direccionesCreate),
                firmantes: [],
                evento_id: null,
                firmanteActual: null,
                direccionActual: null,
                fecha: null,
                nota: null,
                fecha_fin: null,
                sending: true,
                mensaje: null,
                currentEvent: null,
                eventMenuStyle: {
                    top: 0,
                    left: 0
                },
                actionType: 'CREATE',
                dateType: 'SINGLE'
            }),

            methods: {
                @can('calendario-firmante.edit')
                onDayClick(date, jsEvent, view) {
                    this.fecha = date.hour(0).add(1, 'day').toDate()
                    this.actionType = 'CREATE'
                    this.$root.$emit('bv::show::modal', 'asignar-firmante')
                },
                @endcan

                onEventClick(event, jsEvent, view) {
                    console.log(event)
                    console.log(jsEvent)

                    jsEvent.preventDefault()

                    this.eventMenuStyle = {
                        top: jsEvent.clientY + 'px',
                        left: jsEvent.clientX + 'px'
                    }

                    this.currentEvent = event
                },

                onChange(event) {
                    this.sending = false;
                },

                onClickAway() {
                    this.eventMenuStyle = {
                        top: 0,
                        left: 0
                    }

                    this.currentEvent = null
                },

                customFormat(date) {
                    return moment(date).format('DD/MM/YYYY')
                },

                @can('calendario-firmante.edit')
                onSubmit(ev) {
                    ev.preventDefault()
                    this.sending = true

                    const data = {
                        direccion: this.direccionActual.nombre,
                        firmante_id: this.firmanteActual.id,
                        fecha: moment(this.fecha).format('DD/MM/YYYY')
                    }

                    if (this.nota != null) {
                        data.nota = this.nota;
                    }

                    if (this.fecha_fin) {
                        data.fecha_fin = moment(this.fecha_fin).format('DD/MM/YYYY')
                    }

                    if (this.actionType == 'EDIT') {
                        data.evento_id = this.evento_id;
                    }

                    console.log(data)
                    axios.post(
                        "{{ route('calendario-firmante.store') }}",
                        data
                    ).then(res => {
                            this.sending = false
                            this.mensaje = res.data.message
                            console.log(res)

                            this.onResetClick()

                            this.$root.$emit('bv::hide::modal', 'asignar-firmante')
                            this.$refs.calendar.fireMethod('refetchEvents')

                            if (res.data.exito == true) {
                                this.mensaje_respuesta = "<div class='alert alert-success spacing' role='alert' v-show='show'>" + res.data.message + "</div>";
                            } else {
                                this.mensaje_respuesta = "<div class='alert alert-danger spacing' role='alert' v-show='show'>" + res.data.message + "</div>";
                            }

                            setTimeout(() => {
                                this.mensaje = null
                                this.mensaje_respuesta = "";
                            }, 5000)


                        }
                    ).catch(err => {
                        this.sending = false
                        console.log(err);
                    })
                },
                @endcan

                @can('calendario-firmante.edit')
                onDeleteClick(data) {
                    if (!this.sending) {
                        this.sending = true
                        this.$http.delete('{{ route('calendario-firmante.index') }}/' + data.id)
                            .then(res => {
                                this.sending = false
                                this.currentEvent = null

                                this.$refs.calendar.fireMethod('refetchEvents')
                            })
                            .catch(err => {
                                this.sending = false
                                console.log(err)
                            })
                    }
                },
                @endcan

                onEditClick({start, data}) {
                    //if (!this.sending) {
                    this.actionType = 'EDIT'
                    const direccionActual = this.direccionesCreate.filter(e => e.id === data.firmante.municipal_direccion_id)[0]
                    this.direccionActual = direccionActual
                    this.firmanteActual = direccionActual.firmantes.filter(e => e.id === data.firmante.id)[0]
                    this.fecha = start.format('MM/DD/YYYY')

                    this.nota = data.nota;
                    this.fecha_fin = moment(data.fecha_fin).format('MM/DD/YYYY');
                    console.log(this.fecha_fin)
                    console.log(this.fecha)
                    this.currentEvent = null

                    if (this.fecha != this.fecha_fin) {
                        this.dateType = 'RANGE'
                    } else {
                        this.dateType = 'SINGLE'
                    }

                    this.evento_id = data.id
                    //console(this.direccionActual + " " + this.firmanteActual + " " + this.fecha + this.actionType);
                    this.$root.$emit('bv::show::modal', 'asignar-firmante')
                    //}
                },

                onResetClick() {
                    this.firmanteActual = null
                    this.direccionActual = null
                    this.fecha = null
                    this.fecha_fin = null
                    this.dateType = 'SINGLE'
                }
            }
        })
    </script>
@endpush