@extends('layouts.userapp')

@section('content')

<style>
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }

    .reason-modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1050;
        width: 90%;
        max-width: 500px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .modal-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }






    /* Timeline container */
    .activity-log {
        padding: 20px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    /* Timeline line */
    .activity-log tbody {
        position: relative;
        padding-left: 30px;
    }

    .activity-log tbody::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e0e0e0;
    }

    /* Timeline entries */
    .activity-log tr {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        padding-left: 40px;
    }

    /* Timeline dots */
    .activity-log tr::before {
        content: '';
        position: absolute;
        left: 11px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #e0e0e0;
        z-index: 1;
    }

    /* Entry container */
    /* .activity-log td {
    display: inline-block;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-right: 8px;
} */

    /* Badge styles */
    .badge {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
    }

    .badge-primary {
        background: #007bff;
        color: white;
    }

    .badge-danger {
        background: #dc3545;
        color: white;
    }

    /* Active indicator */
    .active-indicator {
        display: inline-block;
        padding: 8px 16px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        color: #666;
        font-size: 14px;
    }

    .active-indicator::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #28a745;
        border-radius: 50%;
        margin-right: 8px;
    }

    /* Time text */
    .nw {
        white-space: nowrap;
        color: #666;
        font-weight: bold;

        font-size: 14px;
    }

    /* Location text */
    td b {
        color: #333;
        font-weight: bold;
        margin-right: 4px;
    }

    /* Pending approval warning */
    .pending-approval {
        display: flex;
        align-items: center;
        color: #856404;
        background-color: #fff3cd;
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        margin: 8px 0;
    }

    .pending-approval::before {
        content: '⚠️';
        margin-right: 8px;
    }

    .location-group-toggle {
    cursor: pointer;
    background-color: #f8f9fa;
    }

    .location-group-toggle:hover {
        background-color: #e9ecef;
    }

    .location-group-toggle i {
        transition: transform 0.2s ease;
    }

    .location-group-toggle[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

</style>
@php
    use Carbon\Carbon;
@endphp





<form action="{{ route('check.ins') }}" id="map_form" method="post">
    @csrf
    @if(session('user_info'))
        <div class="alert alert-success">
            {{ session('user_info') }}
        </div>
    @endif


    <h1 class="gradient-text">Hello, {{$user->userfirstname}}</h1>
    <h4 class="mb-4">Have a nice day at work! <i class="fas fa-laugh-wink"></i></h4>

    <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
        <div class="card-body">

            <div class="row mb-4">
                <div class="col">
                    <h5 id="date" class="clock"></h5>
                    <h1 style="font-weight: bold;" id="time" class="clock"></h1>
                    <p class="mb-0" style="font-weight: bold; font-size:smaller;">YOU'RE CURRENTLY AT : </p>
                    <div>
                        <i class="fas fa-map-marker-alt"></i>
                        <span style="font-weight: bold; font-size:small; margin-left: 5px;" id="current-location">Find
                            your location...</span>
                    </div>
                </div>
                <div class="col">
                    <div id="map" style="height: 100%; width: 100%; border:#dc3545;"></div>
                </div>
            </div>

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

            <div class="form-row mb-3">
                <div class="col">
                    <button type="button" id="checkin" style="border-radius: 20px;" value="IN"
                        class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#reasonModal">
                        CHECKIN
                    </button>
                </div>
                <div class="col">
                    <button type="button" id="checkout" style="border-radius: 20px;" value="OUT"
                        class="btn btn-danger btn-lg btn-block" data-toggle="modal" data-target="#reasonModal">
                        CHECKOUT
                    </button>
                </div>
            </div>

            <table class="table table table-borderless table-sm mb-0">
                <tbody>
                    @if($checkins_checkouts->isNotEmpty())

                    <div class="text-center mb-3">
                        <p id="toggleButton" class="mb-0 fw-bold text-dark fs-5 mt-3" style="cursor: pointer;">
                            CHECKIN LOG<span id="toggleIcon" style="font-size: 0.8em;">&#9660;</span>
                        </p>
                    </div>
                    <div id="checkinLogContent" style="display: none;">
                        @foreach($checkins_checkouts as $checkin)
                        <div class="d-flex align-items-start mb-2 px-2 py-2 border rounded bg-light">
                            <div class="me-2">
                                @if($checkin->checkin_type == 'IN')
                                <span class="badge bg-primary text-white px-3 py-4">IN</span>
                                @elseif($checkin->checkin_type == 'OUT')
                                <span class="badge bg-danger text-white px-2 py-4">OUT</span>
                                @endif
                            </div>
                            <div class="flex-grow-1">
                                <span class="d-block text-muted small">{{ date('g:i A', strtotime($checkin->checkin_datetime)) }}</span>
                                <strong class="d-block text-dark small mb-1" style="font-weight: bold;">
                                    {{ !empty($checkin->checkin_other_reason) 
                                            ? $checkin->checkin_other_reason . ' (' . $checkin->checkin_reason . ')' 
                                            : $checkin->checkin_reason }}:
                                </strong>
                                <span class="d-block small text-secondary">
                                    {{ $checkin->checkin_sublocality ?? $checkin->checkin_locality ?? "{$checkin->checkin_lat}, {$checkin->checkin_lng}" }}
                                </span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center mt-3">
                        <p class="fw-bold text-danger fs-6">You have not checked in yet.</p>
                    </div>
                    @endif
                </tbody>
            </table>
        </div>

        <div class="modal fade" id="reasonModal" tabindex="-1" role="dialog" aria-labelledby="reasonModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="reasonModalLabel">Select Check-In Reason</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        

                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="font-weight-bold mb-2">Select Location</label>

                                <ul class="list-group" id="location-group-list">

                                    @foreach ($groupedReasons as $groupName => $items)
                                        <li class="list-group-item p-0">

                                        <!-- Group Header -->
                                        <!-- <a href="javascript:void(0);"
                                            class="d-flex justify-content-between align-items-center px-3 py-2 location-group-toggle"
                                            data-toggle="collapse"
                                            data-target="#group-{{ Str::slug($groupName ?? 'Ungrouped') }}">
                                            <strong>{{ strtoupper($groupName ?? 'Ungrouped')}}</strong>
                                            <i class="fas fa-chevron-down"></i>
                                        </a> -->

                                        <button 
                                            type="button"
                                            class="btn btn-link btn-block text-left d-flex justify-content-between align-items-center px-3 py-2 location-group-toggle"
                                            data-target="#group-{{ Str::slug($groupName ?? 'Ungrouped') }}"
                                        >
                                            <strong>{{ strtoupper($groupName ?? 'Ungrouped') }}</strong>
                                            <i class="fas fa-chevron-down"></i>
                                        </button>

                                        <!-- Group Locations -->
                                        <div class="collapse px-3 py-2" id="group-{{ Str::slug($groupName ?? 'Ungrouped') }}">
                                            @foreach ($items as $r)
                                                <div class="form-check mb-2">
                                                    <input
                                                        class="form-check-input"
                                                        type="radio"
                                                        name="checkin_reason"
                                                        id="reasonRadio{{ $r->reason_id }}"
                                                        value="{{ $r->name }}"
                                                        data-reason="{{ $r->name }}"
                                                        data-lat="{{ $r->lat }}"
                                                        data-long="{{ $r->long }}"
                                                        data-radius="{{ $r->radius }}"
                                                    >
                                                    <label class="form-check-label" for="reasonRadio{{ $r->reason_id }}">
                                                        {{ strtoupper($r->name) }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>


                        <div id="radius-warning-container"></div> <!-- Placeholder for dynamic warning -->

                        <div class="row mb-2">
                            <div class="col">
                                <input type="text" class="form-control mb-2" name="checkin_other_reason" value=""
                                    id="other_reason" placeholder="Remarks" disabled required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <button type="submit" id="submit" class="btn btn-success btn-lg btn-block" disabled>
                                    <i class="fas fa-check"></i> SUBMIT
                                </button>
                                <button type="reset" id="cancel" class="btn btn-warning btn-lg btn-block"
                                    data-dismiss="modal">
                                    <i class="fas fa-times"></i> CANCEL
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Hidden fields for check-in data -->
    <input type="hidden" name="checkin_address" id="checkin_address" value="">
    <input type="hidden" name="username" id="username" value="">
    <input type="hidden" name="action" id="actionInput" value="">
    <input type="hidden" name="checkin_lat" id="lat" value="">
    <input type="hidden" name="checkin_lng" id="lng" value="">
    <input type="hidden" name="checkin_address" id="address" value="">
    <input type="hidden" name="checkin_sublocality" id="sublocality" value="">
    <input type="hidden" name="checkin_locality" id="locality" value="">
    <input type="hidden" name="checkin_type" id="checkinTypeInput" value="">
    <input type="hidden" name="activity" id="activity" value="">
    <input type="hidden" name="start_time" id="start_time" value="">
    <input type="hidden" name="accuracy" id="accuracy" value="">
    <input type="hidden" name="address" id="address" value="">
    <input type="hidden" name="locality" id="locality" value="">
    <input type="hidden" name="sublocality" id="sublocality" value="">
    <input type="hidden" id="server_offset" value="0">
    <input type="hidden" id="sub_status" value="">
    <input type="hidden" name="checkin_radius" id="checkin_radius" value="">
    <input type="hidden" name="checkin_distance" id="checkin_distance" value="">




<!-- 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

    <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 -->


    </form>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCONxWCXBdM26TGw7S3RR7W9hH804gM2H0&callback=initMap"></script>

<script>


    // Initialize the Google Map
    function initMap() {
        const DEFAULT_LOCATION = { lat: 0, lng: 0 }; // Default location
        const DEFAULT_ZOOM = 2; // Default zoom level

        // Initialize the map with default settings
        const map = new google.maps.Map(document.getElementById('map'), {
            center: DEFAULT_LOCATION,
            zoom: DEFAULT_ZOOM
        });

        const checkinBtn = document.getElementById('checkin');
        const checkoutBtn = document.getElementById('checkout');
        checkinBtn.disabled = true;
        checkoutBtn.disabled = true;
        // Check if geolocation is available
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const checkin_lat = position.coords.latitude;
                    const checkin_lng = position.coords.longitude;
                    // Set latitude and longitude in hidden fields
                    $('#lat').val(checkin_lat);
                    $('#lng').val(checkin_lng);
                    checkinBtn.disabled = false;
                    checkoutBtn.disabled = false;
                    // Use reverse geocoding to get address
                    fetchAddress(checkin_lat, checkin_lng)
                        .then((addressData) => {
                            const address = addressData.display_name || 'Unknown Address';
                            const sublocality = addressData.address.suburb || addressData.address.neighbourhood || addressData.address.district || '';
                            const locality = addressData.address.city || addressData.address.town || addressData.address.village || '';

                            // Update the form fields
                            $('#address').val(address);
                            $('#sublocality').val(sublocality);
                            $('#locality').val(locality);

                            // Update current location display
                            $('#current-location').text(address);

                            // Pass data to server or process further
                            sendCheckinData(checkin_lat, checkin_lng, address, sublocality, locality);
                        })
                        .catch((error) => {
                            console.error('Error fetching address:', error);
                            alert('Failed to get address. Using coordinates as fallback.');
                            const fallbackAddress = `${checkin_lat}, ${checkin_lng}`;
                            sendCheckinData(checkin_lat, checkin_lng, fallbackAddress, '', '');
                        });

                    // Center map to user's location and add marker
                    map.setCenter({ lat: checkin_lat, lng: checkin_lng });
                    map.setZoom(17); // Zoom level for user location
                    new google.maps.Marker({
                        position: { lat: checkin_lat, lng: checkin_lng },
                        map: map,
                        title: 'You are here!'
                    });
                },
                (error) => {
                    console.error('Geolocation error:', error);
                    alert('Could not get your location. Please allow location permissions.');
                }
            );
        } else {
            alert('Geolocation is not supported by this browser.');
        }
    }

    // Function to fetch address using OpenStreetMap Nominatim API
    async function fetchAddress(lat, lng) {
        const url = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`;
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Failed to fetch address from API.');
        }
        return await response.json();
    }


    function sendCheckinData(checkin_lat, checkin_lng, checkin_address) {
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        fetch('/checkin', { // Replace '/checkin' with your actual Laravel route
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken, // CSRF token for Laravel
            },
            body: JSON.stringify({
                checkin_lat: checkin_lat,
                checkin_lng: checkin_lng,
                checkin_address: checkin_address,
            }),
        })
            .then(response => response.json())
            .then(data => {
                console.log('Check-in successful:', data);
                // Display the data in HTML elements
                document.getElementById('display-lat').textContent = checkin_lat;
                document.getElementById('display-lng').textContent = checkin_lng;
                document.getElementById('display-address').textContent = checkin_address;
                
            })
            .catch(error => {
                console.error('Error during check-in:', error);
            });
    }

    $(document).ready(function () {
        // Attach a click event to the button
        $('#checkin').on('click', function () {
            // Get values from the input fields
            const checkin_lat = position.coords.latitude;
            const checkin_lng = position.coords.longitude;
            const checkin_address = $('#address').val();

            // Call the sendCheckinData function with the retrieved values
            sendCheckinData(checkin_lat, checkin_lng, checkin_address).then(data => {
                // You can handle the returned data here if needed
                console.log('Returned data:', data);
            });
        });
    });






    // Get the button elements and inputs
    const checkinBtn = document.getElementById('checkin');
    const checkoutBtn = document.getElementById('checkout');
    const actionInput = document.getElementById('actionInput');
    const checkinTypeInput = document.getElementById('checkinTypeInput');
    const reasonInputs = document.querySelectorAll('input[name="checkin_reason"]');
    const otherReasonInput = document.getElementById('other_reason');
    const submitButton = document.getElementById('submit');
    

    if (checkinBtn && checkoutBtn) {
        function setModalValues(button) {
            actionInput.value = button.id; // Set action (checkin/checkout)
            checkinTypeInput.value = button.value; // Set check-in type (IN/OUT)
            submitButton.style.backgroundColor = button.value === 'IN' ? 'blue' : 'red'; // Change button color
        }
        // Event listener for 'CHECK IN' button
        checkinBtn.addEventListener('click', function () {
            setModalValues(checkinBtn);
        });

        // Event listener for 'CHECK OUT' button
        checkoutBtn.addEventListener('click', function () {
            setModalValues(checkoutBtn);
        });
    }

    reasonInputs.forEach(input => {
        input.addEventListener('click', function () {
            // Enable the otherReasonInput when any of the reasonInputs is selected
            otherReasonInput.disabled = false;
        });
    });

    // Disable/Enable submit button based on reason selection
    $(document).ready(function () {
    // Append loading spinner to the body
    $('body').append(`
        <div id="loading-spinner" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1050; background: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 8px; text-align: center;">
            <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Please Wait</span>
            </div>
            <p class="mt-2">Verify Location</p>
        </div>
    `);

    $('#submit').prop('disabled', true); // Disable until location is validated

    // Function to calculate the distance between two coordinates
    function calculateDistance(lat1, lon1, lat2, lon2) {
        const R = 6371; // Radius of the Earth in kilometers
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLon = (lon2 - lon1) * Math.PI / 180;
        const a =
            Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        return R * c * 1000; // Distance in meters
    }

    // Get user's current location
    function getUserLocation(callback) {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => callback(null, position.coords),
                (error) => callback(error, null)
            );
        } else {
            callback(new Error("Geolocation is not supported by this browser."), null);
        }
    }

    // When check-in reason changes, trigger location validation
    $('input[name="checkin_reason"]').on('change', function () {
        $('#submit').prop('disabled', true); // Disable until location is validated
        $('#loading-spinner').show(); // Show loading spinner

        const selectedReason = $(this).data('reason');
        const reasonLat = parseFloat($(this).data('lat'));
        const reasonLon = parseFloat($(this).data('long'));
        const reasonRadius = parseFloat($(this).data('radius'));

        // Allow normal check-in if radius, lat, or long is 0 or null
        if (!reasonLat || !reasonLon || !reasonRadius || reasonRadius === 0) {
            $('#loading-spinner').hide(); // Hide loading spinner immediately
            
            // Still get user location to calculate distance for reporting purposes
            getUserLocation((err, coords) => {
                if (!err && reasonLat && reasonLon) {
                    const userLat = coords.latitude;
                    const userLon = coords.longitude;
                    const distance = calculateDistance(userLat, userLon, reasonLat, reasonLon);
                    $('#checkin_distance').val(Math.round(distance));
                    console.log('Distance calculated (no radius validation):', Math.round(distance), 'meters');
                } else {
                    console.log('Cannot calculate distance - missing coordinates or error');
                }
            });
            
            Swal.fire({
                icon: 'info',
                title: 'Location Not Required',
                text: 'No location validation needed for this check-in reason.',
            }).then(() => {
                $('#checkin_radius').val('yes'); // Mark as within radius
                $('#submit').prop('disabled', false); // Enable the submit button
            });
            return;
        }

        let sweetAlertShown = false;

        // Set up a timer to check if SweetAlert has been shown
        const alertTimeout = setTimeout(() => {
            if (!sweetAlertShown) {
                $('#loading-spinner').show(); // Show loading spinner if SweetAlert hasn't shown
            }
        }, 1000); // Check after 1 second

        getUserLocation((err, coords) => {
            if (err) {
                clearTimeout(alertTimeout); // Clear the timeout if location error occurs
                $('#loading-spinner').hide(); // Hide loading spinner
                Swal.fire({
                    icon: 'error',
                    title: 'Location Error',
                    text: 'Unable to get location: ' + err.message,
                }).then(() => {
                    $('#submit').prop('disabled', false);
                });
                return;
            }

            const userLat = coords.latitude;
            const userLon = coords.longitude;
            const distance = calculateDistance(userLat, userLon, reasonLat, reasonLon);

            // Store the calculated distance in the hidden field
            $('#checkin_distance').val(Math.round(distance)); // Round to nearest meter
            console.log('Distance calculated and stored:', Math.round(distance), 'meters');

            if (distance <= reasonRadius) {
                sweetAlertShown = true;
                clearTimeout(alertTimeout); // Clear the timeout if SweetAlert shows
                $('#loading-spinner').hide(); // Hide loading spinner
                Swal.fire({
                    icon: 'success',
                    title: 'Location Verified',
                    text: 'You are within the allowed radius for this check-in reason.',
                }).then(() => {
                    $('#checkin_radius').val('yes');
                    $('#submit').prop('disabled', false);
                });
            } else {
                sweetAlertShown = true;
                clearTimeout(alertTimeout); // Clear the timeout if SweetAlert shows
                $('#loading-spinner').hide(); // Hide loading spinner
                Swal.fire({
                    icon: 'warning',
                    title: 'Outside Radius',
                    text: 'You are outside the allowed radius for this check-in reason. Continue and we will remark your check-in outside the radius. Please put your reason in the remarks.',
                    showCancelButton: true,
                    confirmButtonText: 'Continue',
                    cancelButtonText: 'Cancel',
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#checkin_radius').val('no');
                        $('#submit').prop('disabled', false);
                        $('#radius-warning').remove();
                        $('#reasonModal .modal-body').append(`
                            <div id="radius-warning" class="alert alert-warning mt-3 d-flex align-items-center">
                                <i class="fas fa-exclamation-triangle mr-2"></i>
                                <span>You are checking in outside the allowed radius. Your check-in will be marked accordingly.</span>
                            </div>
                        `);
                    } else {
                        $('#submit').prop('disabled', true);
                    }
                });
            }
        });
    });


    // Reset form on cancel
    $('#cancel').on('click', function () {
        $('input[name="checkin_reason"]').prop('checked', false);
        $('.collapse').collapse('hide');
        $('#submit').prop('disabled', true);
        $('#other_reason').val('').prop('disabled', true);
    });

    // Log form data before submission
    $('#map_form').on('submit', function(e) {
        const distance = $('#checkin_distance').val();
        const radius = $('#checkin_radius').val();
        const reason = $('input[name="checkin_reason"]:checked').val();
        console.log('Form submitting with:', {
            reason: reason,
            radius: radius,
            distance: distance
        });
    });
});

</script>

<script>
$(document).on('click', '.location-group-toggle', function (e) {
    e.preventDefault();
    e.stopPropagation();

    const target = $(this).data('target');
    const $collapse = $(target);

    // Toggle manually
    if ($collapse.hasClass('show')) {
        $collapse.collapse('hide');
        $(this).attr('aria-expanded', 'false');
    } else {
        $collapse.collapse('show');
        $(this).attr('aria-expanded', 'true');
    }
});
</script>


<script>
    // Function to update date and time separately
    function updateDateTime() {
        const now = new Date();

        // Format date (e.g., "17 Nov 2024")
        const dateOptions = {
            day: 'numeric',
            month: 'short',
            year: 'numeric'
        };
        const formattedDate = now.toLocaleDateString('en-US', dateOptions);

        // Format time (e.g., "03:45 PM")
        const timeOptions = {
            hour: '2-digit',
            minute: '2-digit',
            hour12: true
        };
        const formattedTime = now.toLocaleTimeString('en-US', timeOptions);

        // Update the HTML elements
        document.getElementById('date').innerText = formattedDate;
        document.getElementById('time').innerText = formattedTime;
    }

    // Update every second (1000 milliseconds)
    setInterval(updateDateTime, 1000);

    // Call immediately for instant display
    updateDateTime();
</script>








<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
@endsection