@extends('layouts.app')

@section('title')
    {{ $pageInfo['title'] }}
@endsection

@section('styles')
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">


    <style>
        .easyui-tree li {
            padding-left: 10px;
        }
    </style>
@endsection

@section('admin-content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ $pageInfo['title'] }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
                        <li class="breadcrumb-item active"><a href="{{ $pageInfo['path'] }}">{{ $pageInfo['title'] }}</a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 mt-5">
                    <div class="card">
                        <div class="card-body">
                            <p class="float-right mb-2">
                                <a class="btn btn-secondary text-white" href="{{ route('admin.roles.index') }}">
                                    <i class="fa fa-arrow-left"></i> Back</a>
                                <a class="btn btn-primary text-white" onclick="submitMenuSelection()">
                                    <i class="fa fa-save"></i> Save Selection</a>
                            </p>
                            <form id="menuForm" method="POST" action="">
                                @csrf
                                <input type="hidden" id="role_id" name="role_id" value="{{ $role_id }}">
                                <div class="col-md-8">
                                    <ul id="menuTree" class="easyui-tree" data-options="checkbox:true,animate:true">
                                        {{-- Data di-parse ke JSON format --}}
                                    </ul>
                                </div>

                            </form>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection

@section('scripts')
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

    <script>
        if ($('#dataTable').length) {
            $('#dataTable').DataTable({
                responsive: false
            });
        }

        $(document).ready(function() {
            // Tree data dari Laravel (parsed sebagai JSON)
            const treeData = {!! json_encode($menuTree) !!};

            // Initialize EasyUI tree dengan data dari controller
            $('#menuTree').tree({
                data: treeData,
                cascadeCheck: $(this).is(':checked'),
            });


        });


        // Submit menu selection
        function submitMenuSelection() {
            const checkedNodes = $('#menuTree').tree('getChecked');
            const selectedIds = checkedNodes.map(node => node.id);
            var listMenu = JSON.stringify(selectedIds);
            var roleId = $('#role_id').val();

            $.ajax({
                url: '{{ route('auth.menurole.submit') }}',
                type: 'POST',
                data: {
                    menu_ids: listMenu,
                    role_id: roleId
                },
                success: function(response) {
                    Swal.fire({
                        title: 'Success!',
                        text: 'Menu selection saved successfully!',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error!',
                        text: 'An error occurred while saving menu selection.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }
    </script>
@endsection