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 $subcat = {!! (string)$data->subcategories !!};--}}
    var data = $('#data-pictures').text()
    if (data != "") {
        var $pictures = $.parseJSON($('#data-pictures').text());
    }
    var $subcat = $.parseJSON($('#json-subcat').text());
    $('#json-subcat').remove();
    $('#json-subcat').remove();
    function subcategoryPick() {
        var selected = $('#item-cat').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);
    }
    if ($('.modal-footer button').length < 2) {
        $('.modal-footer').prepend(
            '<button type="button" class="btn btn-primary" _method="POST" onclick="changeMethod(this)">Создать</button>' +
            '<button type="button" class="btn btn-danger" _method="DELETE" onclick="changeMethod(this)">Удалить</button>' +
            '<button type="button" class="btn btn-info" _method="PUT" onclick="changeMethod(this)">Сохранить изменения</button>'
        )
    }
</script>

<form id="item-fom" method="POST" action="{{ $route }}" enctype="multipart/form-data">
    {{ csrf_field() }}
    @method('POST')

    <div class="row">
        <div class="col-sm-3">
            <label class="sr-only" for="inlineFormInputGroup">Username</label>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-database" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="id" value="{{ $data->item->id }}"
                       placeholder="ID предмета"/>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="user_id" value="{{ $data->item->user_id }}"
                       placeholder="ID пользователя"/>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-calendar-o" aria-hidden="true"></i></span>
                <input type="datetime" class="form-control" name="created_at" value="{{ $data->item->created_at }}"
                       placeholder="Дата создания"/>
            </div>
        </div>
    </div>
    <div class="container-fluid" style="padding-right: 0;padding-left: 0;margin-top: 15px;">
        <input type="text" class="form-control" name="caption" value="{{ $data->item->caption }}"
               placeholder="Заголовок" style="font-weight: 600"/>
    </div>
    <div class="container-fluid" style="padding-right: 0;padding-left: 0;margin-top: 15px;">
        <div class="col-sm-6" style="padding-left: 0">
            <label class="sr-only" for="inlineFormInputGroup">Username</label>
            <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                <div class="input-group-addon">#</div>
                <select id="item-cat" class="form-control" title="Выберите категорию" name="category_id"
                        onchange="subcategoryPick()">
                    <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>
        </div>
        <div class="col-sm-6" style="padding-right: 0">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-indent"></i>
                    {{--<i class="fa fa-share-alt-square"></i>--}}
                </span>
                <select id="item-subcat" class="form-control" name="subcategory_id">
                    @foreach($data->subcategories as $subcategory)
                        {{--<optgroup label="{{ $category->title }}">--}}
                        {{--@foreach($data->subcategories as $subcategory )--}}
                        {{--@if($subcategory->category_id === $category->id )--}}
                        {{--<option value="{{ $subcategory->id }}">{{ $subcategory->title }}</option>--}}
                        {{--@endif--}}
                        {{--@endforeach--}}
                        {{--</optgroup>--}}
                        @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>
    </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')

    <input id="item-form-submit" type="submit" hidden>
</form>

@section('script')
    @parent
    <script>
        function changeMethod(element) {
            let method = element.getAttribute('_method').toUpperCase();
            $('#item-fom').find('[name=_method]').val(method);
            if (method === "POST") {
                $('#item-fom').attr('action', " {{ route('item.store') }} ");
            }
            $('#item-form-submit').click();
        }
        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 = "../image/" +file.path;
                    thumb.style.backgroundImage = 'url(' + url + ')';
                });
            }
        }
        $( document ).ready(function() {
            setInputFileViews();
        });
    </script>
@endsection
@yield('script')