@extends('layout/ace')

@section('breadcrumbs')
    {{ Breadcrumbs::render('KurseviEdit', $course) }}
@endsection

@section('title', "Izmena kursa | $course->title")

@section('content')
    <form method="POST" action="{{ route('cms.course.update', $course->id) }}" enctype="multipart/form-data">
        @method('PUT')
        @csrf
        @include('cms.course._form')
    </form>

    <x-card title="Fajlovi">
        @include('cms.course._tabs')
    </x-card>
    @include('cms.course.partials._modal-enroll-course')
    @include('cms.course.partials.form._excel_edit')
@endsection

@section('scripts')
@parent
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
var list;
var ids = [];
let addItemEvent = new Event('addItem');
window.addEventListener('addItem', event => {
    list = document.querySelectorAll('.selected-lessons');
    list.forEach((el, index) => {
        $(function() {
            $(`#selected-lessons-${index}, #lessons`).sortable({
                connectWith: `.selected-lessons, #lessons`,
                stop: function(e, ui) {
                    // ukoliko je dogadjaj vracanja lekcije tada se koristi index koji predstavlja index elementa iz kog se lekcija prevlaci
                    if(ui.item.parent().attr('id') == 'lessons'){
                        getList(index);
                    }else {
                        // dohvatanje index-a elementa u koji je lekcija prevucena
                        const newIndex = ui.item.parent().data('index');
                        getList(newIndex);
                    }
                }
            })
            .disableSelection();
        });
        ids.push([]);
    });
});

window.addEventListener('showAllLessons', event => {
    $("#allLessonsContainer").removeClass('d-none');
});

function getList(index)
{
    ids[index] = [];

    list = document.querySelector('#selected-lessons-'+index);

    for (const item of list.children) {
        if (item.nodeName == 'LI')
            ids[index].push(parseInt(item.getAttribute('data-id')));
    }

    //izbacivanje duplikata iz index-a, prevencija da se nbe doda ista lekcija vise puta
    ids[index] = ids[index].filter(removeDuplicates);

    Livewire.emit('updateSegments', index, ids[index]);
    Livewire.emit('updateLessons');
}

function removeDuplicates(value, index, self) {
  return self.indexOf(value) === index;
}

(function() {
    window.dispatchEvent(addItemEvent);
})();

window.onload = function() {
    // ukoliko nema lekcija da sakrije kontejner sa svim lekcijama
    if(list.length == 0) {
        $("#allLessonsContainer").addClass('d-none');
    }
}

const elements_ids = [
    'title',
    'title_for_certificate',
    'title_for_certificate_english',
    'description',
    //'price',
    'price_consultation',
    //'percentage_for_instructor',
    //'rating',
    'content'
];

const inputFiles_ids = [
    'image',
    //'video_image',
    //'cover_image'
];

const selects_ids = [
    //'vendor_id',
    'category_ids',
    'instructor_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');
            $('#'+el+'-invalid-feedback').show();
        }

        if (!validateForm(false)) {

        }
    });
})

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

        if (document.getElementById(el).files.length == 0) {
            item.addClass('is-invalid');
        }

        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 (typeof(item.val()) == 'object') {
            if (item.val().length == 0) {
                if (dispalyErrors) {
                    item.addClass('is-invalid');
                    $('#'+el+'-invalid-feedback').show();
                }

                valid = false;
            }
        } else {
            if (item.val() == '-1') {
                if (dispalyErrors) {
                    item.addClass('is-invalid');
                    $('#'+el+'-invalid-feedback').show();
                }

                valid = false;
            }
        }
    });

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

    //     if (document.getElementById(el).files.length == 0) {
    //         if (dispalyErrors) {
    //             item.addClass('is-invalid');
    //         }

    //         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>
<script src="{{ mix('cms/js/EnrollCourses.js') }}"></script>
@endsection