@extends('layouts.appv2')

@section('content')

<style>
    .nav-tabs .nav-link {
        transition: background-color 0.3s, color 0.3s;
    }

    .nav-tabs .nav-link:hover {
        background-color: #f0f0f0;
        color: black;
    }

    .nav-tabs .nav-link.active {
        background-color: white;
        color: #9e1a1a;
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .nav-tabs .nav-link i {
        margin-right: 5px;
    }

    .clickable-card:hover {
        background-color: #f8f9fa; /* Slightly lighter background on hover */
        transform: translateY(-5px); /* Slight lift effect */
        transition: all 0.2s ease; /* Smooth transition */
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
    }
</style>

{{-- Table index start --}}
@foreach($users as $users)
<h1 class="mb-4 gradient-text" style="text-transform: uppercase;">
  Welcome, {{$users->userfirstname}}
</h1>

@endforeach
<div class="row">

<div class="col-12 col-sm-4">
    <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
        <div class="card-header main-header" style="border-radius: 20px 20px 0 0; cursor: pointer;" onclick="toggleOptions()">
            <div class="d-flex justify-content-between align-items-center">
                <h4 class="mb-0">Attendances</h4>
                <i class="fas fa-chevron-down" id="mainIcon"></i>
            </div>
        </div>

        <div id="optionsContainer" style="display: none;">
            @foreach($departmentNames as $index => $departmentName)
                <div 
                    class="option-header" 
                    style="background-color: #f8f9fa; cursor: pointer; border-top: 1px solid #dee2e6;" 
                    onclick="selectOption({{ $index + 1 }})">
                    <div class="d-flex align-items-center p-3">
                        <p class="mb-0">{{ $departmentName }} DEPARTMENT</p>
                    </div>
                </div>
            @endforeach
        </div>

        <div id="contentContainer" class="card-body">
            @foreach($departmentNames as $index => $departmentName)
                <div 
                    id="content{{ $index + 1 }}" 
                    class="content" 
                    style="{{ $index == 0 ? 'display: block;' : 'display: none;' }}">
                    <h5>
                        {{ $departmentName }}: 
                        {{ isset($checkinsByDepartment[$departmentName]) ? $checkinsByDepartment[$departmentName] : 0 }} / 
                        {{ $departmentCounts[$index] }}
                    </h5>

                </div>
            @endforeach
        </div>


    </div>
</div>










<div class="col-12 col-sm-2">
        <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
            <div class="card-header">
                <h4 class="mb-0">Total Staff</h4>
            </div>
            <div class="card-body">
                <h5>{{$totalemployee}} Staff</h5>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-3">
        <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); cursor: pointer;" data-toggle="modal" data-target="#staffLeaveModal">
            <div class="card-header">
                <h4 class="mb-0">Staff On Leave</h4>
            </div>
            <div class="card-body">
                <h5>{{$leavetoday}}</h5>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-3">
    <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); cursor: pointer;" data-toggle="modal" data-target="#outsideradius">
        <div class="card-header">
            <h4 class="mb-0">Outside Radius</h4>
        </div>
        <div class="card-body">
            <h5>{{ $totalCheckinsOutsideRadius }}</h5>
        </div>
    </div>
</div>

