@extends('layouts.sidebar')

@section('title', 'Dashboard')
@section('content')
    <div class=" p-6 mx-auto">
      
    @if (session('success'))
        <div id="successModal" class="fixed inset-0 z-50 flex items-start justify-center bg-gray-900 bg-opacity-50">
            <div
                class="flex flex-col items-center justify-center w-full max-w-2xl p-6 mt-20 bg-white rounded-lg shadow-lg">
                <i class='text-6xl bx bxs-check-circle'></i>
                <p class="mb-5 text-lg font-semibold text-center">
                    {{ session('success') }}
                </p>

            </div>
        </div>
        <script>
            setTimeout(function() {
                document.getElementById('successModal').style.display = 'none';
            }, 2000); // 5000 milliseconds = 5 seconds
        </script>
    @endif
    <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">Submit Attendance</button>
            </form>
        </div>

        <!-- Include the Html5Qrcode CDN -->
        <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>
@endsection