@extends('admin.layouts.app')

@section('content')

<section id='admin'>
    <div class='box'>
        <div class="box-content">
            <div class="box-title">
                <a href="{{ route('admin.modules.show', $module->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', $module->course->id) }}'>Detalle de Curso</a> > <b>Editar 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 (count($module->course->purchases) > 0)
                <div class="alert alert-danger">
                    ¡Cuidado! Estas editando un modulo de un curso que ya se ha vendido
                    <i onClick="remove(this)" id='alert-close' class="fa fa-times"></i>
                </div>
            @elseif($module->course->enabled)
                <div class="alert alert-danger">
                    ¡Cuidado! Estas editando un modulo de un curso activo
                    <i onClick="remove(this)" id='alert-close' class="fa fa-times"></i>
                </div>
            @endif

            <div class="box-body">
                <form
                    id='form-create-module'
                    method="POST"
                    action="{{ route('admin.modules.update', $module->id) }}"
                    enctype="multipart/form-data">

                    @csrf
                    @method('PUT')
                    <input type='text' id='uploaded-files' class='hidden' name='uploaded_files'>
                    <input type='text' id='removed-files' class='hidden' name='removed_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">
                                <img src='/storage/modulos/{{ $module->photo }}'>
                                <input type="file" name="photo" accept="image/webp, image/png, image/jpeg, image/gif, image/bmp"/>
                            </div>

                            <div class="form-group">
                                <h4>PDF Principal *</h4>
                                @if($module->pdf)
                                    <a class='admin-view-pdf' target='_blank' href='{{ route('admin.modules.pdf', $module->id)}}'>Ver PDF cargado</a>
                                @endif
                                <input type="file" 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" value="{{ $module->video }}" autocomplete="off">
                            </div>

                            <div class='form-group'>
                                <button class="btn btn-primary btn-submit" type="submit">Editar</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="{{ $module->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 filesPath = []
    @if($module->files)
        filesPath = {!! $module->files !!}
    @endif
    const files = []
    filesPath.forEach(f => {
        let file = { 
            source: f[0],
            options: {
                type: 'local',
                file: {
                    name: f[0].substring(14),
                    size: f[1]
                },
            }
        }
        files.push(file)
    })

    let uploadedFiles = []
    let removedFiles = []
    const pond = FilePond.create(
        document.querySelector('#files'),
        {
            files: files
        }
    )
    FilePond.setOptions({
        server: {
            url: '/admin/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/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);
            },
            remove: (source, load, error) => {
                removedFiles.push(source)
                load()
            }
        }
    });

    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(!error) {
            document.querySelector('#description-value').value = quill.root.innerHTML
            document.querySelector('#uploaded-files').value = JSON.stringify(uploadedFiles)
            document.querySelector('#removed-files').value = JSON.stringify(removedFiles)
            form.submit()
        }
        else {
            e.stopImmediatePropagation()
        }
    })

    var quill = new Quill('#description', {
        theme: 'snow'
    });
    quill.root.innerHTML = '{!! $module->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