<div class="modal fade" id="outsideradius" tabindex="-1" role="dialog" aria-labelledby="outsideradiusLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document"> <!-- modal-lg class added -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="outsideradiusLabel">Check-ins Outside Radius</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Table of Check-ins Outside Radius -->
                <table class="table table-striped table-bordered">
                    <thead class="thead-dark">
                        <tr>
                            <th class="text-center">Name</th>
                            <th class="text-center">Address</th>
                            <th class="text-center">Check-in Time</th>
                            <th class="text-center">Reason</th>
                            <th class="text-center">Other Reason</th>
                            <th class="text-center">Location</th> <!-- Added column for Location -->
                            <th class="text-center">Distance</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($checkinsOutsideRadius as $checkin)
                            <tr>
                                <td>{{ $checkin->userfirstname }}</td>
                                <td>{{ $checkin->checkin_address }}</td>
                                <td>{{ $checkin->checkin_created_at }}</td>
                                <td>{{ $checkin->checkin_reason }}</td>
                                <td>{{ $checkin->checkin_other_reason }}</td>
                                <td>
                                    <!-- Combine latitude and longitude and make it clickable to open Google Maps -->
                                    <a href="https://www.google.com/maps/dir/{{ $checkin->checkin_lat }},{{ $checkin->checkin_lng }}/{{ $checkin->base_lat }},{{ $checkin->base_lng }}" target="_blank">
                                        {{ $checkin->checkin_lat }}, {{ $checkin->checkin_lng }}
                                    </a>
                                </td>
                                <td class="distance"
                                    data-base-lat="{{ $checkin->base_lat }}"
                                    data-base-lng="{{ $checkin->base_lng }}"
                                    data-checkin-lat="{{ $checkin->checkin_lat }}"
                                    data-checkin-lng="{{ $checkin->checkin_lng }}">
                                    <!-- JS will fill -->
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>



    <!-- Modal -->
    <div class="modal fade" id="staffLeaveModal" tabindex="-1" role="dialog" aria-labelledby="staffLeaveModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staffLeaveModalLabel">Staff Leave</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @forelse($leave as $leave)
                    <tr class="border-bottom" style="cursor: pointer;">
                        <td class="align-middle text-left">
                        <div><b>{{ $leave->employee_first_name }}</b></div>
                            <span class="text-primary">
                                <strong>{{ $leave->leavetype_name }}</strong> : {{ $leave->total_days }} DAYS
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <strong colspan="8" class="text-center text-danger">No staff take a leave today</strong>
                    </tr>
                    @endforelse
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>








</div>

<div class="row">
    <div class="col-12 col-sm-8">
        <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
            <div class="card-body">
                <h3 class="mb-4">Statistic Graph</h3>

                <div class="chart-container">
                    <canvas id="myChart" style="height:360px;"></canvas>
                </div>
                <script src="chart.js"></script>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-4">
        <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
            <div class="card-body">
                <h3 class="mb-4">Staff in Department</h3>

                <div class="chart-container">
                    <canvas id="myPie" style="height:auto; cursor: pointer;"></canvas>
                </div>
                <script src="chart.js"></script>
            </div>
        </div>
    </div>
