@extends('layouts.app')

@section('content')
    <section class="section">
        <div class="section-header">
            <h3 class="page__heading">Editar estudiante</h3>
        </div>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/habibmhamadi/multi-select-tag/dist/css/multi-select-tag.css">

        <div class="section-body">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            @if ($errors->any())
                                <div class="alert alert-dark alert-dismissible fade show" role="alert">
                                    <strong>¡Revise los campos!</strong>
                                    @foreach ($errors->all() as $error)
                                        <span class="badge badge-danger">{{ $error }}</span>
                                    @endforeach
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @endif

                            <form action="{{ route('estudiantes.update', $estudiante->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                               

                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label for="nombre">Nombre</label>
                                            <input type="text" name="nombre" class="form-control" value="{{ $estudiante->nombre }}" required oninput="formatoNombre(this);">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label for="apellidos">Apellidos</label>
                                            <input type="text" name="apellidos" class="form-control" value="{{ $estudiante->apellidos }}" required oninput="formatoNombre(this);">
                                        </div>
                                    </div>
                                </div>
            

                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label for="CI">CI</label>
                                            <input type="number" name="CI" class="form-control" value="{{ $estudiante->CI }}" required oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label for="fecha">Fecha de nacimiento </label>
                                            <input type="date" name="fecha" class="form-control" value="{{ $estudiante->fecha}}">
                                        </div>
                                    </div>
                                </div>
                            
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label for="tel">Telefono </label>
                                            <input type="number" name="tel" class="form-control" value="{{ $estudiante->tel}}" maxlength="8" required oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label for="direccion">Direccion</label>
                                            <input type="text" name="direccion" class="form-control" value="{{ $estudiante->direccion }}" required oninput="validateDireccion(this);">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label for="correo">Correo</label>
                                            <input type="email" name="correo" class="form-control" value="{{ $estudiante->correo }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label for="condicion">Condicion</label>
                                            <input type="text" name="condicion" class="form-control" value="{{ $estudiante->condicion }}" required oninput="formatoNombre(this);">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="curso_id">Curso</label>
                                    <select name="curso_id" class="form-control" required>
                                        <option value="">Seleccione un curso</option>
                                        @foreach($cursos as $curso)
                                            <option value="{{ $curso->id }}" {{ old('curso_id', $estudiante->curso_id) == $curso->id ? 'selected' : '' }}>
                                                {{ $curso->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <br>
                                <button type="submit" class="btn btn-primary">Guardar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        function formatoNombre(input) {
            input.value = input.value.replace(/[^A-Za-zñÑáéíóúÁÉÍÓÚ\s]/g, '');
            
            let words = input.value.split(' ');
            for (let i = 0; i < words.length; i++) {
                if (words[i]) {
                    words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1).toLowerCase();
                }
            }
            
            input.value = words.join(' ');
        }

        function validateDireccion(input) {
            const formattedValue = input.value.replace(/[^A-Za-zñÑáéíóúÁÉÍÓÚ0-9#\@\s]/g, '');
            input.value = formattedValue;
            
            // Actualiza el valor del campo con el formato correcto
            if (input.value !== formattedValue) {
                input.classList.add("is-invalid");
            } else {
                input.classList.remove("is-invalid");
            }
        }
    </script>
    
@endsection