{{-- EXTENDS TEMPLATE --}}
@extends('layouts.app')

{{-- TITLE --}}
@section('title', __('lang.menu'))

{{-- ADDITIONAL STYLE --}}
@push('addons-style')
<link rel="stylesheet" href="{{ url('/') }}/assets/vendor/DataTables/datatables.css" />
<link rel="stylesheet" href="{{ url('/') }}/assets/vendor/nestable/jquery.nestable.css">
@endpush

{{-- ADDITIONAL SCRIPT --}}
@push('addons-script')
<script src="{{ url('/') }}/assets/vendor/DataTables/datatables.js"></script>
<script src="{{ url('/') }}/assets/vendor/nestable/jquery.nestable.js"></script>
<script src="{{ url('/') }}/assets/vendor/parsley/parsley.min.js"></script>
@endpush

{{-- CUSTOM STYLESHEET --}}
@push('custom-style')

@endpush

{{-- CUSTOM SCRIPT --}}
@push('custom-script')
<script>
$(() => {
    var updateOutput = function (e) {
		var list = e.length ? e : $(e.target), output = list.data('output');

		if (window.JSON) {
            return (window.JSON.stringify(list.nestable('toArray')));
		} else {
			return false;
		}
	};

    $('#nestable').nestable({
        maxDepth : 3,
        animation: 'fade',
        time     : 'slow',
    });

    $("body").on("click", ".btn-save-menu", function(e) {
        e.preventDefault();

        let structure = updateOutput($('#nestable').data('output', $('#generate')));

        let form_data = {
            "data": structure,
        };

        $.ajax({
            url: '{{ route('menu.storeUpdate') }}',
            type: "POST",
            dataType: "JSON",
            data: form_data,
            success: function(data) {
                if (data.status) {
                    notifyToastr("success",data.message,lang.success);
                    setTimeout(function() {
                        location.reload();
                    }, 2000);
                } else {
                    sweetAlertConfirm("error", data.message, lang.failed);
                }
            }
        });
        return false;
    });
});
</script>
@endpush

