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

           



            <form  action="{{ route('check.ins') }}" id="map_form" method="post">
                @csrf
                    <!-- <h5 style="font-weight: bold;" name="">Welcome ,</h5>
                    <h4 style="font-weight: bold;" name="">{{$user->username}}.</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-2">
                    <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;">YOUR 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>

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

                <div class="form-row mb-3">
                    <div class="col">
                        <button type="button" data-toggle="modal" id="checkin" value="IN" class="btn btn-primary btn-lg btn-block">
                            CHECK IN
                        </button>
                    </div>
                    <div class="col">
                        <button type="button" id="checkout" value="OUT" class="btn btn-danger btn-lg btn-block">
                            CHECK OUT
                        </button>
                    </div>
                </div>










                <div class="card reason-row mb-3 hide">
                    <div class="card-body">

                        <div class="row mb-2">
                            <div class="col">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="checkin_reason" id="reasonRadio1" value="Puchong" data-reason="Puchong">
                                    <label class="form-check-label" for="reasonRadio1">PUCHONG</label>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="checkin_reason" id="reasonRadio2" value="Cyberjaya" data-reason="Cyberjaya">
                                    <label class="form-check-label" for="reasonRadio2">CYBERJAYA</label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <div class="col">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="checkin_reason" id="reasonRadio3" value="Site" data-reason="Site">
                                    <label class="form-check-label" for="reasonRadio3">SITE</label>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="checkin_reason" id="reasonRadio4" value="Meeting" data-reason="Meeting">
                                    <label class="form-check-label" for="reasonRadio4">MEETING</label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <div class="col">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="checkin_reason" id="reasonRadio5" value="Training" data-reason="Training">
                                    <label class="form-check-label" for="reasonRadio5">TRAINING</label>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="checkin_reason" id="reasonRadio6" value="Other" data-reason="Other">
                                    <label class="form-check-label" for="reasonRadio6">OTHER</label>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <input type="text" class="form-control mb-2" name="checkin_other_reason" value="" id="other_reason" placeholder="Remarks">
                            
                                <button type="submit" id="submit" class="btn btn-success btn-lg btn-block " disabled>
                                    <i class="fas fa-check"></i> 
                                    SUBMIT
                                </button>
                                

                                
                                <button type="button" id="cancel" class="btn btn-warning btn-lg btn-block">
                                    <i class="fas fa-times"></i> 
                                    CANCEL
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            













                <!-- <div id="map"></div> -->
                <div id="map" style="height: 700px; width: 100%; display:none;"></div>
