@extends('layouts.backend.app')

@section('title','Menus')

@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>{{ __('Menu Templates') }}</div>
            </div>
            <div class="page-title-actions">
                <div class="d-inline-block dropdown">
                    @can(\App\Models\Permission::PERM_MENU_TEMPLATE_CREATE)
                    <a href="{{ route('app.page.menu.template.create', $page->id) }}" class="btn-shadow btn btn-info text-white">
                        <i class="fas fa-plus-circle fa-w-20"></i> Create New Template
                    </a>
                    @endcan
                    <a href="{{ route('app.pages.index', request()->get('template', $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-page-menu-template-builder :pageMenuTemplates="$templates"/>
    {{--<div class="main-card mb-3 card">
        <div class="card-body">
            <table id="datatable" class="table table-striped table-hover left-sort-icon">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Template Name</th>
                    <th>Default Template</th>
                    <th class="text-end">Action</th>
                </tr>
                </thead>
                <tbody>
                @foreach($templates as $key => $template)
                    <tr>
                        <td class="text-muted">#{{ $key + 1 }}</td>
                        <td>
                            <code>{{ $template->name }}</code>
                        </td>
                        <td>
                            @can(\App\Models\Permission::PERM_MENU_TEMPLATE_UPDATE)
                            <button class="btn-shadow btn border-0 {{ $template->default ? 'text-success' : 'text-secondary'}}"
                                @if($template->default)
                                disabled="disabled"
                                @else
                                onclick="AppHelper.defaultTemplate({{  $template->id }})"
                                @endif
                            >
                                <i class="fas fa-check-circle"></i>
                            </button>
                            <form id="default-template-form-{{ $template->id }}"
                                    action="{{ route('app.page.menu.template.default',$template->id) }}"
                                    method="POST" style="display: none;">
                                @csrf()
                            </form>
                            @endcan
                        </td>
                        <td class="text-end">
                            @can(\App\Models\Permission::PERM_MENU_TEMPLATE_UPDATE)
                            <a class="me-2 btn-shadow btn btn-sm {{ $template->visible ? 'text-success btn-outline-success' : 'text-secondary btn-outline-secondary'}}"
                                    onclick="AppHelper.updateVisibility({{  $template->id }})"
                            >
                                <i class="fas fa-check-circle"></i>
                            </a>
                            <form id="update-visibility-form-{{ $template->id }}"
                                  action="{{ route('app.page.menu.template.visibility',$template->id) }}"
                                  method="POST" style="display: none;">
                                @method('PUT')
                                @csrf()
                            </form>
                            @endcan
                            <i class="fas fa-ellipsis-v dropdown-toggle me-3"
                               id="menu-item-dropdown-{{ $template->id }}"
                               data-bs-toggle="dropdown"
                               aria-expanded="false">
                            </i>
                            <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-{{ $template->id }}">
                                @can(\App\Models\Permission::PERM_TEMPLATE_MENU_ITEM_READ)
                                <li>
                                    <a class="dropdown-item" href="{{ route('app.page.menu.template.show',$template->id) }}">
                                        <span>Edit Menu</span>
                                    </a>
                                </li>
                                @endcan
                                @can(\App\Models\Permission::PERM_MENU_TEMPLATE_UPDATE)
                                <li>
                                    <a class="dropdown-item" href="{{ route('app.page.menu.template.edit',$template->id) }}">
                                        <span>Edit Template</span>
                                    </a>
                                </li>

                                <li>
                                    <button type="button" class="dropdown-item"
                                            onclick="AppHelper.duplicateTemplate({{ $template->id }})"
                                    >
                                        <span>Duplicate</span>
                                    </button>
                                    <form id="duplicate-template-form-{{ $template->id }}"
                                          action="{{ route('app.page.template.duplicate',$template->id) }}"
                                          method="POST" style="display: none;">
                                        @csrf()
                                    </form>

                                </li>

                                <li>
                                    <button type="button" class="dropdown-item"
                                            onclick="AppHelper.resetTemplate({{ $template->id }})">
                                        <span>Reset</span>
                                    </button>
                                    <form id="reset-template-form-{{ $template->id }}"
                                          action="{{ route('app.page.template.reset',$template->id) }}"
                                          method="POST" style="display: none;">
                                        @csrf()
                                    </form>
                                </li>
                                @endcan
                                @can(\App\Models\Permission::PERM_MENU_TEMPLATE_DELETE)
                                <li>
                                    <button type="button" class="dropdown-item"
                                            onclick="AppHelper.deleteData({{ $template->id }}, '{{ $template->name }}')">
                                        <span>Delete</span>
                                    </button>
                                    <form id="delete-form-{{ $template->id }}"
                                          action="{{ route('app.page.menu.template.destroy',$template->id) }}"
                                          method="POST" style="display: none;">
                                        @csrf()
                                        @method('DELETE')
                                    </form>
                                </li>
                                @endcan
                            </ul>

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

@push('js')
    <script>
        $(document).ready(function() {
            // Datatable
            $("#datatable").DataTable();

        });
    </script>
@endpush