@extends('layout/ace')

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

@section('title', 'Unos paketa kurseva')

@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.package.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="row">
            @include('cms.package._form')
        </div>
    </form>
@endsection

@section('scripts')
@parent
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
    var list;
    (function() {
        list = document.querySelectorAll('.selected-courses');
        list.forEach((el, index) => {
            $(function() {
                $(`#selected-courses, #courses`).sortable({
                    connectWith: "ul",
                    stop: function() {
                        getList(index);
                    }
                })
                .disableSelection();
            });
        });
    })();
    function getList(index)
    {
        var ids = [];

        list = document.querySelector('#selected-courses');

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

        Livewire.emit('updateCourses', ids);
    }

const elements_ids = [
    'title',
    'title_for_certificate',
    'description',
    'rating',
    'content'
];

const selects_ids = [
    'vendor_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