@extends('layouts.app')
@section('title', 'Admin Dashboard - UniformFlow')
@section('page-heading', 'Admin dashboard')
@section('content')
<section class="page-intro admin-intro">
    <div>
        <span class="eyebrow">{{ now()->format('l, d F Y') }}</span>
        <h1>Operations at a <em>glance.</em></h1>
        <p>Stock health, employee accountability, and handover performance in one place.</p>
    </div>
    <div class="quick-actions">
        <a class="button subtle" href="{{ route('employees.index') }}">+ Add employee</a>
        <a class="button subtle" href="{{ route('inventory.index') }}">+ Receive stock</a>
        <a class="button primary" href="{{ route('issues.index') }}">+ Issue uniform</a>
    </div>
</section>

<div class="stats-grid admin-stats">
    <article class="stat-card mint"><span class="stat-icon">E</span><small>Active employees</small><strong>{{ number_format($activeEmployees) }}</strong><span class="stat-note">{{ $employeesWithIssues }} currently hold uniforms</span></article>
    <button class="stat-card blue stock-card-button" type="button" onclick="document.getElementById('stock-chart-dialog').showModal()"><span class="stat-icon">S</span><small>Available stock</small><strong>{{ number_format($unitsInStock) }}</strong><span class="stat-note">Across {{ $uniformTypes }} uniform types / click for graph</span></button>
    <article class="stat-card amber"><span class="stat-icon">I</span><small>Units with employees</small><strong>{{ number_format($unitsIssued) }}</strong><span class="stat-note">{{ $issuedThisMonth }} issued this month</span></article>
    <article class="stat-card rose"><span class="stat-icon">!</span><small>Stock alerts</small><strong>{{ $lowStock->count() }}</strong><span class="stat-note">{{ $outOfStock->count() }} sizes are out of stock</span></article>
</div>

<div class="admin-summary-grid">
    <section class="panel health-panel">
        <div class="panel-head"><div><span class="eyebrow">Inventory control</span><h2>Stock health</h2></div><strong class="health-score">{{ $stockHealth }}%</strong></div>
        <div class="progress-track"><span style="width: {{ $stockHealth }}%"></span></div>
        <div class="health-legend"><span><i class="good-dot"></i> Healthy sizes</span><span><i class="warn-dot"></i> At or below reorder level</span></div>
        <div class="mini-metrics"><div><small>Uniform types</small><strong>{{ $uniformTypes }}</strong></div><div><small>Low stock</small><strong>{{ $lowStock->count() }}</strong></div><div><small>Out of stock</small><strong>{{ $outOfStock->count() }}</strong></div></div>
    </section>
    <section class="panel monthly-panel">
        <div class="panel-head"><div><span class="eyebrow">This month</span><h2>Movement summary</h2></div></div>
        <div class="monthly-metric"><span>Uniforms issued</span><strong>{{ $issuedThisMonth }}</strong></div>
        <div class="monthly-metric"><span>Exit handovers completed</span><strong>{{ $handoversThisMonth }}</strong></div>
        <div class="monthly-metric"><span>Reusable returns</span><strong>{{ $handoverOutcomes['reusable'] ?? 0 }}</strong></div>
        <div class="monthly-metric danger-text"><span>Damaged or not returned</span><strong>{{ ($handoverOutcomes['damaged'] ?? 0) + ($handoverOutcomes['not_returned'] ?? 0) }}</strong></div>
    </section>
</div>

<div class="dashboard-main-grid">
    <section class="panel attention-panel">
        <div class="panel-head"><div><span class="eyebrow">Action required</span><h2>Stock alerts</h2></div><a href="{{ route('inventory.index') }}">Manage stock</a></div>
        @forelse($lowStock->take(7) as $variant)
            <div class="list-row"><div class="item-symbol">{{ strtoupper(substr($variant->item->name, 0, 2)) }}</div><div class="grow"><strong>{{ $variant->item->name }}</strong><small>Size {{ $variant->size }} / reorder at {{ $variant->reorder_level }}</small></div><span class="pill {{ $variant->quantity === 0 ? 'danger' : 'warning' }}">{{ $variant->quantity }} available</span></div>
        @empty<div class="empty">All size balances are above their reorder levels.</div>@endforelse
    </section>
    <section class="panel replacement-panel">
        <div class="panel-head"><div><span class="eyebrow">Employee welfare</span><h2>Held over 12 months</h2></div><span class="pill {{ $replacementDue->count() ? 'warning' : 'good' }}">{{ $replacementDue->count() }} due</span></div>
        @forelse($replacementDue as $issue)
            <div class="list-row"><div class="person-avatar">{{ strtoupper(substr($issue->employee->name, 0, 1)) }}</div><div class="grow"><strong>{{ $issue->employee->name }}</strong><small>{{ $issue->variant->item->name }} / {{ $issue->variant->size }} / issued {{ $issue->issued_at->format('d M Y') }}</small></div><a class="text-link" href="{{ route('employees.show', $issue->employee) }}">Review</a></div>
        @empty<div class="empty">No employee-held uniforms are over 12 months old.</div>@endforelse
    </section>
