@extends('admin_layouts.main')
@section('main-section')


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="content">
    <div class="container-fluid pt-4 px-4">
        <div>
        <h3>Data List</h3>
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 3</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $item)
                    <tr id="data-{{ $item->id }}">
                        <td>{{ $item->column1 }}</td>
                        <td>{{ $item->column3 }}</td>
                        <td>
                            <!-- Delete button -->
                            <button class="btn btn-danger delete-data" data-id="{{ $item->id }}">Delete</button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Canvas where Chart.js will render the chart -->
    <div style="width: 800px; height: 600px;">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        // Get the labels and values from PHP (they are passed from the controller)
        var labels = @json($labels);  // Column 1 data for the X-axis
        var values = @json($values);  // Column 3 data for the Y-axis

        // Create a new Chart.js instance
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',  // The type of chart (can be 'line', 'pie', 'bar', etc.)
            data: {
                labels: labels,  // X-axis labels
                datasets: [{
                    label: 'Data from CSV',  // Label for the dataset
                    data: values,  // Y-axis data
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',  // Bar color
                    borderColor: 'rgba(54, 162, 235, 1)',  // Border color
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,  // Make the chart responsive
                scales: {
                    y: {
                        beginAtZero: true  // Ensure the Y-axis starts at 0
                    }
                }
            }
        });

        // Handle the delete action with AJAX
        $(document).on('click', '.delete-data', function() {
            var dataId = $(this).data('id');
            
            // Confirm deletion
            if (confirm('Are you sure you want to delete this item?')) {
                // AJAX request to delete the data from the server
                $.ajax({
                    url: '/data/' + dataId,  // Send DELETE request to the server
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}',  // Send CSRF token for security
                    },
                    success: function(response) {
                        // Remove the deleted row from the table
                        $('#data-' + dataId).remove();

                        // Remove the deleted data from the chart
                        var index = labels.indexOf(response.label);
                        if (index !== -1) {
                            labels.splice(index, 1);
                            values.splice(index, 1);

                            // Update the chart with the new data
                            myChart.update();
                        }

                        alert('Data deleted successfully');
                    },
                    error: function() {
                        alert('Error deleting data');
                    }
                });
            }
        });
    </script>
    </div>
</div>

@endsection