@extends('layouts.backend.app')

@section('title','All Page Menu Templates')

@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 Page Menu Templates</div>
            </div>

            <div class="page-title-actions">
                <div class="d-inline-block dropdown">
                    @can(\App\Models\Permission::PERM_MENU_TEMPLATE_CREATE)
                        <a class="btn-shadow btn btn-primary text-white"
                           data-bs-toggle="modal"
                           data-bs-target="#replicate-modal"
                           data-modal-title="Create New Template"
                           data-submit-text="Create"
                           data-url="{{ route('app.templates.page-menu-templates.create', ['template' => request('template')]) }}"
                        >
                            <i class="fas fa-plus-circle"></i>
                            <span>Create New Template</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.page-menu-templates.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>Name</th>
                            <th>Page Title</th>
                            <th class="text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($pageMenuTemplates as $key => $menu)
                        <tr>
                            <td class="text-muted">#{{ $menu->id }}</td>
                            <td>{{ $menu->name }}</td>
                            <td>{{ $menu->page->title }}</td>
                            <td class="text-end">
                                <i class="fas fa-ellipsis-v dropdown-toggle me-3"
                                   id="item-dropdown-{{ $menu->id }}"
                                   data-bs-toggle="dropdown"
                                   aria-expanded="false">
                                </i>
                                <ul class="dropdown-menu" aria-labelledby="item-dropdown-{{ $menu->id }}">
                                    @can(\App\Models\Permission::PERM_MENU_TEMPLATE_CREATE)
                                        <li>
                                            <a class="dropdown-item replicate-trigger"
                                               data-bs-toggle="modal"
                                               data-bs-target="#replicate-modal"
                                               data-page-id="{{ $menu->page_id }}"
                                               data-modal-title="Replicate To"
                                               data-submit-text="Replicate"
                                               data-url="{{ route('app.templates.page-menu-templates.replicate', ['template' => request('template'), 'pageMenuTemplate' => $menu->id]) }}"
                                            >Replicate</a>
                                        </li>
                                    @endcan
                                    @can(\App\Models\Permission::PERM_MENU_TEMPLATE_UPDATE)
                                        <li>
                                            <a class="dropdown-item" href="{{ route('app.templates.page-menu-templates.edit',['template' => request('template'), 'pageMenuTemplate' => $menu->id]) }}">
                                                <span>Edit</span>
                                            </a>
                                        </li>
                                    @endcan
                                    @can(\App\Models\Permission::PERM_MENU_TEMPLATE_DELETE)
                                        <li>
                                            <button type="button" class="dropdown-item"
                                                    onclick="AppHelper.deleteData({{ $menu->id }}, '{{ $menu->name }}')">
                                                <span>Delete</span>
                                            </button>
                                            <form id="delete-form-{{ $menu->id }}"
                                                  action="{{ route('app.page.menu.template.destroy',$menu->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"></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</label>
                            <select id="page" class="form-control" name="page_id" required>
                            @foreach($pages as $page)
                                <option value="{{ $page['id'] }}">{{ $page['title'] }}</option>
                            @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_page_menu_templates_'
            });

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

                $('#page').val($(e.relatedTarget).data('page-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