@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Tweet Chart</h1>

        <!-- Filter Form -->
        <form method="GET" action="{{ route('tweets.chart') }}" class="mb-4">
            <div class="row">
                <div class="col-md-4">
                    <label for="start_date" class="form-label">Start Date:</label>
                    <input type="date" id="start_date" name="start_date" class="form-control" value="{{ $startDate }}">
                </div>
                <div class="col-md-4">
                    <label for="end_date" class="form-label">End Date:</label>
                    <input type="date" id="end_date" name="end_date" class="form-control" value="{{ $endDate }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Idol Groups:</label>
                    <div>
                        @foreach ($allIdolGroups as $group)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="idol_group[]" value="{{ $group }}" id="group-{{ $group }}"
                                    {{ in_array($group, $selectedIdolGroups) ? 'checked' : '' }}>
                                <label class="form-check-label" for="group-{{ $group }}">
                                    {{ $group }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-primary">Filter</button>
            </div>
        </form>

        <!-- Chart Canvas -->
        <canvas id="tweetChart"></canvas>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script id="chart-data" type="application/json">
        {!! json_encode($chartData) !!}
    </script>
    <script>
        // Ambil data dari elemen script dengan id "chart-data"
        const chartData = JSON.parse(document.getElementById('chart-data').textContent);

        const chartLabels = [...new Set(
            Object.values(chartData).flatMap(data => data.map(item => item.date))
        )];

        const datasets = Object.keys(chartData).map(group => ({
            label: group,
            data: chartLabels.map(date => {
                const item = chartData[group].find(d => d.date === date);
                return item ? item.count : 0;
            }),
            borderColor: `#${Math.floor(Math.random() * 16777215).toString(16)}`,
            fill: false,
        }));

        const ctx = document.getElementById('tweetChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: chartLabels,
                datasets: datasets,
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Date',
                            color: 'white', // Warna label sumbu X
                        },
                        ticks: {
                            color: 'white', // Warna angka sumbu X
                        },
                        grid: {
                            color: 'rgba(255, 255, 255, 0.2)', // Warna grid sumbu X putih (transparan)
                        },
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Tweet Count',
                            color: 'white', // Warna label sumbu Y
                        },
                        ticks: {
                            color: 'white', // Warna angka sumbu Y
                        },
                        grid: {
                            color: 'rgba(255, 255, 255, 0.2)', // Warna grid sumbu X putih (transparan)
                        },
                        beginAtZero: true,
                    },
                },
            },
        });
    </script>
@endsection