@using boilerplate.Models
@{
    Layout = "~/Views/_PanelLayout.cshtml";
    var User = Session["User"] as User;
    if (User == null) { return; }
    bool HasAccess(string Access) => new Functions().HasAccess(User.User_Access, Access);
}
@section Heads {
    @RenderSection("Heads", false)
}
<style>
    /* Modal fixed size with scrollable content */
    .modal-dialogNotif {
        max-width: 500px;
    }

    .notificationButton {
        border: none;
        background: transparent;
        color: rgb(149, 202, 255);
    }

    /* Red dot for unread notifications */
    .unread::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 10px;
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 50%;
        display: block;
    }

    /* Modal fixed size with scrollable content */
    .modal-dialogNotif {
        max-width: 500px;
    }

    .modal-body {
        max-height: 400px;
        overflow-y: auto;
    }

    .scrolling-container {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
    }

    .scrolling-content {
        display: flex;
        flex-direction: row;
        animation: scroll-items 25s linear infinite;
    }

    .scrolling-item {
        display: inline-block;
        margin: 0 30px; /* Space between items */
        font-size: 16px;
        opacity: 100; /* Start with invisible items */
        white-space: nowrap;
        animation: scroll 300s linear infinite;
    }

    /* Keyframes for scrolling the content */
    @@keyframes scroll-items {
        0% {
            transform: translateX(-100%);
        }

        100% {
            transform: translateX(300%); /* Move content fully */
        }
    }
</style>
<div id="kt_header_mobile" class="header-mobile align-items-center  header-mobile-fixed">
    <button class="btn p-0 burger-icon burger-icon-left mr-4" id="kt_aside_mobile_toggle">
        <span></span>
    </button>
    <a href="~/Panel">
        <img class="w-50" src="~/Media/Logo.png" />
    </a>
    <div class="d-flex align-items-center">
        <button class="btn p-0 burger-icon ml-4 d-none d-md-block" id="kt_header_mobile_toggle">
            <span></span>
        </button>
        <!-- Notification Icon with Counter -->
        <div class="notification-container" style="margin-left: 20px;">

            <button id="notificationButton" class="position-relative notificationButton">
                <i class="fa fa-bell fa-2x"></i> <!-- Notification Icon -->
                <span style="color:aliceblue" id="notificationCounter" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                    0 <!-- Unread Count -->
                </span>
            </button>
        </div>
        <button class="btn btn-hover-text-primary p-0 ml-2" id="kt_header_mobile_topbar_toggle">
            <span class="svg-icon svg-icon-xl">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <polygon points="0 0 24 0 24 24 0 24" />
                        <path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                        <path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#000000" fill-rule="nonzero" />
                    </g>
                </svg>
            </span>
        </button>
    </div>
