@extends('front.layoutwithout')

@section('title')
    Registrar Alumno
@endsection

@section('return')
    <div class="col-lg-12">
        <a href="{{ route('careers.index') }}" class="return-button"><i class="fas fa-arrow-left"></i> Regresar</a>
    </div>
@endsection

@section('button-save')
@endsection

@push('js')
    <script>
        $(document).ready(function() {

            //Send form to POST
            $('#save').on('click', function(e) {
                e.preventDefault();
                $('#form').submit();
            });

            //Detect click and change select
            $('input').on('keyup', function() {
                var save = $('#save');
                save.removeClass('disabled');
                save.addClass('btn-green');
                save.removeAttr('disabled');
            });

            $('select').on('change', function() {
                var save = $('#save');
                save.removeClass('disabled');
                save.addClass('btn-green');
                save.removeAttr('disabled');
            });

            $('input').on('change', function() {
                var save = $('#save');
                save.removeClass('disabled');
                save.addClass('btn-green');
                save.removeAttr('disabled');
            });

            var nationality = $('#nationalities').val();
            if (nationality == '144') {
                $('#estate').prop('disabled', false);
            }

            //Si se detectan cambios
            $('#nationalities').on('change', function() {
                var id = $(this).val();
                if (id == '144') {
                    $('#estate').prop('disabled', false);
                } else {
                    $('#estate').prop('disabled', true);
                    $('#estate').val('null');
                }
            });
            //Si se detectan cambios
            $("#is_bis").change(function() {
                if (this.checked) {
                    $('#input-quarter').hide();
                    $('#quarter').prop('checked', false);
                } else {
                    $('#input-quarter').show();
                }
            });


            $('.tr-quarter').each(function() {
                var total = 15;
                var index = $(this).children('td').length;

                var resta = total - index;

                for (var i = 0; i < resta; i++) {
                    $(this).append('<td>', '</td>');
                }
            });

        });
    </script>
@endpush

@section('content')

    <div class="tab-content">
        <form action="{{ route('students.store') }}" method="post" id="form">
            @csrf
                    <input type="hidden" name="currentTab" value="1">

            <div class="row">
                <div class="col-xl-4 col-lg-6">
                    <div class="form-group">
                        <label>Matrícula</label>
                        <input type="text" name="enrollment" class="form-control @error('enrollment') no-valid @enderror"
                            value="" placeholder="Ingresa la matrícula" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-4 col-lg-6">
                    <div class="form-group">
                        <label>Nombres</label>
                        <input type="text" name="name" class="form-control @error('name') no-valid @enderror" value=""
                            placeholder="Ingresa el nombre del alumno" required>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-6">
                    <div class="form-group">
                        <label>Apellidos</label>
                        <input type="text" name="last_name" class="form-control @error('last_name') no-valid @enderror"
                            value="" placeholder="Ingresa los apellidos paterno y materno" required>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-4">
                    <div class="form-group">
                        <label>Correo electrónico</label>
                        <input type="email" name="email" class="form-control @error('email') no-valid @enderror"
                            placeholder="Ingresa un correo electrónico" value="">
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4">
                    <div class="form-group">
                        <label>Sexo</label>
                        <select name="gender" class="form-control">
                            <option value="0">Masculino</option>
                            <option value="1">Femenino</option>
                        </select>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4">
                    <div class="form-group">
                        <label>Estado Civil</label>
                        @php
                            $civil = ['soltero/a', 'casado/a', 'divorciado/a', 'viudo/a'];
                        @endphp
                        <select name="social_status" class="form-control">
                            @foreach ($civil as $civ)
                                <option value="{{ $civ }}">{{ $civ }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-6">
                    <div class="form-group">
                        <label>Teléfono</label>
                        <input type="tel" name="phone" class="form-control @error('phone') no-valid @enderror" value=""
                            placeholder="Ingresa el télefono">
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4">
                    <div class="form-group">
                        <label>Fecha de nacimiento</label>
                        <input type="date" name="birth_date" class="form-control" value="">
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4">
                    <div class="form-group">
                        <label>Nacionalidad</label>
                        <select name="nationality_id" id="nationalities" class="form-control" required>
                            @foreach ($data['nationalities'] as $nationality)
                                <option value="{{ $nationality->id }}" @if ($nationality->id === 144)
                                    selected
                            @endif>
                            {{ $nationality->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4">
                    <div class="form-group">
                        <label>Estado</label>
                        @php
                            $state = ['Aguascalientes', 'Baja California', 'Baja California Sur', 'Campeche', 'Chihuahua', 'Chiapas', 'Coahuila', 'Colima', 'Durango', 'Guanajuato', 'Guerrero', 'Hidalgo', 'Jalisco', 'México', 'Michoacán', 'Morelos', 'Nayarit', 'Nuevo León', 'Oaxaca', 'Puebla', 'Querétaro', 'Quintana Roo', 'San Luis Potosí', 'Sinaloa', 'Sonora', 'Tabasco', 'Tamaulipas', 'Tlaxcala', 'Veracruz', 'Yucatán', 'Zacatecas'];
                        @endphp
                        <select name="state" class="form-control">
                            @foreach ($state as $sta)
                                <option value="{{ $sta }}">{{ $sta }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4">
                    <div class="form-group">
                        <label>Carrera</label>
                        <select name="carrer_id" id="carrer_id" class="form-control" required>
                            @foreach ($data['careers'] as $career)
                                <option value="{{ $career->id }}">
                                    {{ $career->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4">
                    <div class="form-group">
                        <label>Grado</label>
                        @php
                            $grados = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
                        @endphp
                        <select name="semester" class="form-control">
                            @foreach ($grados as $grado)
                                <option value="{{ $grado }}">{{ $grado }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4">
                    <div class="form-group">
                        <label>Grupo</label>
                        @php
                            $grupo = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
                        @endphp
                        <select name="group" class="form-control">
                            @foreach ($grupo as $gro)
                                <option value="{{ $gro }}">{{ $gro }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>


                <div class="col-xl-6 col-lg-4">
                    <div class="form-group">
                        <label>Escuela de procedencia</label>
                        <input type="text" name="school_of_origin"
                            class="form-control @error('school_of_origin') no-valid @enderror" value=""
                            placeholder="Ingresa la escuela de procedencia">
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4">
                    <div class="form-group">
                        <div class="checkbox checkbox-css top-center">
                            <input type="checkbox" name="is_bis" id="is_bis" checked />
                            <label for="is_bis">¿Es BIS?</label>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4" id="input-quarter" style="display: none">
                    <div class="form-group">
                        <div class="checkbox checkbox-css top-center">
                            <input type="checkbox" name="quarter" id="quarter" />
                            <label for="quarter">¿Es cuatrimestral?</label>
                        </div>
                    </div>
                </div>
            </div>
    </div>


    <div class="row">
        <div class="col-lg-2">
            <button type="submit" id="save" class="btn disable btn-block" disabled>Guardar</button>
        </div>
    </div>
    </form>
    </div>
@endsection