

<?php $__env->startSection('title', 'Reports & Analytics'); ?>

<?php $__env->startSection('content'); ?>
<div class="container-fluid px-4 py-6">
    <?php
        $topUnit = $volunteersPerUnit->first();
        $topTraining = $trainingStats->sortByDesc('participants')->first();
    ?>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="mb-1">Reports & Analytics</h1>
            <p class="text-muted mb-0">Visualise NDRT officer, training and deployment data</p>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="<?php echo e(route('reports.export', 'raw')); ?>" class="btn btn-outline-dark">
                <i class="fas fa-file-export"></i> Raw Data (Excel)
            </a>
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <i class="fas fa-download"></i> Quick Exports
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="<?php echo e(route('reports.export', 'officers')); ?>">All NDRT Surge</a></li>
                    <li><a class="dropdown-item" href="<?php echo e(route('reports.export', 'officers-available')); ?>">Available Officers</a></li>
                    <li><a class="dropdown-item" href="<?php echo e(route('reports.export', 'officers-unavailable')); ?>">Unavailable Officers</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="<?php echo e(route('reports.export', 'trainings')); ?>">Trainings</a></li>
                    <li><a class="dropdown-item" href="<?php echo e(route('reports.export', 'deployments')); ?>">Deployments</a></li>
                    <li><a class="dropdown-item" href="<?php echo e(route('reports.export', 'deployments-active')); ?>">Active Deployments</a></li>
                    <li><a class="dropdown-item" href="<?php echo e(route('reports.export', 'deployments-completed')); ?>">Completed Deployments</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="card text-center h-100">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase">Total NDRT Surge</h6>
                    <h2 class="mt-2"><?php echo e(number_format($totalOfficers)); ?></h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center h-100">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase">Active Deployments</h6>
                    <h2 class="mt-2 text-success"><?php echo e(number_format($activeDeployments)); ?></h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center h-100">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase">Completed Deployments</h6>
                    <h2 class="mt-2 text-primary"><?php echo e(number_format($completedDeployments)); ?></h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center h-100">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase">Available Officers</h6>
                    <h2 class="mt-2 text-info"><?php echo e(number_format($availableOfficers)); ?></h2>
                    <p class="text-muted small mb-0"><?php echo e(number_format($unavailableOfficers)); ?> unavailable</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Gender Distribution</h5>
                </div>
                <div class="card-body">
                    <canvas id="genderChart" height="250"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Availability</h5>
                </div>
                <div class="card-body">
                    <canvas id="availabilityChart" height="250"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Registrations Trend</h5>
                </div>
                <div class="card-body">
                    <canvas id="registrationsChart" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mt-1">
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Volunteers by Sector / Unit</h5>
                    <form class="d-flex align-items-center gap-2" action="<?php echo e(route('reports.export', 'officers-unit')); ?>" method="GET">
                        <select class="form-select form-select-sm" name="unit" required>
                            <option value="">Select unit</option>
                            <?php $__currentLoopData = $unitOptions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $unit): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($unit); ?>"><?php echo e($unit); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                        <button class="btn btn-sm btn-outline-primary" type="submit">
                            <i class="fas fa-file-export"></i>
                        </button>
                    </form>
                </div>
                <div class="card-body">
                    <canvas id="unitChart" height="280"></canvas>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Officers by Location Type</h5>
                    <form class="d-flex align-items-center gap-2" action="<?php echo e(route('reports.export', 'officers-location')); ?>" method="GET">
                        <select class="form-select form-select-sm" name="location" required>
                            <option value="">Select location type</option>
                            <?php $__currentLoopData = $locationOptions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $location): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($location); ?>"><?php echo e($location); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                        <button class="btn btn-sm btn-outline-primary" type="submit">
                            <i class="fas fa-file-export"></i>
                        </button>
                    </form>
                </div>
                <div class="card-body">
                    <canvas id="locationChart" height="280"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mt-1">
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Trainings (Top 10)</h5>
                    <a href="<?php echo e(route('reports.export', 'trainings')); ?>" class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-file-export"></i> Export
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm align-middle">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Start Date</th>
                                    <th>Location</th>
                                    <th class="text-end">Participants</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $__empty_1 = true; $__currentLoopData = $trainingStats->take(10); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $training): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                    <tr>
                                        <td><?php echo e($training['name']); ?></td>
                                        <td><?php echo e($training['start_date']); ?></td>
                                        <td><?php echo e($training['location']); ?></td>
                                        <td class="text-end"><?php echo e($training['participants']); ?></td>
                                    </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">No trainings recorded.</td>
                                    </tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Deployments by Location</h5>
                    <a href="<?php echo e(route('reports.export', 'deployments')); ?>" class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-file-export"></i> Export
                    </a>
                </div>
                <div class="card-body">
                    <canvas id="deploymentLocationChart" height="280"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mt-1">
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Skills & Competencies</h5>
                </div>
                <div class="card-body">
                    <canvas id="skillsChart" height="280"></canvas>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Experience Levels</h5>
                </div>
                <div class="card-body">
                    <canvas id="experienceChart" height="280"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mt-1">
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Top Professions / Areas of Study</h5>
                    <form class="d-flex align-items-center gap-2" action="<?php echo e(route('reports.export', 'officers')); ?>" method="GET">
                        <button class="btn btn-sm btn-outline-secondary" type="submit">
                            <i class="fas fa-file-export"></i> All Officers
                        </button>
                    </form>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Area of Study</th>
                                    <th class="text-end">Officers</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $__empty_1 = true; $__currentLoopData = $officersByStudy; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                    <tr>
                                        <td><?php echo e($row->area_of_study ?? 'Unspecified'); ?></td>
                                        <td class="text-end"><?php echo e($row->total); ?></td>
                                    </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                    <tr>
                                        <td colspan="2" class="text-center text-muted">No data available.</td>
                                    </tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mt-1">
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Gender-specific Export</h5>
                </div>
                <div class="card-body">
                    <form class="row g-3 align-items-end" action="<?php echo e(route('reports.export', 'officers-gender')); ?>" method="GET">
                        <div class="col-md-8">
                            <label class="form-label">Select Gender</label>
                            <select class="form-select" name="gender" required>
                                <option value="">Choose...</option>
                                <?php $__currentLoopData = $genderOptions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $gender): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($gender); ?>"><?php echo e($gender); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                        <div class="col-md-4 d-grid">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-file-export"></i> Export
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Key Highlights</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>Total volunteers: <strong><?php echo e(number_format($totalOfficers)); ?></strong></li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>Active deployments awaiting debrief: <strong><?php echo e(number_format($activeDeployments)); ?></strong></li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>Completed deployments: <strong><?php echo e(number_format($completedDeployments)); ?></strong></li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>Top sector: <strong><?php echo e($topUnit->unit ?? 'N/A'); ?></strong></li>
                        <li class="mb-0"><i class="fas fa-check-circle text-success me-2"></i>Top training: <strong><?php echo e($topTraining['name'] ?? 'N/A'); ?></strong></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const genderData = {
        labels: <?php echo json_encode($officersByGender->pluck('gender')->map(fn($g) => $g ?? 'Unspecified'), 15, 512) ?>,
        datasets: [{
            data: <?php echo json_encode($officersByGender->pluck('total'), 15, 512) ?>,
            backgroundColor: ['#ED1C24', '#2F7ED8', '#50B432', '#FF9655']
        }]
    };

    const availabilityData = {
        labels: ['Available', 'Unavailable'],
        datasets: [{
            data: [<?php echo e($availableOfficers); ?>, <?php echo e($unavailableOfficers); ?>],
            backgroundColor: ['#50B432', '#ED1C24']
        }]
    };

    const registrationsData = {
        labels: <?php echo json_encode(array_keys($registrationsByMonth), 15, 512) ?>,
        datasets: [{
            label: 'New Officers',
            data: <?php echo json_encode(array_values($registrationsByMonth), 15, 512) ?>,
            borderColor: '#ED1C24',
            backgroundColor: 'rgba(237, 28, 36, 0.15)',
            tension: 0.3,
            fill: true
        }]
    };

    const unitData = {
        labels: <?php echo json_encode($volunteersPerUnit->pluck('unit')->map(fn($u) => $u ?? 'Unspecified'), 15, 512) ?>,
        datasets: [{
            label: 'Officers',
            data: <?php echo json_encode($volunteersPerUnit->pluck('total'), 15, 512) ?>,
            backgroundColor: '#2F7ED8'
        }]
    };

    const locationData = {
        labels: <?php echo json_encode($officersByLocation->pluck('location_type')->map(fn($loc) => $loc ?? 'Unspecified'), 15, 512) ?>,
        datasets: [{
            label: 'Officers',
            data: <?php echo json_encode($officersByLocation->pluck('total'), 15, 512) ?>,
            backgroundColor: '#50B432'
        }]
    };

    const deploymentLocationData = {
        labels: <?php echo json_encode($deploymentsByLocation->pluck('mission_location')->map(fn($loc) => $loc ?? 'Unspecified'), 15, 512) ?>,
        datasets: [{
            label: 'Deployments',
            data: <?php echo json_encode($deploymentsByLocation->pluck('total'), 15, 512) ?>,
            backgroundColor: '#ED1C24'
        }]
    };

    const skillsData = {
        labels: <?php echo json_encode(array_keys($skillsBreakdown), 15, 512) ?>,
        datasets: [{
            label: 'Officers',
            data: <?php echo json_encode(array_values($skillsBreakdown), 15, 512) ?>,
            backgroundColor: '#2F7ED8'
        }]
    };

    const experienceData = {
        labels: <?php echo json_encode(array_keys($experienceLevels), 15, 512) ?>,
        datasets: [{
            label: 'Officers',
            data: <?php echo json_encode(array_values($experienceLevels), 15, 512) ?>,
            backgroundColor: '#FF9655'
        }]
    };

    const chartConfig = (ctx, type, data, options = {}) => new Chart(ctx, { type, data, options });

    document.addEventListener('DOMContentLoaded', () => {
        chartConfig(document.getElementById('genderChart'), 'doughnut', genderData, { plugins: { legend: { position: 'bottom' } } });
        chartConfig(document.getElementById('availabilityChart'), 'doughnut', availabilityData, { plugins: { legend: { position: 'bottom' } } });
        chartConfig(document.getElementById('registrationsChart'), 'line', registrationsData, { scales: { y: { beginAtZero: true } } });
        chartConfig(document.getElementById('unitChart'), 'bar', unitData, { scales: { y: { beginAtZero: true } } });
        chartConfig(document.getElementById('locationChart'), 'bar', locationData, { scales: { y: { beginAtZero: true } } });
        chartConfig(document.getElementById('deploymentLocationChart'), 'bar', deploymentLocationData, { scales: { y: { beginAtZero: true } } });
        chartConfig(document.getElementById('skillsChart'), 'bar', skillsData, { indexAxis: 'y', scales: { x: { beginAtZero: true } } });
        chartConfig(document.getElementById('experienceChart'), 'bar', experienceData, { scales: { y: { beginAtZero: true } } });
    });
</script>
<?php $__env->stopPush(); ?>


<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\wamp64\www\ndrt-system\resources\views/reports/index.blade.php ENDPATH**/ ?>