@extends('Template::layouts.app')
@section('app')
    <div class="dashboard position-relative">
        <div class="dashboard__inner flex-wrap">
            @include('Template::partials.sidebar')
            <div class="dashboard__right">
                @include('Template::partials.topbar')
                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="col-xxl-10">
                            <div class="dashboard-body">
                                @yield('content')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('script')
        <script>
            $(document).ready(function() {
                $('.sidebar-menu-toggle').on('click', function() {
                    const $item = $(this).closest('.sidebar-menu-list__item');
                    const $submenu = $item.find('.sidebar-menu-list__sub-menu');
                    if ($item.hasClass('open')) {
                        $submenu.css({
                            maxHeight: 0,
                            opacity: 0
                        });
                    } else {
                        const scrollHeight = $submenu[0].scrollHeight; // Get actual content height
                        $submenu.css({
                            maxHeight: scrollHeight + 'px',
                            opacity: 1
                        });
                    }
                    $item.toggleClass('open');
                });
            });
        </script>
    @endpush
@endsection