@extends('layouts.app')

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

                            <form action="{{route('estudiantes.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') }}" maxlength="30" 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' : '' }}" maxlength="30" 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 class="form-group">
                                        <label for="CI">Carnet</label>
                                        <input type="text" maxlength="15" name="CI" class="form-control {{ $errors->has('CI') ? 'is-invalid' : '' }}" 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' : '' }}" value="{{ old('fecha') }}" max="{{ $maxYear }}-12-31" min="{{ $minYear }}-01-01">
                                        @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' : '' }}" maxlength="50" value="{{ old('direccion') }}" required oninput="validateDireccion(this);">
                                        @error('direccion')
                                            <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="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, '');">
                                        @error('tel')
                                            <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="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>

                                <div class="col-xs-12 col-sm-12 col-md-12">
                                    <div class="form-group">
                                        <label for="condicion">Condición</label>
                                        <input type="text" name="condicion" class="form-control {{ $errors->has('condicion') ? 'is-invalid' : '' }}" maxlength="50" value="{{ old('condicion') }}"  oninput="formatoNombre(this);">
                                        @error('condicion')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </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') == $curso->id ? 'selected' : '' }}>
                                                {{ $curso->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                        
                                <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;
            
            if (input.value.length < 10) {
                input.classList.add("is-invalid");
            } else {
                input.classList.remove("is-invalid");
            }
        }
    </script>
    <script type="module">
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-analytics.js";
        // TODO: Add SDKs for Firebase products that you want to use
        // https://firebase.google.com/docs/web/setup#available-libraries
      
        // Your web app's Firebase configuration
        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
          apiKey: "AIzaSyCAcOG6uFerEHVBl78UcDS_jsrUq9gI83E",
          authDomain: "integrador-9f039.firebaseapp.com",
          projectId: "integrador-9f039",
          storageBucket: "integrador-9f039.appspot.com",
          messagingSenderId: "691192058087",
          appId: "1:691192058087:web:4af4b73043090fa6df1242",
          measurementId: "G-MF38L20YWG"
        };
      
        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const analytics = getAnalytics(app);
      </script>
@endsection