@extends('layouts.default')

@section('title')
    Editar 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>Editar Alumno</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Editar 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">Editar 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.update', $alumno->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <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="{{ $alumno->usuario->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="{{ $alumno->usuario->email }}" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="password" class="col-md-3 form-label">Nueva Contraseña</label>
                                    <div class="col-md-9">
                                        <input type="password" class="form-control" id="password" name="password" placeholder="Dejar en blanco para no cambiar">
                                    </div>
                                </div>
    
                                <div class="row mb-3">
                                    <label for="password_confirmation" class="col-md-3 form-label">Confirmar Contraseña</label>
                                    <div class="col-md-9">
                                        <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Confirmar nueva contraseña">
                                    </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 }}" {{ $alumno->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="{{ $alumno->fecha_nacimiento }}" required>
                                    </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="{{ $alumno->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="{{ $alumno->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">
                                        @if ($alumno->usuario->imagen)
                                            <p class="mt-2">Foto actual: <img src="{{ asset('storage/' . $alumno->usuario->imagen) }}" alt="Foto actual" class="img-thumbnail" width="100"></p>
                                        @endif
                                    </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">Actualizar Alumno</button>
                                    <a href="{{ route('alumnos.index') }}" 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