@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">Editar Usuario {{$user->full_name}}</li>
  </ol>
</nav>
@stop
@section('content')
    <div class="bgc-white p-20 bd">
        <h2>Editar 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" 
                                        :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 }}" {{ (old('direccion_id',$user->direccion_id)==$direccion->id)?'selected':'' }}  >{{ $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 row">
                    
                    <b-form-group class="col-12" label="¿Cambiar Contraseña?">
                        <b-form-checkbox v-model="changePassword" name="changePassword" switch size="lg"switch></b-form-checkbox>
                        <input-error :errors="errors" nombre="changePassword"></input-error>
                    </b-form-group>

                    <div class="col-12" v-show="changePassword">
                        <b-form-group class="col-12" 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 class="col-12" label="Confirmar Contraseña">
                            <input v-model="password_confirmation" type="password" id="password_confirmation" class="form-control">
                        </b-form-group>
                    </div>
                </div>
            </div>

            <div class="card">
                <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>
        window.pageMix.push({
            data: () => ({
                rut: '{{ $user->rut }}',
                name: '{{ $user->name }}',
                last_name: '{{ $user->last_name }}',
                email: '{{ $user->email }}',
                tipo_contrato: '{{ $user->tipo_contrato }}',
                direccion_id: '{{ $user->direccion_id }}',
                escalafon: '{{ $user->escalafon }}',
                grado: '{{ $user->grado }}',
                changePassword: {{ old('changePassword','false') }},
                password: '',
                password_confirmation: '',
                roles: @json($user->roles()->pluck('roles.id')),
                cumpleanios: '{{ fechaFormato(old('cumpleanios',$user->cumpleanios), 'Y-m-d') }} 12:00:00',
                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,
                            changePassword: this.changePassword,
                            password: this.password,
                            cumpleanios: this.$moment(this.cumpleanios).format('YYYY-MM-DD'),
                            password_confirmation: this.password_confirmation,
                            roles: this.roles,
                        };

                        this.$http.put('{{ route('users.update', $user) }}', 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) {
                                    alert("Error al editar el Perfil");
                                    this.errors = err.response.data.errors
                                }
                            })
                    }
                }
            }
        })
    </script>
@endpush