@extends('layouts.backend.app')

@section('title','Edit Menu Item Accordion')

@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-menu icon-gradient bg-mean-fruit">
                    </i>
                </div>
                <div>Edit Menu Item Accordion</div>
            </div>
            <div class="page-title-actions">
                <div class="d-inline-block dropdown">
                    <a href="{{ route('app.page.template.menu.item.edit', $templateMenuItem->id) }}" class="btn-shadow btn btn-danger text-white">
                        <span class="btn-icon-wrapper pr-2 opacity-7">
                            <i class="fas fa-arrow-circle-left fa-w-20"></i>
                        </span>
                        {{ __('Back to Template Menu Item') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="accordion mb-4" id="template-menu-item-accordion">
            @foreach($templateMenuItem->templateMenuItemAccordions()->orderBy('sort')->get() as $accordion)
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading-{{ $accordion->id }}">
                        <button class="accordion-button {{ !$loop->index ? 'show' : 'collapsed'  }}"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapse{{$accordion->id}}"
                                aria-expanded="true"
                                aria-controls="collapse{{$accordion->id}}">
                            {!! $accordion->header !!}
                        </button>
                    </h2>
                    <div id="collapse{{$accordion->id}}"
                         class="accordion-collapse collapse {{ !$loop->index ? 'show' : ''  }}"
                         aria-labelledby="heading-{{ $accordion->id }}"
                         data-bs-parent="#template-menu-item-accordion"
                    >
                        <div class="accordion-body">
                            <form method="post" action="{{ route('app.page.template-menu-item.accordions.update', ['templateMenuItem' => $accordion->template_menu_item_id, 'templateMenuItemAccordion' => $accordion->id]) }}">
                                @csrf
                                @method('put')
                                @include('components.backend.menu-items.fields.body', ['id' => 'header-'.$accordion->id, 'name' => 'header', 'label' => 'Collapse Header', 'content' => $accordion->header])
                                @include('components.backend.menu-items.fields.body', ['id' => 'body-'.$accordion->id, 'label' => 'Collapse Text', 'content' => $accordion->body])
                                <div class="form-group">
                                    <button type="submit" class="btn-shadow btn btn-info text-white">
                                        <i class="fas fa-arrow-circle-up"></i>
                                        <span>Update</span>
                                    </button>
                                    <button type="button" class="btn-shadow btn btn-danger text-white" onClick="AppHelper.deleteData({{ $accordion->id }})">
                                        <i class="fas fa-trash-alt"></i> <span>Delete</span>
                                    </button>
                                    <button type="button" class="btn-shadow btn btn-secondary text-white" onClick="duplicate({{ $accordion->id }})">
                                        <i class="far fa-clone"></i> <span>Duplicate</span>
                                    </button>
                                    @if (!$loop->first)
                                    <button type="button" class="btn-shadow btn btn-secondary text-white" onClick="move('up', {{ $accordion->id }})">
                                        <i class="fas fa-arrow-up"></i> <span>Move Up</span>
                                    </button>
                                    @endif
                                    @if (!$loop->last)
                                    <button type="button" class="btn-shadow btn btn-secondary text-white" onClick="move('down', {{ $accordion->id }})">
                                        <i class="fas fa-arrow-down"></i> <span>Move Down</span>
                                    </button>
                                    @endif
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <form id="delete-form-{{ $accordion->id }}"
                      action="{{ route('app.page.template-menu-item.accordions.delete', ['templateMenuItem' => $accordion->template_menu_item_id, 'templateMenuItemAccordion' => $accordion->id]) }}"
                      method="POST" style="display: none;">
                    @csrf()
                    @method('DELETE')
                </form>
                <form id="move-up-form-{{ $accordion->id }}"
                      action="{{ route('app.page.template-menu-item.accordions.move', ['templateMenuItem' => $accordion->template_menu_item_id, 'templateMenuItemAccordion' => $accordion->id, 'direction' => 'up']) }}"
                      method="POST" style="display: none;">
                    @csrf()
                    @method('PUT')
                </form>
                <form id="move-down-form-{{ $accordion->id }}"
                      action="{{ route('app.page.template-menu-item.accordions.move', ['templateMenuItem' => $accordion->template_menu_item_id, 'templateMenuItemAccordion' => $accordion->id, 'direction' => 'down']) }}"
                      method="POST" style="display: none;">
                    @csrf()
                    @method('PUT')
                </form>
                <form id="duplicate-form-{{ $accordion->id }}"
                      action="{{ route('app.page.template-menu-item.accordions.duplicate', ['templateMenuItem' => $accordion->template_menu_item_id, 'templateMenuItemAccordion' => $accordion->id]) }}"
                      method="POST" style="display: none;">
                    @csrf()
                </form>
            @endforeach
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading-create">
                        <button class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapse-create"
                                aria-expanded="false"
                                aria-controls="collapse-create">
                            <b>Create New Accordion Item</b>
                        </button>
                    </h2>
                    <div id="collapse-create"
                         class="accordion-collapse collapse"
                         aria-labelledby="heading-create"
                         data-bs-parent="#template-menu-item-accordion">
                        <div class="accordion-body">
                            <form id="accordion-new" method="post" action="{{ route('app.page.template-menu-item.accordions.create', ['templateMenuItem' => $templateMenuItem->id]) }}">
                                @csrf
                                @include('components.backend.menu-items.fields.body', ['id' => 'header-new', 'name' => 'header', 'label' => 'Collapse Header', 'content' => old('header') ?? ''])
                                @include('components.backend.menu-items.fields.body', ['id' => 'body-new', 'label' => 'Collapse Text', 'content' => old('body') ?? ''])
                                <div class="form-group">
                                    <button type="submit" class="btn-shadow btn btn-primary text-white">
                                        <i class="fas fa-plus-circle"></i>
                                        <span>Create</span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ url(asset('tinymce/js/tinymce.min.js')) }}" referrerpolicy="origin"></script>
    <script>
        AppTinyMCE.init({});
        function move(direction, id) {
            document.getElementById('move-'+ direction +'-form-' + id).submit();
        }
        function duplicate(id) {
            document.getElementById('duplicate-form-' + id).submit();
        }
    </script>
@endpush