@extends('layouts.app')
@section('tituloModulo', 'DATOS DEL PERFIL')
@section('contenido')
    <form action="{{ route('usuarios.actualizar') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-md-4 col-12 text-center">
                <div class="card">
                    <div class="card-body">
                        @if ($datos->photo)
                            <img src="{{ asset('/assets/img/perfiles/' . $datos->photo) }}" class="rounded-circle mt-3"
                                alt="Logo" width="150">
                        @else
                            <img src="{!! asset('/assets/img/usuario.png') !!}" class="mt-3" alt="Logo" width="150" height="150">
                        @endif
                        <p class="control-label">Fotografía del usuario <br> {{ '( 500 * 500 px )' }}</p>
                        <input class="form-control mt-2" name="fotografia" type="file">
                    </div>
                </div>
            </div>
            <div class="col-md-8 col-12">
                <div class="card">
                    <div class="card-body">
                        <label class="control-label mt-3">Correo electrónico</label>
                        <input class="form-control mt-2" type="text" value="{{ $datos->email }}" disabled>
                        <label class="control-label is-required mt-3">Contraseña</label>
                        <div class="input-group mt-2">
                            <input type="password" name="password"
                                class="form-control @error('password') is-invalid @enderror" id="yourPassword"
                                value="{{ old('password') }}" autocomplete="new-password">
                            <button class="btn btn-outline-secondary toggle-password" type="button"
                                data-target="yourPassword">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                        @error('password')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        <label for="yourPasswords" class="form-label mt-3">Confirmar contraseña</label>
                        <div class="input-group mt-2">
                            <input type="password" name="password_confirmation" class="form-control" id="yourPasswords">
                            <button class="btn btn-outline-secondary toggle-password" type="button"
                                data-target="yourPasswords">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            @if (!auth()->user()->hasRole('Alumno'))
                <div class="col-md-12 col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <label class="control-label is-required mt-3">Nombre</label>
                                    <input class="form-control mt-2" type="text" name="name"
                                        value="{{ $datos->name }}">
                                </div>
                                <div class="col-md-6 col-12">
                                    <label class="control-label is-required mt-3">Teléfono WhatsApp</label>
                                    <input class="form-control mt-2" type="text" name="telefono"
                                        value="{{ $datos->phone }}">
                                    <small class="text-muted">Formato: 5512345678 Sin Espacios</small>
                                </div>
                                <div class="col-md-12 col-12 mt-2">
                                    <button type="submit" class="btn btn-success"><i class="bx bx-save"></i>
                                        Actualizar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            @if (auth()->user()->hasRole('Alumno'))
                <div class="col-md-12 col-12">
                    <div class="card">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title p-3">Datos Generales del Alumno</h5>
                                <form action="{{ route('alumnos.update', $datos->codigo_alum) }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="row mt-2">
                                        <div class="col-md-12 col-12">
                                            <label class="control-label">Matrícula</label>
                                            <input class="form-control" type="text" name="matricula"
                                                value="{{ $datos->matricula_alum }}" disabled>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <label class="control-label is-required">Nombre</label>
                                            <input class="form-control" type="text" name="name"
                                                value="{{ $datos->nombre_alum }}" required>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <label class="control-label is-required">Correo electrónico</label>
                                            <input class="form-control" type="text" name="email"
                                                value="{{ $datos->correo_alum }}" disabled>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <label class="control-label is-required">Teléfono WhatsApp</label>
                                            <input class="form-control" type="text" name="telefono"
                                                value="{{ $datos->telefono_alum }}">
                                            <small class="text-muted">Formato: 5512345678 Sin Espacios*</small>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <label class="control-label">Télefono de Emergencia</label>
                                            <input class="form-control" type="text" name="telefonoEmergencia"
                                                value="{{ $datos->telefono_emergencias_alum }}">
                                            <small class="text-muted">Formato: 5512345678 Sin Espacios*</small>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <label class="control-label">Curp</label>
                                            <input class="form-control" type="text" name="curp"
                                                value="{{ $datos->curp_alum }}">
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <label class="control-label">Seguro Social</label>
                                            <input class="form-control" type="text" name="seguroSocial"
                                                value="{{ $datos->seguro_social_alum }}">
                                        </div>
                                        <h5 class="card-title p-3">Documentos</h5>
                                        <div class="col-md-4 col-12">
                                            <label class="control-label">INE</label>
                                            <input class="form-control" type="file" name="archINE">
                                            @if ($datos->arch_ine_alum)
                                                <a href="{{ route('alumnos.descargar.documento', ['id' => $datos->codigo_alum, 'tipo' => 'ine']) }}"
                                                    class="btn btn-outline-primary mt-2"><i
                                                        class="bx bxs-cloud-download"></i> Descargar INE</a>
                                            @endif
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <label class="control-label">Comprobante de Domicilio</label>
                                            <input class="form-control" type="file" name="archDomicilio">
                                            @if ($datos->arch_ine_alum)
                                                <a href="{{ route('alumnos.descargar.documento', ['id' => $datos->codigo_alum, 'tipo' => 'domicilio']) }}"
                                                    class="btn btn-outline-primary mt-2"><i
                                                        class="bx bxs-cloud-download"></i> Descargar Comprobante de
                                                    Domicilio</a>
                                            @endif
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <label class="control-label">CURP</label>
                                            <input class="form-control" type="file" name="archCurp">
                                            @if ($datos->arch_curp_alum)
                                                <a href="{{ route('alumnos.descargar.documento', ['id' => $datos->codigo_alum, 'tipo' => 'curp']) }}"
                                                    class="btn btn-outline-primary mt-2"><i
                                                        class="bx bxs-cloud-download"></i> Descargar CURP</a>
                                            @endif
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <label class="control-label">Constancia de Estudios</label>
                                            <input class="form-control" type="file" name="archConstancia">
                                            @if ($datos->arch_constancia_estudios_alum)
                                                <a href="{{ route('alumnos.descargar.documento', ['id' => $datos->codigo_alum, 'tipo' => 'constancia']) }}"
                                                    class="btn btn-outline-primary mt-2"><i
                                                        class="bx bxs-cloud-download"></i> Descargar Constancia de
                                                    Estudios</a>
                                            @endif
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <label class="control-label">Acta de Nacimiento</label>
                                            <input class="form-control" type="file" name="ArchNacimiento">
                                            @if ($datos->arch_acta_nacimiento_alum)
                                                <a href="{{ route('alumnos.descargar.documento', ['id' => $datos->codigo_alum, 'tipo' => 'nacimiento']) }}"
                                                    class="btn btn-outline-primary mt-2"><i
                                                        class="bx bxs-cloud-download"></i> Descargar Acta de Nacimiento</a>
                                            @endif
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <label class="control-label">Certificado Médico</label>
                                            <input class="form-control" type="file" name="ArchMedico">
                                            @if ($datos->arch_certificado_medico_alum)
                                                <a href="{{ route('alumnos.descargar.documento', ['id' => $datos->codigo_alum, 'tipo' => 'medico']) }}"
                                                    class="btn btn-outline-primary mt-2"><i
                                                        class="bx bxs-cloud-download"></i> Descargar Certificado Médico</a>
                                            @endif
                                        </div>
                                        <h5 class="card-title p-3">Datos del Grupo</h5>
                                        <div class="col-md-12 col-12">
                                            <label class="control-label">Grupo</label>
                                            <select class="form-select" name="grupo" disabled>
                                                <option value="{{ $datos->id_grupo_alum }}">{{ $datos->grupo_alum }}
                                                </option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <label class="control-label">Cursos</label>
                                            <select class="form-select" name="curso" disabled>
                                                <option value="{{ $datos->id_curso_alum }}">{{ $datos->curso_alum }}
                                                </option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <label class="control-label">Nombre del curso</label>
                                            <input class="form-control" type="text" value="{{ $datos->nombre_curs }}"
                                                disabled>
                                        </div>
                                        <div class="col-md-12 col-12 mt-2">
                                            <button type="submit" class="btn btn-success"><i class="bx bx-save"></i>
                                                Guardar</button>
                                            <a href="{{ route('alumnos.index') }}" class="btn btn-danger"><i
                                                    class="bx bxs-caret-left-circle"></i> Cancelar</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </form>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Seleccionar todos los botones de toggle
            const toggleButtons = document.querySelectorAll('.toggle-password');
            toggleButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    // Obtener el campo objetivo usando el atributo data-target
                    const targetId = this.getAttribute('data-target');
                    const passwordInput = document.getElementById(targetId);
                    // Cambiar el tipo de input entre "password" y "text"
                    const type = passwordInput.getAttribute('type') === 'password' ? 'text' :
                        'password';
                    passwordInput.setAttribute('type', type);
                    // Cambiar el ícono entre ojo y ojo tachado
                    const icon = this.querySelector('i');
                    icon.classList.toggle('bi-eye');
                    icon.classList.toggle('bi-eye-slash');
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $(function() {
                $('#pais').off('change'); // Desvincular eventos 'change' anteriores
                $('#pais').on('change', onSelectPais);
            });
            function onSelectPais() {
                var id = $(this).val();
                $.get('{{ Request::root() }}/estados/' + id + '', function(data) {
                    var html_select = '';
                    for (var i = 0; i < data.length; ++i)
                        html_select += '<option value="' + data[i].id + '">' + data[i].nombre_estado +
                        '</option>';
                    $('#estado').html(html_select);
                });
            }
        });
    </script>
@endsection