@extends('layouts.app')

@section('content')


<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-lg border-0">
                <div class="card-header bg-gradient-primary-to-secondary text-white py-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <div class="bg-white bg-opacity-25 rounded-circle p-2 me-3">
                                <i class="fas fa-chart-bar text-white"></i>
                            </div>
                            <h5 class="mb-0">Statistik Slot per Bidang</h5>
                        </div>
                        <a href="{{ route('dashboard') }}" class="btn btn-outline-light btn-sm px-3 py-2">
                            <i class="fas fa-arrow-left me-2"></i> Kembali
                        </a>
                    </div>
                </div>
                <div class="card-body p-4">
                    <canvas id="departmentChart" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('departmentChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($departments->pluck('name')) !!},
            datasets: [
                {
                    label: 'Slot Tersedia',
                    data: {!! json_encode($departments->pluck('available_slots')) !!},
                    backgroundColor: 'rgba(54, 162, 235, 0.9)',
                    borderWidth: 0,
                    stack: 'Stack 0',
                    borderRadius: {
                        topLeft: 15,
                        topRight: 15,
                        bottomLeft: 0,
                        bottomRight: 0
                    }
                },
                {
                    label: 'Peserta Aktif',
                    data: {!! json_encode($departments->pluck('active_interns')) !!}
                    data: {!! json_encode($departments->pluck('active_interns')) !!},
                    backgroundColor: 'rgba(75, 192, 192, 0.9)',
                    borderWidth: 0,
                    stack: 'Stack 0'
                },
                {
                    label: 'Menunggu Persetujuan',
                    data: {!! json_encode($departments->pluck('pending_interns')) !!},
                    backgroundColor: 'rgba(255, 206, 86, 0.9)',
                    borderWidth: 0,
                    stack: 'Stack 0',
                    borderRadius: {
                        topLeft: 0,
                        topRight: 0,
                        bottomLeft: 15,
                        bottomRight: 15
                    }
                }
            ]
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        padding: 20,
                        font: {
                            family: "'Poppins', sans-serif",
                            size: 12,
                            weight: '500'
                        },
                        usePointStyle: true,
                        pointStyle: 'circle'
                    }
                },
                tooltip: {
                    backgroundColor: '#fff',
                    titleColor: '#2D3748',
                    bodyColor: '#718096',
                    borderColor: '#E2E8F0',
                    borderWidth: 1,
                    padding: 12,
                    cornerRadius: 8,
                    displayColors: true,
                    usePointStyle: true,
                    titleFont: {
                        family: "'Poppins', sans-serif",
                        size: 14,
                        weight: '600'
                    },
                    bodyFont: {
                        family: "'Poppins', sans-serif",
                        size: 13
                    },
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': ' + context.parsed.x + ' Orang';
                        }
                    }
                }
            },
            scales: {
                x: {
                    stacked: true,
                    grid: {
                        color: 'rgba(226, 232, 240, 0.5)',
                        drawBorder: false
                    },
                    ticks: {
                        font: {
                            family: "'Poppins', sans-serif",
                            size: 12
                        },
                        color: '#718096'
                    }
                },
                y: {
                    stacked: true,
                    grid: {
                        display: false
                    },
                    ticks: {
                        font: {
                            family: "'Poppins', sans-serif",
                            size: 13,
                            weight: '500'
                        },
                        color: '#2D3748'
                    }
                }
            },
            animation: {
                duration: 1000,
                easing: 'easeInOutQuart'
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                        labels: {
                            padding: 20,
                            font: {
                                family: "'Poppins', sans-serif",
                                size: 12,
                                weight: '500'
                            },
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    },
                    tooltip: {
                        backgroundColor: '#fff',
                        titleColor: '#2D3748',
                        bodyColor: '#718096',
                        borderColor: '#E2E8F0',
                        borderWidth: 1,
                        padding: 12,
                        cornerRadius: 8,
                        displayColors: true,
                        usePointStyle: true,
                        titleFont: {
                            family: "'Poppins', sans-serif",
                            size: 14,
                            weight: '600'
                        },
                        bodyFont: {
                            family: "'Poppins', sans-serif",
                            size: 13
                        },
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + context.parsed.x + ' Orang';
                            }
                        }
                    }
                }
            },
            scales: {
                x: {
                    stacked: true,
                    grid: {
                        color: 'rgba(226, 232, 240, 0.5)',
                        drawBorder: false
                    },
                    ticks: {
                        font: {
                            family: "'Poppins', sans-serif",
                            size: 12
                        },
                        color: '#718096'
                    }
                },
                y: {
                    stacked: true,
                    grid: {
                        display: false
                    },
                    ticks: {
                        font: {
                            family: "'Poppins', sans-serif",
                            size: 13,
                            weight: '500'
                        },
                        color: '#2D3748'
                    }
                }
            },
            animation: {
                duration: 1000,
                easing: 'easeInOutQuart'
            },
            onClick: (event, elements) => {
                if (elements.length > 0) {
                    const datasetIndex = elements[0].datasetIndex;
                    const index = elements[0].index;
                    const departmentId = {!! json_encode($departments->pluck('id')) !!}[index];
                    
                    // Redirect based on which part of the stack was clicked
                    switch(datasetIndex) {
                        case 0: // Slot Tersedia
                            window.location.href = `/admin/departments/${departmentId}/tersedia`;
                            break;
                        case 1: // Peserta Aktif
                            window.location.href = `/admin/departments/${departmentId}/aktif`;
                            break;
                        case 2: // Menunggu Persetujuan
                            window.location.href = `/admin/departments/${departmentId}/menunggu`;
                            break;
                    }
                }
            }
        }
    });
});
</script>

<style>
.card {
    border-radius: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}
.bg-gradient-primary-to-secondary {
    background: linear-gradient(45deg, #4e73df, #2c9faf);
}
.card-header {
    border-radius: 10px 10px 0 0 !important;
}
.bg-opacity-10 {
    --bs-bg-opacity: 0.1;
}
</style>
@endsection