@extends('layouts.manager')

@section('title','Панель менеджера — Дашборд')
@section('page_title','Дашборд')

@push('head')
    <link rel="stylesheet" href="{{ mix('css/manager/dashboard.css') }}">
@endpush

@section('content')

    <div class="dash">

        {{-- TOP HERO (full width) --}}
        <div class="dash-hero admin-card p-0 mb-4">
            <div class="dash-hero-bg" aria-hidden="true">
                <span class="dash-blob dash-blob-1"></span>
                <span class="dash-blob dash-blob-2"></span>
                <span class="dash-blob dash-blob-3"></span>
                <span class="dash-grid"></span>
            </div>

            <div class="dash-hero-inner">
                <div class="dash-hero-head">
                    <div class="dash-hero-left">
                        <div class="dash-kicker">Огляд системи</div>
                        <div class="dash-title">
                            Контроль <span class="dash-title-accent">TLOD</span> в одному місці
                        </div>
                        <div class="dash-subtitle">
                            Тут ти бачиш загальну картину по тімлідам, кабінетам, балансам та нотаткам.
                            Нижче — швидкі дії та навігація по ключових модулях.
                        </div>

                        <div class="dash-pill-row">
                            <span class="dash-pill">
                                <span class="dash-pill-dot"></span>
                                Сьогодні: {{ \Carbon\Carbon::now(config('app.timezone','Europe/Kyiv'))->translatedFormat('d F Y') }}
                            </span>
                            <span class="dash-pill dash-pill-soft">
                                Оновлення: автоматично
                            </span>
                        </div>
                    </div>

                    <div class="dash-hero-right">
                        <div class="dash-hero-badge">
                            <div class="dash-hero-badge-icon">📊</div>
                            <div class="dash-hero-badge-meta">
                                <div class="dash-hero-badge-top">Dashboard</div>
                                <div class="dash-hero-badge-bottom">Manager • TLOD Hub</div>
                            </div>
                        </div>

                        <div class="dash-mini">
                            <div class="dash-mini-row">
                                <span class="dash-mini-label">Тімлідів</span>
                                <span class="dash-mini-value">{{ $stats['teamleads'] ?? '—' }}</span>
                            </div>
                            <div class="dash-mini-row">
                                <span class="dash-mini-label">Кабінетів</span>
                                <span class="dash-mini-value">{{ $stats['cabinets'] ?? '—' }}</span>
                            </div>
                            <div class="dash-mini-row">
                                <span class="dash-mini-label">Записів балансу</span>
                                <span class="dash-mini-value">{{ $stats['balances'] ?? '—' }}</span>
                            </div>
                            <div class="dash-mini-row">
                                <span class="dash-mini-label">Нотаток</span>
                                <span class="dash-mini-value">{{ $stats['notes'] ?? '—' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- METRICS (modern grid) --}}
                <div class="dash-metrics">
                    <div class="dash-metric" data-anim="up">
                        <div class="dash-metric-top">
                            <div class="dash-metric-icon">👥</div>
                            <div class="dash-metric-name">Тімлідів</div>
                        </div>
                        <div class="dash-metric-value">{{ $stats['teamleads'] ?? '—' }}</div>
                        <div class="dash-metric-hint">Відповідальні за кабінети</div>
                    </div>

                    <div class="dash-metric" data-anim="up">
                        <div class="dash-metric-top">
                            <div class="dash-metric-icon">🏢</div>
                            <div class="dash-metric-name">Кабінетів</div>
                        </div>
                        <div class="dash-metric-value">{{ $stats['cabinets'] ?? '—' }}</div>
                        <div class="dash-metric-hint">Активні одиниці роботи</div>
                    </div>

                    <div class="dash-metric" data-anim="up">
                        <div class="dash-metric-top">
                            <div class="dash-metric-icon">💰</div>
                            <div class="dash-metric-name">Записів балансу</div>
                        </div>
                        <div class="dash-metric-value">{{ $stats['balances'] ?? '—' }}</div>
                        <div class="dash-metric-hint">Фіксації результатів</div>
                    </div>

                    <div class="dash-metric" data-anim="up">
                        <div class="dash-metric-top">
                            <div class="dash-metric-icon">📝</div>
                            <div class="dash-metric-name">Нотаток</div>
                        </div>
                        <div class="dash-metric-value">{{ $stats['notes'] ?? '—' }}</div>
                        <div class="dash-metric-hint">Фідбек по змінах</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- TWO-COLUMN LAYOUT (actions + navigation) --}}
        <div class="dash-grid-2 mb-4">

            {{-- QUICK ACTIONS --}}
            <div class="admin-card p-4 dash-block" data-anim="fade">
                <div class="dash-block-head">
                    <div>
                        <div class="dash-block-title">Швидкі дії</div>
                        <div class="dash-block-subtitle">
                            Найчастіші сценарії: створення, перевірка, швидкий перехід.
                        </div>
                    </div>
                </div>

                <div class="dash-actions">
                    <a class="dash-action dash-action-primary" href="{{ route('manager.teamleads.create') }}">
                        <div class="dash-action-icon">➕</div>
                        <div class="dash-action-body">
                            <div class="dash-action-title">Створити тімліда</div>
                            <div class="dash-action-desc">Додати нового відповідального</div>
                        </div>
                        <div class="dash-action-arrow">→</div>
                    </a>

                    <a class="dash-action dash-action-primary" href="{{ route('manager.cabinets.create') }}">
                        <div class="dash-action-icon">🏠</div>
                        <div class="dash-action-body">
                            <div class="dash-action-title">Створити кабінет</div>
                            <div class="dash-action-desc">Запустити новий кабінет</div>
                        </div>
                        <div class="dash-action-arrow">→</div>
                    </a>

                    <a class="dash-action dash-action-soft" href="{{ route('manager.reports.balances.index') }}">
                        <div class="dash-action-icon">📊</div>
                        <div class="dash-action-body">
                            <div class="dash-action-title">Переглянути баланси</div>
                            <div class="dash-action-desc">Оцінити результати тімлідів</div>
                        </div>
                        <div class="dash-action-arrow">→</div>
                    </a>

                    <a class="dash-action dash-action-soft" href="{{ route('manager.reports.notes.index') }}">
                        <div class="dash-action-icon">📝</div>
                        <div class="dash-action-body">
                            <div class="dash-action-title">Нотатки тімлідів</div>
                            <div class="dash-action-desc">Подивитись фідбек по зміні</div>
                        </div>
                        <div class="dash-action-arrow">→</div>
                    </a>
                </div>
            </div>

            {{-- NAVIGATION --}}
            <div class="admin-card p-4 dash-block" data-anim="fade">
                <div class="dash-block-head">
                    <div>
                        <div class="dash-block-title">Розділи панелі</div>
                        <div class="dash-block-subtitle">
                            Швидка навігація до ключових модулів.
                        </div>
                    </div>
                </div>

                <div class="dash-sections">
                    <a class="dash-section" href="{{ route('manager.teamleads.index') }}">
                        <div class="dash-section-icon">👥</div>
                        <div class="dash-section-body">
                            <div class="dash-section-title">Тімліди</div>
                            <div class="dash-section-text">Управління тімлідами та прив’язкою до кабінетів.</div>
                        </div>
                        <div class="dash-section-go">Відкрити →</div>
                    </a>

                    <a class="dash-section" href="{{ route('manager.cabinets.index') }}">
                        <div class="dash-section-icon">🏢</div>
                        <div class="dash-section-body">
                            <div class="dash-section-title">Кабінети</div>
                            <div class="dash-section-text">Статистика, зарплати, план по кабінетах та склад.</div>
                        </div>
                        <div class="dash-section-go">Відкрити →</div>
                    </a>

                    <div class="dash-section dash-section-split">
                        <div class="dash-section-icon">⚡</div>
                        <div class="dash-section-body">
                            <div class="dash-section-title">Datame та норми</div>
                            <div class="dash-section-text">Цілі на місяць, баланс та планові показники.</div>

                            <div class="dash-section-links">
                                <a href="{{ route('manager.datame-targets.month') }}" class="dash-section-link">
                                    Datame — баланс сьогодні →
                                </a>
                                <a href="{{ route('manager.monthly-targets.index') }}" class="dash-section-link">
                                    Норми на місяць →
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

@endsection

@push('scripts')
    <script>
        (function () {
            const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
            if (reduce) return;

            const els = document.querySelectorAll('[data-anim]');
            const io = new IntersectionObserver((entries) => {
                entries.forEach(e => {
                    if (e.isIntersecting) {
                        e.target.classList.add('is-in');
                        io.unobserve(e.target);
                    }
                });
            }, { threshold: 0.12 });

            els.forEach(el => io.observe(el));
        })();
    </script>
@endpush