<div class="container">
    <div class="row">
        {{--<div class="col-md-6"--}}{{-- style="max-width:600px;min-width:600px;"--}}{{-->--}}
            <div class="panel panel-primary">
                <div class="panel-heading">Предложить товар!</div>
                <div class="panel-body">
                    <form enctype="multipart/form-data" method="POST" action="{{ route('item.store') }}">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <label for="caption">Заголовок</label>
                            <input type="text" id="caption" class="form-control" name="caption"
                                   placeholder="Название товара">
                        </div>
                        <div class="form-group">
                            <label for="category">Выберите категорию</label>
                            <select id="category" class="form-control" name="category_id"
                                    onchange="loadSubcategory(this)">
                                <option value="" disabled>Выберите категорию</option>
                                @foreach($categories as $category)
                                    <option value="{{$category->id}}">{{$category->title}}</option>
                                @endforeach
                            </select>
                            @if ($errors->has('category'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('category') }}</strong>
                                </span>
                            @endif
                        </div>
                        <div class="form-group">
                            <label for="subcategory">Выберите подкатегорию</label>
                            <select id="subcategory" class="form-control" name="subcategory_id">
                                <option value="" disabled>Выберите подкатегорию</option>
                                @foreach($subcategories as $subcategory)
                                    <option value="{{$subcategory->id}}">{{$subcategory->title}}</option>
                                    {{--<option value="1">{{$subcategory}}</option>--}}
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="description">Описание</label>
                            <textarea name="description" class="form-control" id="description" rows="3"></textarea>
                        </div>
                        @include('templates.image_upload')
                        <div class="form-group text-center">
                            <input hidden name="user_id" value="{{ \Illuminate\Support\Facades\Auth::id() }}">
                            <button type="submit" class="btn btn-primary btn-lg" id="submitbtn" name="submit">
                                Сохранить
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{{--</div>--}}

<script>
    function loadSubcategory(select) {
        var subcategorySelect = $("#subcategory");
        $.ajax({
            url: '{{ route('form.ajax') }}',
            data: {action: 'getSubcategory', category: select.value},
            success: function (subcategoryList) {
                subcategorySelect.html('');
                $.each(subcategoryList, function (i, subcat) {
                    console.log(subcat);
                    console.log(subcat.title);

                    subcategorySelect.append('<option value="' + subcat.id + '">' + subcat.title + '</option>');
                });

                subcategorySelect.removeAttr('disabled');
            }
        });
        console.log('end');
    }
</script>
