@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;
    }


    /* 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;
        /* font-size: ; */
    }

    .pending-approval::before {
        content: '⚠️';
        margin-right: 8px;
    }
</style>
@php
use Carbon\Carbon;
@endphp





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

    <h1 class="gradient-text">Let's Overtime!</h1>
    <h4 class="mb-4">Good Game! <i class="fas fa-laugh-wink"></i></h4>

    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif
    <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background: linear-gradient(to bottom, #0d1346 15%, #ffffff 75%); color:whitesmoke;">
        <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>
                    <!-- <p class="mb-0" style="font-size:x-small;">(PLEASE REFRESH WEBSITE IF NOT YOUR CURENT LOCATION)</p> -->
                    <div>
                        <i class="fas fa-map-marker-alt"></i>
                        <span style="font-weight: bold; margin-left: 5px;" id="current-location">Loading...</span>
                    </div>
                </div>
            </div>


            <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" disabled>
                        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" disabled>
                        CHECKOUT
                    </button>
                </div>
            </div>
            <p class="mb-0 mt-0 text-center" style="font-size:smaller; color:white;">⚠️PLEASE CHECKOUT NORMAL WORKING HOUR BEFORE CHECKIN FOR THE OVERTIME!⚠️</p>
            <div id="map" style="height: 230px; width: 100%; border: 2px solid grey;"></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
                        </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 (OT)')
                                <span class="badge bg-primary text-white px-3 py-4">IN</span>
                                @elseif($checkin->checkin_type == 'OUT (OT)')
                                <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" style="color:#0d1346;">
            <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)
                            @if ($index % 2 == 0)
                        </div>
                        <div class="row mb-2">
                            @endif
                            <div class="col-6 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 }}">
                                    <label class="form-check-label" for="reasonRadio{{ $index+1 }}">{{ strtoupper($r->name) }}</label>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <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>
                            </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>
    </div>





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


</form>

</div>
</div>


<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCONxWCXBdM26TGw7S3RR7W9hH804gM2H0&callback=initMap"></script>
<script>
    // Initialize the map at a default location
    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
        });

        // 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);

                    // 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 to handle data submission
    function sendCheckinData(lat, lng, address, sublocality, locality) {
        console.log('Sending check-in data:', {
            lat,
            lng,
            address,
            sublocality,
            locality
        });
    }


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

        $('input[name="checkin_reason"]').on('change', function() {
            $('#submit').prop('disabled', $('input[name="checkin_reason"]:checked').length === 0);
        });

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

        });
    });

    // Function to show modal
    function showModal(modalId, message) {
        const modal = document.getElementById(modalId);
        const modalBody = modal.querySelector('.modal-body');
        modalBody.textContent = message;
        $(modal).modal('show');
    }
</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;
    }

    setInterval(updateDateTime, 1000);

    updateDateTime();
</script>
<script>
    // Check the user's check-in status for today from Blade
    const hasCheckedInToday = {!! $hasCheckedInToday !!};

    // Function to enable the button if the user has checked in today
    function checkUserCheckInStatus() {
    const checkinButton = document.getElementById('checkin');
    const checkoutButton = document.getElementById('checkout');
    
    if (hasCheckedInToday) {
        checkinButton.disabled = false; // Enable the check-in button if the user has checked in today
        checkoutButton.disabled = false; // Enable the check-out button if the user has checked in today
    } else {
        checkinButton.disabled = true; // Keep the check-in button disabled if the user hasn't checked in
        checkoutButton.disabled = true; // Keep the check-out button disabled if the user hasn't checked in
    }
}


    // Run the check when the page loads
    document.addEventListener('DOMContentLoaded', checkUserCheckInStatus);
</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