@extends('layouts.app')

@section('content')
    <section class="section">
        <div class="section-header">
            <h3 class="page__heading">Agregar tutor</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>
                                    
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @endif

                            <form action="{{route('gestion_tutores.store')}}" method="POST">
                                @csrf
                                
                                <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 {{ $errors->has('nombre') ? 'is-invalid' : '' }}" value="{{ old('nombre') }}"  required oninput="formatoNombre(this);">
                                        @error('nombre')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <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 {{ $errors->has('apellidos') ? 'is-invalid' : '' }}" value="{{ old('apellidos') }}" required oninput="formatoNombre(this);">
                                        @error('apellidos')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12">
                                    <div alass="form-group">
                                        <label for="CI">Carnet</label>
                                        <input type="text" name="CI" class="form-control {{ $errors->has('CI') ? 'is-invalid' : '' }}" maxlength="15" value="{{ old('CI') }}" required oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                                        @error('CI')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <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 {{ $errors->has('fecha') ? 'is-invalid' : '' }}" max="{{ \Carbon\Carbon::now()->subYears(18)->format('Y-m-d') }}" value="{{ old('fecha') }}" >
                                        @error('fecha')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12">
                                    <div class="form-group">
                                        <label for="direccion">Dirección</label>
                                        <input type="text" name="direccion" class="form-control {{ $errors->has('direccion') ? 'is-invalid' : '' }}" value="{{ old('direccion') }}" required oninput="validateDireccion(this);">
                                        @if ($errors->has('direccion'))
                                            <span class="text-danger">{{ $errors->first('direccion') }}</span>
                                        @endif
                                    </div>
                                </div>
                                
                                <div class="col-xs-12 col-sm-12 col-md-12">
                                    <div class="form-group">
                                        <label for="tel">Teléfono</label>
                                        <input type="text" name="tel" class="form-control {{ $errors->has('tel') ? 'is-invalid' : '' }}" value="{{ old('tel') }}" maxlength="8" required oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                                        @if ($errors->has('tel'))
                                            <span class="text-danger">{{ $errors->first('tel') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="estudiantes">Asignar estudiantes</label>
                                    <select name="estudiantes[]" class="select2" multiple>
                                        @foreach ($estudiantes as $estudiante)
                                            <option value="{{ $estudiante->id }}">{{ $estudiante->nombre }} {{ $estudiante->apellidos }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <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 {{ $errors->has('correo') ? 'is-invalid' : '' }}" value="{{ old('correo') }}" >
                                        @error('correo')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                               

                                <button type="submit" class="btn btn-primary">Guardar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- En la sección de <head> para el CSS de Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<!-- Al final del archivo, antes del cierre de </body> para el JS de Select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
    // Inicializar Select2 para el select de estudiantes
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "Seleccione estudiantes", // Texto por defecto
            allowClear: true // Permite borrar la selección
        });
    });

    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