@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"><a href="{{ route('user-profile.create')}}">Perfil</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{$user->full_name}}</li>
  </ol>
</nav>
@stop



@section('content')
    <div class="bgc-white p-20 bd">
        <h2>Editar Perfil</h2>

        <form method="post" action="{{ route('user-profile.store') }}" enctype="multipart/form-data">
            @csrf

            <div class="card mb-3">
                <div class="card-body">
                    @component('components.form-group', ['vertical' => true, 'titulo' => 'Imagen', 'nombre' => 'imagen'])
                        <div class="row">
                            <div class="col-12 col-md-4">
                                <img src="{{ $user->imagenPerfil() }}" alt="Perfil" class="img-fluid" style="max-width: 200px;">
                            </div>
                            <div class="col-12 col-md-8">
                                <b-file name="imagen" id="imagen"></b-file>
                            </div>
                        </div>
                    @endcomponent

                    @component('components.form-group', ['titulo' => 'Rut', 'nombre' => 'rut'])
                        <input type="text" name="rut" id="rut" class="form-control"
                               value="{{$user->rut}}"
                               disabled>
                    @endcomponent

                    @component('components.form-group', ['titulo' => 'Nombre', 'nombre' => 'name'])
                        <input type="text" name="name" id="name" class="form-control"
                               value="{{ $user->name }}" disabled>
                    @endcomponent

                    @component('components.form-group', ['titulo' => 'Apellidos', 'nombre' => 'last_name'])
                        <input type="text" name="last_name" id="last_name" class="form-control"
                               value="{{ $user->last_name }}"
                               disabled>
                    @endcomponent

                    @component('components.form-group', ['titulo' => 'Correo Electronico', 'nombre' => 'email'])
                        <input type="email" name="email" id="email" class="form-control"
                               value="{{ $user->email }}" disabled>
                    @endcomponent
                    @component('components.form-group', ['titulo' => 'Fecha de Nacimiento', 'nombre' => 'cumpleanios'])
                    <input name="cumpleanios" :value="cumpleaniosHidden" type="hidden">
                    <datetime-picker v-model="cumpleanios"
                                     :first-day-of-week="1" :clearable="false"
                                      lang="es" 
                                     :format="timeFormat">
                    </datetime-picker>
                    @endcomponent
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-body">
                    @component('components.form-group', ['titulo' => 'Tipo Contrato', 'nombre' => 'tipo_contrato'])
                        <select name="tipo_contrato" id="tipo_contrato" class="form-control">
                            <option value="">Seleccione</option>
                            @foreach($tiposContrato as $tipoContrato)
                                @if(old('tipo_contrato', $user->tipo_contrato) === $tipoContrato)
                                    <option value="{{ $tipoContrato }}" selected>{{ $tipoContrato }}</option>
                                @else
                                    <option value="{{ $tipoContrato }}">{{ $tipoContrato }}</option>
                                @endif
                            @endforeach
                        </select>
                    @endcomponent

                    @component('components.form-group', ['titulo' => 'Dirección Municipal', 'nombre' => 'direccion_id'])
                        <select name="direccion_id" id="direccion_id" class="form-control" required>
                            <option value="">Seleccione</option>
                            @foreach($direcciones as $direccion)
                                @if(old('direccion_id', $user->direccion_id) == $direccion->id)
                                    <option value="{{ $direccion->id }}" selected>{{ $direccion->nombre }}</option>
                                @else
                                    <option value="{{ $direccion->id }}">{{ $direccion->nombre }}</option>
                                @endif
                            @endforeach
                        </select>
                    @endcomponent

                    @component('components.form-group', ['titulo' => 'Escalafón', 'nombre' => 'escalafon'])
                        <select name="escalafon" id="escalafon" class="form-control" required>
                            <option value="">Seleccione</option>
                            @foreach($escalafones as $escalafon)
                                @if(old('escalafon', $user->escalafon) === $escalafon)
                                    <option value="{{ $escalafon }}" selected>{{ $escalafon }}</option>
                                @else
                                    <option value="{{ $escalafon }}">{{ $escalafon }}</option>
                                @endif
                            @endforeach
                        </select>
                    @endcomponent

                    @component('components.form-group', ['titulo' => 'Grado', 'nombre' => 'grado'])
                        <select name="grado" id="grado" class="form-control" required>
                            <option value="">Seleccione</option>
                            @foreach($grados as $grado)
                                @if(old('grado', $user->grado) === $grado)
                                    <option value="{{ $grado }}" selected>{{ $grado }}</option>
                                @else
                                    <option value="{{ $grado }}">{{ $grado }}</option>
                                @endif
                            @endforeach
                        </select>
                    @endcomponent
                </div>
                
            </div>

            <div class="card">
                <div class="card-body">
                    @component('components.form-group', ['titulo' => '¿Cambiar Contraseña?', 'nombre' => 'changePassword'])

                    <b-form-checkbox v-model="changePassword" name="changePassword" switch size="lg"switch></b-form-checkbox>

                    @endcomponent

                    <b-container v-if="changePassword">
                    @component('components.form-group', ['titulo' => 'Contraseña', 'nombre' => 'password'])
                        <input type="password" name="password" id="password"
                               value="{{ old('password') }}"
                               class="form-control">
                    @endcomponent

                    @component('components.form-group', ['titulo' => 'Confirmar Contraseña', 'nombre' => 'password_confirmation'])
                        <input type="password" name="password_confirmation" id="password_confirmation"
                               value="{{ old('password_confirmation') }}"
                               class="form-control">
                    @endcomponent
                    </b-container>
                    <div class="form-group row">
                        
                        <div class="col-md-12 ">
                            <button class="btn btn-primary pull-right">Guardar</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection
@push('pre-scripts')
<script> 
    window.pageMix.push({
        data: () => ({
            cumpleanios: '{{ fechaFormato(old('cumpleanios',$user->cumpleanios ), 'Y-m-d') ?? '' }} 12:00:00',
            changePassword:{{ old('changePassword',0) }},
        }),
        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 '';
            },
        }
    });



</script>

@endpush