<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>@yield('title') - پنل مدیریت هوشی</title>
    <link rel="icon" href="{{ asset('assets/favicon.ico') }}" type="image/x-icon">

    <!-- Material Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons">

    <!-- Fallback: Material Icons from CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

    <!-- Bootstrap Core Css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- Waves Effect Css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/node-waves/0.7.6/waves.min.css" rel="stylesheet" />

    <!-- Animation Css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />

    <!-- Bootstrap Select Css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet" />

    <!-- Custom Css -->
    <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/themes/all-themes.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/css/material-icons-fix.css') }}" rel="stylesheet">

    <style>
        /* Sidebar menu scrolling fix */
        #leftsidebar .menu {
            overflow-y: scroll !important;
            overflow-x: hidden !important;
            position: relative;
            display: block;
            scroll-behavior: smooth;
        }
        
        #leftsidebar .menu ul.list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        /* Custom scrollbar styling */
        #leftsidebar .menu::-webkit-scrollbar {
            width: 10px;
        }
        
        #leftsidebar .menu::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.1);
            border-radius: 5px;
        }
        
        #leftsidebar .menu::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 5px;
        }
        
        #leftsidebar .menu::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
        /* Firefox scrollbar */
        #leftsidebar .menu {
            scrollbar-width: thin;
            scrollbar-color: #888 rgba(0,0,0,0.1);
        }
    </style>

    @yield('styles')
