@extends(BaseHelper::getAdminMasterLayoutTemplate())

@push('header-action')
    @if (count($widgets) > 0)
        <x-core::button
            color="primary"
            :outlined="true"
            class="manage-widget"
            data-bs-toggle="modal"
            data-bs-target="#widgets-management-modal"
            icon="ti ti-layout-dashboard"
        >
            {{ trans('core/dashboard::dashboard.manage_widgets') }}
        </x-core::button>
    @endif
@endpush

@push('header')
    <style>
        .dashboard-landing {
            --dashboard-surface: color-mix(in srgb, var(--tblr-body-bg, #f6f8fb) 88%, #ffffff 12%);
            --dashboard-border: color-mix(in srgb, var(--tblr-border-color, #dfe3e8) 68%, transparent);
            --dashboard-shadow: 0 24px 46px -34px rgba(15, 23, 42, 0.55);
            --dashboard-shadow-soft: 0 16px 34px -28px rgba(15, 23, 42, 0.35);
            animation: dashboard-fade-in .45s ease-out both;
        }

        @keyframes dashboard-fade-in {
            from {
                opacity: 0;
                transform: translateY(8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dashboard-hero {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--dashboard-border);
            box-shadow: var(--dashboard-shadow);
            background:
                radial-gradient(1100px 330px at -5% -40%, rgba(var(--tblr-primary-rgb), 0.26), transparent 56%),
                radial-gradient(650px 280px at 106% 0%, rgba(14, 165, 233, 0.18), transparent 50%),
                radial-gradient(500px 220px at 70% 120%, rgba(16, 185, 129, 0.12), transparent 54%),
                linear-gradient(135deg, color-mix(in srgb, var(--tblr-bg-surface, #fff) 84%, #ecf3ff 16%), var(--dashboard-surface));
        }

        .dashboard-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(120deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
                repeating-linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.05) 0,
                    rgba(255, 255, 255, 0.05) 1px,
                    transparent 1px,
                    transparent 18px
                );
        }

        .dashboard-hero-kicker {
            letter-spacing: .08em;
            text-transform: uppercase;
            font-size: .72rem;
            font-weight: 700;
            color: var(--tblr-muted, #66788a);
        }

        .dashboard-hero-title {
            font-size: clamp(1.45rem, 2.1vw, 2rem);
            line-height: 1.2;
            margin-bottom: .35rem;
        }

        .dashboard-hero-meta {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
            margin-top: .85rem;
        }

        .dashboard-hero-pill {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            border-radius: 999px;
            padding: .38rem .78rem;
            font-size: .77rem;
            font-weight: 600;
            color: var(--tblr-muted, #66788a);
            border: 1px solid color-mix(in srgb, var(--tblr-border-color, #dfe3e8) 60%, transparent);
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(8px);
        }

        .dashboard-section-card {
            border: 1px solid var(--dashboard-border);
            border-radius: 1rem;
            box-shadow: var(--dashboard-shadow-soft);
            background: var(--tblr-bg-surface, #fff);
            overflow: hidden;
        }

        .dashboard-section-card .card-header {
            border-bottom-color: color-mix(in srgb, var(--tblr-border-color, #dfe3e8) 62%, transparent);
            background:
                linear-gradient(to right, rgba(var(--tblr-primary-rgb), .04), transparent 34%),
                var(--tblr-bg-surface, #fff);
        }

        .dashboard-section-title {
            margin: 0;
            font-size: 1rem;
            font-weight: 700;
            color: var(--tblr-body-color, #182433);
        }

        .dashboard-section-subtitle {
            margin-top: .15rem;
            color: var(--tblr-muted, #66788a);
            font-size: .82rem;
        }

        .dashboard-top-blocks > *:last-child {
            margin-bottom: 0;
        }

        .dashboard-stat-grid {
            row-gap: .85rem;
        }

        .dashboard-landing .dashboard-widget-item > a,
        .dashboard-landing .dashboard-widget-item > div {
            border-radius: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.26);
            min-height: 9.7rem;
            box-shadow: 0 22px 36px -30px rgba(17, 24, 39, 0.7);
            transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
            position: relative;
            isolation: isolate;
        }

        .dashboard-landing .dashboard-widget-item > a::before,
        .dashboard-landing .dashboard-widget-item > div::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%);
            pointer-events: none;
            z-index: 0;
        }

        .dashboard-landing .dashboard-widget-item > a:hover,
        .dashboard-landing .dashboard-widget-item > div:hover {
            transform: translateY(-3px);
            box-shadow: 0 28px 44px -30px rgba(17, 24, 39, 0.86);
            filter: saturate(1.05);
        }

        .dashboard-landing .dashboard-widget-item .details {
            padding: 1.15rem 1.25rem;
            gap: .5rem;
            z-index: 1;
        }

        .dashboard-landing .dashboard-widget-item .details .desc {
            font-size: .92rem;
            font-weight: 600;
            letter-spacing: .01em;
            opacity: .98;
        }

        .dashboard-landing .dashboard-widget-item .details .number {
            font-size: clamp(2rem, 3vw, 2.55rem);
            line-height: 1;
            letter-spacing: -.02em;
        }

        .dashboard-landing .dashboard-widget-item .visual {
            transform: translate(-.4rem, .5rem);
            opacity: .85;
        }

        .dashboard-landing .dashboard-widget-item .visual .icon {
            --bb-icon-size: 90px !important;
        }

        .dashboard-widgets-grid {
            row-gap: 1rem;
        }

        .dashboard-landing #list_widgets .widget-item {
            transition: transform .2s ease;
        }

        .dashboard-landing #list_widgets .widget-item:hover {
            transform: translateY(-2px);
        }

        .dashboard-landing #list_widgets .widget-item > .card {
            border: 1px solid color-mix(in srgb, var(--tblr-border-color, #dfe3e8) 62%, transparent);
            border-radius: .95rem;
            overflow: hidden;
            box-shadow: 0 14px 30px -28px rgba(15, 23, 42, 0.52);
        }

        .dashboard-landing #list_widgets .widget-item > .card > .card-header {
            padding: .9rem 1rem;
            background:
                linear-gradient(to right, rgba(var(--tblr-primary-rgb), .05), transparent 32%),
                var(--tblr-bg-surface, #fff);
            border-bottom-color: color-mix(in srgb, var(--tblr-border-color, #dfe3e8) 64%, transparent);
        }

        .dashboard-landing #list_widgets .widget-item > .card > .card-header .card-title {
            font-size: 1.03rem;
            font-weight: 700;
        }

        .dashboard-landing #list_widgets .widget-content {
            background:
                radial-gradient(340px 140px at 100% 0%, rgba(var(--tblr-primary-rgb), 0.03), transparent 65%),
                var(--tblr-bg-surface, #fff);
        }

        .dashboard-landing #list_widgets .widget-content .table > :not(caption) > * > * {
            border-bottom-color: color-mix(in srgb, var(--tblr-border-color, #dfe3e8) 62%, transparent);
        }

        @media (max-width: 767.98px) {
            .dashboard-landing .dashboard-widget-item .details .number {
                font-size: 2rem;
            }

            .dashboard-hero-title {
                font-size: 1.45rem;
            }
        }
    </style>
@endpush

@section('content')
    <div class="dashboard-landing d-flex flex-column gap-3">
        <x-core::card class="dashboard-hero">
            <x-core::card.body class="py-4 px-4 px-md-5">
                <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
                    <div>
                        <div class="dashboard-hero-kicker">{{ __('Dashboard') }}</div>
                        <h2 class="dashboard-hero-title">{{ __('Welcome back, :name', ['name' => Auth::user()->name]) }}</h2>
                        <p class="text-muted mb-0">{{ __('Your activity and widgets are all in one place.') }}</p>
                        <div class="dashboard-hero-meta">
                            <span class="dashboard-hero-pill">
                                <x-core::icon name="ti ti-layout-dashboard" />
                                {{ __(':total active widgets', ['total' => count($userWidgets)]) }}
                            </span>
                            <span class="dashboard-hero-pill">
                                <x-core::icon name="ti ti-bolt" />
                                {{ __('Live operational view') }}
                            </span>
                        </div>
                    </div>
                    <div class="text-md-end">
                        <span class="badge bg-primary-lt text-primary fs-6 px-3 py-2 rounded-pill">
                            {{ now()->format('M d, Y') }}
                        </span>
                    </div>
                </div>
            </x-core::card.body>
        </x-core::card>

        <div>
            @if (config('core.base.general.enable_system_updater') && Auth::user()->isSuperUser())
                <v-check-for-updates
                    check-update-url="{{ route('system.check-update') }}"
                    v-slot="{ hasNewVersion, message }"
                    v-cloak
                >
                    <x-core::alert
                        v-if="hasNewVersion"
                        type="warning"
                    >
                        @{{ message }}, please go to <a
                            href="{{ route('system.updater') }}"
                            class="fw-bold"
                        >System Updater</a> to upgrade to the latest version!
                    </x-core::alert>
                </v-check-for-updates>
            @endif

            {!! apply_filters(DASHBOARD_FILTER_ADMIN_NOTIFICATIONS, null) !!}
        </div>

        <x-core::card class="dashboard-section-card">
            <x-core::card.header class="py-3">
                <div>
                    <h3 class="dashboard-section-title">{{ __('Overview') }}</h3>
                    <div class="dashboard-section-subtitle">{{ __('Quick stats from your store and system.') }}</div>
                </div>
            </x-core::card.header>
            <x-core::card.body>
                <div class="row row-cards dashboard-stat-grid">
                    @foreach ($statWidgets as $widget)
                        {!! $widget !!}
                    @endforeach
                </div>
            </x-core::card.body>
        </x-core::card>

        <x-core::card class="dashboard-section-card">
            <x-core::card.header class="py-3">
                <div>
                    <h3 class="dashboard-section-title">{{ __('Widgets') }}</h3>
                    <div class="dashboard-section-subtitle">{{ __('Drag and reorder widgets based on your workflow.') }}</div>
                </div>
            </x-core::card.header>
            <x-core::card.body>
                <div
                    id="list_widgets"
                    class="row row-cards dashboard-widgets-grid"
                    data-bb-toggle="widgets-list"
                    data-url="{{ route('dashboard.update_widget_order') }}"
                >
                    @foreach ($userWidgets as $widget)
                        {!! $widget !!}
                    @endforeach
                </div>
            </x-core::card.body>
        </x-core::card>
    </div>
@endsection

@push('footer')
    @include('core/dashboard::partials.modals', compact('widgets'))
@endpush