@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">Administración</li>
    <li class="breadcrumb-item"><a href="{{ route('users.index')}}">Usuarios</a></li>
    <li class="breadcrumb-item active" aria-current="page">Crear Nuevo Usuario</li>
  </ol>
</nav>
@stop
@section('content')
    <div class="bgc-white p-20 bd">
        <h2>Crear Usuario</h2>

        <b-form @submit="onSubmit">
            <div class="card mb-3">
                <div class="card-body row">
                    <b-form-group class="col-4" label="Rut">
                        <input v-model="rut" type="text" name="rut" id="rut" class="form-control" required>
                        <span class="muted">Formato: 1111111-1</span>

                        <input-error :errors="errors" nombre="rut"></input-error>
                    </b-form-group>

                    <b-form-group class="col-4" label="Nombres">
                        <input v-model="name" type="text" name="name" id="name" class="form-control" required>
                        <input-error :errors="errors" nombre="name"></input-error>
                    </b-form-group>

                    <b-form-group class="col-4" label="Apellidos">
                        <input v-model="last_name" type="text" name="last_name" id="last_name" class="form-control"
                               required>
                        <input-error :errors="errors" nombre="last_name"></input-error>
                    </b-form-group>

                    <b-form-group class="col-4" label="Correo Electronico">
                        <input v-model="email" type="email" name="email" id="email" class="form-control" required>
                        <input-error :errors="errors" nombre="email"></input-error>
                    </b-form-group>
                    <b-form-group class="col-4" label="Fecha de Nacimiento">
                        <input name="cumpleanios" :value="cumpleaniosHidden" type="hidden">
                        <datetime-picker v-model="cumpleanios"
                                        :first-day-of-week="1" :clearable="false"
                                        lang="es" 
                                        name="cumpleanios"
                                        :input-attr="{name: 'cumpleanios', id: 'cumpleanios'}" 
                                        :format="timeFormat">
                        </datetime-picker>
                    </b-form-group>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-body row">
                    <b-form-group class="col-4" label="Tipo Contrato">
                        <select v-model="tipo_contrato" name="tipo_contrato" id="tipo_contrato" class="form-control">
                            <option value="">Seleccione</option>
                            @foreach($tiposContrato as $tipoContrato)
                                <option value="{{ $tipoContrato }}">{{ $tipoContrato }}</option>
                            @endforeach
                        </select>

                        <input-error :errors="errors" nombre="tipo_contrato"></input-error>
                    </b-form-group>

                    <b-form-group class="col-4" label="Dirección Municipal">
                        <select v-model="direccion_id" name="direccion_id" id="direccion_id" class="form-control"
                                required>
                            <option value="">Seleccione</option>
                            @foreach($direcciones as $direccion)
                            <option value="{{ $direccion->id }}"   >{{ $direccion->nombre }}</option>
                            @endforeach
                        </select>

                        <input-error :errors="errors" nombre="direccion_id"></input-error>
                    </b-form-group>

                    <b-form-group class="col-4" label="Escalafón">
                        <select v-model="escalafon" name="escalafon" id="escalafon" class="form-control" required>
                            <option value="">Seleccione</option>
                            @foreach($escalafones as $escalafon)
                                <option value="{{ $escalafon }}">{{ $escalafon }}</option>
                            @endforeach
                        </select>

                        <input-error :errors="errors" nombre="escalafon"></input-error>
                    </b-form-group>

                    <b-form-group class="col-4" label="Grado">
                        <select v-model="grado" id="grado" class="form-control" required>
                            <option value="">Seleccione</option>
                            @foreach($grados as $grado)
                                <option value="{{ $grado }}">{{ $grado }}</option>
                            @endforeach
                        </select>

                        <input-error :errors="errors" nombre="grado"></input-error>
                    </b-form-group>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-body">
                    <b-form-group horizontal label="Contraseña">
                        <input v-model="password" type="password" name="password" id="password"
                               class="form-control">

                        <input-error :errors="errors" nombre="password"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Confirmar Contraseña">
                        <input v-model="password_confirmation" type="password" id="password_confirmation" class="form-control">
                    </b-form-group>
                    </div>
            </div>
            <div class="card mb-3">
            <div class="card-header">
                Roles
            </div>    
            <div class="card-body">
                    
                    <b-form-group horizontal label="">
                        <b-form-checkbox-group v-model="roles" stacked>
                            @foreach($roles as $key => $rol)
                            <b-form-checkbox value="{{ $rol->id }}"><b>{{ $rol->nombre }}</b> ({{$rol->modulo}})</b-form-checkbox>
                            @endforeach
                        </b-form-checkbox-group>

                        <input-error :errors="errors" nombre="roles"></input-error>
                    </b-form-group>
                </div>

                <div class="card-footer">
                    <div class="d-flex justify-content-end">
                        <button class="btn btn-primary" :disabled="loading">
                            <span>@{{ loading ? 'Guardando...' : 'Guardar' }}</span>
                            <span v-show="loading" class="fa fa-spinner fa-spin"></span>
                        </button>
                    </div>
                </div>
            </div>
        </b-form>
    </div>
@endsection


@push('pre-scripts')
    <script>
        const UserCreatePage = {
            data: () => ({
                rut: '',
                name: '',
                last_name: '',
                email: '',
                tipo_contrato: '',
                direccion_id: '{{ old('direccion_id','') }}',
                escalafon: '',
                grado: '',
                password: '',
                password_confirmation: '',
                roles: [],
                cumpleanios: '{{ fechaFormato(old('cumpleanios'), 'Y-m-d') }}',
                loading: false,
                errors: {},
                status: null
            }),
            computed: {
                timeFormat() {
                    let timeFormat = "DD/MM/YYYY";
                    return timeFormat;
                },
                cumpleaniosHidden() {
                    let val=this.$moment(this.cumpleanios).format('YYYY-MM-DD')
                if(val!='Invalid date')
                    return val;
                else
                    return '';
                    //return this.$moment(this.cumpleanios).format('YYYY-MM-DD')
                },
            },
            methods: {


                onSubmit(evt) {
                    evt.preventDefault()
                    if (!this.loading) {
                        this.loading = true

                        const data = {
                            rut: this.rut,
                            name: this.name,
                            last_name: this.last_name,
                            email: this.email,
                            tipo_contrato: this.tipo_contrato,
                            direccion_id: this.direccion_id,
                            escalafon: this.escalafon,
                            grado: this.grado,
                            password: this.password,
                            cumpleanios: this.$moment(this.cumpleanios).format('YYYY-MM-DD'),
                            password_confirmation: this.password_confirmation,
                            roles: this.roles,
                        };

                        this.$http.post('{{ route('users.store') }}', data)
                            .then(res => {
                                this.loading = false
                                window.location = '{{ route('users.index') }}'
                            })
                            .catch(err => {
                                this.loading = false

                                console.log(err)

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

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

        window.pageMix.push(UserCreatePage)
    </script>
@endpush