@extends('admin.master')
@section('title', 'Menu')
@push('post_styles')
    <link rel="stylesheet" href="{{ asset('backend/assets/css/nestable.min.css') }}">
    <link rel="stylesheet" href="{{ asset('backend/admin/css/menu.css') }}">
@endpush
@section('breadcrumb')
    <div class="breadcrumb-area">
        <h5>{{ translate('Dashboard') }}</h5>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ translate('Dashboard') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ translate('Menu') }}</li>
            </ol>
        </nav>
    </div>
@endsection
@section('main_content')
    <div class="main-content">
        <div class="row mb-35">
            <div class="page-title d-flex gap-3 align-items-center page-menu-list">
                @if (count($menus) > 0)
                    <h6 class="text-sucess">{{ translate('Select a menu') }} </h6>
                    <div class="page-menu-item-list d-flex">
                        <form class="d-flex gap-3" id="menu-form" method="GET" action="{{ route('admin.menu') }}">
                            @foreach ($menus as $menu)
                                <div class="form-check">
                                    <input
                                        class="form-check-input menu-change {{ $selectedMenu ? ($menu->id == $selectedMenu ? '' : '') : ($loop->first ? 'default-checked' : '') }}"
                                        type="checkbox"
                                        @if ($selectedMenu) {{ $menu->id == $selectedMenu ? 'checked' : '' }}

                                         @else
                                         {{ $loop->first ? 'checked' : '' }} @endif
                                        value="{{ $menu->id }}" id="menu{{ $menu->id }}" name="id">
                                    <label class="form-check-label" for="menu{{ $menu->id }}">
                                        {{ $menu->getTranslation('name') }}</label>
                                </div>
                            @endforeach
                        </form>
                    </div>
                @endif
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4">
                <div class="eg-card product-card add-menu-item">
                    <h4><span>{{ translate('Add Menu Item') }}</span></h4>
                    <div class="row">
                        <div class="col-12">
                            <div class="accordion item-area-list" id="accordionExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="categoryList">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#categories-list" aria-expanded="true"
                                            aria-controls="categories-list">
                                            {{ translate('Categories') }}
                                        </button>
                                    </h2>
                                    <div id="categories-list" class="accordion-collapse collapse"
                                        aria-labelledby="categoryList" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <input type="hidden" name="menu_type" value="category" id="menu_type">
                                            @foreach ($categories as $category)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="categories[]"value="{{ $category->id }}"
                                                        id="category{{ $category->id }}">
                                                    <label class="form-check-label" for="category{{ $category->id }}">
                                                        {{ $category->getTranslation('category_name') }}
                                                    </label>
                                                </div>
                                            @endforeach
                                            <div class="mt-2"></div>
                                            <div class="justify-content-between">
                                                <label class="btn btn-sm btn-default border-3 border-secondary"><input
                                                        class="form-check-input checked-all-item" type="checkbox">
                                                    {{ translate('Select All') }}</label>
                                                <button type="button"
                                                    class="pull-right btn btn-default btn-sm border-3 border-secondary add-menu"
                                                    id="add-categories"> {{ translate('Add to Menu') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="pagesList">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#pages-list" aria-expanded="true" aria-controls="pages-list">
                                            {{ translate('Pages') }}
                                        </button>
                                    </h2>
                                    <div id="pages-list" class="accordion-collapse collapse pages-list"
                                        aria-labelledby="pagesList" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <input type="hidden" name="menu_type" value="page" id="menu_type">
                                            @foreach ($pages as $page)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        value="{{ $page->id }}" name="pages[]"
                                                        id="page{{ $page->id }}">
                                                    <label class="form-check-label cursor-pointer "
                                                        for="page{{ $page->id }}">
                                                        {{ $page->getTranslation('page_name') }}
                                                    </label>
                                                </div>
                                            @endforeach
                                            <div class="mt-2"></div>
                                            <div class="justify-content-between">
                                                <label class="btn btn-sm btn-default border-3 border-secondary"><input
                                                        class="form-check-input checked-all-item" type="checkbox">
                                                    {{ translate('Select All') }}</label>
                                                <button type="button"
                                                    class="pull-right btn btn-default btn-sm border-3 border-secondary add-menu"
                                                    id="add-pages">{{ translate('Add to Menu') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="blogsList">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#blogs-list" aria-expanded="true" aria-controls="blogs-list">
                                            {{ translate('Blogs') }}
                                        </button>
                                    </h2>
                                    <div id="blogs-list" class="accordion-collapse collapse pages-list"
                                        aria-labelledby="blogsList" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <input type="hidden" name="menu_type" value="blog" id="menu_type">
                                            @foreach ($blogs as $blog)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        value="{{ $blog->id }}" id="blog{{ $blog->id }}"
                                                        name="blogs[]">
                                                    <label class="form-check-label" for="blog{{ $blog->id }}">
                                                        {{ Str::limit($blog->getTranslation('blog_title'), 15) }}...
                                                    </label>
                                                </div>
                                            @endforeach
                                            <div class="mt-2"></div>
                                            <div class="justify-content-between">
                                                <label class="btn btn-sm btn-default border-3 border-secondary ">
                                                    <input class="form-check-input checked-all-item" type="checkbox">
                                                    {{ translate('Select All') }}</label>
                                                <button type="button"
                                                    class="pull-right btn btn-default btn-sm border-3 border-secondary add-menu"
                                                    id="add-blogs"> {{ translate('Add to Menu') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="customLink">
                                        <button class="accordion-button" type="button"
                                            data-bs-toggle="collapse"data-bs-target="#custom-link" aria-expanded="true"
                                            aria-controls="custom-link"> {{ translate('Custom Link') }}
                                        </button>
                                    </h2>
                                    <div id="custom-link" class="accordion-collapse collapse"
                                        aria-labelledby="customLink" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <input type="hidden" name="menu_type" value="custom" id="menu_type">
                                            <div class="form-inner mb-3">
                                                <label>{{ translate('Menu Name') }}<span>*</span></label>
                                                <input type="text" class="username-input" name="custom_menu_name"
                                                    id="custom_menu_name" placeholder="{{ translate('Menu Name') }}">
                                                <div class="text-danger"></div>
                                            </div>
                                            <div class="form-inner mb-3">
                                                <label> {{ translate('Link') }}</label>
                                                <input type="text" class="username-input" name="custom_link"
                                                    id="custom_link" placeholder="https://">
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="newTap"
                                                    name="new_tap">
                                                <label class="form-check-label"
                                                    for="newTap">{{ translate('Open In New Window') }} ?</label>
                                            </div>
                                            <div class="justify-content-between">
                                                <button type="button"
                                                    class="pull-right btn btn-default btn-sm border-3 border-secondary add-menu"
                                                    id="add-custom-menu"> {{ translate('Add to Menu') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="eg-card product-card menu-structure">
                    <h4><span>{{ translate('Menu Structure') }}</span></h4>

                    <input type="hidden" name="lang" id="lang" value="{{ activeLanguage() }}">
                    <p> {{ translate('add') }}
                        {{ translate('Categories') }},{{ translate('Pages') }},{{ translate('Blogs') }}
                        {{ translate('or') }}
                        {{ translate('Custom Link') }} {{ translate('to the menu') }} </p>

                    <div class="dd" id="nestable">
                        <ol class="dd-list">
                            @if (!empty($itemsWithChildrens))
                                @foreach ($itemsWithChildrens as $item)
                                    <li class="dd-item" data-id="{{ $item->id }}">
                                        <div class="dd-handle">
                                            @if ($item->menu_type == 'page')
                                                {{ $item?->page?->getTranslation('page_name') }}
                                                (<b>{{ translate("$item->menu_type") }}</b>)
                                            @elseif ($item->menu_type == 'category')
                                                {{ $item->category->getTranslation('category_name') }}
                                                (<b>{{ translate("$item->menu_type") }}</b>)
                                            @elseif ($item->menu_type == 'blog')
                                                {{ $item?->blog?->getTranslation('blog_title') }}
                                                (<b>{{ translate("$item->menu_type") }}</b>)
                                            @else
                                                {{ $item->getTranslation('title') }}
                                                (<b>{{ translate("$item->menu_type") }}</b>)
                                            @endif
                                        </div>
                                        <div class='action-area'>
                                            @if ($item->menu_type == 'custom')
                                                <a href="#" class="btn add--btn shadow me-2 edit-menu-item"
                                                    data-bs-toggle="modal" data-bs-target="#editMenuItemModal" d
                                                    data-id="{{ $item->id }}">
                                                    <i class="bi bi-pencil-square"></i>
                                                </a>
                                            @endif
                                            <a href='#' class='btn btn-danger delete cs-danger shadow '
                                                data-id="{{ $item->id }}">
                                                <i class="bi bi-trash"></i>
                                            </a>
                                        </div>
                                        @if ($item->childrens->count() > 0)
                                            <ol class="dd-list">
                                                @foreach ($item->childrens as $childItem)
                                                    <li class="dd-item" data-id="{{ $childItem->id }}">
                                                        <div class="dd-handle">
                                                            @if ($childItem->menu_type == 'page')
                                                                {{ $childItem?->page?->getTranslation('page_name') }}
                                                                (<b>{{ translate("$childItem->menu_type") }}</b>)
                                                            @elseif ($childItem->menu_type == 'category')
                                                                {{ $childItem->category->getTranslation('category_name') }}
                                                                (<b>{{ translate("$childItem->menu_type") }}</b>)
                                                            @elseif ($childItem->menu_type == 'blog')
                                                                {{ $childItem?->blog?->getTranslation('blog_title') }}
                                                                (<b>{{ translate("$childItem->menu_type") }}</b>)
                                                            @else
                                                                {{ $childItem->getTranslation('title') }}
                                                                (<b>{{ translate("$childItem->menu_type") }}</b>)
                                                            @endif
                                                        </div>
                                                        <div class='action-area'>
                                                            @if ($childItem->menu_type == 'custom')
                                                                <a href="#"
                                                                    class="btn add--btn shadow me-2 edit-menu-item"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#editMenuItemModal" d
                                                                    data-id="{{ $childItem->id }}">
                                                                    <i class="bi bi-pencil-square"></i>
                                                                </a>
                                                            @endif
                                                            <a href='#'
                                                                class='btn btn-danger delete cs-danger shadow '
                                                                data-id="{{ $childItem->id }}">
                                                                <i class="bi bi-trash"></i>
                                                            </a>
                                                        </div>

                                                        @if ($childItem->childrens->count() > 0)
                                                            <ol class="dd-list">
                                                                @foreach ($childItem->childrens as $child)
                                                                    <li class="dd-item" data-id="{{ $child->id }}">
                                                                        <div class="dd-handle">

                                                                            @if ($child->menu_type == 'page')
                                                                                {{ $child?->page?->getTranslation('page_name') }}
                                                                                (<b>{{ translate("$child->menu_type") }}</b>)
                                                                            @elseif ($child->menu_type == 'category')
                                                                                {{ $child->category->getTranslation('category_name') }}
                                                                                (<b>{{ translate("$child->menu_type") }}</b>)
                                                                            @elseif ($child->menu_type == 'blog')
                                                                                {{ $child?->blog?->getTranslation('blog_title') }}
                                                                                (<b>{{ translate("$child->menu_type") }}</b>)
                                                                            @else
                                                                                {{ $child->getTranslation('title') }}
                                                                                (<b>{{ translate("$child->menu_type") }}</b>)
                                                                            @endif
                                                                        </div>
                                                                        <div class='action-area'>


                                                                            @if ($child->menu_type == 'custom')
                                                                                <a href="#"
                                                                                    class="btn add--btn shadow me-2 edit-menu-item"
                                                                                    data-bs-toggle="modal"
                                                                                    data-bs-target="#editMenuItemModal" d
                                                                                    data-id="{{ $child->id }}">
                                                                                    <i class="bi bi-pencil-square"></i>
                                                                                </a>
                                                                            @endif


                                                                            <a href='#'
                                                                                class='btn btn-danger delete cs-danger shadow '
                                                                                data-id="{{ $child->id }}">
                                                                                <i class="bi bi-trash"></i>
                                                                            </a>
                                                                        </div>
                                                                    </li>
                                                                @endforeach
                                                            </ol>
                                                        @endif
                                                    </li>
                                                @endforeach
                                            </ol>
                                        @endif
                                    </li>
                                @endforeach
                            @endif
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <div class="modal fade menu-modal" id="editMenuItemModal" tabindex="-1" aria-labelledby="editMenuItemModal"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <p class="modal-title" id="exampleModalLabel">{{ translate('Menu Edit') }}</p>
                        <a type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </a>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('admin.menu.item.update') }}" method="POST" class="add-form">
                            <input type="hidden" name="lang" id="lang" value="{{ activeLanguage() }}">
                            @csrf
                            <input type="hidden" id="menuItemId" name="id" />
                            <div class="form-inner mb-3">
                                <label> {{ translate('Menu Name Item') }} <span>*</span></label>
                                <input type="text" class="username-input" id="menuItemName" name="title"
                                    placeholder="Menu Item Name">
                            </div>
                            <div class="custom-field"></div>

                            <div class="button-group d-flex justify-content-end mt-30">
                                <button type="button" class="btn btn-danger sm-btn shadow me-2"
                                    data-bs-dismiss="modal">{{ translate('Close') }}</button>
                                <button type="submit"
                                    class="eg-btn btn--green sm-btn shadow">{{ translate('Update') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('post_scripts')
    @include('js.custom');
    <script src="{{ asset('backend/assets/js/nestable.min.js') }}"></script>
    @include('js.admin.menu');
@endpush