@extends('admin_layouts.main')
@section('main-section')
<div class="content">
    <div class="container-fluid pt-4 px-4">
        <div class="row g-4">
            <div class="col-sm-12 col-xl-12">
                <div class="bg-secondary rounded h-100 p-4">
                    <h6 class="mb-4">Upload Excel</h6>
                    <form  action="{{ route('upload_excel') }}" method="post"   enctype="multipart/form-data">
                        @csrf
                        <div class="row mb-3">
            <div class="col-md-6">
                <label for="excel_file" class="form-label">Excel File</label>
                <input class="form-control bg-dark" type="file" name="excel_file" accept=".xls,.xlsx" required>
            </div>
        </div>



        <button type="submit" class="btn btn-primary">ADD</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @if(isset($data))
    <h3>Generated Chart</h3>

    <!-- Chart.js canvas -->
    <canvas id="chartCanvas" width="400" height="200"></canvas>

    <script>
        const rawData = @json($data[0]); // Pass the parsed data from Laravel

        const chartType = '{{ $chartType }}'; // Pass the detected chart type

        // Prepare the data based on the uploaded file
        const labels = rawData.map(row => row[Object.keys(row)[0]]); // Assuming the first column is for labels
        const dataValues = rawData.map(row => row[Object.keys(row)[1]]); // Assuming the second column holds values

        // Create the chart
        const ctx = document.getElementById('chartCanvas').getContext('2d');
        new Chart(ctx, {
            type: chartType, // dynamic chart type
            data: {
                labels: labels,
                datasets: [{
                    label: 'Data',
                    data: dataValues,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    fill: false,
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                }
            }
        });
    </script>
@endif
</div>
@endsection