@extends('layout/ace')

@section('breadcrumbs')
    {{ Breadcrumbs::render('lesson.create') }}
@endsection

@section('title')
    Unos {{ App\Models\Lesson::$typeT }}
@endsection

@section('content')
    <form method="POST"
        action="{{ route('cms.lesson.store', ['lesson' => $lesson, 'type' => strtolower(App\Models\Lesson::$type)]) }}"
        enctype="multipart/form-data">
        @csrf
        <div class="row">
            @include('cms.lesson._form')
        </div>
    </form>
    <div class="modal fade modal-fs modal-custom modal-videos" id="modalFullscreen" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Vimeo API</h5>
                    <div class="modal-options">
                        <div class="modal-search">
                            <div class="input-group">
                                <i class="fa fa-search text-blue"></i>
                                <input type="search" class="form-control form-control-sm typeahead scrollable pl-4"
                                    placeholder="Pretraži ...">
                                <div class="input-group-append">
                                    <button class="btn btn-sm btn-dark-primary" type="button">Pretraži</button>
                                </div>
                            </div>
                        </div>
                        <!-- modal-search end -->
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <!-- modal-options end -->
                </div>
                <!-- modal-header end -->
                <div id="vimeo-videos" class="modal-body vimeo-videos">

                </div>
                <!-- modal-body end -->
                <div class="modal-footer">
                    <div class="modal-pagination">
                        <div id="vimeo-pagination-render">

                        </div>
                        <div class="input-group">
                            <input type="text" class="form-control form-control-sm" id="specific-page"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
                            <div class="input-group-append">
                                <button class="btn btn-sm btn-dark-primary" type="button" id="goto-page">Idi na
                                    stranu</button>
                            </div>
                        </div>
                    </div>
                    <!-- table-pagination end -->
                    <div class="footer-options">
                        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-sm btn-primary" id="vimeo-refresh">Refresh</button>
                    </div>
                    <!-- footer-options end -->
                </div>
                <!-- modal-footer end -->
            </div>
            <!-- modal-content end -->
        </div>
        <!-- modal-dialog end -->
    </div>

    <x-card title="Fajlovi">
        @include('cms.lesson.lecture._tabs')
    </x-card>
@endsection

@section('scripts')
    @parent
    <script src="https://cdnjs.cloudflare.com/ajax/libs/TableDnD/1.0.5/jquery.tablednd.min.js"></script>
    <script>
        var root;
        var totalVimeoPages;
        $(document).ready(() => {
            generateVimeoPopupContent();
        });

        $(document).on('click', '.page-link', function(e) {
            e.preventDefault();
            page = $(this).data('page');
            $('#specific-page').val('');
            generateVimeoPopupContent(page);
        });

        $(document).on('click', '#goto-page', function(e) {
            e.preventDefault();
            value = $('#specific-page').val();
            if (value != '' && parseInt(value) <= totalVimeoPages && parseInt(value) > 0) {
                generateVimeoPopupContent(value);
            }
        });

        $(document).on('click', '#vimeo-refresh', function(e) {
            e.preventDefault();
            $('#specific-page').val('');
            generateVimeoPopupContent();
        });

        $(document).on('click', '.choose-video', function(e) {
            const duration = $(this).data('duration');
            const video_hd = $(this).data('videohd');
            const video_sd = $(this).data('videosd');

            $('#video_hd').removeClass('is-invalid');
            $('#video_sd').removeClass('is-invalid');

            $('#video_duration').val(duration);
            $('#video_hd').val(video_hd);
            $('#video_sd').val(video_sd);

            let form = validateForm(false);
        });

        window.addEventListener('addItem', event => {
            dnd();
            // Kada se dodaje novi item tada se pozivaju funkcije za rerender chosen-a
            @if (App\Models\Lesson::$type)
                initChosensOnSelectElement();
            @endif
        });

        window.addEventListener('changeItemOrder', event => {
            dnd();
        });

        window.addEventListener('removeItem', event => {
            dnd();
        });

        window.addEventListener('addAnswer', event => {
            dnd();
        });

        window.addEventListener('remoweAnswer', event => {
            dnd();
        });

        function generateVimeoPopupContent(link = 1) {
            if (totalVimeoPages != undefined) {
                if (link > totalVimeoPages) {
                    link = totalVimeoPages;
                }
            }
            $('#vimeo-videos').html('<div class="fas fa-spinner fa-spin text-purple-m1 fa-2x mb-3"></div>');

            $.ajax({
                url: '{{ route('cms.ajax.vimeo') }}',
                method: 'post',
                data: {
                    link: "/me/videos?page=" + link
                },
                success: function(data) {
                    $('#vimeo-videos').html(data.view);
                    $('#vimeo-pagination-render').html(data.links);
                    $('#specific-page').attr('max', data.total_pages)
                    totalVimeoPages = data.total_pages;
                }
            });
        }

        function dnd() {
            root = document.querySelectorAll('.answer-table');
            root.forEach(element => {
                $('#' + element.id).tableDnD({
                    onDragStart: function(table, row) {
                        row.classList.add('bg-light');
                    },
                    onDragStop: function(table, row) {
                        const updateArr = [];

                        let i = 1;
                        for (const item of element.children[1].children) {
                            let answer = item.children[1].children[0].value;
                            let correct = item.children[2].children[0].checked ? 1 : 0;

                            updateArr.push({
                                text: answer,
                                correct: correct,
                                order: i
                            });

                            i++;
                        }

                        const updateObj = {
                            index: parseInt(table.getAttribute('data-index')),
                            answers: updateArr
                        }

                        Livewire.emit('changeItemOrder', updateObj);
                    }
                });
            });
        }

        const elements_ids = [
            'title',
            // 'video',
            // 'video_hd',
            // 'video_sd'
        ];

        const selects_ids = [
            'instructor_id',
            'lecture_id'
        ]

        selects_ids.forEach(el => {
            $('#' + el).on('change', function(e) {
                const item = $(this);
                item.removeClass('is-invalid');

                if (item.val() == '-1') {
                    item.addClass('is-invalid');
                    $('#vendor_id-invalid-feedback').show();
                }

                if (!validateForm(false)) {

                }
            });
        })

        elements_ids.forEach(el => {
            $('#' + el).on('input', function(e) {
                const item = $(this);
                item.removeClass('is-invalid');

                if (item.val() == '') {
                    item.addClass('is-invalid');
                }

                if (!validateForm(false)) {

                }
            });
        });

        function validateForm(dispalyErrors = true) {
            var valid = true;

            elements_ids.forEach(el => {
                const item = $('#' + el);
                if (dispalyErrors) {
                    item.removeClass('is-invalid');
                }

                if (item.val() == '') {
                    if (dispalyErrors) {
                        item.addClass('is-invalid');
                    }

                    valid = false;
                }
            });

            selects_ids.forEach(el => {
                const item = $('#' + el);
                if (dispalyErrors) {
                    item.removeClass('is-invalid');
                }

                if (item.val() == '-1') {
                    if (dispalyErrors) {
                        item.addClass('is-invalid');
                        $('#vendor_id-invalid-feedback').show();
                    }

                    valid = false;
                }
            });

            if (valid) {
                $('#btn-sacuvaj').removeAttr('disabled');
                $('#btn-primeni').removeAttr('disabled');
            }

            return valid;
        }

        $(document).on('click', '#btn-sacuvaj, #btn-primeni', function(e) {
            if (!validateForm()) {
                e.preventDefault();
                $('#btn-sacuvaj').attr('disabled', 'disabled');
                $('#btn-primeni').attr('disabled', 'disabled');
            }
        });
    </script>
@endsection