</div>
</div>
                <br>
    
              

            



                <div class="form-row hide" style="display: none;">
                    <div class="col">
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">
                                IN
                                <span class="badge badge-light"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="col">
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-danger d-flex justify-content-between align-items-center">
                                OUT
                                <span class="badge badge-light"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="col">
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-warning d-flex justify-content-between align-items-center">
                                DT
                                <span class="badge badge-light"></span>
                            </li>
                        </ul>
                    </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="">


                <!-- <div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="successModalLabel">Success</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                Check-in successful!
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div> -->


                <!-- Failure Popup -->
                <!-- <div class="modal fade" id="failureModal" tabindex="-1" role="dialog" aria-labelledby="failureModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="failureModalLabel">Error</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                Check-in failed. Please try again.
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div> -->
        @if ($checkins_checkouts !== FALSE)
        
            @if (count($checkins_checkouts) > 0)
            
                <div class="row">
                    <div class="col s12">
                        <div class="card">
                            <div class="card-header text-center">
                                <a data-toggle="collapse" href="#collapseHistory" aria-expanded="false" aria-controls="collapseHistory">
                                    <i class="fas fa-angle-down"></i>
                                    <i class="fas fa-angle-up"></i>
                                    &nbsp;
                                    Show History
                                </a>
                            </div>
                            <div class="card-body p-2 collapse" id="collapseHistory">

                                <table class="table table-borderless table-sm mb-0">
        

                               <tbody>
                                    @foreach($checkins_checkouts as $chrow)
                                    <tr>
                                        {{-- IN/OUT column --}}
                                        <td>
                                            @if($chrow->checkin_type == 'IN')
                                                <span class="badge badge-primary">{{ $chrow->checkin_type }}</span>
                                            @else
                                                <span class="badge badge-danger">{{ $chrow->checkin_type }}</span>
                                            @endif
                                        </td>

                                        <!-- {{-- DateTime column --}} -->
                                        @php
                                            $dt = strtotime($chrow->checkin_datetime);
                                        @endphp
                                        <td class="nw">{{ date('g:i:s A', $dt) }}</td>

                                        <!-- {{-- Location column (checkin_reason) --}} -->
                                        <td>
                                            @if(!empty($chrow->checkin_other_reason))
                                                <b>{{ $chrow->checkin_other_reason }} ({{ $chrow->checkin_reason }}):</b>
                                            @else
                                                <b>{{ $chrow->checkin_reason }}:</b>
                                            @endif

                                            <!-- {{-- Address, locality, sublocality --}} -->
                                            @if(!empty($chrow->checkin_sublocality))
                                                {{ $chrow->checkin_sublocality }}
                                                @if(!empty($chrow->checkin_locality))
                                                    , {{ $chrow->checkin_locality }}
                                                @endif
                                            @else
                                                @if(!empty($chrow->checkin_locality))
                                                    {{ $chrow->checkin_locality }}
                                                @else
                                                    {{ $chrow->checkin_lat }},{{ $chrow->checkin_lng }}
                                                @endif
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
        
                                </tbody>

                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endif
            
            </form>

        </div>
        </div>


<!-- <script src="https://maps.google.com/maps/api/staticmap?center="></script> -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCONxWCXBdM26TGw7S3RR7W9hH804gM2H0&callback=initMap"></script>
<!-- <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> -->
    <script>




// Initialize the map at a default location
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 0, lng: 0 },
        zoom: 2
    });

    // Get the user's current location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position) => {
            const checkin_lat = position.coords.latitude;
            const checkin_lng = position.coords.longitude;

            $('#lat').val(checkin_lat);
            $('#lng').val(checkin_lng);

            $.ajax({
                url: `https://nominatim.openstreetmap.org/reverse?format=json&lat=${checkin_lat}&lon=${checkin_lng}`,
                method: 'GET',
                success: function(data) {
                    const address = data.display_name;
                    $('#address').val(address);

                    let sublocality = data.address.suburb || data.address.neighbourhood || data.address.district || '';
                    let locality = data.address.city || data.address.town || data.address.village || '';

                    $('#sublocality').val(sublocality);
                    $('#locality').val(locality);

                    $('#current-location').text(`${sublocality},${locality}`);


                    sendCheckinData(checkin_lat, checkin_lng, address, sublocality, locality);
                },
                error: function() {
                    alert('Failed to get address. Using coordinates as fallback.');
                    const address = `${checkin_lat}, ${checkin_lng}`;
                    sendCheckinData(checkin_lat, checkin_lng, address, '', '');
                }
            });

            // Set the view to the user's location and add a marker
            const zoomLevel = 17; // Adjust this value for more or less zoom
            map.setCenter({ lat: checkin_lat, lng: checkin_lng });
            map.setZoom(zoomLevel); // Set the zoom level

            new google.maps.Marker({
                position: { lat: checkin_lat, lng: checkin_lng },
                map: map,
                title: 'You are here!'
            });

        }, () => {
            alert('Could not get your location. Please allow your location permission.');
        });
    } else {
        alert('Geolocation is not supported by this browser.');
    }
}








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

                // $('#lat').val(checkin_lat);
                // alert('Latitude set: ' + $('#lat').val());
            //     const valueFromJs = "Hello, Laravel!";
            
            // // Set the value of the input with ID 'lat'
            // $('#lat').val(valueFromJs);
            // Alert the assigned value
            // alert(checkin_lat);

                // alert(checkin_lat);

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

        // $(document).ready(function() {
        //     const valueFromJs = "Hello, Laravel!";
            
        //     // Set the value of the input with ID 'lat'
        //     $('#lat').val(valueFromJs);

        //     // Alert the assigned value
        //     alert(valueFromJs);
        // });




        


        // Get the button elements and the row you want to toggle
        const checkinBtn = document.getElementById('checkin');
        const checkoutBtn = document.getElementById('checkout');
        const reasonRow = document.querySelector('.reason-row');  // Adjust the selector based on your actual row
        const actionInput = document.getElementById('actionInput');  // Hidden input for action
        const checkinTypeInput = document.getElementById('checkinTypeInput');  // Hidden input for check-in type
        const reasonInputs = document.querySelectorAll('input[name="reason"]');  // Assuming inputs for reasons
        const otherReasonInput = document.getElementById('otherReasonInput');  // Assuming input for 'Other' reason
        const submitButton = document.getElementById('submit');


