@extends('admin.layouts.app')

@section('title', 'Dashboard')
@section('heading', '')
@section('breadcrumb', 'Admin / Overview')

@section('content')
<style>
.nb-dash {
    --sn-teal: #0d7377;
    --sn-teal-light: #e6f4f1;
    --sn-bg: #f3f4f6;
    --sn-card: #ffffff;
    --sn-border: #e5e7eb;
    --sn-text: #111827;
    --sn-muted: #6b7280;
    --sn-sub: #0d7377;
}

/* ── Page header (StudyNest pattern) ── */
.nb-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.nb-page-head h1 {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--sn-text);
    margin: 0 0 0.2rem;
    letter-spacing: -0.02em;
}

.nb-breadcrumb {
    font-size: 0.8rem;
    color: var(--sn-muted);
    margin: 0;
}

/* ── Card base ── */
.nb-card {
    background: var(--sn-card);
    border: 1px solid var(--sn-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ── Row 1: Primary metrics ── */
.nb-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.nb-metric-card {
    display: block;
    padding: 1.15rem 1.25rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.nb-metric-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: #d1d5db;
    color: inherit;
    text-decoration: none;
}

.nb-metric-card.has-link::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: #9ca3af;
}

.nb-metric-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--sn-muted);
    margin-bottom: 0.45rem;
}

.nb-metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sn-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.nb-metric-sub {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sn-sub);
}

/* ── Row 2: Daily activity ── */
.nb-daily-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.nb-daily-card {
    padding: 1.15rem 1.25rem;
}

.nb-daily-card .nb-metric-label { margin-bottom: 0.5rem; }
.nb-daily-card .nb-metric-value { margin-bottom: 0; font-size: 1.6rem; }

/* ── Row 3: Status chips ── */
.nb-chips-card {
    padding: 1.15rem 1.25rem 1.25rem;
    margin-bottom: 1rem;
}

.nb-chips-title {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--sn-muted);
    margin-bottom: 0.85rem;
}

.nb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.nb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.nb-chip:hover { opacity: 0.85; text-decoration: none; }

.nb-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 0.72rem;
    font-weight: 700;
}

.nb-chip.teal   { background: #e6f4f1; border-color: #b2dfdb; color: #0d7377; }
.nb-chip.blue   { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.nb-chip.green  { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }
.nb-chip.amber  { background: #fffbeb; border-color: #fde68a; color: #d97706; }
.nb-chip.red    { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.nb-chip.purple { background: #f5f3ff; border-color: #ddd6fe; color: #7c3aed; }
.nb-chip.slate  { background: #f8fafc; border-color: #e2e8f0; color: #475569; }

/* ── Row 4: 30-day trends ── */
.nb-trends-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.nb-trend-card {
    padding: 1.15rem 1.25rem;
    min-height: 110px;
    display: flex;
    flex-direction: column;
}

.nb-trend-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: auto;
}

.nb-trend-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--sn-muted);
    line-height: 1.35;
}

.nb-trend-period {
    font-size: 0.72rem;
    color: #9ca3af;
    display: block;
    margin-top: 0.1rem;
}

.nb-trend-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sn-teal);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* ── Charts + Activity row ── */
.nb-charts-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.nb-panel-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sn-border);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--sn-muted);
}

.nb-panel-body {
    padding: 1rem 1.25rem;
}

.nb-chart-wrap { position: relative; height: 240px; }

.nb-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}

.nb-activity-list::-webkit-scrollbar { width: 4px; }
.nb-activity-list::-webkit-scrollbar-thumb {
    background: rgba(13, 115, 119, 0.2);
    border-radius: 999px;
}

.nb-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.82rem;
    color: #374151;
}

.nb-activity-item:last-child { border-bottom: none; }

.nb-activity-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    margin-top: 0.35rem;
    flex-shrink: 0;
}

