@extends('layouts.app')


@section('content')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

    <div class="images" v-viewer>
        <img src="">
    </div>
    <div class="bgc-white p-20 bd">
        <h2> Calendario de Reservas </h2>
        <br>

        @can('reservaequipamento.store')
            <div class="mb-3">
                <button @click="AgregarRecur()" class="btn btn-primary">
                    Agregar Recurso
                </button>
            </div>
        @endcan
        <br>
        <p>
            Este módulo permite informar a los funcionarios (as) la disponibilidad de recursos municipales.
            Para reservar comuníquese con cada responsable.
        </p>
        <div class="card mb-3">
            <div class="card-body">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>N°</th>
                                    <th>Recurso</th>
                                    <th>Responsable</th>
                                    <th>Contacto</th>
                                    <th>Anexo</th>
                                    <th>Correo</th>
                                    @can('reservaequipamento.store')
                                        <th>Acciones</th>
                                    @endcan
                                </tr>
                                </thead>
                                <tbody>
                                    @if(isset($recursos))
                                        @foreach($recursos as $recurso)
                                            <tr id="n{{ $recurso->id }}">
                                                <th>
                                                    {{ $recurso->id }}
                                                </th>
                                                <th>
                                                    <a v-b-tooltip.hover title="Click para mostrar calendario" href="#" @click="MostrarCal({{ $recurso }}, {{ $recurso->id }})">
                                                        {{ $recurso->recurso }}
                                                    </a>
                                                </th>
                                                <th>
                                                    {{ $recurso->responsable }}
                                                </th>
                                                <th>
                                                    {{ $recurso->contacto }}
                                                </th>
                                                <th>
                                                    {{ $recurso->anexo }}
                                                </th>
                                                <th>
                                                    {{ $recurso->correo }}
                                                </th>
                                                @can('reservaequipamento.store')
                                                <th>
                                                     <b-dropdown id="dropdown-1" text="Acciones" class="m-md-2" boundary="window">
                                                        @can('reservaequipamento.store')
                                                            <b-dropdown-item-button @click="Eliminar({{ $recurso->id }})">
                                                                Borrar
                                                            </b-dropdown-item-button>
                                                            <b-dropdown-item-button @click="Editar({{ $recurso }})">
                                                                Editar
                                                            </b-dropdown-item-button>
                                                        @endcan
                                                    </b-dropdown>
                                                </th>
                                                @endcan
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-body">
            <h4>Calendario</h4>
            <div class="card">
                <div v-html="calendario" class="card-body">

                </div>
            </div>
        </div>
    </div>
    
    
    <b-modal v-model="modal_recurso" hide-footer size="lg" ok-only title="Agregar Recurso">
        <b-form @submit="onSubmit">
            <b-form-group horizontal label="Recurso">
                <input v-model="datos.recurso" class="form-control" type="text" name="recurso" required>
            </b-form-group>

            <b-form-group horizontal label="Url">
                <input v-model="datos.url" class="form-control" type="text" name="url" required>
            </b-form-group>
            
            <b-form-group horizontal label="Responsable">
                <input v-model="datos.responsable" class="form-control" type="text" name="responsable" required>
            </b-form-group>

            <b-form-group horizontal label="Contacto">
                <input v-model="datos.contacto" class="form-control" type="text" name="contacto" required>
            </b-form-group>

            <b-form-group horizontal label="Anexo">
                <input v-model="datos.anexo" class="form-control" type="text" name="anexo" required>
            </b-form-group>

            <b-form-group horizontal label="Correo">
                <input v-model="datos.correo" class="form-control" type="text" name="correo" required>
            </b-form-group>

            <div class="d-flex justify-content-end">
                <button class="btn btn-primary" :disabled="btn_dis_agregar">agregar</button>
            </div>
        </b-form>
    </b-modal> 
    <b-modal v-model="modal_eliminar_recurso" hide-footer size="lg" ok-only title="Borrar Recurso">
        <b-form @submit="onSubmitEliminar">
            <div class="table-responsive text-center">
                <h4>¿Estas seguro de borrar este recurso?</h3>
            </div> 

            <div class="d-flex justify-content-end">
                <button class="btn btn-danger" :disabled="btn_dis_eliminar">Borrar</button>
            </div>
        </b-form>
    </b-modal> 
    <b-modal v-model="modal_editar_recurso" hide-footer size="lg" ok-only title="Editar Recurso">
        <b-form @submit="onSubmitEditar">
            <input v-model="datos_ed.id" class="form-control" type="numeric" name="recurso" hidden>
            <b-form-group horizontal label="Recurso">
                <input v-model="datos_ed.recurso" class="form-control" type="text" name="recurso" required>
            </b-form-group>

            <b-form-group horizontal label="Url">
                <input v-model="datos_ed.url" class="form-control" type="text" name="url" required>
            </b-form-group>
            
            <b-form-group horizontal label="Responsable">
                <input v-model="datos_ed.responsable" class="form-control" type="text" name="responsable" required>
            </b-form-group>

            <b-form-group horizontal label="Contacto">
                <input v-model="datos_ed.contacto" class="form-control" type="text" name="contacto" required>
            </b-form-group>

            <b-form-group horizontal label="Anexo">
                <input v-model="datos_ed.anexo" class="form-control" type="text" name="anexo" required>
            </b-form-group>

            <b-form-group horizontal label="Correo">
                <input v-model="datos_ed.correo" class="form-control" type="text" name="correo" required>
            </b-form-group>

            <div class="d-flex justify-content-end">
                <button class="btn btn-primary" :disabled="btn_dis_agregar">Editar</button>
            </div>
        </b-form>
    </b-modal> 
