{{-- @dd($headings) --}}
@extends('backend.layouts.app')

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

@section('content')
    <form action="{{ route('admin.explore.update', $data) }}" method="POST">
        @method('PUT')
        @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" placeholder="Titile" value="{{ old('title', $data->title) }}">
                        </div>
                        <div class="mb-4">
                            <label class="font-weight-bold" for="Introduction">Introduction</label>
                            <textarea class="form-control tinymce" name="intro" id="intro">{{ old('intro', $intro) }}</textarea>
                        </div>
                    </x-slot>
                </x-backend.card>

                <div>
                    <div id="headingForm">
                        @foreach ($headings as $key => $value)
                            <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[{{ $key }}][title]" class="form-control" placeholder="Title" value="{{ $value->title }}">
                                    </div>
                                    <div class="form-group">
                                        <label class="font-weight-bold">Content</label>
                                        <textarea class="form-control headingTinyMce" name="heading[{{ $key }}][body]" id="heading0i" style="min-height: 100px">{{ $value->body }}</textarea>
                                    </div>
                               </div>
                            </div>
                        @endforeach
                    </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="5 MIN READ" value="{{ old('read_time', $data->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->id == $data->category_id ? 'selected' : '' }}> {{ $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" value="{{ old('image', $data->image) }}" readonly>
                                    <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" {{ $data->isPublish() ? '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('Update')</button>
                        </x-slot>
                    </x-backend.card>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('after-scripts')
    <script type="text/javascript">
    $(document).ready(function(){
        let route_prefix = "/admin/laravel-filemanager";
        $('#lfm').filemanager('file', {prefix: route_prefix});
    })
        let i = {{ count($headings) - 1 }};
        let x = {{ count($headings) - 1}};
        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'));
            $(this).parents('.card-heading').remove();
            --x;
        });
    </script>
@endpush