@extends('layouts.sidebar')

@section('title', 'Dashboard')
@section('content')
    @if (in_array('Employee UserInterface', $privileges))
    @else
        <div class=" p-6 mx-auto">

            {{-- <div>
            <h2>Scan Employee QR Code</h2>

            <!-- Create a div for the scanner -->
            <div id="my-qr-reader" style="width: 100%; height: 400px;"></div>

            <!-- Hidden form to submit attendance -->
            <form id="qrForm" action="{{ route('attendance.store.time') }}" method="POST">
                @csrf
                <input type="hidden" id="qr_code" name="employee_id">
                <input type="hidden" id="time_in" name="time_in">
                <input type="hidden" id="time_out" name="time_out">
                <input type="hidden" id="status" name="status" value="Present">
                <input type="hidden" id="date" name="date">
                <div class="w-full">
                    <label for="time_type">Select Attendance Type:</label>
                    <select id="time_type" name="time_type">
                        <option value="time_in">Time In</option>
                        <option value="time_out">Time Out</option>
                    </select>
                </div>
                <!-- Hidden field for the current date -->
                <button type="submit" id="submit-button" class="hidden">Submit Attendance</button>
            </form>
        </div>

        <script src="https://unpkg.com/html5-qrcode"></script>

        <script>
            function domReady(fn) {
                if (
                    document.readyState === "complete" ||
                    document.readyState === "interactive"
                ) {
                    setTimeout(fn, 1000);
                } else {
                    document.addEventListener("DOMContentLoaded", fn);
                }
            }

            domReady(function() {
                let htmlscanner; // Declare the scanner variable outside of the function

                // If QR code is found
                function onScanSuccess(decodeText, decodeResult) {
                    // Disable the scanner to prevent double scanning
                    if (htmlscanner) {
                        htmlscanner.pause(); // Pause the scanner temporarily
                    }

                    // Setting the employee_id from the QR code data
                    document.getElementById("qr_code").value = decodeText;

                    // Get the current local time (not in UTC)
                    const currentTime = new Date();
                    const localDate = currentTime.getFullYear() + '-' +
                        String(currentTime.getMonth() + 1).padStart(2, '0') + '-' +
                        String(currentTime.getDate()).padStart(2, '0');
                    const localTime = String(currentTime.getHours()).padStart(2, '0') + ':' +
                        String(currentTime.getMinutes()).padStart(2, '0') + ':' +
                        String(currentTime.getSeconds()).padStart(2, '0');
                    const formattedLocalTime = localDate + ' ' + localTime; // Format as YYYY-MM-DD HH:MM:SS

                    // Set the current time for time_in and time_out fields
                    document.getElementById('time_in').value = formattedLocalTime;
                    document.getElementById('time_out').value = formattedLocalTime;

                    // Set the current date for the date field (YYYY-MM-DD)
                    document.getElementById('date').value = localDate;

                    // Show a success popup message
                    alert("Scan successful! Attendance has been recorded.");

                    // Submit the form after a successful scan
                    document.getElementById('qrForm').submit();
                }

                // Initialize the QR code scanner and set properties
                htmlscanner = new Html5QrcodeScanner(
                    "my-qr-reader", {
                        fps: 10, // Frames per second for scanning
                        qrbox: 300, // Set QR box size
                        aspectRatio: 1.0, // Ensure the aspect ratio is correct
                        disableFlip: true // Disable camera flip if needed
                    }
                );

                // Render the scanner with the success callback
                htmlscanner.render(onScanSuccess);
            });
        </script> --}}




            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4">
                <!-- Employee Chart -->
                <div class="p-6 bg-white rounded   shadow-2xl">
                    <canvas id="employeeChart"></canvas>
                </div>

                <!-- Agency Chart -->
                <div class="p-6 bg-white rounded   shadow-2xl">
                    <canvas id="agencyChart"></canvas>
                </div>

                <!-- Company Chart -->
                <div class="p-6 bg-white rounded   shadow-2xl">
                    <canvas id="companyChart"></canvas>
                </div>

                <!-- Client Chart -->
                <div class="p-6 bg-white rounded shadow-2xl">
                    <canvas id="clientChart"></canvas>
                </div>
            </div>
        </div>

        <script>
            const employeeData = @json(array_values($employeeData->toArray()));
            const employeeMonths = @json(array_keys($employeeData->toArray()));

            const agencyData = @json(array_values($agencyData->toArray()));
            const agencyMonths = @json(array_keys($agencyData->toArray()));

            const companyData = @json(array_values($companyData->toArray()));
            const companyMonths = @json(array_keys($companyData->toArray()));

            const clientData = @json(array_values($clientData->toArray()));
            const clientMonths = @json(array_keys($clientData->toArray()));

            const ctxEmployee = document.getElementById('employeeChart').getContext('2d');
            const employeeChart = new Chart(ctxEmployee, {
                type: 'bar',
                data: {
                    labels: employeeMonths,
                    datasets: [{
                        label: 'Number of Employees',
                        data: employeeData,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            const ctxAgency = document.getElementById('agencyChart').getContext('2d');
            const agencyChart = new Chart(ctxAgency, {
                type: 'bar',
                data: {
                    labels: agencyMonths,
                    datasets: [{
                        label: 'Number of Agencies',
                        data: agencyData,
                        backgroundColor: 'rgba(255, 159, 64, 0.2)',
                        borderColor: 'rgba(255, 159, 64, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            const ctxCompany = document.getElementById('companyChart').getContext('2d');
            const companyChart = new Chart(ctxCompany, {
                type: 'bar',
                data: {
                    labels: companyMonths,
                    datasets: [{
                        label: 'Number of Companies',
                        data: companyData,
                        backgroundColor: 'rgba(153, 102, 255, 0.2)',
                        borderColor: 'rgba(153, 102, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            const ctxClient = document.getElementById('clientChart').getContext('2d');
            const clientChart = new Chart(ctxClient, {
                type: 'bar',
                data: {
                    labels: clientMonths,
                    datasets: [{
                        label: 'Number of Clients',
                        data: clientData,
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        </script>
    @endif
@endsection