@endsection

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                id_recurso: null,
                modal_recurso: false,
                modal_eliminar_recurso: false,
                modal_editar_recurso: false,
                status: null,
                errors: null,
                calendario_code: null,
                btn_dis_agregar: false,
                btn_dis_eliminar: false,
                btn_dis_editar: false,
                calendario: "",
                recurso_id: null,
                datos: [],
                flag: true,
                datos_ed: {
                    id: -1,
                    recurso: "",
                    url: "",
                    responsable: "",
                    contacto: "",
                    anexo: "",
                    correo: ""
                }
            }),

            created() {
                
            },

            methods: {
                Editar(recurso) {
                    this.datos_ed.id          = recurso.id;
                    this.datos_ed.recurso     = recurso.recurso;
                    this.datos_ed.url         = atob(recurso.url);
                    this.datos_ed.responsable = recurso.responsable;
                    this.datos_ed.contacto    = recurso.contacto;
                    this.datos_ed.anexo       = recurso.anexo;
                    this.datos_ed.correo      = recurso.correo;
                    this.modal_editar_recurso = !this.modal_editar_recurso; 
                },

                MostrarCal(url, id) {
                    if (this.id_recurso != id) {
                        this.calendario = atob(url.url);
                        this.flag = false;

                        $("#n" + this.id_recurso).css({
                            "background": ""
                        });
                        $("#n" + id).css({
                            "background": "#E1F1E8"
                        });
                        this.id_recurso = id;
                    } else {
                        this.calendario = "";
                        this.flag = true;
                        $("#n" + this.id_recurso).css({
                            "background": ""
                        });
                    }
                },

                AgregarRecur() {
                    this.modal_recurso = !this.modal_recurso; 
                },

                Eliminar(id) {
                    this.modal_eliminar_recurso = !this.modal_eliminar_recurso;
                    this.recurso_id = id;
                },

                onSubmitEditar(ev) {
                    ev.preventDefault()
                    this.btn_dis_editar = true;
                    const formData = new FormData;

                    formData.append(
                        'id',  
                        this.datos_ed.id
                    );

                    formData.append(
                        'recurso',  
                        this.datos_ed.recurso
                    );
                    formData.append(
                        'url',  
                        this.datos_ed.url.replace('><', " width='100%' ><")
                    );
                    formData.append(
                        'recurso',  
                        this.datos_ed.recurso
                    );
                    formData.append(
                        'responsable',  
                        this.datos_ed.responsable
                    );
                    formData.append(
                        'contacto',  
                        this.datos_ed.contacto
                    );
                    formData.append(
                        'anexo',  
                        this.datos_ed.anexo
                    );
                    formData.append(
                        'correo',  
                        this.datos_ed.correo
                    );

                    this.$http.post(
                        '{{ route('reservaequipamento.edit') }}', 
                        formData
                    ).then(
                        res => {
                            console.log(res);
                            this.btn_dis_editar = false;
                            
                            window.location = '{{ route('reservaequipamento.index') }}'
                        }
                    ).catch(
                        err => {
                            if (err.response.status === 500) {
                                this.status = err.response.data.status
                            }

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

                onSubmitEliminar(ev) {
                    ev.preventDefault()
                    this.btn_dis_eliminar = true;

                    const formData = new FormData;

                    formData.append(
                        'recurso_id',  
                        this.recurso_id
                    );

                    this.$http.post(
                        '{{ route('reservaequipamento.destroy') }}', 
                        formData
                    ).then(
                        res => {
                            console.log(res);
                            this.btn_dis_eliminar = false;
                            
                            window.location = '{{ route('reservaequipamento.index') }}'
                        }
                    ).catch(
                        err => {
                            if (err.response.status === 500) {
                                this.status = err.response.data.status
                            }

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

                onSubmit(ev) {
                    ev.preventDefault()
                    this.btn_dis_agregar = true;
                    const formData = new FormData;

                    formData.append(
                        'recurso',  
                        this.datos.recurso
                    );
                    formData.append(
                        'url',  
                        this.datos.url.replace('><', " width='100%' ><")
                    );
                    formData.append(
                        'recurso',  
                        this.datos.recurso
                    );
                    formData.append(
                        'responsable',  
                        this.datos.responsable
                    );
                    formData.append(
                        'contacto',  
                        this.datos.contacto
                    );
                    formData.append(
                        'anexo',  
                        this.datos.anexo
                    );
                    formData.append(
                        'correo',  
                        this.datos.correo
                    );

                    this.$http.post(
                        '{{ route('reservaequipamento.store') }}', 
                        formData
                    ).then(
                        res => {
                            console.log(res);
                            this.btn_dis_agregar = false;
                            
                            window.location = '{{ route('reservaequipamento.index') }}'
                        }
                    ).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')
                }
            }    
        })
    </script>
@endpush