@extends('layout/ace')

@section('breadcrumbs')
    {{ Breadcrumbs::render('PaketKursevaEdit', $package->id) }}
@endsection

@section('title')
    Izmena paketa kurseva | {{ $package->title }}
@endsection

@section('content')
    <form method="POST" action="{{ route('cms.package.update', $package->id) }}" enctype="multipart/form-data">
        @method('PUT')
        @csrf
        <div class="row">
            @include('cms.package._form')
        </div>
    </form>
    @include('cms.package.partials._modal-add-package-to-subscribe')
    @include('cms.package.partials._modal-enroll-package-courses-to-users')
@endsection

@section('scripts')
    @parent
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script>
        @if(request()->routeIs('cms.package.edit'))
            $(document).on('click', "#addPackageToSubscribe", (e) => {
                e.preventDefault();
                $("#addPackageToSubscribeModal").modal('show');
            });
        @endif

        @if(request()->routeIs('cms.package.edit'))
            $(document).on('click', "#enrollPackageCoursesToUsers", (e) => {
                e.preventDefault();
                $("#enrollPackageCoursesToUsersModal").modal('show');
            });
        @endif
        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',
            'price',
            'price_consultation',
            'percentage_for_instructor',
            '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