@extends('admin.layout.master')

@section('content')
    <main>
        <!-- Breadcrumb Area -->
        <div class="breadcrumb-area">
            <h1>Dashboard</h1>
            <ol class="breadcrumb">
                <li class=""><a href="{{ url('/admin') }}"><i class='bx bx-home-alt'
                            style="font-size: 18px;color: #F31519;"></i></a></li>
                <li class=""><a href="{{ url('/admin') }}">Principal </a></li>
                <li class="">&nbsp;&nbsp;/ Otras Operaciones</li>
                <li class="">&nbsp;&nbsp;/ <a href="{{ url('/admin/misdatos') }}">Mis Datos</a></li>
            </ol>
        </div>
        <!-- End Breadcrumb Area -->

        <div class="card mb-30">
            <!-- Mensajes de alerta estáticos -->
            <div class="alert alert-danger alert-dismissable" id="alert-error1" style="display:none;">
                <strong>Mensaje!</strong> Al subir la imagen tiene errores, prueba con otra imagen.
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </div>

            <div class="alert alert-danger alert-dismissable" id="alert-error2" style="display:none;">
                <strong>Mensaje!</strong> Ya existe un nombre con esta imagen, cambiale de nombre a la imagen.
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </div>

            <div class="alert alert-danger alert-dismissable" id="alert-error3" style="display:none;">
                <strong>Mensaje!</strong> Error al actualizar los datos.
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </div>

            <div class="alert alert-success alert-dismissable" id="alert-update" style="display:none;">
                <strong>Mensaje!</strong> Sus datos se modificaron satisfactoriamente.
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </div>

            <div class="card-body">
                <form class="form-horizontal" id="formuser">
                    @csrf
                    <div class="row">
                        <div class="col-lg-12"><strong>Mis Datos Personales</strong></div>

                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label>Nombres</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1"><i data-feather="user"></i></span>
                                    </div>
                                    <input name="usuario_id" type="hidden" class="form-control" value="{{ Auth::user()->id }}"
                                        required>
                                    <input name="tipo_usuario" type="hidden" class="form-control" value="{{ Auth::user()->tipo_usuario }}"
                                        required>
                                    <input name="nombre" type="text" placeholder="Nombres Completos"
                                        class="form-control" value="{{ Auth::user()->nombre }}" required>
                                </div>
                            </div>
                        </div>

                        <!-- Apellido Paterno -->
                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label>Apellido Paterno</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1"><i data-feather="user"></i></span>
                                    </div>
                                    <input name="apellido_paterno" type="text" placeholder="Apellido Paterno"
                                        class="form-control" value="{{ Auth::user()->apellido_paterno }}" required>
                                </div>
                            </div>
                        </div>

                        <!-- Apellido Materno -->
                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label>Apellido Materno</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1"><i data-feather="user"></i></span>
                                    </div>
                                    <input name="apellido_materno" type="text" placeholder="Apellido Materno"
                                        class="form-control" value="{{ Auth::user()->apellido_materno }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="form-group">
                                <label>Correo</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1"><i data-feather="mail"></i></span>
                                    </div>
                                    <input name="email" type="email" placeholder="Email" class="form-control"
                                        value="{{ Auth::user()->email }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label>Celular</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1"><i data-feather="phone"></i></span>
                                    </div>
                                    <input name="celular" type="text" placeholder="Celular" class="form-control"
                                        value="{{ Auth::user()->celular }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label>Foto perfil <small>Formatos Permitidos: *gif, *.jpg, *.jpeg, *.png</small></label>
                                <input name="AimagenA" type="hidden" class="form-control"
                                    value="{{ Auth::user()->imagen }}">
                                <input id="imagen" name="imagen" type="file" class="form-control" />
                            </div>
                            <div class="form-group">
                                <img class="img-rounded"
                                    src="{{ Auth::user()->imagen ? asset('imagenes_usuarios/' . Auth::user()->imagen) : asset('assets/img/user-1.png') }}"
                                    style="width:150px">
                            </div>
                        </div>

                        <!-- Contraseña -->
                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label>Contraseña (dejar en blanco si no deseas cambiarla)</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1"><i
                                                data-feather="lock"></i></span>
                                    </div>
                                    <input name="password" type="password" placeholder="Nueva contraseña"
                                        class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12 text-center">
                            <button type="submit" name="grabar" class="btn btn-success btn-lg"><i
                                    class="bx bx-save"></i> Actualizar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <script>
            $(document).ready(function() {
                $('#formuser').on('submit', function(e) {
                    e.preventDefault();

                    // Crear objeto FormData para manejar archivos
                    var formData = new FormData(this);

                    $.ajax({
                        url: '{{ url('/admin/usuarios/guardar') }}',
                        type: 'POST',
                        data: formData,
                        contentType: false, // No establecer el tipo de contenido
                        processData: false, // No procesar los datos
                        success: function(response) {
                            if (response.state==0) {
                                $('#alert-update').show().delay(5000).fadeOut();
                                location.reload();
                            }
                        },
                        error: function(response) {
                            $('#alert-error3').show().delay(5000).fadeOut();
                        }
                    });
                });
            });
        </script>
    </main>
@endsection