@extends('layout/ace')

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

@section('title')
    Unos Korisnika
@endsection

@section('content')
    <form method="POST" action="{{ route('cms.cms-user.store') }}" enctype="multipart/form-data" autocomplete="off">
        @csrf
        <div class="row">
            @include('cms.cms_user._form')
        </div>
    </form>
@endsection

@section('scripts')
    @parent
    <script>
        $(document).on('change', '#avatar', function(e) {
            const file = e.target.files[0]
            if (file) {
                $(".user-image img").attr('src', URL.createObjectURL(file))
            }
        });
        // $('#avatar').aceFileInput();
    </script>

    <script>
        const elements_ids = [
            'email',
        ];

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

        const selects_ids = [
            'role',
        ]

        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)) {

                }
            });
        })

        if (inputFiles_ids.length > 0) {
            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;
                    }
                }
            });

            if (inputFiles_ids.length > 0) {
                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