</div>
<div class="d-flex flex-column flex-root">
    <div class="d-flex flex-row flex-column-fluid page">
        <div class="aside aside-left  aside-fixed  d-flex flex-column flex-row-auto" id="kt_aside">
            <div class="brand flex-column-auto d-flex" id="kt_brand">
                <a href="~/Panel">
                    <img class="w-75" src="~/Media/Logo.png" />
                </a>
                <button class="brand-toggle btn btn-sm px-0 d-none d-md-inline-block" id="kt_aside_toggle">
                    <span class="svg-icon svg-icon svg-icon-xl">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                <path d="M5.29288961,6.70710318 C4.90236532,6.31657888 4.90236532,5.68341391 5.29288961,5.29288961 C5.68341391,4.90236532 6.31657888,4.90236532 6.70710318,5.29288961 L12.7071032,11.2928896 C13.0856821,11.6714686 13.0989277,12.281055 12.7371505,12.675721 L7.23715054,18.675721 C6.86395813,19.08284 6.23139076,19.1103429 5.82427177,18.7371505 C5.41715278,18.3639581 5.38964985,17.7313908 5.76284226,17.3242718 L10.6158586,12.0300721 L5.29288961,6.70710318 Z" fill="#000000" fill-rule="nonzero" transform="translate(8.999997, 11.999999) scale(-1, 1) translate(-8.999997, -11.999999) "></path>
                                <path d="M10.7071009,15.7071068 C10.3165766,16.0976311 9.68341162,16.0976311 9.29288733,15.7071068 C8.90236304,15.3165825 8.90236304,14.6834175 9.29288733,14.2928932 L15.2928873,8.29289322 C15.6714663,7.91431428 16.2810527,7.90106866 16.6757187,8.26284586 L22.6757187,13.7628459 C23.0828377,14.1360383 23.1103407,14.7686056 22.7371482,15.1757246 C22.3639558,15.5828436 21.7313885,15.6103465 21.3242695,15.2371541 L16.0300699,10.3841378 L10.7071009,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(15.999997, 11.999999) scale(-1, 1) rotate(-270.000000) translate(-15.999997, -11.999999) "></path>
                            </g>
                        </svg>
                    </span>
                </button>
                <button class="btn btn-sm p-0 burger-icon-left d-inline-block d-sm-none" onclick="$('#kt_aside_mobile_toggle').click();">
                    <span>
                        <i class="fa fa-window-close fa-2x"></i>
                    </span>
                </button>
            </div>
            <div class="aside-menu-wrapper flex-column-fluid" id="kt_aside_menu_wrapper">
                <div id="kt_aside_menu" class="aside-menu my-4" data-menu-vertical="1" data-menu-scroll="1" data-menu-dropdown-timeout="500">
                    <ul class="menu-nav">
                        <li class="menu-item" aria-haspopup="true" id="DashboardMenu">
                            <a href="~/panel" class="menu-link">
                                <span class="svg-icon menu-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                            <path d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z" fill="#000000" fill-rule="nonzero"></path>
                                            <path d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z" fill="#000000" opacity="0.3"></path>
                                        </g>
                                    </svg>
                                </span>
                                <span class="menu-text">داشبورد</span>
                            </a>
                        </li>
                        @if (HasAccess("ManageUser"))
                        {
                            <li class="menu-item menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover" id="UserList">
                                <a href="javascript:;" class="menu-link menu-toggle">
                                    <i class="menu-icon flaticon-users-1"></i>
                                    <span class="menu-text">کاربران و دسترسی ها</span>
                                    <i class="menu-arrow"></i>
                                </a>
                                <div class="menu-submenu">
                                    <i class="menu-arrow"></i>
                                    <ul class="menu-subnav">
                                        <li class="menu-item" aria-haspopup="true" id="UsersMenu">
                                            <a href="~/panel/Users" class="menu-link">
                                                <i class="menu-bullet menu-bullet-line"><span></span></i>
                                                <span class="menu-text">لیست کاربران</span>
                                            </a>
                                        </li>
                                        <li class="menu-item" aria-haspopup="true" id="AddUserMenu">
                                            <a href="~/panel/User" class="menu-link">
                                                <i class="menu-bullet menu-bullet-line"><span></span></i>
                                                <span class="menu-text">کاربر جدید</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        }

                        @if (HasAccess("ManageSettings"))
                        {
                            <li class="menu-item" aria-haspopup="true" id="SettingMenu">
                                <a href="~/panel/Setting" class="menu-link">
                                    <i class="menu-icon flaticon-settings"></i>
                                    <span class="menu-text">تنظیمات</span>
                                </a>
                            </li>
                        }
                        <li class="menu-item" aria-haspopup="true">
                            <a href="~/panel/Logout" class="menu-link">
                                <i class="menu-icon flaticon-logout"></i>
                                <span class="menu-text">خروج</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="d-flex flex-column flex-row-fluid wrapper" id="kt_wrapper">
            <div id="kt_header" class="header  header-fixed">
                <div class=" container-fluid  d-flex align-items-stretch justify-content-between">
                    <div class="header-menu-wrapper header-menu-wrapper-left" id="kt_header_menu_wrapper">
                        <div id="kt_header_menu" class="header-menu header-menu-mobile  header-menu-layout-default">
                            <ul class="menu-nav">
                                <li class="menu-item menu-item-submenu menu-item-rel" data-menu-toggle="click" aria-haspopup="true">
                                    <a class="menu-link " href="~/panel/Logout"><span class="menu-text">خروج</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="topbar">
                        <div class="topbar-item">

                            <!-- Notification Icon with Counter -->
                            <div class="notification-container" style="margin-left: 20px;">

                                <button id="notificationButton" class="position-relative notificationButton">
                                    <i class="fa fa-bell fa-2x"></i> <!-- Notification Icon -->
                                    <span style="color:aliceblue" id="notificationCounter" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                        0 <!-- Unread Count -->
                                    </span>
                                </button>
                            </div>

                            <a href="~/Panel/User/@User.User_Id" class="btn btn-icon btn-icon-mobile w-auto btn-clean d-flex align-items-center btn-lg px-2" id="kt_quick_user_toggle">
                                <span class="text-muted font-weight-bold font-size-base d-none d-md-inline mr-1">@User.User_Name</span>
                                <span class="text-dark-50 font-weight-bolder font-size-base d-none d-md-inline mr-3">@User.User_Family</span>
                                <span class="symbol symbol-lg-35 symbol-25 symbol-light-success">
                                </span>
                            </a>

                        </div>
                    </div>
                </div>
            </div>
            <div class="content  d-flex flex-column flex-column-fluid" id="kt_content">
                <div class="subheader py-2 py-lg-6  subheader-solid" id="kt_subheader">
                    <div class=" container-fluid  d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
                        <div class="d-flex align-items-center flex-wrap mr-1">
                            <div class="d-flex align-items-baseline flex-wrap mr-5">
                                <h5 class="text-dark font-weight-bold my-1 mr-5">@ViewBag.Title</h5>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <a onclick="history.back()" class="flex-shrink-0 text-center cursor-pointer" style="width: 40px;" data-toggle="tooltip" title="" data-placement="right" data-original-title="بازگشت">
                                <i class="icon-xl fas fa-arrow-alt-circle-left"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-column-fluid">
                    <div class="container-fluid">
                        @RenderBody()
                        <div class="scrolling-container alert alert-success d-none" id="alertbar">
                            <div id="scrollContent" class="scrolling-content">
                                <!-- Dynamic content will be appended here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Notification Modal -->
<div class="modal fade " id="notificationModal" tabindex="-1" aria-labelledby="notificationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialogNotif">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="notificationModalLabel">اعلان ها</h5>
            </div>
            <div class="modal-body">
                <ul id="notificationList" class="list-group">
                    <!-- Notifications will be dynamically appended here -->
                </ul>
            </div>
        </div>
    </div>
</div>




@section Script {
    <script>
        const UserId = "@User.User_Id";
        const Token = "@User.User_Token";
       

        function SetTitle(title) {
            if (title.length) {
                $(".titles").html(title);
                document.title = `${title}`;
            }
        }
    </script>

    <script>
        if (!window.x) {
            window.x = undefined;
            window.deferredPrompt = undefined;
            window.splashScreen = document.querySelector('.splash');
        }


        window.onpopstate = function (event) {
            if (event.state) {
                var url = event.state.url.replaceAll("Index", "Main");
                if (url == "/") {
                    url = '@Url.Action("Main", "Home")';
                }
                var page = url.substring(1);
                loadContent(url, page, event.state.title, false);
            }
        };

        function loadContent(url, page, title, addToHistory = true) {
            if (window.reciever) {
                clearInterval(window.reciever);
            }
            $.get(url, function (data) {
                $("#navLeft, #navRight").empty();
                $("#navTitle").removeAttr('onclick');
                $(".script").remove();
                $('#kt_chat_content').html(data);
                SetTitle(title);

                // Execute any scripts in the partial view after it's loaded
                $(data).filter("script").each(function () {
                    $.globalEval(this.text || this.textContent || this.innerHTML);
                });

                if (addToHistory && (history.state === null || history.state.page !== page)) {
                    history.pushState({ url, page, title }, '', `/${page}`);
                }
            }).fail(function () {
                setTimeout(function () {
                    loadContent(url, page, title, addToHistory);
                }, 2000);
            }).always(function () {
                ActiveMenu(page);
            });
        }



        function loadPage(elem, url, title = null, addToHistory = true) {
            var page = url.replaceAll("Index", "Main").substring(1);
            loadContent(url, page, title ?? $(elem).text(), addToHistory);
        }

        function SetTitle(title) {
            if (title.length) {
                $(".titles").html(title);
                document.title = `${title}`;
            }
        }

        function ActiveMenu(page) {
            try {
                if ($(`#${page}-tab`).length) {
                    $(`#${page}-tab a`).addClass("active");
                }
            } catch (e) { }
        }

        function BackHome() {
            $("#navLeft").empty();
            loadPage(null, '@Url.Action("Main", "Home")', 'صفحه اصلی');
        }

        function _Get(param = 'Return') {
            return new URLSearchParams(window.location.search).get(param);
        }

        function AddView(Id, Type) { $.post("../api/View/Add", { Id, Type }); }
    </script>

    <script>
        function Submit(CurrentId) {
            Swal.fire({
                title: "آیا از انجام این عملیات مطمئن هستید ؟",
                text: "این عملیات قابل برگشت نمی باشد !!!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                cancelButtonText: 'خیر',
                confirmButtonText: 'بله'
            }).then((result) => {
                if (result.value) {
                    $.post("../api/Entrance/Submit", { Id: CurrentId, UserId: UserId, Token: Token }).done(function (data) {
                        if (data.Status == "Success") {
                            $(".btns").remove();
                            toastr.success("ثبت با موفقیت انجام شد");
                            setTimeout(function () {
                                location.reload();
                            }, 1500);
                        } else {
                            toastr.warning("خطا هنگام برقراری ارتباط با سرور");
                        }
                    }).fail(function () {
                        toastr.error("خطا هنگام برقراری ارتباط با سرور");
                    });
                }
            });
        }
    </script>
    @RenderSection("Script", false)
}