@extends('layout/ace')

@section('breadcrumbs')
    {{ Breadcrumbs::render('CMSKorisniciEdit', $user) }}
@endsection

@section('title')
    Korisnici izmena | {{ $user->first_name . ' ' . $user->last_name }}
@endsection

@section('content')
    @if (App\Models\CMSUser::hasRole(['Super Admin', 'Admin']))
        {{-- <a href="{{ route('cms.switch-user', $user->id) }}" class="btn btn-primary">Uloguj se kao <strong>{{ $user->first_name }}</strong></a> --}}
    @endif
    <form method="POST" action="{{ route('cms.cms-user.update', $user) }}" enctype="multipart/form-data" autocomplete="off">
        @csrf
        @method('PATCH')
        <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