@extends('admin.layouts.app')

@section('content')

<section id='admin'>
    <div class='box'>
        <div class="box-content">
            <div class="box-title">
                <a href="{{ route('admin.courses.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.courses.index') }}'>Cursos</a> > <b>Agregar Curso</b></p>
            </div>
            <div class="box-body">
                @error('photo')
                    <div class="form-error">
                        Ingrese las fotos
                    </div>
                @enderror
                <form id='form-create-course' method="POST" action="{{ route('admin.courses.store') }}">
                    @csrf
                    <div class="admin-course-top">
                        <h4>Imágen portada *</h4>
                        <div
                            class="slim"
                            data-min-size="1900, 350"
                            data-size="1900, 350"
                            data-ratio="38:7"
                            data-jpeg-compression="50">
                            <input type="file" name="photo2" accept="image/webp, image/png, image/jpeg, image/gif, image/bmp"/>
                        </div>
                    </div>
                    <div class="admin-course">
                        <div class="admin-course-left">
                            <h4>Imágen principal *</h4>
                            <div
                                class="slim"
                                data-min-size="800, 400"
                                data-size="800, 400"
                                data-ratio="2:1"
                                data-jpeg-compression="50">
                                <input type="file" name="photo" accept="image/webp, image/png, image/jpeg, image/gif, image/bmp"/>
                            </div>

                            <div class='form-group'>
                                <h4>Título *</h4>
                                <input
                                    type="text"
                                    name="title"
                                    placeholder="Título"
                                    value="{{ old('title') }}"
                                    maxlength=128
                                    autocomplete="off"
                                    required
                                />
                                @error('title')
                                    <div class="form-error">
                                        El título no es valido
                                    </div>
                                @enderror
                            </div>
                            
                            <div class='form-group inline'>
                                <span>
                                    <h4>Precio (USD) *</h4>
                                    <input
                                        type="number"
                                        name="price"
                                        placeholder="Precio"
                                        value="{{ old('price') }}"
                                        autocomplete="off"
                                        required
                                    />

                                    @error('price')
                                        <div class="form-error">
                                            El precio no es valido
                                        </div>
                                    @enderror
                                </span>

                                <span>
                                    <h4>Insturctor *</h4>
                                    <select name='instructor' required>
                                        <option value="">Seleccione un instructor</option>
                                        @foreach($instructors as $instructor)
                                            <option value='{{ $instructor->id }}'>{{ $instructor->name }}</option>
                                        @endforeach
                                    </select>

                                    @error('instructor')
                                        <div class="form-error">
                                            Seleccione un instructor
                                        </div>
                                    @enderror
                                </span>
                            </div>
                        </div>
                        <div class="admin-course-right">
                            <h4>Descripción</h4>
                            <div id="description" class='course-description'>

                            </div>
                            <input type='text' class='hidden' id='description-value' name='description'>
                        </div>
                        <button type='submit' style='display: none;'>submit</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="box-actions">
            <button class="btn btn-primary btn-submit" id='btnAgregar'>Agregar</button>
        </div>
    </div>
</section>
<script>
    const form = document.querySelector('#form-create-course')
    const btnAgregar = document.querySelector("#btnAgregar")
    const btnSubmit = document.querySelector("button[type='submit']")
    const description = document.querySelector('#description-value')
    
    btnAgregar.addEventListener('click', e => {
        btnSubmit.click()
    })
    form.addEventListener('submit', e => {
        e.preventDefault()
        description.value = quill.root.innerHTML
        form.submit()
    })
    
    var quill = new Quill('#description', {
        theme: 'snow'
    });

    quill.on('text-change', function (delta, old, source) {
        let length = quill.root.innerHTML.length
        let max = 50000
        if (length > max) {
            quill.deleteText(max, quill.getLength());
        }
    });
</script>

@endsection