@extends('layouts.userapp')

@section('content')


@php
use Carbon\Carbon;
@endphp





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


    @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);">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5>Overtime Checkin</h5>
            <!-- <span type="button" class="right text-danger">Cancel</span> -->
        </div>
        <div class="card-body">

            <div class="row mb-4">
                <div class="table-responsive-sm">
                    <table class="table">
                        <tr>
                            <th>Name</th>
                            <td>{{$overtime->employee_first_name}}</td>
                        </tr>
                        <tr>
                            <th>Created Date</th>
                            <td>{{ \Carbon\Carbon::parse($overtime->created_at)->format('j F Y') }}</td>
                        </tr>
                        <tr>
                            <th>Date</th>
                            <td>{{ \Carbon\Carbon::parse($overtime->date)->format('j F Y') }}</td>
                        </tr>
                        <tr>
                            <th>Overtime For</th>
                            <td>{{$overtime->overtime_for}}</td>
                        </tr>
                        <tr>
                            <th>Start Time Est</th>
                            <td>{{$overtime->start_hours}}</td>
                        </tr>
                        <tr>
                            <th>End Time Est</th>
                            <td>{{$overtime->end_hours}}</td>
                        </tr>
                        <tr>
                            <th>Total Hours</th>
                            <td>{{$overtime->total_hours}}</td>
                        </tr>
                        <tr>
                            <th>Reason</th>
                            <td>{{$overtime->reason}}</td>
                        </tr>
                        <tr>
                            <th>Status</th>
                            <td>{{$overtime->status_text}}</td>
                        </tr>
                        <tr>
                            <th>Your Location</th>
                            <td><i class="fas fa-map-marker-alt"></i><span style="margin-left: 5px;" id="current-location">Loading...</span>
                            </td>
                        </tr>
                    </table>
                </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>
            <div id="map" style="height: 230px; width: 100%; border: 2px solid grey; display:none;"></div>

            <table class="table activity-log 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 (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>
    document.addEventListener("DOMContentLoaded", function () {
        let overtimeDate = "{{ $overtime->date ?? '' }}"; // Get overtime date from Laravel
        let today = new Date().toISOString().split('T')[0]; // Get today's date

        let checkinExists = "{{ $checkinExists }}"; // Check if user has already checked in
        let checkoutExists = "{{ $checkoutExists }}"; // Check if user has already checked out

        // If today's date matches overtime date
        if (overtimeDate === today) {
            if (checkinExists !== "1") {
                document.getElementById("checkin").removeAttribute("disabled");
            }
            if (checkoutExists !== "1") {
                document.getElementById("checkout").removeAttribute("disabled");
            }
        }
    });
</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