

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

<?php $__env->startPush('head'); ?>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
    <header class="page-header">
        <div>
            <p class="eyebrow">Insights</p>
            <h1>Analytics & Reports</h1>
            <p class="muted">Insights and performance metrics</p>
        </div>
    </header>

    <?php
        $summaryIcons = [
            'trend-up' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m3 17 6-6 4 4 7-7" /><path d="M14 7h7v7" /></svg>',
            'target' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /><path d="M22 12h-2" /><path d="M4 12H2" /><path d="M12 4V2" /><path d="M12 22v-2" /></svg>',
            'calendar-check' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4" /><path d="M8 2v4" /><path d="M3 10h18" /><path d="m9 16 2 2 4-4" /></svg>',
            'briefcase' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2" /><path d="M8 7V4h8v3" /><path d="M3 13h5l2 3h4l2-3h5" /></svg>',
        ];
    ?>

    <section class="card-grid four-col">
        <?php $__currentLoopData = $summary; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $card): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <article class="stat-card compact stat-card--metric"
                style="--card-accent-soft: <?php echo e($card['accent_soft'] ?? 'var(--accent-soft)'); ?>; --card-accent: <?php echo e($card['accent'] ?? 'var(--accent)'); ?>;">
                <div class="stat-card__icon" aria-hidden="true">
                    <?php echo $summaryIcons[$card['icon']] ?? ''; ?>

                </div>
                <div class="stat-card__content">
                    <p class="muted"><?php echo e($card['label']); ?></p>
                    <h3><?php echo e($card['value']); ?></h3>
                    <p class="stat-meta"><?php echo e($card['meta']); ?></p>
                </div>
            </article>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </section>

    <section class="analytics-grid">
        <article class="panel chart-panel">
            <div class="panel__header">
                <h2>Application Trends</h2>
                <div class="chart-legend">
                    <span class="chart-legend__item"><span class="legend-dot legend-dot--primary"></span>Applications</span>
                    <span class="chart-legend__item"><span class="legend-dot legend-dot--secondary"></span>Shortlisted</span>
                    <span class="chart-legend__item"><span class="legend-dot legend-dot--accent"></span>Hired</span>
                </div>
            </div>
            <div style="position: relative; height: 300px; padding: 20px 0;">
                <canvas id="applicationTrendsChart"></canvas>
            </div>
        </article>
        <article class="panel chart-panel">
            <div class="panel__header">
                <h2>Employee Distribution by Department</h2>
            </div>
            <div style="position: relative; height: 300px; padding: 20px;">
                <canvas id="departmentDistributionChart"></canvas>
            </div>
        </article>
    </section>

    <section class="analytics-grid">
        <article class="panel chart-panel">
            <div class="panel__header">
                <h2>Attendance Trend (Current Month)</h2>
            </div>
            <div style="position: relative; height: 300px; padding: 20px 0;">
                <canvas id="attendanceTrendChart"></canvas>
            </div>
        </article>
        <article class="panel chart-panel">
            <div class="panel__header">
                <h2>Top Performers This Month</h2>
            </div>
            <ul class="stacked-list">
                <?php $__currentLoopData = $topPerformers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $performer): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li class="list-row">
                        <div class="list-row__avatar"><?php echo e($performer['rank']); ?></div>
                        <div class="list-row__body">
                            <p class="list-row__title"><?php echo e($performer['name']); ?></p>
                            <p class="muted"><?php echo e($performer['department']); ?></p>
                        </div>
                        <div>
                            <p class="muted"><?php echo e($performer['score']); ?></p>
                            <p class="muted"><?php echo e($performer['shifts']); ?></p>
                        </div>
                    </li>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </ul>
        </article>
    </section>

    <section class="analytics-grid analytics-grid--compact">
        <article class="panel">
            <div class="panel__header">
                <h2>Application Breakdown</h2>
            </div>
            <div class="stat-pill-grid">
                <?php $__currentLoopData = $applicationsBreakdown; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="stat-pill">
                        <p class="muted"><?php echo e($item['label']); ?></p>
                        <h3><?php echo e($item['value']); ?></h3>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </article>
        <article class="panel">
            <div class="panel__header">
                <h2>Workforce Summary</h2>
            </div>
            <div class="stat-pill-grid">
                <?php $__currentLoopData = $workforce; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="stat-pill">
                        <p class="muted"><?php echo e($item['label']); ?></p>
                        <h3><?php echo e($item['value']); ?></h3>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </article>
        <article class="panel">
            <div class="panel__header">
                <h2>Job Postings</h2>
            </div>
            <div class="stat-pill-grid">
                <?php $__currentLoopData = $jobPostings; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="stat-pill">
                        <p class="muted"><?php echo e($item['label']); ?></p>
                        <h3><?php echo e($item['value']); ?></h3>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </article>
    </section>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
    <script>
        // Application Trends Bar Chart
        const applicationTrendsCtx = document.getElementById('applicationTrendsChart').getContext('2d');
        new Chart(applicationTrendsCtx, {
            type: 'bar',
            data: {
                labels: <?php echo json_encode($applicationTrend['labels'], 15, 512) ?>,
                datasets: [
                    {
                        label: 'Applications',
                        data: <?php echo json_encode($applicationTrend['applications'], 15, 512) ?>,
                        backgroundColor: '#60a5fa',
                        borderRadius: 8
                    },
                    {
                        label: 'Shortlisted',
                        data: <?php echo json_encode($applicationTrend['shortlisted'], 15, 512) ?>,
                        backgroundColor: '#34d399',
                        borderRadius: 8
                    },
                    {
                        label: 'Hired',
                        data: <?php echo json_encode($applicationTrend['hired'], 15, 512) ?>,
                        backgroundColor: '#c084fc',
                        borderRadius: 8
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        enabled: true
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 180,
                        ticks: {
                            stepSize: 20
                        },
                        grid: {
                            color: 'rgba(255, 255, 255, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // Employee Distribution Pie Chart
        const departmentDistributionCtx = document.getElementById('departmentDistributionChart').getContext('2d');
        const distributionData = <?php echo json_encode($distribution, 15, 512) ?>;
        new Chart(departmentDistributionCtx, {
            type: 'pie',
            data: {
                labels: distributionData.map(item => item.label),
                datasets: [{
                    data: distributionData.map(item => item.value),
                    backgroundColor: [
                        '#60a5fa', // Blue for Security
                        '#34d399', // Green for Warehouse
                        '#f97316', // Orange for Transport
                        '#c084fc'  // Purple for Cleaning
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 15,
                            usePointStyle: true,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.parsed || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = ((value / total) * 100).toFixed(0);
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });

        // Attendance Trend Line Chart
        const attendanceTrendCtx = document.getElementById('attendanceTrendChart').getContext('2d');
        new Chart(attendanceTrendCtx, {
            type: 'line',
            data: {
                labels: <?php echo json_encode($attendanceTrend['labels'], 15, 512) ?>,
                datasets: [{
                    label: 'Attendance %',
                    data: <?php echo json_encode($attendanceTrend['values'], 15, 512) ?>,
                    borderColor: '#34d399',
                    backgroundColor: 'rgba(52, 211, 153, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 6,
                    pointBackgroundColor: '#34d399',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointHoverRadius: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return 'Attendance: ' + context.parsed.y + '%';
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        min: 85,
                        max: 100,
                        ticks: {
                            stepSize: 5,
                            callback: function(value) {
                                return value + '%';
                            }
                        },
                        grid: {
                            color: 'rgba(255, 255, 255, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    </script>
<?php $__env->stopPush(); ?>



<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/aibiyncv/sol.aibitsol.com/HR Project/hr-admin/resources/views/admin/analytics.blade.php ENDPATH**/ ?>