if (checkinBtn && checkoutBtn && reasonRow) {
    function toggleReasonRow(button) {
        reasonRow.classList.remove('hide');  // Unhide the reason row
        actionInput.value = button.id;       // Set the action input value ('checkin' or 'checkout')
        checkinTypeInput.value = button.value;  // Set the check-in type value ('IN' or 'OUT')
        
    }

    // Event listener for 'CHECK IN' button
    checkinBtn.addEventListener('click', function() {
        toggleReasonRow(checkinBtn);  // Call the function with the 'checkin' button
        submitButton.style.backgroundColor = 'blue'; // Change color to red for CHECK OUT

    });

    // Event listener for 'CHECK OUT' button
    checkoutBtn.addEventListener('click', function() {
        toggleReasonRow(checkoutBtn);  // Call the function with the 'checkout' button
        submitButton.style.backgroundColor = 'red'; // Change color to red for CHECK OUT

    });
}

// Reason selection functionality
reasonInputs.forEach(input => {
    input.addEventListener('click', function() {
        otherReasonInput.disabled = this.value !== 'Other';
    });
});

$(document).ready(function() {
    // Disable the submit button initially
    $('#submit').prop('disabled', true);

    // Enable the submit button when a radio button is selected
    $('input[name="checkin_reason"]').on('change', function() {
        if ($('input[name="checkin_reason"]:checked').length > 0) {
            $('#submit').prop('disabled', false);
        }
    });

    // Handle the cancel button to reset the form and hide the card
    $('#cancel').on('click', function() {
        // Reset the radio buttons
        $('input[name="checkin_reason"]').prop('checked', false);
        $('#submit').prop('disabled', true); // Disable submit button again
        
        // Reset the "Other" input
        $('#other_reason').val('');
        
        // Hide the card
        $('.card').removeClass('show').addClass('hide');
    });

    // Show card button event
    $('#showCardButton').on('click', function() {
        $('.card').removeClass('hide').addClass('show');
    });

   
});



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



    function openSidebar() {
        document.getElementById("mySidebar").style.width = "250px";
        document.getElementById("myOverlay").style.display = "block";
    }

    function closeSidebar() {
        document.getElementById("mySidebar").style.width = "0";
        document.getElementById("myOverlay").style.display = "none";
    }

    function toggleDropdown(dropdownId) {
        var dropdown = document.getElementById(dropdownId);
        if (dropdown.style.display === "none") {
            dropdown.style.display = "block";
        } else {
            dropdown.style.display = "none";
        }
    }


    </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>
    (document).ready(function() {
        const valueFromJs = "Hello, Laravel!";
        
        // Set the value of the input with ID 'lat'
        $('#lat').val(valueFromJs);
        
        // Alert the assigned value
        alert(valueFromJs);
    });
</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