.nb-activity-dot.success { background: #059669; }
.nb-activity-dot.warning { background: #d97706; }
.nb-activity-dot.danger  { background: #dc2626; }
.nb-activity-dot.muted   { background: #9ca3af; }

.nb-activity-text { flex: 1; line-height: 1.4; }
.nb-activity-time { font-size: 0.72rem; color: #9ca3af; white-space: nowrap; }

.nb-empty { text-align: center; padding: 2rem; color: var(--sn-muted); font-size: 0.85rem; }

.nb-bottom-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 1199px) {
    .nb-metrics-row { grid-template-columns: repeat(2, 1fr); }
    .nb-trends-row  { grid-template-columns: 1fr; }
    .nb-charts-row  { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .nb-metrics-row,
    .nb-daily-row,
    .nb-bottom-charts { grid-template-columns: 1fr; }
}
</style>

<div class="nb-dash">
    {{-- Page header --}}
    <div class="nb-page-head">
        <div>
            <h1>Dashboard</h1>
            <p class="nb-breadcrumb">Admin / Overview</p>
        </div>
    </div>

    {{-- Row 1: Primary metrics --}}
    <div class="nb-metrics-row">
        <a href="{{ route('admin.orders.pending') }}" class="nb-card nb-metric-card has-link">
            <div class="nb-metric-label">Today Orders</div>
            <div class="nb-metric-value">{{ number_format($todayOrders) }}</div>
            <div class="nb-metric-sub">{{ number_format($todayDelivered) }} delivered today</div>
        </a>

        <a href="{{ route('admin.customers.index') }}" class="nb-card nb-metric-card has-link">
            <div class="nb-metric-label">Total Customers</div>
            <div class="nb-metric-value">{{ number_format($totalCustomers) }}</div>
            <div class="nb-metric-sub">{{ number_format($activeCustomers) }} active subscriptions</div>
        </a>

        <a href="{{ route('admin.executives.index') }}" class="nb-card nb-metric-card has-link">
            <div class="nb-metric-label">Total Executives</div>
            <div class="nb-metric-value">{{ number_format($totalExecutives) }}</div>
            <div class="nb-metric-sub">Delivery team members</div>
        </a>

        <a href="{{ route('admin.orders.pending') }}" class="nb-card nb-metric-card has-link">
            <div class="nb-metric-label">Pending Deliveries</div>
            <div class="nb-metric-value">{{ number_format($pendingDeliveries) }}</div>
            <div class="nb-metric-sub">Awaiting delivery today</div>
        </a>
    </div>

    {{-- Row 2: Daily activity --}}
    <div class="nb-daily-row">
        <div class="nb-card nb-daily-card">
            <div class="nb-metric-label">Today's Delivered</div>
            <div class="nb-metric-value">{{ number_format($todayDelivered) }}</div>
        </div>
        <div class="nb-card nb-daily-card">
            <div class="nb-metric-label">Registration Requests</div>
            <div class="nb-metric-value">{{ number_format($registrationRequests) }}</div>
        </div>
        <div class="nb-card nb-daily-card">
            <div class="nb-metric-label">Pending Customers</div>
            <div class="nb-metric-value">{{ number_format($pendingCustomers) }}</div>
        </div>
    </div>

    {{-- Row 3: Status chips --}}
    <div class="nb-card nb-chips-card">
        <div class="nb-chips-title">People overview</div>
        <div class="nb-chips">
            <a href="{{ route('admin.customers.index') }}" class="nb-chip teal">
                Active Customers <span class="nb-chip-count">{{ number_format($activeCustomers) }}</span>
            </a>
            <a href="{{ route('admin.customers.pending') }}" class="nb-chip amber">
                Pending Customers <span class="nb-chip-count">{{ number_format($pendingCustomers) }}</span>
            </a>
            <a href="{{ route('admin.registration-requests.index') }}" class="nb-chip red">
                Registration Requests <span class="nb-chip-count">{{ number_format($registrationRequests) }}</span>
            </a>
            <a href="{{ route('admin.executives.index') }}" class="nb-chip blue">
                Executives <span class="nb-chip-count">{{ number_format($totalExecutives) }}</span>
            </a>
            <a href="{{ route('admin.orders.pending') }}" class="nb-chip green">
                Pending Deliveries <span class="nb-chip-count">{{ number_format($pendingDeliveries) }}</span>
            </a>
            <span class="nb-chip purple">
                Total Customers <span class="nb-chip-count">{{ number_format($totalCustomers) }}</span>
            </span>
        </div>
    </div>

    {{-- Row 4: 30-day trends --}}
    <div class="nb-trends-row">
        <div class="nb-card nb-trend-card">
            <div class="nb-trend-top">
                <div>
                    <div class="nb-trend-label">Revenue</div>
                    <span class="nb-trend-period">30 days</span>
                </div>
                <div class="nb-trend-value">₹{{ number_format($monthRevenue, 0) }}</div>
            </div>
        </div>
        <div class="nb-card nb-trend-card">
            <div class="nb-trend-top">
                <div>
                    <div class="nb-trend-label">New customers</div>
                    <span class="nb-trend-period">30 days</span>
                </div>
                <div class="nb-trend-value">{{ number_format($newCustomers30Days) }}</div>
            </div>
        </div>
        <div class="nb-card nb-trend-card">
            <div class="nb-trend-top">
                <div>
                    <div class="nb-trend-label">Delivered orders</div>
                    <span class="nb-trend-period">30 days</span>
                </div>
                <div class="nb-trend-value">{{ number_format($delivered30Days) }}</div>
            </div>
        </div>
    </div>

    {{-- Charts + Activity --}}
    <div class="nb-charts-row">
        <div class="nb-card">
            <div class="nb-panel-head">Sales Overview — Last 7 days</div>
            <div class="nb-panel-body">
                <div class="nb-chart-wrap">
                    <canvas id="salesChart"></canvas>
                </div>
            </div>
        </div>
        <div class="nb-card">
            <div class="nb-panel-head">Recent Activity</div>
            <div class="nb-panel-body" style="padding-top:0.5rem;">
                <ul class="nb-activity-list">
                    @forelse ($recentActivity as $activity)
                        <li class="nb-activity-item">
                            @if (($activity['status'] ?? '') === 'Delivered')
                                <span class="nb-activity-dot success"></span>
                            @elseif (($activity['status'] ?? '') === 'Pending')
                                <span class="nb-activity-dot warning"></span>
                            @elseif (($activity['status'] ?? '') === 'Cancelled')
                                <span class="nb-activity-dot danger"></span>
                            @else
                                <span class="nb-activity-dot muted"></span>
                            @endif
                            <span class="nb-activity-text">{!! $activity['message'] !!}</span>
                            <span class="nb-activity-time">{{ $activity['date'] }}</span>
                        </li>
                    @empty
                        <li class="nb-empty">No recent activity found</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>

    {{-- Bottom charts --}}
    <div class="nb-bottom-charts">
        <div class="nb-card">
            <div class="nb-panel-head">Delivery Performance — Monthly</div>
            <div class="nb-panel-body">
                <div class="nb-chart-wrap">
                    <canvas id="deliveryChart"></canvas>
                </div>
            </div>
        </div>
        <div class="nb-card">
            <div class="nb-panel-head">Income vs Expense — Current year</div>
            <div class="nb-panel-body">
                <div class="nb-chart-wrap">
                    <canvas id="paymentChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const chartDefaults = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            labels: {
                font: { family: "'Sora', sans-serif", size: 11 },
                color: '#6b7280',
                usePointStyle: true,
                padding: 14,
            },
        },
    },
    scales: {
        x: {
            grid: { display: false },
            ticks: { font: { family: "'Sora', sans-serif", size: 11 }, color: '#9ca3af' },
            border: { display: false },
        },
        y: {
            grid: { color: '#f3f4f6' },
            ticks: { font: { family: "'Sora', sans-serif", size: 11 }, color: '#9ca3af' },
            border: { display: false },
        },
    },
};

const salesLabels = @json($salesLabels);
const salesData = @json($salesData);
const deliveryMonths = @json($deliveryMonths);
const deliveredByMonth = @json($deliveredByMonth);
const pendingByMonth = @json($pendingByMonth);
const paymentMonths = @json($paymentMonths);
const earnings = @json($earnings);
const expenses = @json($expenses);
const profit = @json($profit);

new Chart(document.getElementById('salesChart'), {
    type: 'line',
    data: {
        labels: salesLabels,
        datasets: [{
            label: 'Delivered Orders',
            data: salesData,
            borderColor: '#0d7377',
            backgroundColor: 'rgba(13, 115, 119, 0.06)',
            tension: 0.4,
            fill: true,
            pointBackgroundColor: '#0d7377',
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointRadius: 3,
        }],
    },
    options: { ...chartDefaults, plugins: { ...chartDefaults.plugins, legend: { display: false } } },
});

new Chart(document.getElementById('deliveryChart'), {
    type: 'bar',
    data: {
        labels: deliveryMonths,
        datasets: [
            { label: 'Delivered', data: deliveredByMonth, backgroundColor: '#059669', borderRadius: 4 },
            { label: 'Pending', data: pendingByMonth, backgroundColor: '#d97706', borderRadius: 4 },
        ],
    },
    options: chartDefaults,
});

new Chart(document.getElementById('paymentChart'), {
    type: 'line',
    data: {
        labels: paymentMonths,
        datasets: [
            { label: 'Earnings', data: earnings, borderColor: '#0d7377', backgroundColor: 'transparent', tension: 0.35, pointRadius: 2 },
            { label: 'Expenses', data: expenses, borderColor: '#dc2626', backgroundColor: 'transparent', tension: 0.35, pointRadius: 2 },
            { label: 'Profit', data: profit, borderColor: '#7c3aed', backgroundColor: 'transparent', tension: 0.35, pointRadius: 2 },
        ],
    },
    options: chartDefaults,
});
</script>
@endpush