@extends('layouts.admin')

@section('title', 'Platform Reports')
@section('header_title', 'Operational Intelligence & Analytics')

@section('content')
<div class="stats-grid">
    <div class="stat-item stat-blue">
        <div class="stat-icon"><i class="fas fa-chart-line"></i></div>
        <div class="stat-content">
            <div class="label">Projected Annual Yield</div>
            <div class="value">Rs. 1.2M</div>
        </div>
    </div>
    <div class="stat-item stat-green">
        <div class="stat-icon"><i class="fas fa-user-check"></i></div>
        <div class="stat-content">
            <div class="label">Peak Engagement Rate</div>
            <div class="value">94.2%</div>
        </div>
    </div>
    <div class="stat-item stat-purple">
        <div class="stat-icon"><i class="fas fa-microchip"></i></div>
        <div class="stat-content">
            <div class="label">System Uptime</div>
            <div class="value">99.9%</div>
        </div>
    </div>
</div>

<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 2rem;">
    <div class="data-card">
        <div class="card-header">
            <h2>Financial Deployment Stream</h2>
        </div>
        <div style="padding: 3rem;">
            <canvas id="revenueChart" style="max-height: 400px;"></canvas>
        </div>
    </div>

    <div class="data-card">
        <div class="card-header">
            <h2>Occupancy Intelligence</h2>
        </div>
        <div class="table-wrap">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Node Class</th>
                        <th style="text-align: right;">Utilization</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($occupancyRate as $rate)
                    <tr>
                        <td>
                            <div style="font-weight: 700; color: #fff;">{{ $rate['label'] }} Venue</div>
                        </td>
                        <td style="text-align: right;">
                            <div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
                                <div style="width: 100px; height: 8px; background: rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden;">
                                    <div style="width: {{ $rate['value'] }}%; height: 100%; background: var(--primary);"></div>
                                </div>
                                <span style="font-weight: 800; color: var(--primary);">{{ $rate['value'] }}%</span>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    const revCtx = document.getElementById('revenueChart').getContext('2d');
    new Chart(revCtx, {
        type: 'bar',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
            datasets: [{
                label: 'Monthly Revenue Flow',
                data: [12000, 19000, 15000, 25000, 22000, 30000],
                backgroundColor: 'rgba(59, 130, 246, 0.5)',
                borderColor: '#3b82f6',
                borderWidth: 2,
                borderRadius: 10
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#94a3b8' } },
                x: { grid: { display: false }, ticks: { color: '#94a3b8' } }
            }
        }
    });
</script>
@endsection