@extends('layouts.backend.app')

@section('title','All Menu Items')

@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-news-paper icon-gradient bg-mean-fruit"></i>
                </div>
                <div>{{ request('template') ? division(request('template'), 'name') : null }} Site - All Menu Items</div>
            </div>

            <div class="page-title-actions">
                <div class="d-inline-block dropdown">
                    @can(\App\Models\Permission::PERM_TEMPLATE_MENU_ITEM_CREATE)
                        <a class="replicate-trigger btn-shadow btn btn-primary text-white"
                           data-bs-toggle="modal"
                           data-bs-target="#replicate-modal"
                           data-modal-title="Create New Menu Item"
                           data-submit-text="Create"
                           data-url="{{ route('app.templates.menu-items.create', request('template')) }}"
                        >
                            <i class="fas fa-plus-circle"></i>
                            <span>Create New Menu Item</span>
                        </a>
                    @endcan
                    <a href="{{ route('app.pages.index', request('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>

    @if (request()->routeIs('app.templates.menu-items.list-in-tab'))
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" href="{{ route('app.pages.index', request('template')) }}">Primary Pages</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('app.pages.index', ['template' => request('template'), 'slug' => '%welcome%']) }}">Welcome Pages</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @if (request()->routeIs('app.templates.menu-items.list-in-tab')) active @endif" href="{{ route('app.templates.menu-items.list-in-tab', ['template' => request('template')]) }}">Menu Items</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @if (request()->routeIs('app.templates.page-menu-templates.list-in-tab')) active @endif" href="{{ route('app.templates.page-menu-templates.list-in-tab', ['template' => request('template')]) }}">Menu Templates</a>
            </li>
        </ul>
    @endif

    <div class="main-card mb-3 card">
        <div class="card-body">
            <div class="table-responsive">
                <table id="datatable" class="table table-hover table-striped table-bordered">
                    <thead>
                    <tr>
                        <th class="">#</th>
                        <th>Menu Item Name</th>
                        <th>Menu Template Name</th>
                        <th>Page Title</th>
                        <th>URL</th>
                        <th class="text-end">Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($templateMenuItems as $key => $item)
                        <tr>
                            <td class="text-muted">#{{ $item->id }}</td>
                            <td>{{ pure_text($item->name) }}</td>
                            <td>{{ $item->pageMenuTemplate->name }}</td>
                            <td>{{ $item->pageMenuTemplate->page->title }}</td>
                            <td>{{ $item->slug }}</td>
                            <td class="text-end">
                                <i class="fas fa-ellipsis-v dropdown-toggle me-3"
                                   id="item-dropdown-{{ $item->id }}"
                                   data-bs-toggle="dropdown"
                                   aria-expanded="false">
                                </i>
                                <ul class="dropdown-menu" aria-labelledby="item-dropdown-{{ $item->id }}">
                                    @can(\App\Models\Permission::PERM_TEMPLATE_MENU_ITEM_CREATE)
                                        <li>
                                            <a class="dropdown-item replicate-trigger"
                                               data-bs-toggle="modal"
                                               data-bs-target="#replicate-modal"
                                               data-item-id="{{ $item->id }}"
                                               data-page-menu-template-id="{{ $item->page_menu_template_id }}"
                                               data-modal-title="Replicate To"
                                               data-submit-text="Replicate"
                                               data-url="{{ route('app.templates.menu-items.replicate', ['template' => request('template'), 'templateMenuItem' => $item->id]) }}"
                                            >Replicate</a>
                                        </li>
                                    @endcan
                                    @can(\App\Models\Permission::PERM_TEMPLATE_MENU_ITEM_UPDATE)
                                        <li>
                                            <a class="dropdown-item" href="{{ route('app.templates.menu-items.edit',['template' => request('template'), 'templateMenuItem' => $item->id]) }}">
                                                <span>Edit</span>
                                            </a>
                                        </li>
                                    @endcan
                                    @can(\App\Models\Permission::PERM_TEMPLATE_MENU_ITEM_DELETE)
                                        <li>
                                            <button type="button" class="dropdown-item delete" onclick="AppHelper.deleteData({{ $item->id }}, '{{ pure_text($item->name, ["'"]) }}')">
                                                <span>Delete</span>
                                            </button>
                                            <form id="delete-form-{{ $item->id }}" action="{{ route('app.page.template.menu.item.destroy', $item->id) }}"
                                                  method="POST" style="display: none;">
                                                @csrf()
                                                @method('DELETE')
                                            </form>
                                        </li>
                                    @endcan

                                </ul>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- /.card -->
@endsection

@section('modal')
    <div id="replicate-modal" class="modal fade"
         tabindex="-1"
         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="" method="post">
                        @csrf
                        <div class="form-group">
                            <label for="email-to">Page Menu Template:</label>
                            <select id="page-template" class="form-control" name="page_menu_template_id" required>
                                @foreach($pageMenuTemplates as $page => $menus)
                                <optgroup label="{{ $page }}">
                                    @foreach($menus as $menu)
                                        <option value="{{ $menu['id'] }}">{{ $menu['name'] }}</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"><i class="fas"></i> <span></span></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')

    <script>
        $(document).ready(function() {
            AppDataTable.init({
                table_id: 'datatable',
                prefix: 'all_menu_items_'
            });

            $('#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'))

            });
        });
    </script>

@endpush