@extends('layouts.app')

@section('content')
    <div class="container">
        <!-- Filter bar -->
        <div class="row mb-3 justify-content-between">
            @php $editing = isset($npT) @endphp
            <div class="col-sm-3">
                <label for="filter-date">Date</label>
                <input name="date" class="form-control" id="filter-date" label="Date" type="date" required></input>

            </div>

            <div class="col-sm-3">

                @php
                    $floors = DB::table('np_ts')->select('floor')->distinct()->get();

                @endphp
                <label for="filter-floor">Floor</label>
                <select name="floor" id="filter-floor" class="form-control">
                    <option value="">Select Floor</option>
                    @foreach ($floors as $floor)
                        <option value="{{ $floor->floor }}">{{ $floor->floor }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-sm-3">
                <label for="filter-machine-type">Machine Type</label>
                @php
                    $machineTypes = DB::table('np_ts')->select('machine_type')->distinct()->get();
                @endphp
                <select name="machine_type" id="filter-machine-type" class="form-control">
                    <option value="">Select Machine Type</option>
                    @foreach ($machineTypes as $machineType)
                        <option value="{{ $machineType->machine_type }}">{{ $machineType->machine_type }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-sm-3">
                <button class="btn btn-outline-danger mt-3" onclick="fetchAndUpdateGraphs()">Apply Filters</button>
                <button class="btn btn-outline-primary mt-3" onclick="window.location.reload()">Reset Filters</button>
            </div>
        </div>
        <!-- Chart Cards -->
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <canvas id="floorWiseChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <canvas id="machineTypeChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mt-4">
                <div class="card">
                    <div class="card-body">
                        <canvas id="dateWiseChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mt-4">
                <div class="card">
                    <div class="card-body">
                        <canvas id="highestLowestChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Include Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>


    <script>
        // Initialize empty charts
        let floorWiseChart, machineTypeChart, dateWiseChart, highestLowestChart;

        document.addEventListener('DOMContentLoaded', () => {
            initializeCharts();
            fetchAndUpdateGraphs(); // Call without any filters by default
            generateDyanmicColors();
        });

       // Generate unique random colors for the every bar in the chart
        function generateDyanmicColors() {
            var radom_colors = [];
            for (var i = 0; i < 100; i++) {
                var r = Math.floor(Math.random() * 255);
                var g = Math.floor(Math.random() * 255);
                var b = Math.floor(Math.random() * 255);

                // make sure the color is unique and not already in the array and colors are not too light or too dark 
                if (radom_colors.indexOf(`rgba(${r},${g},${b},0.6)`) === -1 && r + g + b > 100 && r + g + b < 700) {
                    radom_colors.push(`rgba(${r},${g},${b},0.6)`);
                } else {
                    i--;
                } 
            }
            return radom_colors;
        }



        function initializeCharts() {
            floorWiseChart = createChart('floorWiseChart', 'bar', 'Floor-wise NPT');
            machineTypeChart = createChart('machineTypeChart', 'bar', 'Machine Type-wise NPT');
            dateWiseChart = createChart('dateWiseChart', 'line', 'Date-wise NPT');
            highestLowestChart = createChart('highestLowestChart', 'bar', 'Highest & Lowest NPT by Floor');
        }

        function createChart(elementId, type, label) {
            return new Chart(document.getElementById(elementId), {
                type: type,
                data: {
                    labels: [],
                    datasets: [{
                        label: label,
                        data: [],
                        backgroundColor: generateDyanmicColors(),
                        borderColor: generateDyanmicColors(),
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        datalabels: {
                            display: true, // Enable the display of data labels
                            color: 'black', // Color of the data labels
                            align: 'top', // Align the labels at the top of the bars
                            font: {
                                weight: 'bold' // Make the labels bold
                            },
                            formatter: function(value, context) {
                                return value; // Show the value (total_npt) on the bar
                            }
                        }
                    }
                },
                plugins: [ChartDataLabels] // Use the plugin
            });
        }

        function fetchAndUpdateGraphs() {
            const date = document.getElementById('filter-date').value;
            const floor = document.getElementById('filter-floor').value;
            const machineType = document.getElementById('filter-machine-type').value;

            const filters = {
                date,
                floor,
                machine_type: machineType
            };

            fetchData('/api/npt/floor-wise', filters, floorWiseChart);
            fetchData('/api/npt/machine-type-wise', filters, machineTypeChart);
            fetchData('/api/npt/date-wise', filters, dateWiseChart);
            fetchData('/api/npt/highest-lowest', filters, highestLowestChart);


        }

        function fetchData(url, filters, chart) {
            fetch(url + '?' + new URLSearchParams(filters))
                .then(response => response.json())
                .then(data => {
                    updateChart(chart, data);
                })
                .catch(error => console.error('Error fetching data:', error));
        }

        function updateChart(chart, data) {
            const labels = data.map(item => {
                if (item.date) {
                    // Convert the date into the '31-July-24' format
                    const dateObj = new Date(item.date);
                    const options = {
                        day: '2-digit',
                        month: 'short',
                        year: '2-digit'
                    };
                    return dateObj.toLocaleDateString('en-GB', options); // Format the date
                }
                return item.floor || item.machine_type; // For other cases like floor or machine type
            });
            const values = data.map(item => item.total_npt);

            chart.data.labels = labels;
            chart.data.datasets[0].data = values;
            chart.update();
        }
    </script>
@endsection