@extends('tenant.pos.pos-tabs')
@php
    $activeTab = 'menus';
@endphp
@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.point_of_sale') => '#',
            __('breadcrumb.menus')=> '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'pos.menus'])
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('css/libraries/jstree/default/style.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css')}}">

@endsection

@section('content-field')
    <div>
        <h4>@lang('pos/menus/index.menus')</h4>

        <div>
            <div class="menus-view">
                <div class="form-bg-color p-4 rounded-form">
                    @can('pos-menus-add')
                        <div>
                            <a href="{{ route('tenant.pos.menus.create') }}"
                                class="btn btn-sm orange-btn add-root-menu-btn">
                                <i class="fas fa-plus-circle"></i> @lang('pos/menus/index.add_main_menu')
                            </a>
                        </div>
                    @endcan

                    <div class="mb-4 row">
                        {{-- Menus Tree --}}
                        <div class="col-3">
                            @if ($menus->count())
                                <div id="menus-tree">
                                    <ul>
                                        @foreach ($menus as $menu)
                                            @include('tenant.pos.menus.item-tree-template', [
                                                'menu' => $menu,
                                            ])
                                        @endforeach
                                    </ul>
                                </div>
                            @else
                                <p> @lang('pos/menus/index.no_menus_yet')</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="{{ asset('js/libraries/jstree.min.js') }}"></script>

    <script>
        const addMenuPermission = "{{ Auth::user()->hasPermissionTo('pos-menus-add') }}";
        const editMenuPermission = "{{ Auth::user()->hasPermissionTo('pos-menus-edit') }}";
        const deleteMenuPermission = "{{ Auth::user()->hasPermissionTo('pos-menus-delete') }}";

        $(() => {
            $('.add-root-menu-btn').on('click', function() {
                $('#addMenuForm input[name="parent_id"]').val("");
            });
        });
    </script>

    <script src="{{ asset('js/pos/menus/index.js') }}"></script>
@endpush