@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>{{ division(request('division'), 'name') }} Menu Items</div>
            </div>

            <div class="page-title-actions">
                <div class="d-inline-block">
                    {{--<a href="" class="btn btn-shadow btn-primary">
                        <i class="fas fa-plus-circle"></i>
                        <span>Create {{ \App\Models\TemplateMenuItem::divisionList()->where('division', request('division'))->pluck('name')->first() }}  Menu Item</span>
                    </a>--}}
                    <div class="btn-group">
                        <button type="button" class="btn-shadow btn btn-primary text-white dropdown-toggle" data-bs-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-plus-circle"></i>
                            Create {{ division(request('division'), 'name') }}  Menu Item in Template
                        </button>
                        <div class="dropdown-menu dropdown-menu-lg-right overflow-auto 20vh">
                        @foreach($pages as $page)
                            <div class="font-weight-bolder p-2 text-truncate">{{ $page->title }}</div>
                            @foreach($page->templates as $template)
                                    <a class="dropdown-item {{ $template->default ? 'text-success' : '' }}"
                                       href="{{ route('app.page.template.menu.item.create.division',['pageMenuTemplate' => $template->id, 'division' => request('division')]) }}"
                                    >
                                        <i class="fas fa-check-circle me-1"></i> {{ $template->name }}
                                    </a>
                            @endforeach

                        @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">

            <div class="mb-3 main-card card">
                @if($templateMenuItems->count())
                <table id="datatable" class="table table-striped table-hover left-sort-icon">
                    <thead>
                        <tr>
                            <th class="text-left">Name</th>
                            <th class="text-left">URL</th>
                            <th>Viewable</th>
                            <th class="text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody>

                    @foreach($templateMenuItems as $item)
                        <tr>
                            <td>
                                <span class="fs-100 font-weight-bolder">{{ pure_text($item->name) }}</span>
                                <small>{{ $item->slug }}</small>
                            </td>
                            <td>
                                <a href="{{ route('welcome',$item->slug) }}" target="_blank">
                                    {{ $item->slug }}
                                </a>
                            </td>
                            <td>
                                <button id="item--{{ $item->id }}" class="btn-shadow btn btn-sm {{ $item->default_view ? 'btn-outline-success text-success' : 'btn-outline-secondary text-secondary'}}"
                                        onclick="toggleDefault({{ $item->id }})">
                                    <i class="fas fa-check-circle"></i>
                                </button>
                            </td>
                            <td class="text-end">

                                <i class="fas fa-ellipsis-v dropdown-toggle"
                                   id="division-dropdown-{{ $page->id }}"
                                   data-bs-toggle="dropdown"
                                   aria-expanded="false">
                                </i>
                                <ul class="dropdown-menu" aria-labelledby="division-dropdown-{{ $page->id }}">
                                    <li>
                                        <a class="dropdown-item edit" href="{{ route('app.page.template.menu.item.edit',$item->id) }}">
                                            <span>Edit Menu Item</span>
                                        </a>
                                    </li>

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

                                    <li>
                                        <button type="button" class="dropdown-item delete" onclick="AppHelper.deleteData({{ $item->id }})">
                                            <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>

                                </ul>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>

                </table>

                @else
                    <div class="p-3"><strong >No menu item found.</strong></div>
                @endif

                <!-- /.card-body -->

            <!-- /.card -->
        </div>
    </div>
@endsection

@push('js')
    <script type="text/javascript">

        function toggleDefault(id){

            axios({
                url: '{{ url("/app/page/template-menu-item-default") }}/' + id,
                method: 'POST'
            }).then((response) => {
                iziToast.success({
                    title: 'Success',
                    message: response.data.message,
                });

                let el = $('#item--'+id);

                if(el.hasClass('text-success')){
                    el.removeClass('text-success');
                    el.removeClass('btn-outline-success');
                    el.addClass('text-secondary btn-outline-secondary');
                } else {
                    el.addClass('btn-outline-success text-success');
                    el.removeClass('btn-outline-secondary');
                    el.removeClass('text-secondary');
                }
            });
        }
    </script>
@endpush