</div>



    <!-- START CHATBOT CODE -->
    <style>
        /* Floating Button */
        .chatbot-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #9e1a1a;
            color: white;
            border-radius: 50%;
            width: 80px;
            height: 80px;
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            cursor: pointer;
            z-index: 1000;
            transition: transform 0.2s;
            font-size: 25px;
            /* Fix: Remove invalid CSS property */
        }

        .chatbot-btn:hover {
            transform: scale(1.1);
        }

        /* Chatbox container */
        .chatbot-window {
            position: fixed;
            bottom: 90px;
            right: 20px;
            width: 350px;
            max-height: 500px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
            display: none;
            flex-direction: column;
            overflow: hidden;
            z-index: 1000;
        }

        .chatbot-header {
            background-color: #9e1a1a;
            color: white;
            padding: 15px;
            text-align: center;
            font-weight: bold;
            position: relative;
        }

        .chatbot-header button {
            position: absolute;
            right: 10px;
            top: 10px;
            border: none;
            background: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
        }

        .chatbot-messages {
            padding: 15px;
            flex: 1;
            overflow-y: auto;
            font-size: 14px;
        }

        .chatbot-message {
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
        }

        .chatbot-message.bot {
            justify-content: flex-start;
        }

        .chatbot-message.user {
            justify-content: flex-end;
        }

        .chatbot-message .bubble {
            padding: 10px 14px;
            border-radius: 15px;
            max-width: 70%;
        }

        .chatbot-message.bot .bubble {
            background-color: #f0f0f0;
            color: #333;
            border-bottom-left-radius: 0;
        }

        .chatbot-message.user .bubble {
            background-color: #9e1a1a;
            color: white;
            border-bottom-right-radius: 0;
        }

        .chatbot-input {
            display: flex;
            border-top: 1px solid #ddd;
        }

        .chatbot-input input {
            flex: 1;
            border: none;
            padding: 12px;
            font-size: 14px;
            outline: none;
        }

        .chatbot-input button {
            background-color: #9e1a1a;
            color: white;
            border: none;
            padding: 12px 15px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .chatbot-input button:hover {
            background-color: #7c1414;
        }

        .chatbot-window.open {
            display: flex !important;
            opacity: 1;
            transform: translateY(0);
        }

        .typing-dots {
            display: inline-block;
            font-style: italic;
            color: #666;
        }

        .typing-dots span {
            display: inline-block;
            width: 6px;
            height: 6px;
            margin: 0 2px;
            background-color: #666;
            border-radius: 50%;
            animation: blink 1.4s infinite both;
        }

        .typing-dots span:nth-child(1) { animation-delay: 0s; }
        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes blink {
            0%, 80%, 100% { opacity: 0; }
            40% { opacity: 1; }
        }
    </style>

    @php
        $tenantDb = session('tenant_db');
        $cacheKey = "chatbot_enabled_{$tenantDb}";
    @endphp

    @if(Cache::get($cacheKey))
    <!-- Floating Chatbot Button with proper type attribute -->
    <button type="button" class="chatbot-btn" id="chatbot-toggle-btn">
        <i class="fas fa-comments"></i>
    </button>

    <!-- Chatbot Window -->
    <div class="chatbot-window" id="chatbotWindow">
        <div class="chatbot-header">
                AI Chatbot Assistant
            <button type="button" id="chatbot-close-btn">&times;</button>
        </div>

        <div class="chatbot-messages" id="chatMessages">
            <!-- Initial Greeting -->
            <div class="chatbot-message bot">
                <div class="bubble">👋 Hi! How can I help you today?</div>
            </div>
        </div>

        <div class="chatbot-input">
                <input type="text" id="chatInput" placeholder="Type your message...">
                <button type="button" id="chatbot-send-btn">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    @endif

    <!-- chatbot javacscript -->
    <script>
        // Global variables
        const chatWindow = document.getElementById("chatbotWindow");
        const chatMessages = document.getElementById("chatMessages");
        const chatInput = document.getElementById("chatInput");

        // Chatbot functions
        function toggleChat() {
            chatWindow.classList.toggle("open");
        }

        async function sendMessage() {
            let message = chatInput.value.trim();
            if (!message) return false;

            // Show user message instantly
            const userBubble = document.createElement('div');
            userBubble.className = 'chatbot-message user';
            userBubble.innerHTML = `<div class="bubble">${message}</div>`;
            chatMessages.appendChild(userBubble);
            chatInput.value = '';
            chatMessages.scrollTop = chatMessages.scrollHeight;

            // Show typing indicator with blinking dots
            const typingBubble = document.createElement('div');
            typingBubble.className = 'chatbot-message bot';
            typingBubble.innerHTML = `
                <div class="bubble typing-dots">
                    <span></span><span></span><span></span>
                </div>
            `;
            chatMessages.appendChild(typingBubble);
            chatMessages.scrollTop = chatMessages.scrollHeight;

            try {
                let response = await fetch("{{ route('chat.send') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({ message: message })
                });

                let data = await response.json();

                // Remove typing indicator
                chatMessages.removeChild(typingBubble);

                // Create bot bubble for typewriter effect
                const botBubble = document.createElement('div');
                botBubble.className = 'chatbot-message bot';
                const bubbleContent = document.createElement('div');
                bubbleContent.className = 'bubble';
                botBubble.appendChild(bubbleContent);
                chatMessages.appendChild(botBubble);

                // Animate typing effect
                const text = data.assistant_message;
                let i = 0;
                function typeWriter() {
                    if (i < text.length) {
                        bubbleContent.innerHTML += text.charAt(i);
                        i++;
                        chatMessages.scrollTop = chatMessages.scrollHeight;
                        setTimeout(typeWriter, 30); // typing speed
                    }
                }
                typeWriter();

                } catch (err) {
                    console.error("Error sending message", err);
                    chatMessages.removeChild(typingBubble);

                    const errorBubble = document.createElement('div');
                    errorBubble.className = 'chatbot-message bot';
                    errorBubble.innerHTML = `<div class="bubble">Sorry, something went wrong. Please try again.</div>`;
                    chatMessages.appendChild(errorBubble);
                    chatMessages.scrollTop = chatMessages.scrollHeight;
                }

                return false;
            }

            // Event handlers
            document.addEventListener('DOMContentLoaded', function() {
                const chatToggleBtn = document.getElementById('chatbot-toggle-btn');
                if (chatToggleBtn) chatToggleBtn.addEventListener('click', toggleChat);

                const chatCloseBtn = document.getElementById('chatbot-close-btn');
                if (chatCloseBtn) chatCloseBtn.addEventListener('click', toggleChat);

                const chatSendBtn = document.getElementById('chatbot-send-btn');
                if (chatSendBtn) chatSendBtn.addEventListener('click', sendMessage);

                const chatInputField = document.getElementById('chatInput');
                if (chatInputField) {
                    chatInputField.addEventListener('keypress', function(e) {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            sendMessage();
                        }
                    });
                }
            });
    </script>
    <!-- END CHATBOT CODE -->












