@extends('layouts.app')

@section('content')
    <h3 class="page-title">Dashboard</h3>

    <div class="row">
        <div class="col-sm-2">
            <div class="panel panel-default text-center">
                <div class="panel-body">
                    <h2 style="margin:0;">{{ $stats['folders'] }}</h2>
                    <p class="help-block" style="margin:0;">Employee files</p>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="panel panel-default text-center">
                <div class="panel-body">
                    <h2 style="margin:0;">{{ $stats['files'] }}</h2>
                    <p class="help-block" style="margin:0;">Documents</p>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="panel panel-default text-center">
                <div class="panel-body">
                    <h2 style="margin:0; color:#d97706;">{{ $stats['pending_approval'] }}</h2>
                    <p class="help-block" style="margin:0;">Pending approval</p>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="panel panel-default text-center">
                <div class="panel-body">
                    <h2 style="margin:0; color:#16a34a;">{{ $stats['approved'] }}</h2>
                    <p class="help-block" style="margin:0;">Approved</p>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="panel panel-default text-center">
                <div class="panel-body">
                    <h2 style="margin:0; color:#e11d48;">{{ $stats['rejected'] }}</h2>
                    <p class="help-block" style="margin:0;">Rejected</p>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="panel panel-default text-center">
                <div class="panel-body">
                    <h2 style="margin:0;">{{ $stats['draft'] }}</h2>
                    <p class="help-block" style="margin:0;">Draft</p>
                </div>
            </div>
        </div>
    </div>

    <p>
        <a href="{{ route('admin.folders.create') }}" class="btn btn-primary">+ New employee file</a>
        <a href="{{ route('admin.files.create') }}" class="btn btn-success">+ Upload document</a>
        <a href="{{ route('admin.audit_logs.index') }}" class="btn btn-default">View audit log</a>
    </p>

    <div class="panel panel-default">
        <div class="panel-heading">Approval workflow</div>
        <div class="panel-body">
            <div style="display:flex; align-items:center; flex-wrap:wrap; gap:0;">
                <div style="flex:1; min-width:140px; text-align:center; padding:15px; border-radius:6px; background:#f3f4f6;">
                    <div style="font-size:22px; font-weight:bold;">{{ $stats['draft'] }}</div>
                    <div class="help-block" style="margin:0;">Draft</div>
                </div>
                <div style="padding:0 12px; font-size:20px; color:#9ca3af;">&#8594;</div>
                <div style="flex:1; min-width:140px; text-align:center; padding:15px; border-radius:6px; background:#fef3c7;">
                    <div style="font-size:22px; font-weight:bold; color:#d97706;">{{ $stats['pending_approval'] }}</div>
                    <div class="help-block" style="margin:0;">Pending approval</div>
                </div>
                <div style="padding:0 12px; font-size:20px; color:#9ca3af;">&#8594;</div>
                <div style="flex:1; min-width:140px; text-align:center; padding:15px; border-radius:6px; background:#dcfce7;">
                    <div style="font-size:22px; font-weight:bold; color:#16a34a;">{{ $stats['approved'] }}</div>
                    <div class="help-block" style="margin:0;">Approved</div>
                </div>
                <div style="padding:0 12px; font-size:20px; color:#9ca3af;">/</div>
                <div style="flex:1; min-width:140px; text-align:center; padding:15px; border-radius:6px; background:#fee2e2;">
                    <div style="font-size:22px; font-weight:bold; color:#e11d48;">{{ $stats['rejected'] }}</div>
                    <div class="help-block" style="margin:0;">Rejected</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Document status breakdown</div>
                <div class="panel-body">
                    <canvas id="dashStatusChart" height="220"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Files vs employee files</div>
                <div class="panel-body">
                    <canvas id="dashTotalsChart" height="220"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-7">
            <div class="panel panel-default">
                <div class="panel-heading">Recently uploaded documents</div>
                <div class="panel-body table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>Document</th>
                            <th>Employee file</th>
                            <th>Status</th>
                            <th>Uploaded by</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse ($recentFiles as $file)
                            <tr>
                                <td><a href="{{ route('admin.files.show', $file->id) }}">
                                    {{ optional($file->getMedia('filename')->first())->name ?? 'File #' . $file->id }}
                                </a></td>
                                <td>{{ $file->folder->name ?? '—' }}</td>
                                <td>
                                    @php $s = $file->status; @endphp
                                    <span class="label label-{{ $s == 'approved' ? 'success' : ($s == 'rejected' ? 'danger' : ($s == 'pending_approval' ? 'warning' : 'default')) }}">
                                        {{ $file->statusLabel() }}
                                    </span>
                                </td>
                                <td>{{ $file->created_by->name ?? '—' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4">No documents uploaded yet.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-5">
            <div class="panel panel-default">
                <div class="panel-heading">Recent activity</div>
                <div class="panel-body">
                    @forelse ($recentActivity as $event)
                        <p style="margin-bottom:10px;">
                            <span class="label label-info">{{ $event->actionLabel() }}</span>
                            {{ optional($event->folder)->name }}
                            <br>
                            <small class="help-block" style="margin:0;">
                                {{ $event->user->name ?? 'System' }} &middot; {{ $event->created_at->diffForHumans() }}
                            </small>
                        </p>
                    @empty
                        <p class="help-block">No activity recorded yet.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
<script src="{{ asset('js/chart.umd.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    new Chart(document.getElementById('dashStatusChart'), {
        type: 'doughnut',
        data: {
            labels: ['Pending approval', 'Approved', 'Rejected', 'Draft'],
            datasets: [{
                data: [
                    {{ $stats['pending_approval'] }},
                    {{ $stats['approved'] }},
                    {{ $stats['rejected'] }},
                    {{ $stats['draft'] }}
                ],
                backgroundColor: ['#d97706', '#16a34a', '#e11d48', '#9ca3af']
            }]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });

    new Chart(document.getElementById('dashTotalsChart'), {
        type: 'bar',
        data: {
            labels: ['Employee files', 'Documents'],
            datasets: [{
                label: 'Total',
                data: [{{ $stats['folders'] }}, {{ $stats['files'] }}],
                backgroundColor: ['#2563eb', '#0891b2']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
            plugins: { legend: { display: false } }
        }
    });
});
</script>
@endsection