@extends('layout/ace')

@section('breadcrumbs')
    {{ Breadcrumbs::render('KurseviCreate') }}
@endsection

@section('title', "Unos kursa")

@section('styles')
@parent
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
@endsection

@section('content')
    <form method="POST" action="{{ route('cms.course.store') }}" enctype="multipart/form-data">
        @csrf
        @include('cms.course._form')
    </form>
    @if ($course->id)
        <x-card title="Fajlovi">
            @include('cms.course._tabs')
        </x-card>
    @endif
@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 = [];

// event na koji se prikazuju sve lekcije
window.addEventListener('showAllLessons', event => {
    $("#allLessonsContainer").removeClass('d-none');
});

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();

        });
        // kreiranje index-a da bi mogli da se prate svi segmenti
        ids.push([]);
    });
});

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;
}

// mora da sakrije nakon ucitavanja zbog chosen-a jer chosen uzima duzinu polja i takjo ga kreira
window.onload = function() {
    $("#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>
@endsection