</head>
<body class="theme-red">
    <div class="page-loader-wrapper">
        <div class="loader">
            <div class="preloader">
                <div class="spinner-layer pl-red">
                    <div class="circle-clipper left"><div class="circle"></div></div>
                    <div class="circle-clipper right"><div class="circle"></div></div>
                </div>
            </div>
            <p dir="rtl">لطفا کمی صبر کنید...</p>
        </div>
    </div>

    <div class="overlay"></div>

    <!-- Top Bar -->
    <nav class="navbar">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="javascript:void(0);" class="bars">
                    <i class="material-icons">menu</i>
                </a>
                <a class="navbar-brand" href="{{ route('admin.dashboard') }}">
                    @yield('title', 'داشبورد')
                </a>
            </div>
        </div>
    </nav>

    <section>
        <aside id="leftsidebar" class="sidebar">
            <div class="user-info">
                <div class="image"><img src="{{ asset('assets/images/user.png') }}" width="48" height="48" alt="User" /></div>
                <div class="info-container">
                    <div class="name">{{ Auth::guard('admin')->user()->full_name ?? 'ادمین' }}</div>
                    <div class="email-row">
                        <div class="email">{{ Auth::guard('admin')->user()->email ?? '' }}</div>
                        <div class="user-actions">
                            <a href="javascript:void(0);" onclick="openChangePasswordModal()" title="تغییر رمز عبور">
                                <i class="material-icons">vpn_key</i>
                            </a>
                            <form action="{{ route('admin.logout') }}" method="POST" style="display:inline;">
                                @csrf
                                <button type="submit" title="خروج" style="background:none;border:none;color:white;padding:0;" onclick="return confirm('آیا می‌خواهید از سیستم خارج شوید؟');">
                                    <i class="material-icons">exit_to_app</i>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="menu">
                <ul class="list">
                    <!-- منوی اصلی -->
                    <li class="header">منوی اصلی</li>
                    <li class="{{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                        <a href="{{ route('admin.dashboard') }}"><i class="material-icons">dashboard</i><span>داشبورد</span></a>
                    </li>

                    <!-- منوی کاربران -->
                    <li class="header">مدیریت کاربران</li>
                    <li class="{{ request()->routeIs('admin.users.*') ? 'active' : '' }}">
                        <a href="{{ route('admin.users.index') }}"><i class="material-icons">people</i><span>لیست کاربران</span></a>
                    </li>
                    @if (Auth::guard('admin')->user()->role === 'super_admin')
                    <li class="{{ request()->is('admin/admins*') ? 'active' : '' }}">
                        <a href="{{ route('admin.admins.index') }}"><i class="material-icons">security</i><span>مدیران</span></a>
                    </li>
                    @endif
                    <li class="{{ request()->routeIs('admin.otp-codes*') ? 'active' : '' }}">
                        <a href="{{ route('admin.otp-codes.index') }}">
                            <i class="material-icons">vpn_key</i>
                            <span>کدهای فعالسازی</span>
                            @php
                                $activeOtpCount = \App\Models\OtpCode::active()->count();
                            @endphp
                            @if($activeOtpCount > 0)
                                <span class="badge" style="background:#4caf50; margin-right:4px;">{{ $activeOtpCount }}</span>
                            @endif
                        </a>
                    </li>
                    <li class="{{ request()->is('admin/notifications*') ? 'active' : '' }}">
                        <a href="{{ route('admin.notifications.index') }}"><i class="material-icons">notifications</i><span>اعلان‌ها</span></a>
                    </li>

                    <!-- مدیریت محتوا -->
                    <li class="header">مدیریت محتوا</li>
                    <li class="{{ request()->routeIs('admin.categories.*') ? 'active' : '' }}">
                        <a href="{{ route('admin.categories.index') }}"><i class="material-icons">folder</i><span>دسته‌بندی‌ها</span></a>
                    </li>
                    <li class="{{ request()->routeIs('admin.contents.*') ? 'active' : '' }}">
                        <a href="{{ route('admin.contents.index') }}"><i class="material-icons">movie</i><span>محتواها</span></a>
                    </li>
                     <li class="{{ request()->routeIs('admin.playlists.*') ? 'active' : '' }}">
                        <a href="{{ route('admin.playlists.index') }}"><i class="material-icons">playlist_play</i><span>پلی‌لیست‌ها</span></a>
                    </li>

                    <!-- فروشگاه و مالی -->
                    <li class="header">فروشگاه و مالی</li>
                    <li class="{{ request()->is('admin/packages*') ? 'active' : '' }}">
                        <a href="{{ route('admin.packages.index') }}"><i class="material-icons">card_membership</i><span>پکیج‌های اشتراک</span></a>
                    </li>
                    <li class="{{ request()->is('admin/payments*') ? 'active' : '' }}">
                        <a href="{{ route('admin.payments.index') }}"><i class="material-icons">attach_money</i><span>پرداخت‌ها</span></a>
                    </li>
                    <li class="{{ request()->is('admin/discount-codes*') ? 'active' : '' }}">
                        <a href="{{ route('admin.discount-codes.index') }}"><i class="material-icons">local_offer</i><span>کدهای تخفیف</span></a>
                    </li>

                    <!-- پشتیبانی و گیمیفیکیشن -->
                    <li class="header">پشتیبانی و تعامل</li>
                    <li class="{{ request()->is('admin/support-tickets*') ? 'active' : '' }}">
                        <a href="{{ route('admin.support-tickets.index') }}"><i class="material-icons">headset_mic</i><span>تیکت‌های پشتیبانی</span></a>
                    </li>
                    <li class="{{ request()->is('admin/badges*') ? 'active' : '' }}">
                        <a href="{{ route('admin.badges.index') }}"><i class="material-icons">stars</i><span>نشان‌ها و گیمیفیکیشن</span></a>
                    </li>

                    <!-- سایر منوها -->
                    <li class="header">سایر منوها</li>
                    <li class="{{ request()->is('admin/logs*') ? 'active' : '' }}">
                        <a href="{{ route('admin.logs.index') }}"><i class="material-icons">history</i><span>سوابق فعالیت‌ها</span></a>
                    </li>
                    <li class="{{ request()->is('admin/settings*') ? 'active' : '' }}">
                        <a href="{{ route('admin.settings.index') }}"><i class="material-icons">settings</i><span>تنظیمات</span></a>
                    </li>
                    <li class="{{ request()->is('admin/api-docs*') ? 'active' : '' }}">
                        <a href="{{ route('admin.api.docs') }}"><i class="material-icons">description</i><span>داکیومنت API</span></a>
                    </li>
                </ul>
            </div>
        </aside>
    </section>

    <section class="content">
        <div class="container-fluid">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    {{ session('success') }}
                </div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    {{ session('error') }}
                </div>
            @endif

            @yield('content')
        </div>
    </section>

    <!-- Modal: تغییر رمز عبور -->
    <div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">تغییر رمز عبور</h4>
                </div>
                <div class="modal-body">
                    <form id="changePasswordForm">
                        <div class="form-group">
                            <label>رمز عبور فعلی *</label>
                            <input type="password" name="current_password" class="form-control" required>
                        </div>

                        <div class="form-group">
                            <label>رمز عبور جدید *</label>
                            <input type="password" name="new_password" class="form-control" required minlength="8">
                            <small class="help-text">حداقل 8 کاراکتر</small>
                        </div>

                        <div class="form-group">
                            <label>تکرار رمز عبور جدید *</label>
                            <input type="password" name="confirm_password" class="form-control" required>
                        </div>

                        <div id="changePasswordError" class="alert alert-danger" style="display: none;"></div>
                        <div id="changePasswordSuccess" class="alert alert-success" style="display: none;"></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">انصراف</button>
                    <button type="button" class="btn btn-primary waves-effect" onclick="submitChangePassword()">تغییر رمز</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Jquery Core Js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Bootstrap Core Js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Bootstrap Select Plugin Js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

    <!-- Slimscroll Plugin Js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>

    <!-- Waves Effect Plugin Js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/node-waves/0.7.6/waves.min.js"></script>

    <!-- Custom Js -->
    <script src="{{ asset('assets/js/admin.js') }}"></script>

    @yield('scripts')

    <script src="{{ asset('assets/js/demo.js') }}"></script>

    <script>
        // Initialize sidebar scroll with native CSS overflow
        function initSidebarScroll() {
            var $menuContainer = $('#leftsidebar .menu');
            var $sidebar = $('#leftsidebar');
            
            if ($menuContainer.length && $sidebar.length) {
                // Calculate height based on viewport
                var viewportHeight = $(window).height();
                var userInfoHeight = $sidebar.find('.user-info').outerHeight() || 100;
                var menuHeight = viewportHeight - userInfoHeight - 20; // Subtract user info and padding
                
                // Set the height
                $menuContainer.css({
                    'height': menuHeight + 'px',
                    'overflow-y': 'scroll',
                    'overflow-x': 'hidden'
                });
            }
        }

        // اطمینان از مخفی شدن loader و initialization منو
        $(document).ready(function() {
            $('.page-loader-wrapper').fadeOut(500);
            initSidebarScroll();
            
            // Enable mouse wheel scrolling on menu (using modern wheel event)
            var menuElement = document.querySelector('#leftsidebar .menu');
            if (menuElement) {
                menuElement.addEventListener('wheel', function(e) {
                    var scrollTop = this.scrollTop;
                    var scrollHeight = this.scrollHeight;
                    var clientHeight = this.clientHeight;
                    
                    // Prevent page scroll at boundaries
                    if (e.deltaY > 0) {
                        // Scrolling down
                        if (scrollTop >= scrollHeight - clientHeight - 5) {
                            e.preventDefault();
                        }
                    } else {
                        // Scrolling up
                        if (scrollTop <= 5) {
                            e.preventDefault();
                        }
                    }
                }, { passive: false }); // passive: false to allow preventDefault()
            }
        });

        // Fallback initialization
        $(window).on('load', function() {
            initSidebarScroll();
        });
        
        // Re-initialize on window resize
        $(window).on('resize', function() {
            initSidebarScroll();
        });

        // Toggle sidebar
        $('.bars').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            var windowWidth = $(window).width();

            if (windowWidth > 1170) {
                // Desktop: toggle ls-closed class
                $('body').toggleClass('ls-closed');
            } else {
                // Mobile: use overlay
                $('body').toggleClass('overlay-open');
                if ($('body').hasClass('overlay-open')) {
                    $('.overlay').fadeIn();
                    $('.sidebar').addClass('open');
                } else {
                    $('.overlay').fadeOut();
                    $('.sidebar').removeClass('open');
                }
            }
        });

        // Close sidebar when clicking overlay
        $('.overlay').on('click', function() {
            $('body').removeClass('overlay-open');
            $('.overlay').fadeOut();
            $('.sidebar').removeClass('open');
        });

        // Open change password modal
        window.openChangePasswordModal = function() {
            $('#changePasswordModal').modal('show');
            $('#changePasswordForm')[0].reset();
            $('#changePasswordError').hide();
            $('#changePasswordSuccess').hide();
        };

        // Submit change password
        window.submitChangePassword = function() {
            // Implementation pending route definition
        };
    </script>
</body>
</html>
