@php
    $permissions = session('permissions', []);
    $model_allowed = session('model_allowed', []);

    // dd($permissions);
@endphp
<aside class="sidebar-wrapper" data-simplebar="true">
    <div class="sidebar-header">
    <!-- <div>
        <img src="{{asset('assets/images/logo-icon-2.png')}}" class="logo-icon" alt="logo icon">
    </div> -->
    <div>
        <img style="width:154px;height:48;" src="{{asset('assets/images/VIDFY rev Logo-01.svg')}}" alt="brand">
    </div>
    </div>
    <!--navigation-->
    <ul class="metismenu" id="menu">
    <li>
        <a href="{{route('agency.dashboard')}}">
        <div class="parent-icon">
            <i class="lni lni-home"></i>
        </div>
        <div class="menu-title">Dashboard</div>
        </a>
    </li>
    {{-- @if (isset($permissions['usrcrt']) || isset($permissions['rlcrt']) || isset($permissions['all']))
    <li>
        <a href="javascript:;" class="has-arrow">
        <div class="parent-icon">
            <i class="lni lni-users"></i>
        </div>
        <div class="menu-title">Users</div>
        </a>
        <ul>
            @if (isset($permissions['rlcrt']) || isset($permissions['all']))
            <li>
                <a href="{{ route('agency.roles') }}">
                    <ion-icon name="ellipse-outline"></ion-icon>
                    Roles
                </a>
            </li>
            @endif
            @if (isset($permissions['usrcrt']) || isset($permissions['all']))
            <li>
                <a href="{{ route('agency.users') }}">
                    <ion-icon name="ellipse-outline"></ion-icon>
                    Users
                </a>
            </li>
            @endif
        </ul>
    </li>
    @endif --}}

    @php
        $menuItems = [
            'pjc' => [
                'route' => 'agency.projects',
                'icon' => 'lni lni-library',
                'title' => 'Projects'
            ],
            'scc' => [
                'route' => 'agency.scripts',
                'icon' => 'lni lni-text-align-left',
                'title' => 'Scripts'
            ],
            'vcl' => [
                'route' => 'agency.voices',
                'icon' => 'lni lni-soundcloud',
                'title' => 'Voices'
            ],
            'tts' => [
                'route' => 'agency.tts',
                'icon' => 'lni lni-wechat',
                'title' => 'Speech Synthesis'
            ],
            'sts' => [
                'route' => 'agency.sts',
                'icon' => 'lni lni-users',
                'title' => 'Voice Changer'
            ],
            'lip' => [
                'route' => [
                    'agency.lipsync',
                    'agency.lipsynced.processing',
                    // 'agency.lipsynced.pending',
                    // 'agency.lipsynced.approved',
                    // 'agency.lipsynced.rejected'
                ],
                'icon' => [
                    'lni lni-video',
                    'bi bi-person-video',
                    // 'lni lni-hand',
                    // 'lni lni-thumbs-up',
                    // 'lni lni-thumbs-down'
                ],
                'title' => [
                    'LipSync',
                    'Videos',
                    // 'Pending Videos',
                    // 'Approved Videos',
                    // 'Rejected Videos'
                ]
            ]
        ];
    @endphp

    @foreach ($menuItems as $key => $item)
        @if (in_array($key, $model_allowed))
            @php
                // Check for permission
                $canView = isset($permissions[$key]) && isset($permissions[$key]['view']) && $permissions[$key]['view'] == "true";
                // Allow if 'all' permission exists
                $canView = $canView || (isset($permissions['all']));
            @endphp

            @if ($canView)
                @if ($key == 'lip')
                    {{-- Handle LipSync menu with submenus --}}
                    @foreach ($item['route'] as $index => $subRoute)
                        <li>
                            <a href="{{ route($subRoute) }}">
                                <div class="parent-icon">
                                    <i class="{{ $item['icon'][$index] }}"></i>
                                </div>
                                <div class="menu-title">{{ $item['title'][$index] }}</div>
                            </a>
                        </li>
                    @endforeach
                @else
                    <li>
                        <a href="{{ route($item['route']) }}">
                            <div class="parent-icon">
                                <i class="{{ $item['icon'] }}"></i>
                            </div>
                            <div class="menu-title">{{ $item['title'] }}</div>
                        </a>
                    </li>
                @endif
            @endif
        @endif
    @endforeach
{{--
    @if (in_array('pjc', $model_allowed))
        @if (isset($permissions['pjc']) || isset($permissions['all']))
            @if ($permissions['pjc']['view'] == "true")
                <li>
                    <a href="{{route('agency.projects')}}">
                    <div class="parent-icon">
                        <i class="lni lni-library"></i>
                    </div>
                    <div class="menu-title">Projects</div>
                    </a>
                </li>
            @endif
        @endif
    @endif

    @if (in_array('scc', $model_allowed))
        @if (isset($permissions['scc']) || isset($permissions['all']))
            @if ($permissions['scc']['view'] == "true")
            <li>
                <a href="{{route('agency.scripts')}}">
                <div class="parent-icon">
                    <i class="lni lni-text-align-left"></i>
                </div>
                <div class="menu-title">Scripts</div>
                </a>
            </li>
            @endif
        @endif
    @endif

    @if (in_array('tts', $model_allowed))
        @if (isset($permissions['tts']) || isset($permissions['all']))
            @if ($permissions['tts']['view'] == "true")
                <li>
                    <a href="{{route('agency.tts')}}">
                    <div class="parent-icon">
                        <i class="lni lni-wechat"></i>
                    </div>
                    <div class="menu-title">Text to Speech</div>
                    </a>
                </li>
            @endif
        @endif
    @endif

    @if (in_array('sts', $model_allowed))
        @if (isset($permissions['sts']) || isset($permissions['all']))
            @if ($permissions['sts']['view'] == "true")
                <li>
                    <a href="{{route('agency.sts')}}">
                    <div class="parent-icon">
                        <i class="lni lni-users"></i>
                    </div>
                    <div class="menu-title">Speech to Speech</div>
                    </a>
                </li>
            @endif
        @endif
    @endif

    @if (in_array('vcl', $model_allowed))
        @if (isset($permissions['vcl']) || isset($permissions['all']))
            @if ($permissions['vcl']['view'] == "true")
                <li>
                    <a href="{{route('agency.voices')}}">
                    <div class="parent-icon">
                        <i class="lni lni-soundcloud"></i>
                    </div>
                    <div class="menu-title">Voices</div>
                    </a>
                </li>
            @endif
        @endif
    @endif

    @if (in_array('lip', $model_allowed))
        @if (isset($model_allowed['lip']) || isset($model_allowed['all']))
            @if ($permissions['lip']['view'] == "true")
                <li>
                    <a href="{{route('agency.lipsync')}}">
                    <div class="parent-icon">
                        <i class="lni lni-video"></i>
                    </div>
                    <div class="menu-title">LipSync</div>
                    </a>
                </li>
                <li>
                    <a href="{{route('agency.lipsynced.processing')}}">
                    <div class="parent-icon">
                        <i class="lni lni-spinner"></i>
                    </div>
                    <div class="menu-title">Processing Videos</div>
                    </a>
                </li>
                <li>
                    <a href="{{route('agency.lipsynced.pending')}}">
                    <div class="parent-icon">
                        <i class="lni lni-hand"></i>
                    </div>
                    <div class="menu-title">Pending Videos</div>
                    </a>
                </li>
                <li>
                    <a href="{{route('agency.lipsynced.approved')}}">
                    <div class="parent-icon">
                        <i class="lni lni-thumbs-up"></i>
                    </div>
                    <div class="menu-title">Approved Videos</div>
                    </a>
                </li>
                <li>
                    <a href="{{route('agency.lipsynced.rejected')}}">
                    <div class="parent-icon">
                        <i class="lni lni-thumbs-down"></i>
                    </div>
                    <div class="menu-title">Rejected Videos</div>
                    </a>
                </li>
            @endif
        @endif
    @endif --}}
    {{-- <li>
        <a href="{{route('agency.settings')}}">
        <div class="parent-icon">
            <ion-icon name="settings-outline"></ion-icon>
        </div>
        <div class="menu-title">Settings</div>
        </a>
    </li> --}}
    <!-- <li>
        <a href="javascript:;" class="has-arrow">
        <div class="parent-icon">
            <ion-icon name="bag-handle-outline"></ion-icon>
        </div>
        <div class="menu-title">eCommerce</div>
        </a>
        <ul>
        <li><a href="ecommerce-shop-grid-view.html">
            <ion-icon name="ellipse-outline"></ion-icon>Product Grid
            </a>
        </li>
        <li><a href="ecommerce-shop-list-view.html">
            <ion-icon name="ellipse-outline"></ion-icon>Product List
            </a>
        </li>
        <li><a href="ecommerce-shop-grid-view-top-filter.html">
            <ion-icon name="ellipse-outline"></ion-icon>Product Top Filters
            </a>
        </li>
        <li><a href="ecommerce-product-details.html">
            <ion-icon name="ellipse-outline"></ion-icon>Product Details
            </a>
        </li>
        <li><a href="ecommerce-product-comparison.html">
            <ion-icon name="ellipse-outline"></ion-icon>Product Comparison
            </a>
        </li>
        <li><a href="ecommerce-shop-cart.html">
            <ion-icon name="ellipse-outline"></ion-icon>Shoping Cart
            </a>
        </li>
        <li><a href="ecommerce-checkout-details.html">
            <ion-icon name="ellipse-outline"></ion-icon>Checkout
            </a>
        </li>
        <li><a href="ecommerce-checkout-shipping.html">
            <ion-icon name="ellipse-outline"></ion-icon>Shipping
            </a>
        </li>
        <li><a href="ecommerce-checkout-payment.html">
            <ion-icon name="ellipse-outline"></ion-icon>Payment
            </a>
        </li>
        <li><a href="ecommerce-checkout-review.html">
            <ion-icon name="ellipse-outline"></ion-icon>Review Cart
            </a>
        </li>
        <li><a href="ecommerce-checkout-complete.html">
            <ion-icon name="ellipse-outline"></ion-icon>Order Complete
            </a>
        </li>
        </ul>
    </li>
    <li class="menu-label">UI Elements</li>
    <li>
        <a href="javascript:;" class="has-arrow">
        <div class="parent-icon">
            <ion-icon name="briefcase-outline"></ion-icon>
        </div>
        <div class="menu-title">Widgets</div>
        </a>
        <ul>
        <li> <a href="widgets-static-widgets.html">
            <ion-icon name="ellipse-outline"></ion-icon>Static Widgets
            </a>
        </li>
        <li> <a href="widgets-data-widgets.html">
            <ion-icon name="ellipse-outline"></ion-icon>Data Widgets
            </a>
        </li>
        </ul>
    </li>

    <li>
        <a class="has-arrow" href="javascript:;">
        <div class="parent-icon">
            <ion-icon name="gift-outline"></ion-icon>
        </div>
        <div class="menu-title">Components</div>
        </a>
        <ul>
        <li> <a href="component-alerts.html">
            <ion-icon name="ellipse-outline"></ion-icon>Alerts
            </a>
        </li>
        <li> <a href="component-accordions.html">
            <ion-icon name="ellipse-outline"></ion-icon>Accordions
            </a>
        </li>
        <li> <a href="component-badges.html">
            <ion-icon name="ellipse-outline"></ion-icon>Badges
            </a>
        </li>
        <li> <a href="component-buttons.html">
            <ion-icon name="ellipse-outline"></ion-icon>Buttons
            </a>
        </li>
        <li> <a href="component-cards.html">
            <ion-icon name="ellipse-outline"></ion-icon>Cards
            </a>
        </li>
        <li> <a href="component-carousels.html">
            <ion-icon name="ellipse-outline"></ion-icon>Carousels
            </a>
        </li>
        <li> <a href="component-list-groups.html">
            <ion-icon name="ellipse-outline"></ion-icon>List Groups
            </a>
        </li>
        <li> <a href="component-media-object.html">
            <ion-icon name="ellipse-outline"></ion-icon>Media Objects
            </a>
        </li>
        <li> <a href="component-modals.html">
            <ion-icon name="ellipse-outline"></ion-icon>Modals
            </a>
        </li>
        <li> <a href="component-navs-tabs.html">
            <ion-icon name="ellipse-outline"></ion-icon>Navs & Tabs
            </a>
        </li>
        <li> <a href="component-paginations.html">
            <ion-icon name="ellipse-outline"></ion-icon>Pagination
            </a>
        </li>
        <li> <a href="component-popovers-tooltips.html">
            <ion-icon name="ellipse-outline"></ion-icon>Popovers & Tooltips
            </a>
        </li>
        <li> <a href="component-progress-bars.html">
            <ion-icon name="ellipse-outline"></ion-icon>Progress
            </a>
        </li>
        <li> <a href="component-spinners.html">
            <ion-icon name="ellipse-outline"></ion-icon>Spinners
            </a>
        </li>
        <li> <a href="component-notifications.html">
            <ion-icon name="ellipse-outline"></ion-icon>Notifications
            </a>
        </li>
        </ul>
    </li>
    <li>
        <a class="has-arrow" href="javascript:;">
        <div class="parent-icon">
            <ion-icon name="leaf-outline"></ion-icon>
        </div>
        <div class="menu-title">Icons</div>
        </a>
        <ul>
        <li> <a href="icons-line-icons.html">
            <ion-icon name="ellipse-outline"></ion-icon>Line Icons
            </a>
        </li>
        <li> <a href="icons-boxicons.html">
            <ion-icon name="ellipse-outline"></ion-icon>Boxicons
            </a>
        </li>
        <li> <a href="icons-feather-icons.html">
            <ion-icon name="ellipse-outline"></ion-icon>Feather Icons
            </a>
        </li>
        </ul>
    </li>
    <li class="menu-label">Forms & Tables</li>
    <li>
        <a class="has-arrow" href="javascript:;">
        <div class="parent-icon">
            <ion-icon name="newspaper-outline"></ion-icon>
        </div>
        <div class="menu-title">Forms</div>
        </a>
        <ul>
        <li> <a href="form-elements.html">
            <ion-icon name="ellipse-outline"></ion-icon>Form Elements
            </a>
        </li>
        <li> <a href="form-input-group.html">
            <ion-icon name="ellipse-outline"></ion-icon>Input Groups
            </a>
        </li>
        <li> <a href="form-layouts.html">
            <ion-icon name="ellipse-outline"></ion-icon>Forms Layouts
            </a>
        </li>
        <li> <a href="form-validations.html">
            <ion-icon name="ellipse-outline"></ion-icon>Form Validation
            </a>
        </li>
        <li> <a href="form-wizard.html">
            <ion-icon name="ellipse-outline"></ion-icon>Form Wizard
        </a>
        </li>
        <li> <a href="form-radios-and-checkboxes.html">
            <ion-icon name="ellipse-outline"></ion-icon>Radio & Checkboxes
        </a>
        </li>
        <li> <a href="form-date-time-pickes.html">
            <ion-icon name="ellipse-outline"></ion-icon>Date Pickers
            </a>
        </li>
        <li> <a href="form-select2.html">
            <ion-icon name="ellipse-outline"></ion-icon>Select2
            </a>
        </li>
        </ul>
    </li>
    <li>
        <a class="has-arrow" href="javascript:;">
        <div class="parent-icon">
            <ion-icon name="server-outline"></ion-icon>
        </div>
        <div class="menu-title">Tables</div>
        </a>
        <ul>
        <li> <a href="table-basic-table.html">
            <ion-icon name="ellipse-outline"></ion-icon>Basic Table
            </a>
        </li>
        <li> <a href="table-advance-tables.html">
            <ion-icon name="ellipse-outline"></ion-icon>Advance Tables
            </a>
        </li>
        <li> <a href="table-datatable.html">
            <ion-icon name="ellipse-outline"></ion-icon>Data Table
            </a>
        </li>
        </ul>
    </li>
    <li class="menu-label">Pages</li>
    <li>
        <a class="has-arrow" href="javascript:;">
        <div class="parent-icon">
            <ion-icon name="lock-closed-outline"></ion-icon>
        </div>
        <div class="menu-title">Authentication</div>
        </a>
        <ul>
        <li> <a href="authentication-sign-in-basic.html">
            <ion-icon name="ellipse-outline"></ion-icon>Sign In Basic
            </a>
        </li>
        <li> <a href="authentication-sign-in-cover.html">
            <ion-icon name="ellipse-outline"></ion-icon>Sign In Cover
            </a>
        </li>
        <li> <a href="authentication-sign-in-simple.html">
            <ion-icon name="ellipse-outline"></ion-icon>Sign In Simple
            </a>
        </li>
        <li> <a href="authentication-sign-up-basic.html">
            <ion-icon name="ellipse-outline"></ion-icon>Sign Up Basic
            </a>
        </li>
        <li> <a href="authentication-sign-up-cover.html">
            <ion-icon name="ellipse-outline"></ion-icon>Sign Up Cover
            </a>
        </li>
        <li> <a href="authentication-sign-up-simple.html">
            <ion-icon name="ellipse-outline"></ion-icon>Sign Up Simple
            </a>
        </li>
        <li> <a href="authentication-reset-password-basic.html">
            <ion-icon name="ellipse-outline"></ion-icon>Reset Password Basic
            </a>
        </li>
        <li> <a href="authentication-reset-password-cover.html">
            <ion-icon name="ellipse-outline"></ion-icon>Reset Password Cover
            </a>
        </li>
        <li> <a href="authentication-reset-password-simple.html">
            <ion-icon name="ellipse-outline"></ion-icon>Reset Password Simple
            </a>
        </li>
        </ul>
    </li>
    <li>
        <a href="pages-user-profile.html">
        <div class="parent-icon">
            <ion-icon name="person-circle-outline"></ion-icon>
        </div>
        <div class="menu-title">User Profile</div>
        </a>
    </li>
    <li>
        <a href="pages-edit-profile.html">
        <div class="parent-icon">
            <ion-icon name="create-outline"></ion-icon>
        </div>
        <div class="menu-title">Edit Profile</div>
        </a>
    </li>
    <li>
        <a href="pages-invoices.html">
        <div class="parent-icon">
            <ion-icon name="receipt-outline"></ion-icon>
        </div>
        <div class="menu-title">Invoice</div>
        </a>
    </li>
    <li>
        <a href="pages-to-do.html">
        <div class="parent-icon">
            <ion-icon name="shield-checkmark-outline"></ion-icon>
        </div>
        <div class="menu-title">Invoice</div>
        </a>
    </li>
    <li>
        <a class="has-arrow" href="javascript:;">
        <div class="parent-icon">
            <ion-icon name="copy-outline"></ion-icon>
        </div>
        <div class="menu-title">Extra Pages</div>
        </a>
        <ul>
        <li><a href="pages-faq.html">
            <ion-icon name="ellipse-outline"></ion-icon>FAQ
            </a>
        </li>
        <li><a href="pages-pricing-tables.html">
            <ion-icon name="ellipse-outline"></ion-icon>Pricing
            </a>
        </li>
        <li><a href="pages-errors-404-error.html">
            <ion-icon name="ellipse-outline"></ion-icon>404 Error
            </a>
        </li>
        <li><a href="pages-errors-500-error.html">
            <ion-icon name="ellipse-outline"></ion-icon>500 Error
            </a></li>
        <li><a href="pages-errors-coming-soon.html">
            <ion-icon name="ellipse-outline"></ion-icon>Coming Soon
            </a></li>
        <li><a href="pages-starter-page.html">
            <ion-icon name="ellipse-outline"></ion-icon>Blank Page
            </a></li>
        </ul>
    </li>
    <li class="menu-label">Charts & Maps</li>
    <li>
        <a class="has-arrow" href="javascript:;">
        <div class="parent-icon">
            <ion-icon name="bar-chart-outline"></ion-icon>
        </div>
        <div class="menu-title">Charts</div>
        </a>
        <ul>
        <li> <a href="charts-apex-chart.html">
            <ion-icon name="ellipse-outline"></ion-icon>Apex
            </a>
        </li>
        <li> <a href="charts-chartjs.html">
            <ion-icon name="ellipse-outline"></ion-icon>Chartjs
            </a>
        </li>
        <li> <a href="charts-peity.html">
            <ion-icon name="ellipse-outline"></ion-icon>Peity
        </a>
        </li>
        <li> <a href="charts-other.html">
        <ion-icon name="ellipse-outline"></ion-icon>Other Charts
        </a>
        </li>
        </ul>
    </li>
    <li>
        <a class="has-arrow" href="javascript:;">
        <div class="parent-icon">
            <ion-icon name="map-outline"></ion-icon>
        </div>
        <div class="menu-title">Maps</div>
        </a>
        <ul>
        <li> <a href="map-google-maps.html">
            <ion-icon name="ellipse-outline"></ion-icon>Google Maps
            </a>
        </li>
        <li> <a href="map-vector-maps.html">
            <ion-icon name="ellipse-outline"></ion-icon>Vector Maps
            </a>
        </li>
        </ul>
    </li>
    <li class="menu-label">Others</li>
    <li>
        <a class="has-arrow" href="javascript:;">
        <div class="parent-icon">
            <ion-icon name="list-outline"></ion-icon>
        </div>
        <div class="menu-title">Menu Levels</div>
        </a>
        <ul>
        <li> <a class="has-arrow" href="javascript:;">
            <ion-icon name="ellipse-outline"></ion-icon>Level One
            </a>
            <ul>
            <li> <a class="has-arrow" href="javascript:;">
                <ion-icon name="ellipse-outline"></ion-icon>Level Two
                </a>
                <ul>
                <li> <a href="javascript:;">
                    <ion-icon name="ellipse-outline"></ion-icon>Level Three
                    </a>
                </li>
                </ul>
            </li>
            </ul>
        </li>
        </ul>
    </li>
    <li>
        <a href="javascript:;">
        <div class="parent-icon">
            <ion-icon name="document-text-outline"></ion-icon>
        </div>
        <div class="menu-title">Documentation</div>
        </a>
    </li>
    <li>
        <a href="javascript:;">
        <div class="parent-icon">
            <ion-icon name="link-outline"></ion-icon>
        </div>
        <div class="menu-title">Support</div>
        </a>
    </li> -->
    </ul>
    <!--end navigation-->
</aside>