@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">Dashboard</h6>
                        <p class="text-sm">Dashboard MSJCareer</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Agenda</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $count_trs_agenda }}
                                    </h5>
                                    <p class="mb-0">
                                        Postingan pada bulan
                                        <span class="text-success text-sm font-weight-bolder">{{ $bulan_now }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Berita & Artikel</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $count_trs_berita_artikel }}
                                    </h5>
                                    <p class="mb-0">
                                        Postingan pada bulan
                                        <span class="text-success text-sm font-weight-bolder">{{ $bulan_now }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">FAQ</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $count_trs_faq }}
                                    </h5>
                                    <p class="mb-0">
                                        Postingan pada bulan
                                        <span class="text-success text-sm font-weight-bolder">{{ $bulan_now }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Lowongan Karir</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $count_trs_karir }}
                                    </h5>
                                    <p class="mb-0">
                                        Postingan pada bulan
                                        <span class="text-success text-sm font-weight-bolder">{{ $bulan_now }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Lowongan Magang</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $count_vmagang }}
                                    </h5>
                                    <p class="mb-0">
                                        Postingan pada bulan
                                        <span class="text-success text-sm font-weight-bolder">{{ $bulan_now }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Testimoni</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $count_trs_testimoni }}
                                    </h5>
                                    <p class="mb-0">
                                        Postingan pada bulan
                                        <span class="text-success text-sm font-weight-bolder">{{ $bulan_now }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <!-- <h2>MSJ Career Visitors</h2> -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card p-4" style="height: 400px;">
                    <canvas id="chart-line" style="width: 100%; height: 100%;"></canvas>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
    <script>
        const ctx = document.getElementById('chart-line');
        console.log('Canvas Context:', ctx);

        async function fetchChartData() {
            try {
                const response = await fetch(@json(route('chart.data')), {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                });
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                console.log('API Response:', data);

                const colors = [{
                        bg: 'rgba(255, 99, 132, 0.5)',
                        border: 'rgba(255, 99, 132, 1)'
                    },
                    {
                        bg: 'rgba(54, 162, 235, 0.5)',
                        border: 'rgba(54, 162, 235, 1)'
                    },
                    {
                        bg: 'rgba(75, 192, 192, 0.5)',
                        border: 'rgba(75, 192, 192, 1)'
                    },
                    {
                        bg: 'rgba(255, 206, 86, 0.5)',
                        border: 'rgba(255, 206, 86, 1)'
                    },
                    {
                        bg: 'rgba(153, 102, 255, 0.5)',
                        border: 'rgba(153, 102, 255, 1)'
                    },
                    {
                        bg: 'rgba(255, 159, 64, 0.5)',
                        border: 'rgba(255, 159, 64, 1)'
                    },
                    {
                        bg: 'rgba(199, 199, 199, 0.5)',
                        border: 'rgba(199, 199, 199, 1)'
                    }
                ];

                const chartDatasets = data.datasets.map((dataset, index) => ({
                    label: dataset.label,
                    data: dataset.data,
                    backgroundColor: colors[index % colors.length].bg,
                    borderColor: colors[index % colors.length].border,
                    borderWidth: 1
                }));

                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.labels,
                        datasets: chartDatasets
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'Number of Visits'
                                },
                                suggestedMax: 5
                            },
                            x: {
                                title: {
                                    display: true,
                                    text: 'Month'
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                display: true,
                                position: 'top'
                            },
                            tooltip: {
                                enabled: true,
                                callbacks: {
                                    label: function(context) {
                                        return `${context.dataset.label}: ${context.raw} visits`;
                                    }
                                }
                            }
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                        barThickness: 50,
                        categoryPercentage: 0.7,
                        barPercentage: 0.9
                    }
                });

                console.log('Chart created');
            } catch (error) {
                console.error('Error fetching chart data:', error);
            }
        }

        fetchChartData();
    </script>
@endpush