@extends('admin/layouts/dashboard')

@section('breadcrumbs', Breadcrumbs::render(Route::currentRouteName(), $collection))

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header header-elements-inline">
                    <h5 class="card-title">Добавить новый элемент HTML коллекции</h5>
                </div>

                <div class="card-body">
                    {{ Form::open( array('url' => route('admin.collection_item.store'), 'method' => 'POST', 'enctype' => 'multipart/form-data') ) }}

                    <input name="html_collection_id" type="hidden" value="{{ $collection->id }}">

                    @include('admin.helper.form.input', [
                        'name' => 'name',
                        'label' => 'Название коллекции'
                    ])

                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                {{ Form::label('name', 'Содержимое') }}

                                <div id="js-content"></div>

                                <input type="hidden" name="content" value="">
                            </div>
                        </div>
                    </div>

                    @include('admin.helper.form.input', [
                        'name' => 'additional_field1',
                        'label' => 'Дополнительное поле1'
                    ])
                    @include('admin.helper.form.input', [
                        'name' => 'additional_field2',
                        'label' => 'Дополнительное поле2'
                    ])
                    @include('admin.helper.form.input', [
                        'name' => 'additional_field3',
                        'label' => 'Дополнительное поле3'
                    ])
                    @include('admin.helper.form.input', [
                        'name' => 'additional_field4',
                        'label' => 'Дополнительное поле4'
                    ])
                    @include('admin.helper.form.input', [
                        'name' => 'additional_field5',
                        'label' => 'Дополнительное поле5'
                    ])
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                <label for="name">Дата</label>
                                <input class="form-control" name="date" type="date">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                {{ Form::label('name', 'Изображение') }}
                                <input name="picture" type="file" class="form-control">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12">
                                {{ Form::label('name', 'Видео') }}
                                <input name="video" type="file" class="form-control">
                            </div>
                        </div>
                    </div>

                    @include('admin.helper.form.submit', [
                        'label' => 'Добавить'
                    ])

                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>

    <script>
        // Инициализируем редактор
        let editor = ace.edit("js-content");

        editor.setTheme("ace/theme/xcode");
        editor.session.setMode("ace/mode/php");

        let textarea = $('input[name="content"]');

        editor.getSession().on("change", function () {
            textarea.val(editor.getSession().getValue());
        });
    </script>
@endsection