@extends('layouts.app')

@section('title', _lang('System Dashboard'))

@push('styles')
<style>
    .sa-dash { --c1:#dc2626; --c2:#18181b; }

    /* Hero — clear, high-contrast white text on a black→red gradient */
    .sa-hero { position: relative; overflow: hidden; border-radius: .9rem;
        background: linear-gradient(120deg, #18181b 0%, #7f1d1d 52%, #dc2626 100%);
        color: #fff; padding: .95rem 1.1rem; box-shadow: 0 12px 26px -18px rgba(220,38,38,.7); }
    .sa-hero::after { content:""; position:absolute; right:-40px; top:-60px; width:200px; height:200px;
        border-radius:50%; background:rgba(255,255,255,.10); }
    .sa-hero::before { content:""; position:absolute; right:70px; bottom:-90px; width:170px; height:170px;
        border-radius:50%; background:rgba(255,255,255,.08); }
    .sa-hero h4 { font-weight: 800; font-size: 1.1rem; margin: 0; color:#fff; }
    .sa-hero p  { margin: .1rem 0 0; color: rgba(255,255,255,.85); font-size: .78rem; }
    .sa-hero .sa-chip { background: rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.25);
        border-radius: 999px; padding: .3rem .7rem; font-size: .76rem; font-weight: 600; }
    /* High-contrast hero button (was rendering white-on-white) */
    .sa-hero .btn-hero, .sa-hero .btn-hero:hover, .sa-hero .btn-hero:focus {
        background:#fff !important; color:#b91c1c !important; font-weight:700; border:none; border-radius:.7rem; }
    .sa-hero .btn-hero i { color:#b91c1c !important; }

    /* Section heading */
    .sa-title { font-size: .68rem; font-weight: 800; letter-spacing:.4px; text-transform: uppercase;
        color:#94a3b8; margin: .9rem .25rem .45rem; display:flex; align-items:center; gap:.45rem; }
    .sa-title::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,#e2e8f0,transparent); }

    /* Stat tiles (CSS grid → uniform rows, no flex blow-up) */
    .sa-stats { display:grid; grid-template-columns: repeat(2,1fr); gap:.45rem; }
    @media (min-width:768px){ .sa-stats{ grid-template-columns: repeat(4,1fr); gap:.6rem; } }
    .sa-stat { background:#fff; border:1px solid #eef2f7; border-radius:.8rem; padding:.6rem .7rem;
        box-shadow:0 4px 12px -10px rgba(15,23,42,.35); transition:transform .15s ease, box-shadow .15s ease;
        display:flex; flex-direction:row; align-items:center; gap:.6rem; }
    .sa-stat:hover { transform:translateY(-2px); box-shadow:0 10px 18px -12px rgba(15,23,42,.45); }
    .sa-stat .ic { width:36px; height:36px; border-radius:.6rem; flex:0 0 auto; display:inline-flex; align-items:center;
        justify-content:center; color:#fff; font-size:1.1rem; }
    .sa-stat .val { font-size:1.3rem; font-weight:800; line-height:1; color:#0f172a; }
    .sa-stat .lbl { font-size:.63rem; text-transform:uppercase; letter-spacing:.3px; color:#64748b; font-weight:700; }
    .sa-stat .sub { font-size:.62rem; color:#94a3b8; font-weight:600; margin-top:.1rem; }

    /* Monochrome red / black / grey icon set (alerts = red, neutrals = black/grey) */
    .g-indigo { background:linear-gradient(135deg,#dc2626,#f87171); }
    .g-green  { background:linear-gradient(135deg,#27272a,#3f3f46); }
    .g-red    { background:linear-gradient(135deg,#dc2626,#f87171); }
    .g-cyan   { background:linear-gradient(135deg,#52525b,#a1a1aa); }
    .g-amber  { background:linear-gradient(135deg,#52525b,#a1a1aa); }
    .g-pink   { background:linear-gradient(135deg,#b91c1c,#ef4444); }
    .g-slate  { background:linear-gradient(135deg,#3f3f46,#71717a); }

    /* Quick-action app tiles */
    .sa-actions { display:grid; grid-template-columns: repeat(4,1fr); gap:.4rem .25rem; }
    @media (min-width:768px){ .sa-actions{ grid-template-columns: repeat(8,1fr); gap:.5rem .4rem; } }
    .sa-act { display:flex; flex-direction:column; align-items:center; gap:.35rem; text-decoration:none;
        padding:.3rem .1rem; border-radius:.8rem; transition:transform .12s ease, background .12s ease; }
    .sa-act:hover { background:#f8fafc; }
    .sa-act:active { transform:scale(.93); }
    .sa-act .ic { width:46px; height:46px; border-radius:14px; display:inline-flex; align-items:center;
        justify-content:center; color:#fff; font-size:1.3rem; box-shadow:0 6px 14px -7px rgba(15,23,42,.45); }
    .sa-act .t { font-size:.66rem; font-weight:600; color:#475569; text-align:center; line-height:1.1; }

    /* Panel + table */
    .sa-panel { background:#fff; border:1px solid #eef2f7; border-radius:1rem; box-shadow:0 6px 18px -14px rgba(15,23,42,.3); overflow:hidden; }
    .sa-panel .ph { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.1rem; border-bottom:1px solid #f1f5f9; }
    .sa-panel .ph .t { font-weight:800; color:#0f172a; font-size:.95rem; }
    .sa-table { width:100%; margin:0; }
    .sa-table th { font-size:.66rem; text-transform:uppercase; letter-spacing:.3px; color:#94a3b8; font-weight:700;
        padding:.7rem 1.1rem; border-bottom:1px solid #f1f5f9; text-align:left; white-space:nowrap; }
    .sa-table td { padding:.75rem 1.1rem; border-bottom:1px solid #f4f7fb; color:#334155; font-size:.88rem; vertical-align:middle; }
    .sa-table tr:last-child td { border-bottom:none; }
    .sa-table tr:hover td { background:#f8fafc; }
    .sa-init { width:34px; height:34px; border-radius:.6rem; display:inline-flex; align-items:center; justify-content:center;
        font-weight:800; color:#b91c1c; background:#fee2e2; font-size:.85rem; }
    .sa-pill { border-radius:999px; padding:.2rem .6rem; font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; gap:.25rem; }
    .sa-pill.on  { color:#16a34a; background:#dcfce7; }
    .sa-pill.off { color:#dc2626; background:#fee2e2; }
</style>
@endpush

@section('content')
<div class="sa-dash">

    {{-- Hero --}}
    <div class="sa-hero d-md-flex d-block align-items-center justify-content-between">
        <div class="position-relative" style="z-index:2">
            <h4><i class="bi bi-hdd-network me-1"></i> {{ _lang('System Dashboard') }}</h4>
            <p>{{ _lang('Platform overview — all tenant organizations & accounts.') }}</p>
        </div>
        <div class="position-relative mt-3 mt-md-0 d-flex align-items-center gap-2" style="z-index:2">
            <span class="sa-chip"><i class="bi bi-person-badge me-1"></i>{{ auth()->user()?->name }}</span>
            <a href="{{ route('admin.organizations.create') }}" class="btn btn-hero btn-sm">
                <i class="bi bi-plus-lg me-1"></i> {{ _lang('New Organization') }}
            </a>
        </div>
    </div>

    @include('partials.alerts')

    {{-- ===== Stats ===== --}}
    <div class="sa-title">{{ _lang('Overview') }}</div>
    @php
        $statCards = [
            [_lang('Total Organizations'), $stats['organizations'], 'bi-building', 'g-indigo', $stats['new_month'].' '._lang('new this month')],
            [_lang('Active'),          $stats['active'],    'bi-check-circle', 'g-green', null],
            [_lang('Suspended'),       $stats['suspended'], 'bi-pause-circle', 'g-red', null],
            [_lang('Tenant Users'),    $stats['users'],     'bi-people', 'g-cyan', $stats['staff'].' '._lang('staff')],
            ['৳ '._lang('Outstanding'), ($billing['outstanding'] ?? 0)/100, 'bi-receipt', 'g-amber', null],
            ['৳ '._lang('Collected (mo)'), ($billing['collected_month'] ?? 0)/100, 'bi-cash-stack', 'g-green', null],
            [_lang('Restricted'),      $billing['restricted'] ?? 0, 'bi-lock', 'g-red', null],
        ];
    @endphp
    <div class="sa-stats">
        @foreach ($statCards as [$label, $value, $icon, $grad, $sub])
            <div class="sa-stat">
                <span class="ic {{ $grad }}"><i class="bi {{ $icon }}"></i></span>
                <div>
                    <div class="lbl">{{ $label }}</div>
                    <div class="val">{{ number_format($value) }}</div>
                    @if ($sub)<div class="sub">{{ $sub }}</div>@endif
                </div>
            </div>
        @endforeach
    </div>

    {{-- ===== Quick actions ===== --}}
    @php
        $actions = array_values(array_filter([
            ['organizations.index',     _lang('Organizations'),     'bi-building',  'g-indigo'],
            ['organizations.create',    _lang('Add Organization'),   'bi-plus-square','g-green'],
            \Route::has('admin.billing.dashboard') ? ['billing.dashboard', _lang('Billing'), 'bi-receipt', 'g-green'] : null,
            \Route::has('admin.marketplace.index') ? ['marketplace.index', _lang('Marketplace'), 'bi-shop', 'g-cyan'] : null,
            \Route::has('admin.notices.index') ? ['notices.index', _lang('Notices'), 'bi-megaphone', 'g-pink'] : null,
            \Route::has('admin.push.index') ? ['push.index', _lang('Push Notification'), 'bi-bell', 'g-amber'] : null,
            \Route::has('admin.ads.index') ? ['ads.index', _lang('Ad Banners'), 'bi-image', 'g-cyan'] : null,
            \Route::has('admin.subscriptions.index') ? ['subscriptions.index', _lang('Subscriptions'), 'bi-credit-card', 'g-pink'] : null,
            \Route::has('admin.users.index') ? ['users.index', _lang('Users'), 'bi-people', 'g-cyan'] : null,
            \Route::has('admin.settings.index') ? ['settings.index', _lang('Settings'), 'bi-gear', 'g-slate'] : null,
            \Route::has('admin.email.index') ? ['email.index', _lang('Email'), 'bi-envelope', 'g-cyan'] : null,
            \Route::has('admin.tools.index') ? ['tools.index', _lang('Tools'), 'bi-tools', 'g-indigo'] : null,
            \Route::has('admin.system.update') ? ['system.update', _lang('System Update'), 'bi-arrow-repeat', 'g-red'] : null,
        ]));
    @endphp
    <div class="sa-title">{{ _lang('Quick Actions') }}</div>
    <div class="sa-actions">
        @foreach ($actions as [$route, $label, $icon, $grad])
            <a href="{{ route('admin.'.$route) }}" class="sa-act">
                <span class="ic {{ $grad }}"><i class="bi {{ $icon }}"></i></span>
                <span class="t">{{ $label }}</span>
            </a>
        @endforeach
    </div>

    {{-- ===== Now using ===== --}}
    <div class="sa-title">এখন ব্যবহার করছে</div>
    <div class="sa-panel">
        <div class="ph">
            <span class="t"><span class="spinner-grow spinner-grow-sm text-success me-2" style="width:.55rem;height:.55rem;"></span>শেষ ৩০ মিনিটে সক্রিয়</span>
            <a href="{{ route('admin.usage.index') }}" class="btn btn-sm btn-primary-light">{{ _lang('Usage history') }}</a>
        </div>
        @if ($nowUsing->isEmpty())
            <div class="text-center text-muted py-4" style="font-size:.85rem;"><i class="bi bi-moon-stars d-block fs-5 mb-1"></i>এই মুহূর্তে কেউ সক্রিয় নেই।</div>
        @else
            <div class="table-responsive">
                <table class="sa-table">
                    <thead><tr><th>{{ _lang('User') }}</th><th>{{ _lang('Organization') }}</th><th>{{ _lang('Last active') }}</th></tr></thead>
                    <tbody>
                        @foreach ($nowUsing as $u)
                            <tr>
                                <td><i class="bi bi-circle-fill text-success me-2" style="font-size:.5rem;"></i>{{ $u->name }}</td>
                                <td class="text-muted">{{ $u->organization }}</td>
                                <td class="text-muted">{{ (int) $u->last_seen->diffInMinutes(now()) }} মিনিট আগে</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    {{-- ===== Recent organizations ===== --}}
    <div class="sa-title">{{ _lang('Recent Organizations') }}</div>
    <div class="sa-panel">
        <div class="ph">
            <span class="t">{{ _lang('Recent Organizations') }}</span>
            <a href="{{ route('admin.organizations.index') }}" class="btn btn-sm btn-primary-light">{{ _lang('View all') }}</a>
        </div>
        <div class="table-responsive">
            <table class="sa-table">
                <thead>
                    <tr>
                        <th>{{ _lang('Organization') }}</th>
                        <th>{{ _lang('Email') }}</th>
                        <th>{{ _lang('Status') }}</th>
                        <th>{{ _lang('Created') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($recentOrganizations as $organization)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="sa-init">{{ strtoupper(substr($organization->name, 0, 1)) }}</span>
                                    <a href="{{ route('admin.organizations.edit', $organization) }}" class="fw-semibold text-decoration-none" style="color:#0f172a;">{{ $organization->name }}</a>
                                </div>
                            </td>
                            <td class="text-muted">{{ $organization->email ?? '—' }}</td>
                            <td>
                                @if ($organization->status)
                                    <span class="sa-pill on"><i class="bi bi-dot"></i>{{ _lang('Active') }}</span>
                                @else
                                    <span class="sa-pill off"><i class="bi bi-dot"></i>{{ _lang('Suspended') }}</span>
                                @endif
                            </td>
                            <td class="text-muted">{{ $organization->created_at?->format('d M Y') }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="text-center text-muted py-4">{{ _lang('No organizations yet.') }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection