@extends('layouts.app')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <a href="{{ route('dashboard') }}" class="btn btn-outline-primary">
            <i class="fas fa-arrow-left me-2"></i> Kembali ke Dashboard
        </a>
        <h2 class="mb-0 fw-bold">
            <i class="fas fa-chart-bar text-primary me-2"></i> Statistik Diagram Batang Seksi Magang
        </h2>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-gradient-primary-to-secondary text-white">
            <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i> Diagram Batang Jumlah Seksi Magang</h5>
        </div>
        <div class="card-body">
            <canvas id="barChart" height="400"></canvas>
        </div>
    </div>
</div>

<style>
.bg-gradient-primary-to-secondary {
    background: linear-gradient(45deg, #4e73df, #2c9faf);
}
.card {
    border-radius: 10px;
}
</style>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const ctx = document.getElementById('barChart').getContext('2d');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {!! json_encode(array_keys($sessionStats)) !!},
            datasets: [{
                label: 'Sisa Slot',
                data: {!! json_encode(array_values($sessionStats)) !!},
                backgroundColor: {!! json_encode(array_map(function($key) use ($hasPending) {
                    return $hasPending[$key] ? 'rgba(255, 193, 7, 0.8)' : 'rgba(44, 159, 175, 0.8)';
                }, array_keys($sessionStats))) !!},
                borderColor: {!! json_encode(array_map(function($key) use ($hasPending) {
                    return $hasPending[$key] ? '#ffc107' : '#2c9faf';
                }, array_keys($sessionStats))) !!},
                borderWidth: 1,
                borderRadius: 5,
                barPercentage: 0.7,
                maxBarThickness: 50
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            return `${context.parsed.y} slot tersedia`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    },
                    title: {
                        display: true,
                        text: 'Jumlah Slot Tersedia'
                    },
                    grid: {
                        display: false
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Nama Seksi'
                    }
                }
            }
        }
    });
});
</script>
@endsection