@extends('layouts.admin')
@section('contenido')
    <style>
        .imagen img {
            background: #f8eded;
            width: 100px;
            height: auto;
        }
    </style>
    {!!Form::open(array('url'=> route('usuario.update',$usuario->codUsuario) ,'method'=>'PUT','autocomplete'=>'off', 'files'=>true))!!}
    <div class="row mt-2">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="modal-title title_header" id="exampleModalLongTitle">
                        @if (auth()->user()->tipo == 'SECRETARIA')
                            Editar Doctor
                        @else
                            Editar Usuario
                        @endif
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="input-group a mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><span class="fas fa-signature fa-2x-x"></span><span
                                                class="tooltiptext">Ingrese Nombre de Usuario</span></span>
                                            </div>
                                            {{-- Código de Usuario para que función el unique de los campos --}}
                                            <input type="hidden" name="codUsuario" id="" value="{{ $usuario->codUsuario }}">
                                            <input type="text" class="form-control {{ $errors->has('nombres') ? 'is-invalid' : '' }}" name="nombres"
                                             placeholder="" @if (empty(old('nombres'))) value="{{ $usuario->nombres }}"
                                             @else
                                                                             value="{{ old('nombres') }}" @endif >
                                        </div>
                                        @if ($errors->has('nombres'))
                                            <div>
                                                <span class="text-danger">{{ $errors->first('nombres') }}</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="input-group a mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><span class="fas fa-id-card fa-2x-x" ></span><span
                                                class="tooltiptext">Ingrese número de Documento</span></span>
                                            </div>
                                            <input type="text" class="form-control {{ $errors->has('numDocumento') ? 'is-invalid' : '' }}" name="numDocumento"
                                             placeholder="" @if (empty(old('numDocumento'))) value="{{ $usuario->numDocumento }}"
                                             @else
                                                                             value="{{ old('numDocumento') }}" @endif>
                                        </div>
                                        @if ($errors->has('numDocumento'))
                                            <div>
                                                <span class="text-danger">{{ $errors->first('numDocumento') }}</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="input-group a mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><span class="fas fa-map-marker-alt fa-2x-x"></span><span
                                                class="tooltiptext">¿Cúal es su Ubicación?</span></span>
                                            </div>
                                            <input type="text" class="form-control {{ $errors->has('direccion') ? 'is-invalid' : '' }}" name="direccion"
                                             placeholder="" @if (empty(old('direccion'))) value="{{ $usuario->direccion }}"
                                             @else
                                                                             value="{{ old('direccion') }}" @endif>
                                        </div>
                                        @if ($errors->has('direccion'))
                                            <div>
                                                <span class="text-danger">{{ $errors->first('direccion') }}</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="input-group a mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><span  class="fas fa-phone fa-2x-x"></span><span
                                                class="tooltiptext">Ingrese su número Teléfonico</span></span>
                                            </div>
                                            <input type="text" class="form-control {{ $errors->has('telefono') ? 'is-invalid' : '' }}" name="telefono"
                                             placeholder="" @if (empty(old('telefono'))) value="{{ $usuario->telefono }}"
                                             @else
                                             value="{{ old('telefono') }}" @endif>
                                        </div>
                                        @if ($errors->has('telefono'))
                                            <div>
                                                <span class="text-danger">{{ $errors->first('telefono') }}</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="input-group a mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><span class="fas fa-at fa-2x-x"></span><span
                                                class="tooltiptext">Ingrese Correo Electrónico</span></span>
                                            </div>
                                            <input type="email" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}" name="email"
                                             placeholder=""  value="{{empty(old('email')) ? $usuario->email : old('email')}}" required>
                                        </div>
                                        @if ($errors->has('email'))
                                            <div>
                                                <span class="text-danger">{{ $errors->first('email') }}</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                @if (auth()->user()->tipo == 'ADMINISTRADOR')
                                    <div class="col-md-12" style="display: {{$usuario->codUsuario == '1' ? 'none' : 'block'}}">
                                        <div class="form-group">
                                            <div class="input-group a mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"><i class="fas fa-user fa-2x-x"></i><span
                                                        class="tooltiptext">Seleccione un Rol</span></span>
                                                </div>
                                                <select class="custom-select tipo" name="tipo" id="tipo">
                                                    @foreach ($tipos as $item)
                                                        @if ($item == $usuario->tipo)
                                                            <option value="{{ $item }}" selected>{{ $item }}</option>
                                                        @else
                                                            <option value="{{ $item }}">{{ $item }}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                            @if ($errors->has('tipo'))
                                                <div>
                                                    <span class="text-danger">{{ $errors->first('tipo') }}</span>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @else
                                    <select class="custom-select tipo" name="tipo" id="tipo" style="display: none">
                                        @foreach ($tipos as $item)
                                            @if ($item == $usuario->tipo)
                                                <option value="{{ $item }}" selected>{{ $item }}</option>
                                            @else
                                                <option value="{{ $item }}">{{ $item }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                @endif


                                <div class="col-md-12" id="codConsultorio">
                                    <div class="form-group">
                                        <div class="input-group a mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-user-tie fa-2x-x"></i><span
                                                    class="tooltiptext">Seleccione Consultorio</span></span>
                                            </div>
                                            <select class="custom-select" name="codConsultorio">
                                                @foreach ($consultorio as $item)
                                                    @if ($item->codConsultorio == $usuario->codConsultorio)
                                                        <option value="{{ $item->codConsultorio }}" selected>
                                                            {{ $item->nomConsul }}
                                                        </option>
                                                    @else
                                                        <option value="{{ $item->codConsultorio }}">{{ $item->nomConsul }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        @if ($errors->has('codConsultorio'))
                                            <div>
                                                <span class="text-danger">{{ $errors->first('codConsultorio') }}</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                @if (auth()->user()->tipo == 'ADMINISTRADOR')
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="input-group a mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-lock"></i><span
                                                class="tooltiptext">Contraseña</span></span>
                                            </div>
                                            <input type="password" class="form-control" name="password" placeholder="Cambiar Contraseña">
                                        </div>

                                    </div>
                                </div>
                                @endif
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="input-group a mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="far fa-image fa-2x-x"></i><span
                                                    class="tooltiptext">Seleccione Fotografia</span></span>
                                            </div>
                                            <input type="file" class="form-control " id="Imagen" name="foto">
                                        </div>
                                        @if ($errors->has('foto'))
                                            <div>
                                                <span class="text-danger">{{ $errors->first('foto') }}</span>
                                            </div>
                                        @endif
                                        <div id="img2" class="imagen ">
                                            @if (!empty($usuario->foto))
                                                <img src="{{ asset('Imagen/' . $usuario->foto) }}" width="100" height="100" >
                                            @endif
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
                <div class="card-footer text-center">
                    <div style="margin: 0px auto 0px auto">
                        <div style="margin: 0px auto 0px auto">
                            <a href="{{ route('usuario.index') }}"  type="button" class="btn btn-danger " >Cancelar</a>
                            <button type="submit" class="btn btn-primary">Guardar</button>
                         </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{ Form::close() }}
    <script>
        if (document.getElementById('tipo').value === 'ADMINISTRADOR' || document.getElementById('tipo').value === 'SECRETARIA'){
            document.getElementById('codConsultorio').style.display = 'none';
        }
    </script>
    <script>
        const selectElement = document.querySelector('.tipo');
        selectElement.addEventListener('change', (event) => {
            if(event.target.value.toString() === 'ADMINISTRADOR' || event.target.value.toString() === 'SECRETARIA'){
                document.getElementById('codConsultorio').style.display = 'none';
            }else{
                document.getElementById('codConsultorio').style.display = 'block';
            }

        });
    </script>
    <script>
        document.getElementById("Imagen").onchange = function(e) {
            console.log("das");
            // Creamos el objeto de la clase FileReader
            let reader = new FileReader();

            // Leemos el archivo subido y se lo pasamos a nuestro fileReader
            reader.readAsDataURL(e.target.files[0]);

            // Le decimos que cuando este listo ejecute el código interno
            reader.onload = function() {
                let preview = document.getElementById('img2'),
                    image = document.createElement('img');
                console.log("mostrado")
                image.src = reader.result;

                preview.innerHTML = '';
                preview.append(image);
            };
        }
    </script>
@endsection