<script>
function toggleOptions() {
    const optionsContainer = document.getElementById('optionsContainer');
    const icon = document.getElementById('mainIcon');
    
    // Toggle visibility of dropdown
    if (optionsContainer.style.display === 'none') {
        optionsContainer.style.display = 'block';
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');
    } else {
        optionsContainer.style.display = 'none';
        icon.classList.remove('fa-chevron-up');
        icon.classList.add('fa-chevron-down');
    }
}

function selectOption(optionNumber) {
    const contents = document.querySelectorAll('#contentContainer .content');

    contents.forEach(content => {
        content.style.display = 'none';
    });

    const selectedContent = document.getElementById(`content${optionNumber}`);
    if (selectedContent) {
        selectedContent.style.display = 'block';
    }

    document.getElementById('optionsContainer').style.display = 'none';
    document.getElementById('mainIcon').classList.remove('fa-chevron-up');
    document.getElementById('mainIcon').classList.add('fa-chevron-down');
}

</script>

<script>
    const departmentNames = <br />
<b>Warning</b>:  Undefined variable $departmentNames in <b>C:\laragon\www\attendpro-laravel-dev\resources\views\admins\dashboardadmin.blade.php</b> on line <b>605</b><br />
null;
    const departmentCounts = <br />
<b>Warning</b>:  Undefined variable $departmentCounts in <b>C:\laragon\www\attendpro-laravel-dev\resources\views\admins\dashboardadmin.blade.php</b> on line <b>606</b><br />
null;
</script>

