@extends('layouts.default')

@section('title')
    Crear Alumno
@stop

@section('header_styles')
    <!-- Toastr CSS -->
    <link href="{{ asset('vendors/toastr/css/toastr.css') }}" rel="stylesheet" type="text/css" />
@stop

@section('content')
    <section class="content-header">
        <div aria-label="breadcrumb" class="card-breadcrumb">
            <h1>Crear Alumno</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Crear Alumno</li>
            </ol>
        </div>
        <div class="separator-breadcrumb border-top"></div>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-lg-12 col-12">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title d-inline">Crear Alumno</h3>
                        <span class="float-end">
                            <i class="fa fa-chevron-up clickable"></i>
                            <i class="fa fa-times removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="card-body">
                        <!-- Toastr Notifications -->
                        @if ($errors->any())
                            <script>
                                toastr.error(`{{ implode(' ', $errors->all()) }}`);
                            </script>
                        @endif

                        @if (session('success'))
                            <script>
                                toastr.success(`{{ session('success') }}`);
                            </script>
                        @endif

                        @if (session('error'))
                            <script>
                                toastr.error(`{{ session('error') }}`);
                            </script>
                        @endif

                        <!-- Formulario -->
                        <form action="{{ route('alumnos.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="form-body">
                                <div class="row mb-3">
                                    <label for="name" class="col-md-3 form-label">Nombre del Alumno</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" id="name" name="name" value="{{ old('name') }}" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="email" class="col-md-3 form-label">Correo Electrónico</label>
                                    <div class="col-md-9">
                                        <input type="email" class="form-control" id="email" name="email" value="{{ old('email') }}" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="password" class="col-md-3 form-label">Contraseña</label>
                                    <div class="col-md-9">
                                        <input type="password" class="form-control" id="password" name="password" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="preparador_fisico_id" class="col-md-3 form-label">Seleccionar Preparador</label>
                                    <div class="col-md-9">
                                        <select class="form-control" id="preparador_fisico_id" name="preparador_fisico_id" required>
                                            <option value="">Seleccione un preparador...</option>
                                            @foreach ($preparadores as $preparador)
                                                <option value="{{ $preparador->id }}" {{ old('preparador_fisico_id') == $preparador->id ? 'selected' : '' }}>
                                                    {{ $preparador->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="fecha_nacimiento" class="col-md-3 form-label">Fecha de Nacimiento</label>
                                    <div class="col-md-9">
                                        <input type="date" class="form-control" id="fecha_nacimiento" name="fecha_nacimiento" value="{{ old('fecha_nacimiento') }}" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="celular" class="col-md-3 form-label">Celular</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" id="celular" name="celular" value="{{ old('celular') }}" placeholder="Ej: +56912345678">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="direccion" class="col-md-3 form-label">Dirección</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" id="direccion" name="direccion" value="{{ old('direccion') }}" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="altura" class="col-md-3 form-label">Altura</label>
                                    <div class="col-md-9">
                                        <input type="number" step="0.01" class="form-control" id="altura" name="altura" value="{{ old('altura') }}" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="imagen" class="col-md-3 form-label">Foto de Perfil</label>
                                    <div class="col-md-9">
                                        <input type="file" class="form-control" id="imagen" name="imagen" accept=".jpg,.jpeg,.png">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-offset-3 col-md-9 ms-auto mb-3">
                                    <button type="submit" class="btn btn-primary">Crear Alumno</button>
                                    <a href="{{ route('home') }}" class="btn btn-danger">Cancelar</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@stop

@section('footer_scripts')
    <!-- Toastr JS -->
    <script src="{{ asset('vendors/toastr/js/toastr.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            toastr.options = {
                "closeButton": true,
                "progressBar": true,
                "positionClass": "toast-top-right",
                "timeOut": "5000"
            };

            @if ($errors->any())
                toastr.error(`{{ implode(' ', $errors->all()) }}`);
            @endif

            @if (session('success'))
                toastr.success(`{{ session('success') }}`);
            @endif

            @if (session('error'))
                toastr.error(`{{ session('error') }}`);
            @endif
        });
    </script>
@stop