{{-- CONTENT --}}
@section('content')
<section role="main" class="content-body">
    <x-page-layout :breadcrumbs="$bc"></x-page-layout>
    <div class="row">
        <div class="col-md-12">
            <section class="card card-featured card-featured-primary mb-4">
                <header class="card-header">
                    <h2 class="card-title">@lang('lang.menu')</h2>
                </header>
                <div class="card-body">
                    <div class="mb-3">
                        <x-forms.button-action class="btn btn-primary btn-sm waves-effect waves-light call-modal"
                            data-url="{{ route('menu.create') }}"
                            data-title="{{ __('lang.add_data', ['data' => __('lang.menu')]) }}" icon="fa fa-plus me-1">
                            {{ __('lang.add') }}
                        </x-forms.button-action>
                        <x-forms.button class="btn-info btn-sm btn-save-menu"><i class="fa fa-pencil me-2w"></i> {{ __('lang.perbaharui') }}</x-forms.button>
                    </div>
                    <p class="card-text mb-0">{{ __('messages.menu_update') }}</p>
                    <div class="dd" id="nestable">
                        @if (!$Menu->isEmpty())
                        <ol class="dd-list">
                            @foreach ($Menu as $item)
                            <li class="dd-item dd3-item" data-id="{{ $item->id }}">
                                <div class="dd-handle dd3-handle">{{ $item->label }} |
                                    @lang('lang.url') : {{ $item->url }}
                                </div>
                                <div>
                                    <x-forms.button-href class="btn btn-success btn-xs call-modal"
                                        data-url="{{route('menu.edit', encryptString($item->id))}}"
                                        data-title="{{__('lang.edit_data', ['data' => __('lang.menu'),])}}"
                                        icon="fa-solid fa-pen">{{ __('lang.edit') }}
                                    </x-forms.button-href>
                                    <x-forms.button-href class="btn btn-danger btn-xs delete-link-action"
                                        data-url="{{route('menu.destroy', encryptString($item->id))}}"
                                        data-title="{{__('lang.delete_data', ['data' => __('lang.menu'),])}}"
                                        icon="fa-solid fa-trash">{{ __('lang.delete') }}
                                    </x-forms.button-href>
                                </div>
                                @foreach ($SubMenu as $items)
                                    @if ($items->parent_id == $item->id)
                                    <ol class="dd-list">
                                        <li class="dd-item dd3-item" data-id="{{ $items->id }}">
                                            <div class="dd-handle dd3-handle">
                                                {{ $items->label }} |
                                                @lang('lang.url') : {{ $items->url }}
                                            </div>
                                            <div>
                                                <x-forms.button-href class="btn btn-success btn-xs call-modal"
                                                    data-url="{{route('menu.edit', encryptString($items->id))}}"
                                                    data-title="{{__('lang.edit_data', ['data' => __('lang.menu'),])}}"
                                                    icon="fa-solid fa-pen">{{ __('lang.edit') }}
                                                </x-forms.button-href>
                                                <x-forms.button-action class="btn btn-danger btn-xs delete-link-action"
                                                    data-url="{{route('menu.destroy', encryptString($items->id))}}"
                                                    data-title="{{__('lang.delete_data', ['data' => __('lang.menu'),])}}"
                                                    icon="fa-solid fa-trash">{{ __('lang.delete') }}
                                                </x-forms.button-action>
                                            </div>
                                            @foreach ($SubMenu as $items2)
                                                @if ($items2->parent_id == $items->id)
                                                <ol class="dd-list">
                                                    <li class="dd-item dd3-item" data-id="{{ $items2->id }}">
                                                        <div class="dd-handle dd3-handle">
                                                            {{ $items2->label }} |
                                                            @lang('lang.url') : {{ $items2->url }}
                                                        </div>
                                                        <div>
                                                            <x-forms.button-href class="btn btn-success btn-xs call-modal"
                                                                data-url="{{route('menu.edit', encryptString($items2->id))}}"
                                                                data-title="{{__('lang.edit_data', ['data' => __('lang.menu'),])}}"
                                                                icon="fa-solid fa-pen">{{ __('lang.edit') }}
                                                            </x-forms.button-href>
                                                            <x-forms.button-action class="btn btn-danger btn-xs delete-link-action"
                                                                data-url="{{route('menu.destroy', encryptString($items2->id))}}"
                                                                data-title="{{__('lang.delete_data', ['data' => __('lang.menu'),])}}"
                                                                icon="fa-solid fa-trash">{{ __('lang.delete') }}
                                                            </x-forms.button-action>
                                                        </div>
                                                        @foreach ($SubMenu as $items3)
                                                            @if ($items3->parent_id == $items2->id)
                                                            <ol class="dd-list">
                                                                <li class="dd-item dd3-item" data-id="{{ $items3->id }}">
                                                                    <div class="dd-handle dd3-handle">
                                                                        {{ $items3->label }} |
                                                                        @lang('lang.url') : {{ $items3->url }}
                                                                    </div>
                                                                    <div>
                                                                        <x-forms.button-href class="btn btn-success btn-xs call-modal"
                                                                            data-url="{{route('menu.edit', encryptString($items3->id))}}"
                                                                            data-title="{{__('lang.edit_data', ['data' => __('lang.menu'),])}}"
                                                                            icon="fa-solid fa-pen">{{ __('lang.edit') }}
                                                                        </x-forms.button-href>
                                                                        <x-forms.button-action class="btn btn-danger btn-xs delete-link-action"
                                                                            data-url="{{route('menu.destroy', encryptString($items3->id))}}"
                                                                            data-title="{{__('lang.delete_data', ['data' => __('lang.menu'),])}}"
                                                                            icon="fa-solid fa-trash">{{ __('lang.delete') }}
                                                                        </x-forms.button-action>
                                                                    </div>
                                                                </li>
                                                            </ol>
                                                            @endif
                                                        @endforeach
                                                    </li>
                                                </ol>
                                                @endif
                                            @endforeach
                                        </li>
                                    </ol>
                                    @endif
                                @endforeach
                            </li>
                            @endforeach
                            <span id="generate" style="color:#FF0000; font-weight:bold;"></span>
                        </ol>
                        @endif
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>
@endsection
