@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;
    }
</style>
@php
    use Carbon\Carbon;
@endphp





<form action="{{ route('check.ins') }}" id="map_form" method="post">
    @csrf

    <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-2">
                            @foreach ($reason as $index => $r)
                                <div class="col-md-6">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="checkin_reason"
                                            id="reasonRadio{{ $index + 1 }}" 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{{ $index + 1 }}">{{ strtoupper($r->name) }}</label>
                                    </div>
                                </div>
                            @endforeach
                        </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="">
</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
            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);

            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);
        $('#submit').prop('disabled', true);
        $('#other_reason').val('').prop('disabled', 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