@extends('layouts.admin')

@section('title', 'Analytics')

@push('head')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
@endpush

@section('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>',
        ];
    @endphp

    <section class="card-grid four-col">
        @foreach ($summary as $card)
            <article class="stat-card compact stat-card--metric"
                style="--card-accent-soft: {{ $card['accent_soft'] ?? 'var(--accent-soft)' }}; --card-accent: {{ $card['accent'] ?? 'var(--accent)' }};">
                <div class="stat-card__icon" aria-hidden="true">
                    {!! $summaryIcons[$card['icon']] ?? '' !!}
                </div>
                <div class="stat-card__content">
                    <p class="muted">{{ $card['label'] }}</p>
                    <h3>{{ $card['value'] }}</h3>
                    <p class="stat-meta">{{ $card['meta'] }}</p>
                </div>
            </article>
        @endforeach
    </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">
                @foreach ($topPerformers as $performer)
                    <li class="list-row">
                        <div class="list-row__avatar">{{ $performer['rank'] }}</div>
                        <div class="list-row__body">
                            <p class="list-row__title">{{ $performer['name'] }}</p>
                            <p class="muted">{{ $performer['department'] }}</p>
                        </div>
                        <div>
                            <p class="muted">{{ $performer['score'] }}</p>
                            <p class="muted">{{ $performer['shifts'] }}</p>
                        </div>
                    </li>
                @endforeach
            </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">
                @foreach ($applicationsBreakdown as $item)
                    <div class="stat-pill">
                        <p class="muted">{{ $item['label'] }}</p>
                        <h3>{{ $item['value'] }}</h3>
                    </div>
                @endforeach
            </div>
        </article>
        <article class="panel">
            <div class="panel__header">
                <h2>Workforce Summary</h2>
            </div>
            <div class="stat-pill-grid">
                @foreach ($workforce as $item)
                    <div class="stat-pill">
                        <p class="muted">{{ $item['label'] }}</p>
                        <h3>{{ $item['value'] }}</h3>
                    </div>
                @endforeach
            </div>
        </article>
        <article class="panel">
            <div class="panel__header">
                <h2>Job Postings</h2>
            </div>
            <div class="stat-pill-grid">
                @foreach ($jobPostings as $item)
                    <div class="stat-pill">
                        <p class="muted">{{ $item['label'] }}</p>
                        <h3>{{ $item['value'] }}</h3>
                    </div>
                @endforeach
            </div>
        </article>
    </section>
@endsection

@push('scripts')
    <script>
        // Application Trends Bar Chart
        const applicationTrendsCtx = document.getElementById('applicationTrendsChart').getContext('2d');
        new Chart(applicationTrendsCtx, {
            type: 'bar',
            data: {
                labels: @json($applicationTrend['labels']),
                datasets: [
                    {
                        label: 'Applications',
                        data: @json($applicationTrend['applications']),
                        backgroundColor: '#60a5fa',
                        borderRadius: 8
                    },
                    {
                        label: 'Shortlisted',
                        data: @json($applicationTrend['shortlisted']),
                        backgroundColor: '#34d399',
                        borderRadius: 8
                    },
                    {
                        label: 'Hired',
                        data: @json($applicationTrend['hired']),
                        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 = @json($distribution);
        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: @json($attendanceTrend['labels']),
                datasets: [{
                    label: 'Attendance %',
                    data: @json($attendanceTrend['values']),
                    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>
@endpush