@extends('layouts.backend.app')

@section('title','Menu Builder')

@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 ({{ $pageMenuTemplate->name }}) {{ $pageMenuTemplate->page->title }}</div>
            </div>
            <div class="page-title-actions">
                <div class="d-inline-block">
                    @can(\App\Models\Permission::PERM_TEMPLATE_MENU_ITEM_CREATE)
                    {{--@if(request()->template === division(\App\Models\TemplateMenuItem::DIVISION_MOBILE))--}}
                    <a data-bs-toggle="modal"
                       data-bs-target="#replicate-modal"
                       class="btn-shadow btn btn-info text-white">
                        <i class="fas fa-copy"></i>
                        <span>Replicate Existing Menu Item</span>
                    </a>
                    {{--@endif--}}
                    <a href="{{ route('app.page.template.menu.item.create',$pageMenuTemplate->id) }}" class="btn-shadow btn btn-primary text-white">
                        <i class="fas fa-plus-circle"></i>
                        <span>Create New Menu Item</span>
                    </a>
                    @endcan
                    <a href="{{ route('app.page.menu.template.index', $pageMenuTemplate->page_id) }}" class="btn-shadow btn btn-danger text-white">
                        <i class="fas fa-arrow-circle-left fa-w-20"></i> {{ __('Back to List') }}
                    </a>

                    <a href="{{ route('app.pages.index', request()->get('template', $pageMenuTemplate->page->template)) }}" class="btn-shadow btn bg-warning text-white">
                        <i class="fas fa-arrow-circle-left fa-w-20"></i> {{ __('Back to Pages') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <x-template-menu-builder :menuItems="$templateMenuItems" :pageMenuTemplate="$pageMenuTemplate"/>

@endsection

@section('modal')
    <div id="replicate-modal" class="modal fade"
         role="dialog"
         data-bs-backdrop="static"
         data-bs-keyboard="false"
         aria-labelledby="replicate-modal"
         style="display: none;"
         aria-hidden="true"
    >
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-title">Replicate Menu Item</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="replicate-form" action="{{ route('app.page.menu.template.replicate-menu-item', $pageMenuTemplate->id) }}" method="post">
                        @csrf
                        <div class="form-group">
                            <label class="form-label" for="page-template">Choose Menu Item to replicate:</label>
                            <select id="page-template" class="select form-control" name="template_menu_item_id">
                                @foreach($otherPageMenuTemplates as $pageMenuTemplate)
                                    <optgroup label="{{ ($pageMenuTemplate->page ? $pageMenuTemplate->page->title . ' - ' : '') . $pageMenuTemplate->name }}">
                                        @foreach($pageMenuTemplate->templateMenuItems as $item)
                                            <option value="{{ $item['id'] }}">{{ $item['name_sort'] }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button id="submit-action" type="submit" class="btn btn-primary">Replicate</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')

    <script>
        $(document).ready(function() {

            $('#replicate-modal').on('shown.bs.modal', function (e) {

                $('#page-template').val($(e.relatedTarget).data('page-menu-template-id'));
                $('#modal-title').text($(e.relatedTarget).data('modal-title'));
                $('#replicate-form').attr('action', $(e.relatedTarget).data('url'));
                $('#submit-action > span').text($(e.relatedTarget).data('submit-text'))

                $('.select').select2({
                    width: '100%',
                    dropdownParent: $("#replicate-modal")
                });
            });
        });
    </script>

@endpush