@extends('admin.layouts.app')

@section('content')

<section id='admin'>
    <div class='box'>
        <div class="box-content">
            <div class="box-title">
                <a href="{{ route('admin.instructors.index') }}">
                    <div class='box-back'>
                        <i class="fa fa-chevron-left"></i>
                    </div>
                </a>
                <p><a href='{{ route('admin.index') }}'>Administración</a> > <a href='{{ route('admin.instructors.index') }}'>Instructores</a> > <b>Nuevo Instructor</b></p>
            </div>
            <div class="box-body">    
                <div class='admin-form'>
                    <form method="POST" action="{{ route('admin.instructors.store') }}">
                        @csrf
                        <div class="profile-photo">
                            <div
                                class="slim"
                                data-min-size="500, 500"
                                data-size="500, 500"
                                data-ratio="1:1"
                                data-jpeg-compression="50">
                                <input type="file" name="photo" accept="image/webp, image/png, image/jpeg, image/gif, image/bmp"/>
                            </div>     
                        </div>
                        
                        <div class='form-group'>
                            <input
                                type="text"
                                name="name"
                                placeholder="Nombre"
                                class="@error('name') input-error @enderror"
                                value="{{ old('name') }}"
                                minlength=3
                                maxlength=255
                                autocomplete="off"
                                required
                            />
                            @error('name')
                                <div class="form-error">
                                    El nombre no es valido
                                </div>
                            @enderror
                        </div>
                        <div class='form-group'>
                            <textarea
                                type="text"
                                name="description"
                                placeholder="Descripcion"
                                class="@error('description') input-error @enderror"
                                value="{{ old('description') }}"
                                maxlength=2000
                                autocomplete="off"
                                rows=8></textarea>
                            @error('description')
                                <div class="form-error">
                                    La descripción no es valida
                                </div>
                            @enderror
                        </div>

                        <div class='form-group'>
                            <input
                                type="text"
                                name="video"
                                placeholder="URL Video"
                                class="@error('video') input-error @enderror"
                                value="{{ old('video') }}"
                                maxlength=200
                                autocomplete="off"
                            />
                            @error('video')
                                <div class="form-error">
                                    El video no es valido
                                </div>
                            @enderror
                        </div>

                        @error('photo')
                            <div class="form-error">
                                Seleccione una imágen
                            </div>
                        @enderror

                        <div class='form-group'>
                            <button class="btn btn-primary btn-submit" type="submit">Agregar instructor</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection