@extends(getTemplate() .'.panel.layouts.panel_layout')

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/chartjs/chart.min.css"/>
    <link rel="stylesheet" href="/assets/default/vendors/apexcharts/apexcharts.css"/>
    <style>
        .hi_container{
            background: linear-gradient(125deg, var(--navy, #0F2044) 0%, var(--navy-mid, #1A3660) 48%, var(--muted-blue, #4A7BA3) 100%) !important;
        }
        /* Student dashboard / learning portfolio */
        .student-dashboard-hero {
            border-radius: 12px;
            overflow: hidden;
        }
        .student-dashboard-hero .hero-sub {
            opacity: 0.92;
            font-weight: 400;
        }
        .student-portfolio-shell {
            border-radius: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-soft, 0 10px 30px rgba(15, 32, 68, 0.05));
            border: 1px solid rgba(87, 134, 199, 0.18);
        }
        .student-portfolio-top {
            background: linear-gradient(125deg, var(--navy-mid, #1A3660) 0%, var(--navy, #0F2044) 45%, #243d63 100%);
            color: #fff;
            padding: 1.25rem 1.35rem;
        }
        @media (min-width: 992px) {
            .student-portfolio-top { padding: 1.4rem 1.75rem; }
        }
        .student-portfolio-top .portfolio-title {
            color: #fff;
            font-size: 1.35rem;
            font-weight: 700;
            margin: 0;
            letter-spacing: -0.02em;
        }
        .student-portfolio-body {
            background: #fff;
            padding: 1.35rem 1.1rem 1.5rem;
        }
        @media (min-width: 992px) {
            .student-portfolio-body { padding: 1.6rem 1.75rem 1.85rem; }
        }
        .student-profile-card {
            background: linear-gradient(185deg, rgba(250, 247, 242, 0.95) 0%, #fff 52%);
            border: 1px solid rgba(15, 32, 68, 0.08);
            border-radius: 14px;
            padding: 1.4rem 1.15rem 1.5rem;
            text-align: center;
            height: 100%;
        }
        .student-profile-card .avatar-ring {
            display: inline-block;
            padding: 3px;
            border-radius: 50%;
            background: linear-gradient(140deg, var(--gold-light, #AAC8F2), var(--gold, #5786c7));
            box-shadow: var(--shadow-gold, 0 10px 25px rgba(87, 134, 199, 0.22));
        }
        .student-profile-card .avatar-ring img {
            display: block;
            border: 3px solid #fff;
            width: 96px;
            height: 96px;
        }
        .student-profile-card .profile-actions .btn {
            min-width: 0;
            border-radius: 10px;
            font-weight: 600;
        }
        .student-profile-card .btn-primary {
            background: linear-gradient(135deg, var(--gold, #5786c7), var(--gold-dark, #466aa8));
            border: none;
            box-shadow: var(--shadow-gold, 0 10px 25px rgba(87, 134, 199, 0.22));
        }
        .student-profile-card .btn-primary:hover {
            opacity: 0.95;
            transform: translateY(-1px);
        }
        .student-stat-card {
            position: relative;
            border-radius: 14px;
            padding: 1rem 0.85rem 1.15rem;
            height: 100%;
            border: 1px solid rgba(15, 32, 68, 0.08);
            background: #fff;
            text-align: center;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            overflow: hidden;
        }
        .student-stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--stat-accent, var(--gold, #5786c7));
        }
        .student-stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 32px rgba(15, 32, 68, 0.12);
        }
        .student-stat-card .stat-icon-wrap {
            width: 46px;
            height: 46px;
            margin: 0 auto 0.55rem;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--stat-bg, rgba(87, 134, 199, 0.12));
            color: var(--stat-accent, var(--gold-dark, #466aa8));
        }
        .student-stat-card .stat-icon-wrap svg {
            flex-shrink: 0;
        }
        .student-stat-card .stat-num {
            font-size: 1.65rem;
            font-weight: 800;
            color: #1a1d36;
            line-height: 1.15;
            letter-spacing: -0.03em;
        }
        .student-stat-card .stat-label {
            font-size: 0.78rem;
            color: #6b6f80;
            font-weight: 600;
            margin-top: 0.2rem;
            line-height: 1.35;
        }
        .student-stat-card--courses { --stat-accent: var(--gold, #5786c7); --stat-bg: rgba(87, 134, 199, 0.12); }
        .student-stat-card--certs { --stat-accent: #16a34a; --stat-bg: rgba(22, 163, 74, 0.12); color: #15803d; }
        .student-stat-card--certs .stat-icon-wrap { color: #15803d; }
        .student-stat-card--progress { --stat-accent: #d97706; --stat-bg: rgba(217, 119, 6, 0.12); color: #b45309; }
        .student-stat-card--progress .stat-icon-wrap { display: none; }
        .student-stat-card--progress .stat-num { display: none; }
        .student-stat-cta {
            border-radius: 14px;
            min-height: 100%;
            background: linear-gradient(135deg, var(--gold, #5786c7), var(--gold-dark, #466aa8));
            color: #fff !important;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 1.2rem 0.85rem;
            text-decoration: none !important;
            font-weight: 700;
            font-size: 0.92rem;
            line-height: 1.4;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: var(--shadow-gold, 0 10px 25px rgba(87, 134, 199, 0.22));
        }
        .student-stat-cta:hover {
            color: #fff !important;
            transform: translateY(-3px);
            box-shadow: 0 16px 36px rgba(87, 134, 199, 0.35);
        }
        .student-stat-cta .cta-arrow {
            display: inline-block;
            margin-top: 0.35rem;
            font-size: 1.15rem;
            line-height: 1;
            opacity: 0.95;
        }
        .rtl .student-stat-cta .cta-arrow {
            transform: scaleX(-1);
        }
        .student-cert-divider {
            margin-top: 1.65rem;
            padding-top: 1.35rem;
            border-top: 1px solid rgba(15, 32, 68, 0.06);
        }
        .student-cert-heading {
            font-size: 1rem;
            font-weight: 700;
            color: #1a1d36;
            margin: 0 0 1rem;
        }
        .student-cert-card {
            border-radius: 14px;
            border: 1px solid rgba(87, 134, 199, 0.15);
            background: rgba(250, 247, 242, 0.65);
            padding: 1rem 1.1rem;
            margin-bottom: 0.8rem;
            transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
        }
        .student-cert-card:hover {
            border-color: rgba(87, 134, 199, 0.35);
            background: #fff;
            box-shadow: 0 10px 28px rgba(15, 32, 68, 0.06);
        }
        .student-cert-card .cert-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #252845;
            line-height: 1.35;
        }
        .student-cert-card .cert-title:hover { color: var(--gold-dark, #466aa8); }
        .student-cert-card .badge {
            font-weight: 600;
            font-size: 0.72rem;
            padding: 0.35em 0.55em;
            border-radius: 6px;
        }
        .student-cert-card .progress {
            height: 10px;
            border-radius: 999px;
            background: #e8e6f4;
            overflow: hidden;
        }
        .student-cert-card .progress-bar {
            border-radius: 999px;
            background: linear-gradient(90deg, var(--gold, #5786c7), var(--gold-dark, #466aa8));
        }
        .student-cert-empty {
            border: 2px dashed rgba(87, 134, 199, 0.35);
            border-radius: 14px;
            padding: 1.65rem 1.2rem;
            text-align: center;
            background: rgba(250, 247, 242, 0.8);
            color: #6b6f80;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        .student-cert-empty svg {
            display: block;
            margin: 0 auto 0.65rem;
            opacity: 0.55;
        }
        .student-dashboard-hero {
            position: relative;
        }
        .student-dashboard-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.12) 0%, transparent 45%);
            pointer-events: none;
        }
        .student-dashboard-hero .hero-inner { position: relative; z-index: 1; }
        .student-dashboard-hero .hero-tagline {
            opacity: 0.9;
            max-width: 32rem;
            line-height: 1.55;
        }
        .student-portfolio-top .portfolio-subtitle {
            font-size: 0.88rem;
            opacity: 0.88;
            margin: 0.35rem 0 0;
            font-weight: 400;
            line-height: 1.5;
        }
        .student-serial-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            margin-top: 0.75rem;
            padding: 0.4rem 0.65rem;
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            font-size: 0.75rem;
            font-family: ui-monospace, monospace;
            letter-spacing: 0.02em;
        }
        .student-serial-chip button {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 0.7rem;
            font-weight: 600;
            cursor: pointer;
            padding: 0.15rem 0.35rem;
            border-radius: 4px;
        }
        .student-serial-chip button:hover { background: rgba(255,255,255,0.15); }
        .student-quick-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.1rem;
        }
        .student-quick-action {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.45rem 0.85rem;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 600;
            text-decoration: none !important;
            border: 1px solid rgba(87, 134, 199, 0.25);
            background: #fff;
            color: var(--gold-dark, #466aa8);
            transition: background 0.2s, border-color 0.2s, transform 0.2s;
        }
        .student-quick-action:hover {
            background: rgba(87, 134, 199, 0.08);
            border-color: rgba(87, 134, 199, 0.45);
            transform: translateY(-1px);
            color: var(--navy, #0F2044);
        }
        .student-quick-action--primary {
            background: linear-gradient(135deg, var(--gold, #5786c7), var(--gold-dark, #466aa8));
            border-color: transparent;
            color: #fff !important;
        }
        .student-quick-action--primary:hover {
            color: #fff !important;
            opacity: 0.95;
        }
        a.student-stat-card-link {
            text-decoration: none !important;
            color: inherit;
            display: block;
            height: 100%;
        }
        .student-progress-ring-wrap {
            position: relative;
            width: 46px;
            height: 46px;
            margin: 0 auto 0.55rem;
        }
        .student-progress-ring-wrap svg {
            transform: rotate(-90deg);
            width: 46px;
            height: 46px;
        }
        .student-progress-ring-wrap .ring-bg { stroke: rgba(217, 119, 6, 0.2); }
        .student-progress-ring-wrap .ring-fg {
            stroke: #d97706;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.4s ease;
        }
        .student-progress-ring-wrap .ring-label {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            font-weight: 800;
            color: #b45309;
        }
        .student-continue-card {
            border-radius: 14px;
            padding: 1.15rem 1.25rem;
            margin-bottom: 1.25rem;
            background: linear-gradient(125deg, rgba(87, 134, 199, 0.14) 0%, rgba(250, 247, 242, 0.95) 55%, #fff 100%);
            border: 1px solid rgba(87, 134, 199, 0.22);
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }
        @media (min-width: 768px) {
            .student-continue-card {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }
        }
        .student-continue-card .continue-thumb {
            width: 72px;
            height: 72px;
            border-radius: 10px;
            object-fit: cover;
            flex-shrink: 0;
        }
        .student-continue-card .continue-progress {
            height: 8px;
            border-radius: 999px;
            background: #e8e6f4;
            max-width: 200px;
            margin-top: 0.5rem;
        }
        .student-continue-card .continue-progress-bar {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--gold, #5786c7), var(--gold-dark, #466aa8));
        }
        .student-inprogress-mini {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.65rem 0;
            border-bottom: 1px solid rgba(15, 32, 68, 0.06);
            text-decoration: none !important;
            color: inherit;
            transition: background 0.15s;
        }
        .student-inprogress-mini:last-child { border-bottom: none; }
        .student-inprogress-mini:hover { background: rgba(87, 134, 199, 0.06); border-radius: 8px; }
        .student-inprogress-mini .mini-bar {
            flex: 1;
            max-width: 120px;
            height: 6px;
            border-radius: 999px;
            background: #e8e6f4;
            overflow: hidden;
        }
        .student-inprogress-mini .mini-bar span {
            display: block;
            height: 100%;
            border-radius: 999px;
            background: var(--gold, #5786c7);
        }
        .student-cert-empty .btn { margin-top: 0.75rem; }
        .student-profile-serial {
            font-size: 0.72rem;
            font-family: ui-monospace, monospace;
            background: rgba(87, 134, 199, 0.1);
            padding: 0.35rem 0.5rem;
            border-radius: 6px;
            margin-bottom: 0.75rem;
            word-break: break-all;
        }
        .portfolio-pending-badge {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.3rem 0.65rem;
            border-radius: 999px;
            background: rgba(217, 119, 6, 0.12);
            color: #b45309;
            margin-bottom: 0.75rem;
        }
    </style>
@endpush

@section('content')
    <section class="">
        <div class="d-flex align-items-start align-items-md-center justify-content-between flex-column flex-md-row">
            <h1 class="section-title">{{ trans('panel.dashboard') }}</h1>

            @if(!$authUser->isUser())
                <div class="d-flex align-items-center flex-row-reverse flex-md-row justify-content-start justify-content-md-center mt-20 mt-md-0">
                    <label class="mb-0 mr-10 cursor-pointer text-gray font-14 font-weight-500" for="iNotAvailable">{{ trans('panel.i_not_available') }}</label>
                    <div class="custom-control custom-switch">
                        <input type="checkbox" name="disabled" @if($authUser->offline) checked @endif class="custom-control-input" id="iNotAvailable">
                        <label class="custom-control-label" for="iNotAvailable"></label>
                    </div>
                </div>
            @endif
        </div>

        @if(!$authUser->financial_approval and !$authUser->isUser())
            <div class="p-15 mt-20 p-lg-20 not-verified-alert font-weight-500 text-dark-blue rounded-sm panel-shadow">
                {{ trans('panel.not_verified_alert') }}
                <a href="/panel/setting/step/7" class="text-decoration-underline">{{ trans('panel.this_link') }}</a>.
            </div>
        @endif

        <div class="dashboard-banner-container mt-50 hi_container position-relative panel-shadow student-dashboard-hero">
            <div class="p-25 px-20 px-lg-40 hero-inner d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between">
                <div class="mb-15 mb-lg-0 pr-lg-20">
                    <h2 class="font-28 text-light line-height-1 mb-0">
                        <span class="d-block font-weight-bold">{{ trans('panel.hi') }} {{ $authUser->full_name }}</span>
                        <span class="d-block font-16 mt-10 hero-sub text-light">{{ trans('panel.hi_again') }}</span>
                    </h2>
                    @if($authUser->isUser())
                        <p class="font-14 mt-10 mb-0 hero-tagline text-light">{{ trans('panel.dashboard_hero_tagline') }}</p>
                    @endif
                </div>
                <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center flex-shrink-0">
                    <a href="/classes" class="btn btn-light font-weight-bold text-nowrap mb-10 mb-sm-0 mr-sm-15" style="color: var(--gold-dark, #466aa8);">{{ trans('panel.discover_more') }}</a>
                    @if($authUser->isUser())
                        <a href="/panel/certificates/webinars" class="btn btn-outline-light text-white border-white font-weight-bold text-nowrap" style="border-width: 2px;">{{ trans('panel.view_my_certificates') }}</a>
                    @endif
                </div>
            </div>
        </div>

        @if($authUser->isUser() && !empty($studentPortfolio))
            <div class="mt-35">
                <div class="student-portfolio-shell bg-white">
                    <header class="student-portfolio-top">
                        <div>
                            <h2 class="portfolio-title">{{ trans('panel.learning_portfolio') }}</h2>
                            <p class="portfolio-subtitle">{{ trans('panel.dashboard_portfolio_subtitle') }}</p>
                        </div>
                    </header>
                    <div class="student-portfolio-body">
                        <div class="row align-items-stretch">
                            <div class="col-12 col-lg-4 mb-20 mb-lg-0">
                                <div class="student-profile-card h-100">
                                    <span class="avatar-ring">
                                        <img src="{{ $authUser->getAvatar() }}" class="img-cover rounded-circle" width="96" height="96" alt="">
                                    </span>
                                    <h3 class="font-16 font-weight-bold text-dark-blue mt-15 mb-5">{{ $authUser->full_name }}</h3>
                                    @if(!empty($authUser->email))
                                        <p class="font-13 text-gray mb-10">{{ $authUser->email }}</p>
                                    @endif
                                    @if(!empty($studentPortfolio['user_serial_number']))
                                        <p class="font-12 text-gray mb-5">{{ trans('panel.your_serial_number') }}</p>
                                        <div class="student-profile-serial d-flex align-items-center justify-content-between" id="dashboardSerialDisplay">
                                            <span class="flex-grow-1 text-left">{{ $studentPortfolio['user_serial_number'] }}</span>
                                            <button type="button" class="btn btn-sm btn-link p-0 font-12" onclick="copyDashboardSerial()" aria-label="{{ trans('panel.copy_serial') }}">{{ trans('panel.copy_serial') }}</button>
                                        </div>
                                    @endif
                                    <div class="profile-actions d-flex flex-column">
                                        <a href="/panel/setting" class="btn btn-sm btn-secondary">{{ trans('panel.settings') }}</a>
                                        <a href="/panel/certificates/webinars" class="btn btn-sm btn-primary mt-10">{{ trans('panel.view_my_certificates') }}</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-8">
                                <p class="font-12 text-gray font-weight-600 mb-10 text-uppercase" style="letter-spacing: 0.04em;">{{ trans('panel.quick_actions') }}</p>
                                <div class="student-quick-actions">
                                    @if(!empty($studentPortfolio['continue_learning']))
                                        <a href="{{ $studentPortfolio['continue_learning']['webinar']->getLearningPageUrl() }}" class="student-quick-action student-quick-action--primary">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                                            {{ trans('panel.quick_action_continue') }}
                                        </a>
                                    @endif
                                    <a href="/panel/webinars/purchases" class="student-quick-action">{{ trans('panel.quick_action_purchases') }}</a>
                                    <a href="/panel/setting/my-serial-number" class="student-quick-action">{{ trans('panel.quick_action_serial') }}</a>
                                    <a href="/classes" class="student-quick-action">{{ trans('panel.explore_courses') }}</a>
                                </div>

                                @if(!empty($studentPortfolio['continue_learning']))
                                    @php
                                        $cl = $studentPortfolio['continue_learning'];
                                        $clWebinar = $cl['webinar'];
                                        $clProgress = (int) $cl['progress'];
                                    @endphp
                                    <div class="student-continue-card">
                                        <div class="d-flex align-items-center flex-grow-1">
                                            <img src="{{ $clWebinar->getImage() }}" alt="" class="continue-thumb mr-15">
                                            <div>
                                                <span class="font-12 text-gray font-weight-600 d-block mb-5">{{ trans('panel.continue_learning_title') }}</span>
                                                <span class="font-15 font-weight-bold text-dark-blue d-block">{{ $clWebinar->title }}</span>
                                                <div class="continue-progress">
                                                    <div class="continue-progress-bar" style="width: {{ min(100, $clProgress) }}%"></div>
                                                </div>
                                                <span class="font-12 text-gray mt-5 d-block">{{ trans('public.course_learning_passed', ['percent' => $clProgress]) }}</span>
                                            </div>
                                        </div>
                                        <a href="{{ $clWebinar->getLearningPageUrl() }}" class="btn btn-primary btn-sm font-weight-bold flex-shrink-0">{{ trans('panel.continue_learning_btn') }}</a>
                                    </div>
                                @endif

                                <div class="row">
                                    <div class="col-6 col-md-6 col-xl-3 mb-15">
                                        <a href="/panel/webinars/purchases" class="student-stat-card-link" title="{{ trans('panel.stat_click_hint') }}">
                                            <div class="student-stat-card student-stat-card--courses h-100">
                                                <div class="stat-icon-wrap" aria-hidden="true">
                                                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
                                                </div>
                                                <span class="d-block stat-num">{{ $studentPortfolio['purchased_courses'] }}</span>
                                                <span class="d-block stat-label">{{ trans('panel.enrolled_courses_stat') }}</span>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-6 col-md-6 col-xl-3 mb-15">
                                        <a href="/panel/certificates/webinars" class="student-stat-card-link" title="{{ trans('panel.stat_click_hint') }}">
                                            <div class="student-stat-card student-stat-card--certs h-100">
                                                <div class="stat-icon-wrap" aria-hidden="true">
                                                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>
                                                </div>
                                                <span class="d-block stat-num">{{ $studentPortfolio['certificates_earned'] }}</span>
                                                <span class="d-block stat-label">{{ trans('panel.certificates_earned_stat') }}</span>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-6 col-md-6 col-xl-3 mb-15">
                                        @php $avgProg = (int) $studentPortfolio['avg_progress']; $ringOffset = 113 - (113 * min(100, $avgProg) / 100); @endphp
                                        <a href="/panel/webinars/purchases" class="student-stat-card-link" title="{{ trans('panel.stat_click_hint') }}">
                                            <div class="student-stat-card student-stat-card--progress h-100">
                                                <div class="student-progress-ring-wrap" aria-hidden="true">
                                                    <svg viewBox="0 0 46 46">
                                                        <circle class="ring-bg" cx="23" cy="23" r="18" fill="none" stroke-width="4"/>
                                                        <circle class="ring-fg" cx="23" cy="23" r="18" fill="none" stroke-width="4" stroke-dasharray="113" stroke-dashoffset="{{ $ringOffset }}"/>
                                                    </svg>
                                                    <span class="ring-label">{{ $avgProg }}%</span>
                                                </div>
                                                <span class="d-block stat-num">{{ $avgProg }}%</span>
                                                <span class="d-block stat-label">{{ trans('panel.avg_learning_progress') }}</span>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-6 col-md-6 col-xl-3 mb-15 d-flex">
                                        <a href="/classes" class="student-stat-cta w-100">
                                            <span>{{ trans('panel.browse_all_courses') }}</span>
                                            <span class="cta-arrow" aria-hidden="true">→</span>
                                        </a>
                                    </div>
                                </div>

                                @if(!empty($studentPortfolio['in_progress_courses']) && $studentPortfolio['in_progress_courses']->count() > 1)
                                    <div class="mt-15 mb-10">
                                        <h4 class="font-14 font-weight-bold text-dark-blue mb-10">{{ trans('panel.in_progress_courses_title') }}</h4>
                                        @foreach($studentPortfolio['in_progress_courses']->slice(1) as $ipc)
                                            @php $ipcW = $ipc['webinar']; @endphp
                                            <a href="{{ $ipcW->getLearningPageUrl() }}" class="student-inprogress-mini d-flex">
                                                <span class="font-13 font-weight-600 text-dark-blue flex-grow-1 text-truncate">{{ $ipcW->title }}</span>
                                                <div class="mini-bar"><span style="width: {{ min(100, (int) $ipc['progress']) }}%"></span></div>
                                                <span class="font-12 font-weight-bold text-gray">{{ (int) $ipc['progress'] }}%</span>
                                            </a>
                                        @endforeach
                                    </div>
                                @endif

                                <div class="student-cert-divider">
                                    <h3 class="student-cert-heading">{{ trans('panel.certificates_progress_section') }}</h3>
                                    @if(!empty($studentPortfolio['pending_certificates_count']) && $studentPortfolio['pending_certificates_count'] > 0)
                                        <span class="portfolio-pending-badge">{{ trans('panel.pending_certificates_badge', ['count' => $studentPortfolio['pending_certificates_count']]) }}</span>
                                    @endif
                                    @if(!empty($studentPortfolio['certificate_courses']))
                                        @foreach($studentPortfolio['certificate_courses'] as $certRow)
                                            @php $cw = $certRow['webinar']; @endphp
                                            <div class="student-cert-card">
                                                <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between">
                                                    <div class="mb-10 mb-md-0 pr-md-10 flex-grow-1">
                                                        <a href="{{ $cw->getLearningPageUrl() }}" class="cert-title text-decoration-none d-block">{{ $cw->title }}</a>
                                                        <div class="mt-5">
                                                            @if($certRow['earned'])
                                                                <span class="badge badge-success">{{ trans('panel.certificate_status_earned') }}</span>
                                                            @else
                                                                <span class="badge badge-warning text-dark">{{ trans('panel.certificate_status_pending') }}</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="w-100" style="max-width: 280px;">
                                                        <div class="d-flex align-items-center justify-content-between font-12 text-gray mb-5">
                                                            <span>{{ trans('public.course_learning_passed',['percent' => (int) $certRow['progress']]) }}</span>
                                                        </div>
                                                        <div class="progress">
                                                            <span class="progress-bar" style="width: {{ min(100, $certRow['progress']) }}%"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif

                                    @if(!empty($studentPortfolio['generated_certificates']) && $studentPortfolio['generated_certificates']->count())
                                        @if(!empty($studentPortfolio['certificate_courses']))
                                            <h4 class="font-14 font-weight-bold text-dark-blue mt-20 mb-10">{{ trans('quiz.generated_certificates') }}</h4>
                                        @endif
                                        @foreach($studentPortfolio['generated_certificates'] as $genCert)
                                            @php $genDownloadUrl = certificateDownloadUrl($genCert); @endphp
                                            <div class="student-cert-card">
                                                <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between">
                                                    <div class="mb-10 mb-md-0 pr-md-10 flex-grow-1">
                                                        <span class="cert-title d-block">{{ $genCert->template_name ?? trans('quiz.certificate_kind_generated') }}</span>
                                                        <div class="mt-5">
                                                            <span class="badge badge-dark">{{ trans('quiz.certificate_kind_generated') }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="flex-shrink-0">
                                                        @if(!empty($genDownloadUrl))
                                                            <a href="{{ $genDownloadUrl }}" target="_blank" class="btn btn-sm btn-primary">{{ trans('quiz.certificate_download') }}</a>
                                                        @else
                                                            <span class="text-gray font-12">{{ trans('quiz.certificate_pending_file') }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif

                                    @if(empty($studentPortfolio['certificate_courses']) && (empty($studentPortfolio['generated_certificates']) || !$studentPortfolio['generated_certificates']->count()))
                                        <div class="student-cert-empty">
                                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/><path d="M8 7h8"/><path d="M8 11h6"/></svg>
                                            <p class="mb-0">{{ trans('panel.no_certificate_courses_yet') }}</p>
                                            <a href="/classes" class="btn btn-sm btn-primary">{{ trans('panel.explore_courses') }}</a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="bg-white dashboard-banner-container mt-50 px-4 py-4">
            <h2 class="font-30 text-primary line-height-1">
                <span class="font-16 text-secondary font-weight-bold">{{ trans('panel.last_visit') }}</span>
            </h2>
        
        @if(!empty($webinar))
                @php
                $item = $webinar;
                
                @endphp
                <div class="row mt-30">
                    <div class="col-12">
                        <div class="webinar-card webinar-list d-flex">
                            <div class="image-box">
                                <img src="{{ $item->getImage() }}" class="img-cover" alt="">

                                    @if($item->type == 'webinar')
                                        @if($item->start_date > time())
                                            <span class="badge badge-primary">{{  trans('panel.not_conducted') }}</span>
                                        @elseif($item->isProgressing())
                                            <span class="badge badge-secondary">{{ trans('webinars.in_progress') }}</span>
                                        @else
                                            <span class="badge badge-secondary">{{ trans('public.finished') }}</span>
                                        @endif
                                    @elseif(!empty($item->downloadable))
                                        <span class="badge badge-secondary">{{ trans('home.downloadable') }}</span>
                                    @else
                                        <span class="badge badge-secondary">{{ trans('webinars.'.$item->type) }}</span>
                                    @endif

                                    @php
                                        $percent = $item->getProgress();

                                        if($item->isWebinar()){
                                            if($item->isProgressing()) {
                                                $progressTitle = trans('public.course_learning_passed',['percent' => $percent]);
                                            } else {
                                                $progressTitle = $item->sales_count .'/'. $item->capacity .' '. trans('quiz.students');
                                            }
                                        } else {
                                               $progressTitle = trans('public.course_learning_passed',['percent' => $percent]);
                                        }
                                    @endphp

                                    <div class="progress cursor-pointer" data-toggle="tooltip" data-placement="top" title="{{ $progressTitle }}">
                                        <span class="progress-bar" style="width: {{ $percent }}%"></span>
                                    </div>
                            </div>

                            <div class="webinar-card-body w-100 d-flex flex-column">
                                <div class="d-flex align-items-center justify-content-between">
                                    <a href="{{ $item->getUrl() }}">
                                        <h3 class="webinar-title font-weight-bold font-16 text-dark-blue">
                                            {{ $item->title }}


                                                <span class="badge badge-dark ml-10 status-badge-dark">{{ trans('webinars.'.$item->type) }}</span>
                                        </h3>
                                    </a>

                                    <div class="btn-group dropdown table-actions">
                                        <button type="button" class="btn-transparent dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i data-feather="more-vertical" height="20"></i>
                                        </button>

                                        <div class="dropdown-menu">
                                                <a href="{{ $item->getLearningPageUrl() }}" target="_blank" class="webinar-actions d-block">{{ trans('update.learning_page') }}</a>

                                                @if(!empty($item->start_date) and ($item->start_date > time() or ($item->isProgressing() and !empty($nextSession))))
                                                    <button type="button" data-webinar-id="{{ $item->id }}" class="join-purchase-webinar webinar-actions btn-transparent d-block mt-10">{{ trans('footer.join') }}</button>
                                                @endif

                                                @if(!empty($item->downloadable) or (!empty($item->files) and count($item->files)))
                                                    <a href="{{ $item->getUrl() }}?tab=content" target="_blank" class="webinar-actions d-block mt-10">{{ trans('home.download') }}</a>
                                                @endif

                                                @if($item->price > 0)
                                                    <a href="/panel/webinars/{{ $item->id }}/invoice" target="_blank" class="webinar-actions d-block mt-10">{{ trans('public.invoice') }}</a>
                                                @endif

                                            <a href="{{ $item->getUrl() }}?tab=reviews" target="_blank" class="webinar-actions d-block mt-10">{{ trans('public.feedback') }}</a>
                                        </div>
                                    </div>
                                </div>

                                @include(getTemplate() . '.includes.webinar.rate',['rate' => $item->getRate()])

                                <div class="webinar-price-box mt-15">
                                    @if($item->price > 0)
                                        @if($item->bestTicket() < $item->price)
                                            <span class="real">{{ handlePrice($item->bestTicket()) }}</span>
                                            <span class="off ml-10">{{ handlePrice($item->price) }}</span>
                                        @else
                                            <span class="real">{{ handlePrice($item->price) }}</span>
                                        @endif
                                    @else
                                        <span class="real">{{ trans('public.free') }}</span>
                                    @endif
                                </div>

                                <div class="d-flex align-items-center justify-content-between flex-wrap mt-auto">
                                    <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                        <span class="stat-title">{{ trans('public.item_id') }}:</span>
                                        <span class="stat-value">{{ $item->id }}</span>
                                    </div>

                                    <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                        <span class="stat-title">{{ trans('public.category') }}:</span>
                                        <span class="stat-value">{{ !empty($item->category_id) ? $item->category->title : '' }}</span>
                                    </div>

                                        @if($item->isProgressing() and !empty($nextSession))
                                            <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                <span class="stat-title">{{ trans('webinars.next_session_duration') }}:</span>
                                                <span class="stat-value">{{ convertMinutesToHourAndMinute($nextSession->duration) }} Hrs</span>
                                            </div>

                                            <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                <span class="stat-title">{{ trans('webinars.next_session_start_date') }}:</span>
                                                <span class="stat-value">{{ dateTimeFormat($nextSession->date,'j M Y') }}</span>
                                            </div>
                                        @else
                                            <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                <span class="stat-title">{{ trans('public.duration') }}:</span>
                                                <span class="stat-value">{{ convertMinutesToHourAndMinute($item->duration) }} Hrs</span>
                                            </div>

                                            <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                <span class="stat-title">{{ trans('public.start_date') }}:</span>
                                                <span class="stat-value">{{ $item->start_date!='' ? dateTimeFormat($item->start_date,'j M Y') : '' }}</span>
                                            </div>
                                        @endif

                                    <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                        <span class="stat-title">{{ trans('public.instructor') }}:</span>
                                        <span class="stat-value">{{ $item->teacher->full_name }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

        </div>

        <div class="bg-white dashboard-banner-container mt-50 px-4 py-4">
            <div class="d-flex align-items-start align-items-md-center justify-content-between flex-column flex-md-row">
                <h2 class="section-title">{{ trans('panel.my_purchases') }}</h2>
            </div>

            @if(!empty($sales) and !$sales->isEmpty())
                @foreach($sales as $sale)
                    @php
                        $item = !empty($sale->webinar) ? $sale->webinar : $sale->bundle;

                        $lastSession = !empty($sale->webinar) ? $sale->webinar->lastSession() : null;
                        $nextSession = !empty($sale->webinar) ? $sale->webinar->nextSession() : null;
                        $isProgressing = false;

                        if(!empty($sale->webinar) and $sale->webinar->start_date <= time() and !empty($lastSession) and $lastSession->date > time()) {
                            $isProgressing=true;
                        }
                    @endphp

                    @if(!empty($item))
                        <div class="row mt-30">
                            <div class="col-lg-4 col-12">
                                <div class="webinar-card webinar-list d-flex">
                                    <div class="image-box">
                                        <img src="{{ $item->getImage() }}" class="img-cover" alt="">

                                        @if(!empty($sale->webinar))
                                            @if($item->type == 'webinar')
                                                @if($item->start_date > time())
                                                    <span class="badge badge-primary">{{  trans('panel.not_conducted') }}</span>
                                                @elseif($item->isProgressing())
                                                    <span class="badge badge-secondary">{{ trans('webinars.in_progress') }}</span>
                                                @else
                                                    <span class="badge badge-secondary">{{ trans('public.finished') }}</span>
                                                @endif
                                            @elseif(!empty($item->downloadable))
                                                <span class="badge badge-secondary">{{ trans('home.downloadable') }}</span>
                                            @else
                                                <span class="badge badge-secondary">{{ trans('webinars.'.$item->type) }}</span>
                                            @endif

                                            @php
                                                $percent = $item->getProgress();

                                                if($item->isWebinar()){
                                                    if($item->isProgressing()) {
                                                        $progressTitle = trans('public.course_learning_passed',['percent' => $percent]);
                                                    } else {
                                                        $progressTitle = $item->sales_count .'/'. $item->capacity .' '. trans('quiz.students');
                                                    }
                                                } else {
                                                       $progressTitle = trans('public.course_learning_passed',['percent' => $percent]);
                                                }
                                            @endphp

                                            <div class="progress cursor-pointer" data-toggle="tooltip" data-placement="top" title="{{ $progressTitle }}">
                                                <span class="progress-bar" style="width: {{ $percent }}%"></span>
                                            </div>
                                        @else
                                            <span class="badge badge-secondary">{{ trans('update.bundle') }}</span>
                                        @endif
                                    </div>

                                    <div class="webinar-card-body w-100 d-flex flex-column">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <a href="{{ $item->getUrl() }}">
                                                <h3 class="webinar-title font-weight-bold font-16 text-dark-blue">
                                                    {{ $item->title }}

                                                    @if(!empty($item->access_days))
                                                        @if(!$item->checkHasExpiredAccessDays($sale->created_at))
                                                            <span class="badge badge-outlined-danger ml-10">{{ trans('update.access_days_expired') }}</span>
                                                        @else
                                                            <span class="badge badge-outlined-warning ml-10">{{ trans('update.expired_on_date',['date' => dateTimeFormat($item->getExpiredAccessDays($sale->created_at),'j M Y')]) }}</span>
                                                        @endif
                                                    @endif

                                                    @if(!empty($sale->webinar))
                                                        <span class="badge badge-dark ml-10 status-badge-dark">{{ trans('webinars.'.$item->type) }}</span>
                                                    @endif
                                                </h3>
                                            </a>

                                            <div class="btn-group dropdown table-actions">
                                                <button type="button" class="btn-transparent dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i data-feather="more-vertical" height="20"></i>
                                                </button>

                                                <div class="dropdown-menu">
                                                    @if(!empty($item->access_days) and !$item->checkHasExpiredAccessDays($sale->created_at))
                                                        <a href="{{ $item->getUrl() }}" target="_blank" class="webinar-actions d-block mt-10">{{ trans('update.enroll_on_course') }}</a>
                                                    @elseif(!empty($sale->webinar))
                                                        <a href="{{ $item->getLearningPageUrl() }}" target="_blank" class="webinar-actions d-block">{{ trans('update.learning_page') }}</a>

                                                        @if(!empty($item->start_date) and ($item->start_date > time() or ($item->isProgressing() and !empty($nextSession))))
                                                            <button type="button" data-webinar-id="{{ $item->id }}" class="join-purchase-webinar webinar-actions btn-transparent d-block mt-10">{{ trans('footer.join') }}</button>
                                                        @endif

                                                        @if(!empty($item->downloadable) or (!empty($item->files) and count($item->files)))
                                                            <a href="{{ $item->getUrl() }}?tab=content" target="_blank" class="webinar-actions d-block mt-10">{{ trans('home.download') }}</a>
                                                        @endif

                                                        @if($item->price > 0)
                                                            <a href="/panel/webinars/{{ $item->id }}/invoice" target="_blank" class="webinar-actions d-block mt-10">{{ trans('public.invoice') }}</a>
                                                        @endif
                                                    @endif

                                                    <a href="{{ $item->getUrl() }}?tab=reviews" target="_blank" class="webinar-actions d-block mt-10">{{ trans('public.feedback') }}</a>
                                                </div>
                                            </div>
                                        </div>

                                        @include(getTemplate() . '.includes.webinar.rate',['rate' => $item->getRate()])

                                        <div class="webinar-price-box mt-15">
                                            @if($item->price > 0)
                                                @if($item->bestTicket() < $item->price)
                                                    <span class="real">{{ handlePrice($item->bestTicket()) }}</span>
                                                    <span class="off ml-10">{{ handlePrice($item->price) }}</span>
                                                @else
                                                    <span class="real">{{ handlePrice($item->price) }}</span>
                                                @endif
                                            @else
                                                <span class="real">{{ trans('public.free') }}</span>
                                            @endif
                                        </div>

                                        <div class="d-flex align-items-center justify-content-between flex-wrap mt-auto">
                                            <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                <span class="stat-title">{{ trans('public.item_id') }}:</span>
                                                <span class="stat-value">{{ $item->id }}</span>
                                            </div>

                                            <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                <span class="stat-title">{{ trans('public.category') }}:</span>
                                                <span class="stat-value">{{ !empty($item->category_id) ? $item->category->title : '' }}</span>
                                            </div>

                                            @if(!empty($sale->webinar) and $item->type == 'webinar')
                                                @if($item->isProgressing() and !empty($nextSession))
                                                    <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                        <span class="stat-title">{{ trans('webinars.next_session_duration') }}:</span>
                                                        <span class="stat-value">{{ convertMinutesToHourAndMinute($nextSession->duration) }} Hrs</span>
                                                    </div>

                                                    <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                        <span class="stat-title">{{ trans('webinars.next_session_start_date') }}:</span>
                                                        <span class="stat-value">{{ dateTimeFormat($nextSession->date,'j M Y') }}</span>
                                                    </div>
                                                @else
                                                    <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                        <span class="stat-title">{{ trans('public.duration') }}:</span>
                                                        <span class="stat-value">{{ convertMinutesToHourAndMinute($item->duration) }} Hrs</span>
                                                    </div>

                                                    <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                        <span class="stat-title">{{ trans('public.start_date') }}:</span>
                                                        <span class="stat-value">{{ dateTimeFormat($item->start_date,'j M Y') }}</span>
                                                    </div>
                                                @endif
                                            @elseif(!empty($sale->bundle))
                                                <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                    <span class="stat-title">{{ trans('public.duration') }}:</span>
                                                    <span class="stat-value">{{ convertMinutesToHourAndMinute($item->getBundleDuration()) }} Hrs</span>
                                                </div>
                                            @endif

                                            <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                <span class="stat-title">{{ trans('public.instructor') }}:</span>
                                                <span class="stat-value">{{ $item->teacher->full_name }}</span>
                                            </div>

                                            <div class="d-flex align-items-start flex-column mt-20 mr-15">
                                                <span class="stat-title">{{ trans('panel.purchase_date') }}:</span>
                                                <span class="stat-value">{{ dateTimeFormat($sale->created_at,'j M Y') }}</span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            @else
                @include(getTemplate() . '.includes.no-result',[
                'file_name' => 'student.png',
                'title' => trans('panel.no_result_purchases') ,
                'hint' => trans('panel.no_result_purchases_hint') ,
                'btn' => ['url' => '/classes?sort=newest','text' => trans('panel.start_learning')]
            ])
            @endif

        </div>

        @if($authUser->isUser() && !empty($recommendedWebinars) && $recommendedWebinars->count())
            <div class="bg-white dashboard-banner-container mt-50 px-15 px-lg-35 py-25 panel-shadow rounded-sm">
                <div class="d-flex flex-column flex-md-row align-items-md-end justify-content-between mb-25">
                    <div>
                        <h2 class="section-title mb-5">{{ trans('panel.recommended_courses_title') }}</h2>
                        <p class="font-14 text-gray mb-0">{{ trans('panel.recommended_courses_hint') }}</p>
                    </div>
                    <a href="/classes?sort=newest" class="font-14 font-weight-500 text-dark-blue mt-15 mt-md-0">{{ trans('panel.browse_all_courses') }}</a>
                </div>
                <div class="row">
                    @foreach($recommendedWebinars as $webinar)
                        <div class="col-12 col-sm-6 col-lg-3 mt-20">
                            @include('web.default.includes.webinar.grid-card', ['webinar' => $webinar])
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <div class="bg-white dashboard-banner-container position-relative px-15 px-ld-35 py-10 panel-shadow rounded-sm">
            <h2 class="font-30 text-primary line-height-1">
{{--                <span class="d-block">{{ trans('panel.hi') }} {{ $authUser->full_name }},</span>--}}
                <span class="font-16 text-secondary font-weight-bold">{{ trans('panel.have_event',['count' => !empty($unReadNotifications) ? count($unReadNotifications) : 0]) }}</span>
            </h2>

            <ul class="mt-15 unread-notification-lists">
                @if(!empty($unReadNotifications) and !$unReadNotifications->isEmpty())
                    @foreach($unReadNotifications->take(5) as $unReadNotification)
                        <li class="font-14 mt-1 text-gray">- {{ $unReadNotification->title }}</li>
                    @endforeach

                    @if(count($unReadNotifications) > 5)
                        <li>&nbsp;&nbsp;...</li>
                    @endif
                @endif
            </ul>

            <a href="/panel/notifications" class="mt-15 font-weight-500 text-dark-blue d-inline-block">{{ trans('panel.view_all_events') }}</a>

            <div class="dashboard-banner">
                <img src="{{ getPageBackgroundSettings('dashboard') }}" alt="" class="img-cover">
            </div>
        </div>

    </section>

    <section class="dashboard">
        <div class="row">
            <div class="col-12 col-lg-3 mt-35">
                <div class="bg-white account-balance rounded-sm panel-shadow py-15 py-md-30 px-10 px-md-20">
                    <div class="text-center">
                        <img src="/assets/default/img/activity/36.svg" class="account-balance-icon" alt="">

                        <h3 class="font-16 font-weight-500 text-gray mt-25">{{ trans('panel.account_balance') }}</h3>
                        <span class="mt-5 d-block font-30 text-secondary">{{ addCurrencyToPrice($authUser->getAccountingBalance()) }}</span>
                    </div>

                    @php
                        $getFinancialSettings = getFinancialSettings();
                        $drawable = $authUser->getPayout();
                        $can_drawable = ($drawable > ((!empty($getFinancialSettings) and !empty($getFinancialSettings['minimum_payout'])) ? (int)$getFinancialSettings['minimum_payout'] : 0))
                    @endphp

                    <div class="mt-20 pt-30 border-top border-gray300 d-flex align-items-center @if($can_drawable) justify-content-between @else justify-content-center @endif">
                        @if($can_drawable)
                            <span class="font-16 font-weight-500 text-gray">{{ trans('panel.with_drawable') }}:</span>
                            <span class="font-16 font-weight-bold text-secondary">{{ addCurrencyToPrice($drawable) }}</span>
                        @else
                            <a href="/panel/financial/account" class="font-16 font-weight-bold text-dark-blue">{{ trans('financial.charge_account') }}</a>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-3 mt-35">
                <a href="@if($authUser->isUser()) /panel/webinars/purchases @else /panel/meetings/requests @endif" class="dashboard-stats rounded-sm panel-shadow p-10 p-md-20 d-flex align-items-center">
                    <div class="stat-icon requests">
                        <img src="/assets/default/img/icons/request.svg" alt="">
                    </div>
                    <div class="d-flex flex-column ml-15">
                        <span class="font-30 text-secondary">{{ !empty($pendingAppointments) ? $pendingAppointments : (!empty($webinarsCount) ? $webinarsCount : 0) }}</span>
                        <span class="font-16 text-gray font-weight-500">{{ $authUser->isUser() ? trans('panel.purchased_courses') : trans('panel.pending_appointments') }}</span>
                    </div>
                </a>

                <a href="@if($authUser->isUser()) /panel/meetings/reservation @else /panel/financial/sales @endif" class="dashboard-stats rounded-sm panel-shadow p-10 p-md-20 d-flex align-items-center mt-15 mt-md-30">
                    <div class="stat-icon monthly-sales">
                        <img src="@if($authUser->isUser()) /assets/default/img/icons/meeting.svg @else /assets/default/img/icons/monay.svg @endif" alt="">
                    </div>
                    <div class="d-flex flex-column ml-15">
                        <span class="font-30 text-secondary">{{ !empty($monthlySalesCount) ? addCurrencyToPrice($monthlySalesCount) : (!empty($reserveMeetingsCount) ? addCurrencyToPrice($reserveMeetingsCount) : 0) }}</span>
                        <span class="font-16 text-gray font-weight-500">{{ $authUser->isUser() ? trans('panel.meetings') : trans('panel.monthly_sales') }}</span>
                    </div>
                </a>
            </div>

            <div class="col-12 col-lg-3 mt-35">
                <a href="/panel/support" class="dashboard-stats rounded-sm panel-shadow p-10 p-md-20 d-flex align-items-center">
                    <div class="stat-icon support-messages">
                        <img src="/assets/default/img/icons/support.svg" alt="">
                    </div>
                    <div class="d-flex flex-column ml-15">
                        <span class="font-30 text-secondary">{{ !empty($supportsCount) ? $supportsCount : 0 }}</span>
                        <span class="font-16 text-gray font-weight-500">{{ trans('panel.support_messages') }}</span>
                    </div>
                </a>

                <a href="@if($authUser->isUser()) /panel/webinars/my-comments @else /panel/webinars/comments @endif" class="dashboard-stats rounded-sm panel-shadow p-10 p-md-20 d-flex align-items-center mt-15 mt-md-30">
                    <div class="stat-icon comments">
                        <img src="/assets/default/img/icons/comment.svg" alt="">
                    </div>
                    <div class="d-flex flex-column ml-15">
                        <span class="font-30 text-secondary">{{ !empty($commentsCount) ? $commentsCount : 0 }}</span>
                        <span class="font-16 text-gray font-weight-500">{{ trans('panel.comments') }}</span>
                    </div>
                </a>
            </div>

            <div class="col-12 col-lg-3 mt-35">
                <div class="bg-white account-balance rounded-sm panel-shadow py-15 py-md-15 px-10 px-md-20">
                    <div data-percent="{{ !empty($nextBadge) ? $nextBadge['percent'] : 0 }}" data-label="{{ (!empty($nextBadge) and !empty($nextBadge['earned'])) ? $nextBadge['earned']->title : '' }}" id="nextBadgeChart" class="text-center">
                    </div>
                    <div class="mt-10 pt-10 border-top border-gray300 d-flex align-items-center justify-content-between">
                        <span class="font-16 font-weight-500 text-gray">{{ trans('panel.next_badge') }}:</span>
                        <span class="font-16 font-weight-bold text-secondary">{{ (!empty($nextBadge) and !empty($nextBadge['badge'])) ? $nextBadge['badge']->title : trans('public.not_defined') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12 col-lg-6 mt-35">
                <div class="bg-white noticeboard rounded-sm panel-shadow py-10 py-md-20 px-15 px-md-30">
                    <h3 class="font-16 text-dark-blue font-weight-bold">{{ trans('panel.noticeboard') }}</h3>

                    @foreach($authUser->getUnreadNoticeboards() as $getUnreadNoticeboard)
                        <div class="noticeboard-item py-15">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <h4 class="js-noticeboard-title font-weight-500 text-secondary">{!! truncate($getUnreadNoticeboard->title,150) !!}</h4>
                                    <div class="font-12 text-gray mt-5">
                                        <span class="mr-5">{{ trans('public.created_by') }} {{ $getUnreadNoticeboard->sender }}</span>
                                        |
                                        <span class="js-noticeboard-time ml-5">{{ dateTimeFormat($getUnreadNoticeboard->created_at,'j M Y | H:i') }}</span>
                                    </div>
                                </div>

                                <div>
                                    <button type="button" data-id="{{ $getUnreadNoticeboard->id }}" class="js-noticeboard-info btn btn-sm btn-border-white">{{ trans('panel.more_info') }}</button>
                                    <input type="hidden" class="js-noticeboard-message" value="{{ $getUnreadNoticeboard->message }}">
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>

            <div class="col-12 col-lg-6 mt-35">
                <div class="bg-white monthly-sales-card rounded-sm panel-shadow py-10 py-md-20 px-15 px-md-30">
                    <div class="d-flex align-items-center justify-content-between">
                        <h3 class="font-16 text-dark-blue font-weight-bold">{{ ($authUser->isUser()) ? trans('panel.learning_statistics') : trans('panel.monthly_sales') }}</h3>

                        <span class="font-16 font-weight-500 text-gray">{{ dateTimeFormat(time(),'M Y') }}</span>
                    </div>

                    <div class="monthly-sales-chart">
                        <canvas id="myChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <div class="d-none" id="iNotAvailableModal">
        <div class="offline-modal">
            <h3 class="section-title after-line">{{ trans('panel.offline_title') }}</h3>
            <p class="mt-20 font-16 text-gray">{{ trans('panel.offline_hint') }}</p>

            <div class="form-group mt-15">
                <label>{{ trans('panel.offline_message') }}</label>
                <textarea name="message" rows="4" class="form-control ">{{ $authUser->offline_message }}</textarea>
                <div class="invalid-feedback"></div>
            </div>

            <div class="mt-30 d-flex align-items-center justify-content-end">
                <button type="button" class="js-save-offline-toggle btn btn-primary btn-sm">{{ trans('public.save') }}</button>
                <button type="button" class="btn btn-danger ml-10 close-swl btn-sm">{{ trans('public.close') }}</button>
            </div>
        </div>
    </div>

    <div class="d-none" id="noticeboardMessageModal">
        <div class="text-center">
            <h3 class="modal-title font-20 font-weight-500 text-dark-blue"></h3>
            <span class="modal-time d-block font-12 text-gray mt-25"></span>
            <p class="modal-message font-weight-500 text-gray mt-4"></p>
        </div>
    </div>

@endsection

@push('scripts_bottom')
    <script src="/assets/default/vendors/apexcharts/apexcharts.min.js"></script>
    <script src="/assets/default/vendors/chartjs/chart.min.js"></script>

    <script>
        var offlineSuccess = '{{ trans('panel.offline_success') }}';
        var $chartDataMonths = @json($monthlyChart['months']);
        var $chartData = @json($monthlyChart['data']);
    </script>

    @if($authUser->isUser() && !empty($studentPortfolio['user_serial_number']))
    <script>
        function copyDashboardSerial() {
            var el = document.getElementById('dashboardSerialDisplay');
            if (!el) return;
            var text = el.querySelector('span') ? el.querySelector('span').textContent.trim() : el.textContent.trim();
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text);
            } else {
                var ta = document.createElement('textarea');
                ta.value = text;
                document.body.appendChild(ta);
                ta.select();
                document.execCommand('copy');
                document.body.removeChild(ta);
            }
        }
    </script>
    @endif

    <script src="/assets/default/js/panel/dashboard.min.js"></script>
@endpush
