@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.show', $course->id) }}">
                    <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>Editar Curso</b></p>
            </div>

            @if (count($course->purchases) > 0)
                <div class="alert alert-danger">
                    ¡Cuidado! Estas editando un curso que ya se ha vendido
                    <i onClick="remove(this)" id='alert-close' class="fa fa-times"></i>
                </div>
            @elseif($course->enabled)
                <div class="alert alert-danger">
                    ¡Cuidado! Estas editando un curso activo
                    <i onClick="remove(this)" id='alert-close' class="fa fa-times"></i>
                </div>
            @endif

            <div class="box-body">
                <form id='form-edit-course' method="POST" action="{{ route('admin.courses.update', $course->id) }}">
                    @method('PUT')
                    @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">
                            <img src='/storage/cursos/{{ $course->photo2 }}' alt='{{ $course->title }}'>
                            <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">
                                <img src='/storage/cursos/{{ $course->photo }}' alt='{{ $course->title }}'>
                                <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="Titulo"
                                    value="{{ $course->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="{{ $course->price }}"
                                        autocomplete="off"
                                        required
                                    />

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

                                <span>
                                    <h4>Instructor *</h4>
                                    <select name='instructor' required>
                                        <option value="">Seleccione un instructor</option>
                                        @foreach($instructors as $instructor)
                                            <option value='{{ $instructor->id }}' {{ $course->instructor->id == $instructor->id ? 'selected' : ''}}>{{ $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'>Editar</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="box-actions">
            <button class="btn btn-primary btn-submit" id='btnEditar'>Editar</button>
        </div>
    </div>
</section>
<script>
    const form = document.querySelector('#form-edit-course')
    const btnEditar = document.querySelector("#btnEditar")
    const btnSubmit = document.querySelector("button[type='submit']")
    const description = document.querySelector('#description-value')
    
    btnEditar.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.root.innerHTML = '{!! $course->description !!}'

    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