@extends('evaluacionproveedores::layouts.app2')

@section('content')
<div class="container">
        <div class="columns personal-menu text-center vertical-center margin0">
            <div class="column">
                Zona de pruebas
            </div>
        </div>
        <div class="columns margin0 tile">
            <div class="column is-2 line-der">
                <aside class="menu">
                    <p class="menu-label">
                        Menu Principal
                    </p>
                    <ul class="menu-list">
                        <li @click="menu=0" class="hand-option">
                                <a :class="{'is-active' : menu==0 }">Proyectos</a>
                        </li>
                        <li @click="menu=1" class="hand-option">
                                <a :class="{'is-active' : menu==1 }">Proveedores</a>
                        </li>
                        <li @click="menu=2" class="hand-option">
                                <a :class="{'is-active' : menu==2 }">Reportes</a>
                        </li>
                    </ul>
                </aside>
            </div>
            <div class="column personal-content" v-if="menu==0">
                <div class="columns text-center">
                    <div class="column">
                        <h3>Proyectos</h3>
                    </div>
                </div>
               <p>Lista de Proyectos</p>
               <a class="btn btn-success" @click="openModal('proyecto','create')">Agregar Proyecto</a>
               <a class="btn btn-success" @click="openModal('proveedor','create')">Agregar Proveedor</a>

            </div>

            <div class="column" v-if="menu==1">
                <div class="columns">
                    <div class="column text-center">
                        <h3>Proyectos</h3>
                    </div>
                </div>
                <div class="columns">
                    <div class="column">
                        Tabla de  Proyectos
                    </div>
                </div>
            </div>
            <div class="column" v-if="menu==2">
                <div class="columns">
                    <div class="column text-center">
                        <h3>Proveedores</h3>
                    </div>
                </div>
                <div class="columns">
                    <div class="column">
                       Tabla Proveedores
                    </div>
                </div>
            </div>
        </div>
        <div class="columns margin0 text-center vertical-center personal-menu">
            <div class="column">Empleados 0</div>
            <div class="column">Departamentos 0</div>
            <div class="column">Cargo 0</div>
        </div>
</div>

<div :class="{'modal show' : modalProveedor}">
      <div class="modal-background"></div>
      <div class="modal-content">
           <div class="content">
                <h3 class="text-center">@{{titleModal}}</h3>
                <div class="field">
                     <p class="control" v-if="modalProveedor!=0">
                     <input class="input" placeholder="Departamento" 
                               v-if="modalProveedor==1">
                    </p>
                    
                    <div class="columns button-content">
                        <div class="column">
                            <a class="button is-success" @click="crearProveedor()" v-if="modalProveedor==1">Aceptar</a>
                        </div>
                        <div class="column">
                            <a class="button is-danger" @click="closeModal()">Cancelar</a>
                        </div>
                    </div>
              </div>
         </div>
         <button class="modal-close" @click="closeModal()"></button>
     </div>
</div>
@endsection
@section('script')
<script>
        let elemento = new Vue({
            el: '.app',
            data: {
                menu: 0,
                modalProveedor: 0,
                titleModal: '',
            },
            methods: {
                openModal(type, action, data = []) {
                    switch (type) {
                        case "proveedor":
                            switch (action) {
                                case 'create':
                                    {
                                        this.modalProveedor = 1;
                                        this.titleModal = 'Creación de Proyecto';
                                        break;
                                    }
                                case 'update':
                                    {
                                        break;
                                    }
                                case 'delete':
                                    {
                                        break;
                                    }

                            }
                            break;
                    }
                },
                closeModal() {
                    this.modalProveedor = 0;
                    this.titleModal = '';
                },
                crearProveedor() {

                }
            },
        })
</script>
@endsection