</div>

<div class="dashboard-insights-grid">
    <section class="panel">
        <div class="panel-head"><div><span class="eyebrow">Accountability</span><h2>Issued by department</h2></div></div>
        @php($maxDepartmentUnits = max(1, (int) ($departmentAllocation->max('units') ?? 1)))
        @forelse($departmentAllocation as $department)
            <div class="bar-row"><div><span>{{ $department->department }}</span><strong>{{ $department->units }}</strong></div><div class="bar-track"><i style="width: {{ round(($department->units / $maxDepartmentUnits) * 100) }}%"></i></div></div>
        @empty<div class="empty">Department allocation appears after uniforms are issued.</div>@endforelse
    </section>
    <section class="panel">
        <div class="panel-head"><div><span class="eyebrow">Demand planning</span><h2>Most issued uniforms</h2></div></div>
        @forelse($popularUniforms as $index => $uniform)
            <div class="rank-row"><span class="rank">{{ $index + 1 }}</span><div class="grow"><strong>{{ $uniform->name }}</strong><small>Total units issued</small></div><b>{{ $uniform->units }}</b></div>
        @empty<div class="empty">Demand rankings appear after uniforms are issued.</div>@endforelse
    </section>
    <section class="panel">
        <div class="panel-head"><div><span class="eyebrow">Audit trail</span><h2>Recent activity</h2></div></div>
        @forelse($recentMovements->take(6) as $movement)
            <div class="activity"><span class="activity-dot {{ $movement->quantity_change > 0 ? 'in' : 'out' }}"></span><div class="grow"><strong>{{ ucfirst(str_replace('_', ' ', $movement->type)) }} / {{ $movement->variant->item->name }}</strong><small>Size {{ $movement->variant->size }} / {{ $movement->created_at->diffForHumans() }}</small></div><b>{{ $movement->quantity_change > 0 ? '+' : '' }}{{ $movement->quantity_change }}</b></div>
        @empty<div class="empty">Stock activity will appear here.</div>@endforelse
    </section>
</div>

<dialog class="stock-chart-dialog" id="stock-chart-dialog">
    <div class="chart-dialog-head"><div><span class="eyebrow">Available inventory</span><h2>Stock across uniform types</h2><p>New and employee-returned units currently available.</p></div><button type="button" onclick="this.closest('dialog').close()" aria-label="Close">×</button></div>
    <div class="chart-legend"><span><i class="chart-new"></i>New stock</span><span><i class="chart-returned"></i>Returned stock</span></div>
    @php($maxStockTotal = max(1, (int) ($stockDistribution->max('total') ?? 1)))
    <div class="stock-chart">
        @forelse($stockDistribution as $stock)
        <div class="stock-chart-row">
            <div class="chart-label"><strong>{{ $stock->name }}</strong><small>{{ number_format($stock->stock_value, 2) }} total value</small></div>
            <div class="chart-bar-area"><div class="chart-bar" style="width: {{ round(($stock->total / $maxStockTotal) * 100) }}%"><span class="chart-new" style="width: {{ $stock->total ? round(($stock->new_units / $stock->total) * 100) : 0 }}%"></span><span class="chart-returned" style="width: {{ $stock->total ? round(($stock->returned_units / $stock->total) * 100) : 0 }}%"></span></div></div>
            <b>{{ $stock->total }}</b>
        </div>
        @empty<div class="empty">No available stock to graph.</div>@endforelse
    </div>
    <div class="chart-dialog-foot"><a class="button primary" href="{{ route('inventory.index') }}">Open inventory</a><button class="button subtle" type="button" onclick="this.closest('dialog').close()">Close</button></div>
</dialog>
<script>document.getElementById('stock-chart-dialog').addEventListener('click',function(event){if(event.target===this)this.close()})</script>
@endsection