@extends('backend.layouts.app')

@section('title', __('Create Explore'))

@section('content')
<form action="{{ route('admin.explore.store') }}" method="POST">
    @csrf
    <div class="row">
        <div class="col-9">
            <x-backend.card>
                <x-slot name="header">
                    Create Explore
                </x-slot>
                <x-slot name="headerActions">
                    <x-utils.link class="card-header-action" :href="route('admin.explore.index')"
                        :text="__('Cancel')" />
                </x-slot>
                <x-slot name="body">
                    <div class="form-group">
                        <label class="font-weight-bold" for="title">Title</label>
                        <input type="text" name="title" class="form-control" id="title" value="{{ old('title') }}"
                            placeholder="Titile">
                    </div>
                    <div class="mb-4">
                        <label class="font-weight-bold" for="Introduction">Introduction</label>
                        <textarea class="form-control tinymce" name="intro" id="intro"></textarea>
                    </div>
                </x-slot>
            </x-backend.card>

            <div>
                <div id="headingForm">
                    <x-backend.card>
                        <x-slot name="header">
                            Heading
                        </x-slot>
                        <x-slot name="body">
                            <div class="form-group">
                                <label class="font-weight-bold">Title</label>
                                <input type="text" name="heading[0][title]" class="form-control"
                                    value="{{ old('heading[0][title]') }}" placeholder="Title">
                            </div>
                            <div class="form-group">
                                <label class="font-weight-bold">Content</label>
                                <textarea class="form-control headingTinyMce" name="heading[0][body]"
                                    id="heading00">{{ old('heading[0][body]') }}</textarea>
                            </div>
                        </x-slot>
                    </x-backend.card>
                </div>
                <div class="text-center">
                    <button type="button" id="add-btn" class="btn btn-primary btn-sm mb-3"><i
                            class="fas fa-plus"></i></button>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div style="position: sticky; top: 8rem;">
                <x-backend.card>
                    <x-slot name="body">
                        <div class="form-group">
                            <label class="font-weight-bold" for="read_m">Read</label>
                            <input type="text" name="read_time" class="form-control" id="read_m"
                                placeholder="EX:5 MIN READ" value="{{ old('read_time') }}">
                        </div>
                        <div class="form-group">
                            <label for="categories">Category</label>
                            <select name="category_id" class="form-control" id="categories">
                                <option value="" disabled selected>Select Category</option>
                                @foreach ($categories as $category)
                                @if(old('category_id') == $category->id)
                                <option value="{{ $category->id }}" selected> {{ $category->name }} </option>
                                @else
                                <option value="{{ $category->id }}"> {{ $category->name }} </option>
                                @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="font-weight-bold">Image</label>
                            <div id="lfm" class="input-group mb-3" data-input="thumbnail" data-preview="holder">
                                <input name="image" id="thumbnail" type="text" class="form-control">
                                <div class="input-group-append">
                                    <button class="btn btn-secondary" type="button" id="button-addon2">Button</button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="font-weight-bold">Publish</label>
                            <div class="switcher">
                                <label for="toggle">
                                    <input name="publish" type="checkbox" value="1" id="toggle" {{ old('publish')
                                        ? 'checked' : '' }}><span><small></small></span><small></small>
                                </label>
                            </div>
                        </div>
                    </x-slot>
                    <x-slot name="footer">
                        <button class="btn btn-sm btn-primary float-right" type="submit">@lang('Create')</button>
                    </x-slot>
                </x-backend.card>
            </div>
        </div>
    </div>
</form>
@endsection

@push('after-scripts')
<script>
    $().ready(function () {
        let route_prefix = "/admin/laravel-filemanager";
        $('#lfm').filemanager('file', {prefix: route_prefix});

    })
</script>

<script type="text/javascript">
    let i = 0;
        let x = 0;
        tinym();
    
        $("#add-btn").click(function() {
            ++i; ++x;
            newRowAdd =
                '<div class="card card-heading">' +
                    '<div class="card-header">' +
                        'Heading' +
                        '<div class="card-header-actions">' +
                            '<button type="button" class="btn btn-danger btn-sm btnremove"><i class="fas fa-minus"></i></button>'+
                        '</div>' +
                    '</div>' +

                    '<div class="card-body">' +
                        '<div class="form-group">' +
                            '<label class="font-weight-bold">Title</label>' +
                            '<input type="text" name="heading['+x+'][title]" class="form-control" placeholder="Title">' +
                        '</div>' +
                        '<div class="form-group">' +
                            '<label class="font-weight-bold">Content</label>' +
                            // '<div class="form-control tinymce mce-content-body" name="body_heading[]" id="heading00" style="min-height: 100px; position: relative;" contenteditable="true" spellcheck="false"><p><br data-mce-bogus="1"></p></div><input type="hidden" name="heading[]">' +
                            '<textarea class="form-control headingTinyMce" name="heading['+x+'][body]" id="heading0'+i+'" style="min-height: 100px"></textarea>'
                        '</div>' +
                   '</div>'+
                '</div>'
                $("#headingForm").append(newRowAdd);
                tinym();
            });

        $(document).on('click', '.btnremove', function() {
            tinymce.EditorManager.execCommand('mceRemoveEditor', true, $(this).parent().find('textarea').attr('id'));
            --x;
            $(this).parents('.card-heading').remove();
        });
</script>
@endpush