@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('data.import') }}" 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="file" accept=".csv" required>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">ADD</button>
                    </form>

                    @if(session('success'))
                    <div class="alert alert-success mt-3">
                        {{ session('success') }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Display Imported Data in a Table -->
    <div class="row g-4 mt-4">
        <div class="col-12">
            <h5>Imported Data</h5>
            <table class="table table-bordered">
                <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>
                            <!-- Button to delete individual data -->
                            <form action="{{ route('data.destroy', $item->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this item?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">Delete</button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

            <!-- Button to delete all data -->
            <form action="{{ route('data.destroyAll') }}" method="POST" onsubmit="return confirm('Are you sure you want to delete all data?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger mt-3">Delete All</button>
            </form>
        </div>
    </div>

    <!-- Graph Display (Chart.js) -->
    <div class="row g-4 mt-4">
        <div class="col-12">
            <canvas id="myChart" width="400" height="200"></canvas>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Get the data passed from the controller
        var labels = @json($labels);  // Column 1 for the X-axis
        var values = @json($values);  // Column 3 for the Y-axis

        // Create the chart using Chart.js
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',  // Chart type (bar, line, pie, etc.)
            data: {
                labels: labels,  // X-axis labels
                datasets: [{
                    label: 'Data from CSV',  // Dataset label
                    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 chart responsive
                scales: {
                    y: {
                        beginAtZero: true  // Start Y-axis from 0
                    }
                }
            }
        });
    </script>
</div>
@endsection