@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> > <a href='{{ route('admin.courses.show', $course->id) }}'>Detalle de Curso</a> > <b>Agregar Modulo</b></p>
            </div>

            @if ( session('msg') )
                <div class="alert alert-success">
                    {{ session('msg') }}
                    <i onClick="remove(this)" id='alert-close' class="fa fa-times"></i>
                </div>
            @endif
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="box-body">
                <form 
                    id='form-create-module'
                    method="POST"
                    action="{{ route('admin.modules.store', $course->id) }}"
                    enctype="multipart/form-data">
                    
                    @csrf
                    <input type='text' id='uploaded-files' class='hidden' name='uploaded_files'>

                    <div class="admin-course">
                        <div class="admin-module-left">
                            <h4>Imágen *</h4>
                            <div
                                class="slim"
                                data-min-size="600, 600"
                                data-size="600, 600"
                                data-ratio="1:1"
                                data-jpeg-compression="50">
                                <input type="file" id="photo" name="photo" accept="image/webp, image/png, image/jpeg, image/gif, image/bmp"/>
                            </div>

                            <div class="form-group">
                                <h4>PDF Principal *</h4>
                                <input type="file" id="pdf" name="pdf" accept=".pdf">
                            </div>

                            <div class="form-group2">
                                <h4>Archivos</h4>
                                <input
                                    type="file" 
                                    id="files"
                                    class="filepond"
                                    name="file" 
                                    data-allow-reorder="true"
                                    data-max-file-size="50MB"
                                    data-max-files="10"
                                    multiple>
                            </div>

                            <div class="form-group">
                                <h4>YouTube Video URL</h4>
                                <input type="text" id="video" name="video" placeholder="URL Video" autocomplete="off">
                            </div>

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

                            <div class="form-group">
                                <span id="msg" class="error"></span>
                            </div>
                        </div>

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

                            <h4>Descripción</h4>
                            <div id="description">

                            </div>
                            <input type='text' class='hidden' id='description-value' name='description'>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<script>
    const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').content;
    let uploadedFiles = []
    FilePond.create(
        document.querySelector('#files')
    );
    FilePond.setOptions({
        server: {
            url: '/admin/modulos/files',
            timeout: 7000,
            headers: {
                'X-CSRF-TOKEN': CSRF_TOKEN
            },
            process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                const formData = new FormData();
                formData.append(fieldName, file, file.name);

                const request = new XMLHttpRequest();
                request.open('POST', '/admin/files/process');
                request.setRequestHeader('X-CSRF-TOKEN', CSRF_TOKEN)
                request.onload = function() {
                    if (request.status >= 200 && request.status < 300) {
                        uploadedFiles.push(request.responseText)
                        load(request.responseText);
                    }
                    else {
                        error('Error');
                    }
                };
                request.send(formData);
                
                return {
                    abort: () => {
                        request.abort();
                        abort();
                    }
                };
            },
            revert: (uniqueFileId, load, error) => {
                const formData = new FormData();
                formData.append('filePath', uniqueFileId);

                const request = new XMLHttpRequest();
                request.open('POST', '/admin/modulos/files/revert');
                request.setRequestHeader('X-CSRF-TOKEN', CSRF_TOKEN)
                request.onload = function() {
                    if (request.status >= 200 && request.status < 300) {
                        uploadedFiles = uploadedFiles.filter(f => f !== uniqueFileId )
                        load();
                    }
                    else {
                        error('Error');
                    }
                };
                request.send(formData);
            }
        }
    });

    const form = document.querySelector('#form-create-module')
    form.addEventListener('submit', e => {
        e.preventDefault()

        let error = false
        let msg = document.querySelector("#msg")
        msg.innerHTML = ""
        let video = document.querySelector("#video").value
        let embed_video = window.validateYouTubeUrl(video)
        if(video != "" && embed_video == null) {
            msg.innerHTML += "URL Video no es valida<br>"
            error = true
        }
        if(document.querySelector("[name='photo']").value  == "") {
            msg.innerHTML += "Debe seleccionar una imágen<br>"
            error = true
        }
        if(!error) {
            document.querySelector('#description-value').value = quill.root.innerHTML
            document.querySelector('#uploaded-files').value = JSON.stringify(uploadedFiles)
            form.submit()
        }
        else {
            e.stopImmediatePropagation()
        }
    })

    const 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