@php
    $layout = auth()->user()->role === 'super_admin' ? 'layouts.admin' : 'layouts.app';
@endphp

@extends($layout)

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="text-success">VSLA Monthly Summary Report</h2>
            <small class="text-muted">Auto-generated from live data – matches Excel template</small>
        </div>
    </div>
    <div class="float-right mb-3">
        <a href="{{ route('c1.vsla.report.export') }}" class="btn btn-success">
            <i class="fas fa-file-excel"></i> Download Excel Report (Exact Template)
        </a>
    </div>

    <!-- Quick Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h5>Trained Members</h5>
                    <h3>{{ number_format($trainedMembers) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5>Starter Kits Provided</h5>
                    <h3>{{ $kitsProvided }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h5>New Businesses Created</h5>
                    <h3>{{ $newBusinesses }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <h5>Productive Assets Value</h5>
                    <h3>${{ number_format($productiveAssets, 2) }}</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Progress Chart -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>VSLA Formation Progress vs Targets</h5>
                </div>
                <div class="card-body">
                    <canvas id="progressChart" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Engagement Table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>VSLA Engagement Data</h5>
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-hover">
                        <thead class="table-success">
                            <tr>
                                <th>Category</th>
                                <th>RF Target</th>
                                <th>Achieved</th>
                                <th>% Progress</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($engagementData as $row)
                            <tr>
                                <td>{{ $row['category'] }}</td>
                                <td>{{ number_format($row['target']) }}</td>
                                <td>{{ number_format($row['achieved']) }}</td>
                                <td><strong>{{ $row['progress'] }}</strong></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('progressChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: @json($chartLabels),
            datasets: [
                {
                    label: 'Target',
                    data: @json($chartTargets),
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Achieved',
                    data: @json($chartAchieved),
                    backgroundColor: 'rgba(40, 167, 69, 0.8)',
                    borderColor: 'rgba(40, 167, 69, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            scales: { y: { beginAtZero: true } },
            plugins: {
                title: { display: false },
                legend: { position: 'top' }
            }
        }
    });
</script>
@endsection