alevel_project/resources/views/templates/modal_form.blade.php

<!--suppress ALL -->
<div id="json-subcat" hidden>{{ (string)($data->subcategories) ?? '' }}</div>
<div id="data-pictures" hidden>{{ (string)($data->pictures) ?? '' }}</div>

<script>
    var data = $('#data-pictures').text()
    if (data != "") {
        var $pictures = $.parseJSON($('#data-pictures').text());
    }
    var $subcat = $.parseJSON($('#json-subcat').text());
    $('#json-subcat').remove();

    function subcategoryPick(elem) {
        let selected = $(elem).val()
        var subCatOpt = '';
        $subcat.forEach(function (subcat) {
            if (subcat.category_id === +selected) {
                subCatOpt += '<option value="' + subcat.category_id + '">' + subcat.title + '</option><br>'
            }
        });
        $('#item-subcat').html(subCatOpt);
    }
</script>

<form id="item-form" method="POST" action="{{ route('item.update',$data->item) }}" enctype="multipart/form-data">
    {{ csrf_field() }}
    <input type="hidden" name="_method" value="POST">
    <input type="hidden" name="id" value="{{ $data->item->id }}">

    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="glyphicon glyphicon-user"></i></span>
        </div>
        <input type="text" class="form-control" aria-label="Item id" style="max-width: 130px" placeholder="Пользователь"
               name="user_id" value="{{ $data->item->user_id }}">
        <div class="input-group-prepend ml-3">
            <span class="input-group-text"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
        <input type="text" disabled class="form-control" aria-label="data creating" placeholder="Дата создания"
               {{--name="created_at"--}} value="{{ $data->item->created_at }}">
    </div>

    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="glyphicon glyphicon-bookmark"></i></span>
        </div>
        <input type="text" class="form-control" aria-label="data creating" placeholder="Заголовок"
               name="caption" value="{{ $data->item->caption }}">
    </div>

    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="glyphicon glyphicon-indent-left"></i></span>
        </div>
        <select type="text" class="form-control" placeholder="Категория" title="Выберите категорию"
                onchange="subcategoryPick(this)"
                name="category_id" value="{{ $data->item->category->title }}">
            <option disabled value="">Выберите категорию</option>
            @foreach($data->categories as $category)
                <option {{ ($category->id == $data->item->category_id) ? 'selected' : '' }}
                        value="{{ $category->id }}">{{ $category->title }}
                </option>
            @endforeach
        </select>
        <div class="input-group-prepend ml-3">
            <span class="input-group-text"><i class="glyphicon glyphicon-list"></i></span>
        </div>
        <select type="text" class="form-control" placeholder="Подкатегория" title="Выберите подкатегорию"
                id="item-subcat"
                name="created_at" value="{{ $data->item->subcategory->title }}">
            <option disabled value="">Выберите подкатегорию</option>
            @foreach($data->subcategories as $subcategory)
                @if ($subcategory->category_id == $data->item->category_id)
                    <option {{ ($subcategory->id == $data->item->subcategory_id) ? 'selected' : '' }}
                            value="{{ $subcategory->id }}">{{ $subcategory->title }}</option>
                @endif
            @endforeach
        </select>
    </div>

    <div class="form-group" style="margin-top: 15px">
        <label for="description">Описание</label>
        <textarea class="form-control" rows="5" id="item.description"
                  name="description">{{ trim($data->item->description) }}</textarea>
    </div>

    @include('templates.image_upload')

</form>

@section('script')
    @parent
    <script>
        $(document).ready(function () {
            setInputFileViews();
        });

        function setInputFileViews() {
            if ($pictures.length > 0) {
                $pictures.forEach(function (file, key) {
                    $(boxes[key].querySelector('.js--image-preview span')).hide();
                    $(boxes[key].querySelector('.required-field-block')).show();

                    let thumb = boxes[key].querySelector('.js--image-preview');
                    let url = "{{ route('images','/') }}/" + file.path;
                    thumb.style.backgroundImage = 'url(' + url + ')';
                });
            }
        }
    </script>
@endsection
@yield('script')