<script type="text/javascript">
    // Initialize the chart
    document.addEventListener('DOMContentLoaded', function() {
        // Get the canvas elements
        const ctx = document.getElementById('myChart').getContext('2d');
        const pie = document.getElementById('myPie').getContext('2d');

        // Define chart data for both charts
        const data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], // X-axis labels
            datasets: [{
                    label: 'Staff Absent', // Legend label
                    data: [{{ implode(',', $leaveCounts) }}], // Y-axis data points
                    backgroundColor: 'rgba(75, 192, 192, 0.2)', // Line fill color
                    borderColor: 'rgba(75, 192, 192, 1)', // Line border color
                    borderWidth: 1, // Border width
                    tension: 0.4,
                },
                // {
                //     label: 'Operation Department', // Legend label for the second line
                //     data: [45, 49, 60, 70, 46, 50, 45, 49, 60, 70, 46, 50], // Y-axis data points for the second line
                //     backgroundColor: 'rgba(255, 99, 132, 0.2)', // Line fill color for the second line
                //     borderColor: 'rgba(255, 99, 132, 1)', // Line border color for the second line
                //     borderWidth: 1, // Border width
                //     tension: 0.4
                // },
                // {
                //     label: 'Sales Department', // Legend label for the second line
                //     data: [40, 55, 70, 75, 30, 60, 40, 55, 70, 75, 30, 60], // Y-axis data points for the second line
                //     backgroundColor: 'rgba(255, 167, 99, 0.2)', // Line fill color for the second line
                //     borderColor: 'rgba(255, 167, 99, 1)', // Line border color for the second line
                //     borderWidth: 1, // Border width
                //     tension: 0.4
                // }
            ]
        };

        // Chart options (same for both charts)
        const options = {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true // Start Y-axis at zero
                }
            }
        };

        // Create the line chart
        new Chart(ctx, {
            type: 'line', // Chart type: line
            data: data,
            options: options
        });

   


        new Chart(pie, {
    type: 'pie', // Chart type: pie
    data: {
        labels: departmentNames, // Use dynamic department names
        datasets: [{
            data: departmentCounts, // Use dynamic employee counts
            borderColor: [
                'rgba(75, 192, 192, 0.5)',
                'rgba(255, 99, 132, 0.5)',
                'rgba(255, 167, 99, 0.5)',
                'rgba(54, 162, 235, 0.5)', // Blue
                'rgba(153, 102, 255, 0.5)', // Purple
                'rgba(75, 192, 75, 0.5)'    // Green
            ],
            backgroundColor: [
                'rgba(75, 192, 192, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 167, 99, 0.2)',
                'rgba(54, 162, 235, 0.2)', // Blue
                'rgba(153, 102, 255, 0.2)', // Purple
                'rgba(75, 192, 75, 0.2)'    // Green
            ],
            hoverBackgroundColor: [
                'rgba(75, 192, 192, 0.5)',
                'rgba(255, 99, 132, 0.5)',
                'rgba(255, 167, 99, 0.5)',
                'rgba(54, 162, 235, 0.5)', // Blue
                'rgba(153, 102, 255, 0.5)', // Purple
                'rgba(75, 192, 75, 0.5)'    // Green
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            tooltip: {
                callbacks: {
                    label: function(tooltipItem) {
                        const total = tooltipItem.dataset.data.reduce((sum, value) => sum + value, 0); // Calculate total
                        const currentValue = tooltipItem.raw; // Get current value
                        const percentage = ((currentValue / total) * 100).toFixed(2); // Calculate percentage
                        return tooltipItem.label + ': ' + currentValue + ' staff (' + percentage + '%)';
                    }
                }
            }
        }
    }
});

    });
</script>

<!-- ✅ JS Haversine formula to calculate distance -->
<script>
    function haversine(lat1, lon1, lat2, lon2) {
        const R = 6371000; // radius of Earth in meters
        const toRad = x => x * Math.PI / 180;

        const dLat = toRad(lat2 - lat1);
        const dLon = toRad(lon2 - lon1);

        const a = Math.sin(dLat / 2) ** 2 +
                Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
                Math.sin(dLon / 2) ** 2;

        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

        return R * c;
    }

    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".distance").forEach(function (cell) {
            const baseLat = parseFloat(cell.dataset.baseLat);
            const baseLng = parseFloat(cell.dataset.baseLng);
            const checkinLat = parseFloat(cell.dataset.checkinLat);
            const checkinLng = parseFloat(cell.dataset.checkinLng);

            if (!isNaN(baseLat) && !isNaN(baseLng) && !isNaN(checkinLat) && !isNaN(checkinLng)) {
                const dist = haversine(baseLat, baseLng, checkinLat, checkinLng);
                cell.textContent = dist.toFixed(0) + " m"; // show meters
            } else {
                cell.textContent = "-";
            }
        });
    });
</script>

<script src="{{ asset('newtemplate/vendor/chart.js/Chart.min.js')}}"></script>
<script src="{{ asset('newtemplate/js/demo/chart-area-demo.js')}}"></script>
<script src="{{ asset('newtemplate/js/demo/chart-pie-demo.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endsection