@extends('admin.layouts.main')

@section('title', 'Menu')

@section('menu', 'Menu')

@push('css')
    <!-- Datatable Src -->
    <link href="{{ asset('assets/metronic/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
    <!-- Datatable Src -->
@endpush

@section('content')
<!--begin::Container-->
<div id="kt_content_container" class="app-container container-fluid">
    <div class="card card-flush">
        <div class="card-header">
            <h3 class="card-title">Data Menu dan Sub Menu</h3>
            <div class="card-toolbar">
                <a class="btn btn-sm btn-primary" href="{{ route('admin.menu.create') }}">
                    Tambah Menu
                </a>
                <a class="btn btn-sm btn-success ms-3" href="{{ route('admin.menu.submenu.create') }}">
                    Tambah Sub Menu
                </a>
            </div>
        </div>
        <div class="card-body py-5 mx-5">
            <ul class="list-group mb-1 mt-4">
                <li class="list-group-item">Beranda</li>
            </ul>

            @foreach ($menus as $menu)
                <ul class="list-group mb-1">
                    <li class="list-group-item">{{ $menu->menu }}
                        <a style="float:right" href="#" onclick="deleteMenu('{{ $menu->id }}', '{{ $menu->menu }}')" data-bs-toggle="tooltip" data-bs-placement="top" title="Hapus menu"><i class="fas fa-trash text-danger"></i></a>
                        <a style="float:right" href="{{ route('admin.menu.edit', $menu->id) }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit menu"><i class="fas fa-edit text-warning me-2"></i></a>
                    </li>
                </ul>
                @foreach ($menu->submenus as $submenu)
                    <ul class="list-group ms-15 mb-1">
                        <li class="list-group-item">{{ $submenu->sub_menu }}
                            <a style="float:right" href="#" onclick="deleteSubMenu('{{ $submenu->id }}', '{{ $submenu->sub_menu }}')" data-bs-toggle="tooltip" data-bs-placement="top" title="Hapus sub menu"><i class="fas fa-trash text-danger"></i></a>
                        <a style="float:right" href="{{ route('admin.menu.submenu.edit', $submenu->id) }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit sub menu"><i class="fas fa-edit text-warning me-2"></i></a>
                        </li>
                    </ul>
                @endforeach
            @endforeach
        </div>
        <div class="card-footer px-10">
        </div>
    </div>
</div>
<!--end::Container-->

<!--start::Hidden Form-->
<form id="form-delete-menu" action="" method="POST" style="display: none;">
    @csrf
</form>

<form id="form-delete-submenu" action="" method="POST" style="display: none;">
    @csrf
</form>
<!--end::Hidden Form-->
@endsection

@push('js')
<!-- Main Script -->
<script>
    $(document).ready( function () {
        /* Set Nav-Link Active */
        $('#menu-item-menus').addClass('here show');
        $('#menu-link-menus').addClass('active');
    });

    /* Delete Menu */
    function deleteMenu(id, title){
        Swal.fire({
            title: 'Hapus Menu',
            text: 'Apakah anda yakin ingin menghapus data menu "'+title+'"?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, hapus',
            cancelButtonText: 'Tidak',
            customClass: {
                confirmButton: "btn btn-primary",
                cancelButton: 'btn btn-danger'
            }
            }).then((result) => {
                if (result.isConfirmed) {
                    var url = '{{ route("admin.menu.delete", ':id') }}';
                    url = url.replace(':id', id);
                    $('#form-delete-menu').attr('action', url);
                    $('#form-delete-menu').submit();
                }
            })
    }

    /* Delete Sub Menu */
    function deleteSubMenu(id, title){
        Swal.fire({
            title: 'Hapus Sub Menu',
            text: 'Apakah anda yakin ingin menghapus data sub menu "'+title+'"?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, hapus',
            cancelButtonText: 'Tidak',
            customClass: {
                confirmButton: "btn btn-primary",
                cancelButton: 'btn btn-danger'
            }
            }).then((result) => {
                if (result.isConfirmed) {
                    var url = '{{ route("admin.menu.submenu.delete", ':id') }}';
                    url = url.replace(':id', id);
                    $('#form-delete-submenu').attr('action', url);
                    $('#form-delete-submenu').submit();
                }
            })
    }
</script>
@endpush