@extends('employee::layouts.master')

@section('content')
    <div class="container-fluid py-4 px-2 d-flex justify-content-between">
        <ul class="navbar-nav">
            <li class="nav-item d-flex align-items-center ms-4">
                <a href="{{ url('/employee/dashboard')}}" id="home" class="nav-link font-weight-bold px-0 text-dark h3">
                    <i class="fa fa-user ms-sm-1"></i>
                    <span class="d-sm-inline ms-2">Home</span>
                </a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item d-flex align-items-center me-4">
                <a href="#" id="logout" class="nav-link text-dark font-weight-bold px-0 h3">
                    <i class="fa fa-sign-out-alt me-sm-1"></i>
                    <span class="d-sm-inline d-none">Sign Out</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="container-fluid py-4 pt-8 min-vh-100 h-100">
        <div class="row justify-content-center align-items-center">
            <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="numbers">
                            <h5 class="font-weight-bolder mb-4 text-capitalize text-center h3">
                            Check In
                            </h5>
                            <div id="counter-container" class="row justify-content-center align-items-center gap-2">
                                <div class="icon icon- icon-lg bg-s4s-service-blu shadow border-radius-sm text-center me-2 d-flex align-items-center justify-content-center">
                                    <span id="hours" class="font-weight-bolder text-dark text-lg">00</span>
                                </div>
                                <div class="icon icon-shape icon-lg bg-s4s-service-blu shadow border-radius-sm text-center me-2 d-flex align-items-center justify-content-center">
                                    <span id="minutes" class="font-weight-bolder text-dark text-lg">00</span>
                                </div>
                                <div class="icon icon-shape icon-lg bg-s4s-service-blu shadow border-radius-sm text-center me-2 d-flex align-items-center justify-content-center">
                                    <span id="seconds" class="font-weight-bolder text-dark text-lg">00</span>
                                </div>
                            </div>
                            <p class="text-sm text-capitalize text-center font-weight-bold mt-4 mb-4">
                                <span>General: 09:30 AM to 06:30 PM</span>
                            </p>
                            <div class="row d-flex flex-column justify-content-center align-items-center">
                                <button id="checkin" class="btn bg-s4s-color w-md-40 w-sm-100 text-white text-lg">Check In</button>
                                <button id="checkout" class="btn bg-gradient-danger w-md-40 w-sm-100 d-none text-white text-lg">Check Out</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('custom-js')
    <script>
    $(document).ready(async function() {

        var runClock, interval, hoursElement, minutesElement, secondsElement, currentTime, lastTime, duration, pastDuration, longitude, latitude;

        const ajaxSettings = {
                "url": "",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "Authorization": "Bearer " + Cookies.get('employee_api_token')
                },
                "processData": false,
                "mimeType": "multipart/form-data",
                "contentType": false,
            };

        interval = 1000;
        hoursElement = $("#hours");
        minutesElement = $("#minutes");
        secondsElement = $("#seconds");
        
        // Get the current Location
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
                latitude = position.coords.latitude;
                longitude = position.coords.longitude;
                // console.log(latitude, longitude);
            });
        } else { 
            console.log("Geolocation is not supported by this browser.");
        }

        // Getting the Past
        pastDuration = 0;

        // Get All the past duration for current date
        const formDataAttendance = new FormData();
        formDataAttendance.append("mobile_number", Cookies.get('employee_mobile_number'));
        formDataAttendance.append("start_date", moment().utc(true).format('YYYY-MM-DD'));
        formDataAttendance.append("end_date", moment().utc(true).format('YYYY-MM-DD'));
        await $.ajax({...ajaxSettings, url: "{{ env('APP_URL') }}/api/employee/attendance-list", data: formDataAttendance}).done(function (data) {
            let getAllAttendance = JSON.parse(data);
            // console.log("🚀 ~ getAllAttendance:", getAllAttendance)
            if (getAllAttendance.success == 1 && getAllAttendance.data.length > 0) {
                for (let i = 0; i < getAllAttendance.data.length; i++) {
                    let data = getAllAttendance.data[i];
                    // console.log(getAllAttendance.data[i], "DDSS", data['check_in'], data['check_out']);
                    
                    if (data['check_in'] != null && data['check_out'] != null) {                                       
                        // calculate difference between two times
                        let attendanceCheckInTime = moment(data['check_in'])
                        // attendanceCheckInTime.tz("Asia/Kolkata");
        
                        // based on time set in user's computer time / OS
                        attendanceCheckOutTime = moment(data['check_out']);
                        // attendanceCheckOutTime.tz("Asia/Kolkata");

                        lastTime = "";
                        pastDuration += moment.duration(attendanceCheckOutTime.diff(attendanceCheckInTime));
                    } else if (data['check_in'] != null && data['check_out'] == null) {                        
                        // calculate difference between two times
                        lastTime = moment(data['check_in'])
                        lastTime.utc(true);
                        // lastTime.tz("Asia/Kolkata");
                    } else {
                        lastTime = "";        
                    }
                }
            }
        });
        
        if (lastTime != "" && lastTime != null && typeof lastTime != undefined) {
            startClock();
        } else {
            duration = moment.duration(pastDuration, 'milliseconds')
            updateClock(duration);
        }

        // Start the clock
        $('#checkin').click(async function() {

            if (!latitude || !longitude) {
                alert('Please enable location');
                return;
            }

            var form = new FormData();
            form.append("check_in_location", `${latitude},${longitude}`);
            form.append("mobile_number", Cookies.get('employee_mobile_number'));
            // Register the current time as the last time in the database
            await $.ajax({...ajaxSettings, url: "{{ env('APP_URL') }}/api/employee/check-in", data: form}).then(function (data) {
                let dataJson = JSON.parse(data);
                if (dataJson.success == 1) {
                    startClock();
                }
            });  
        })

        $('#checkout').click(async function() {
            // Get the current time

            var form = new FormData();
            form.append("check_out_location", `${latitude},${longitude}`);
            form.append("mobile_number", Cookies.get('employee_mobile_number'));
            // Register the current time as the last time in the database
            await $.ajax({...ajaxSettings, url: "{{ env('APP_URL') }}/api/employee/check-out", data: form}).then(function (data) {
                let dataJson = JSON.parse(data);
                if (dataJson.success == 1) {
                    stopClock();
                }
            }); 
        })
      
        function updateClock(duration) {
            hoursElement.text(duration.hours().toString().padStart(2, '0'));
            minutesElement.text(duration.minutes().toString().padStart(2, '0'));
            secondsElement.text(duration.seconds().toString().padStart(2, '0'));
        }

        function startClock() {
            $('#checkin').addClass('d-none')
            $('#checkout').removeClass('d-none')

            // add animation to the seconds element
            secondsElement.addClass('animate-bounce');

            // based on time set in.tz user's computer time / OS
            currentTime = moment();
            // currentTime.tz("Etc/UTC");
            console.log("🚀 ~ startClock ~ currentTime:", currentTime)

            // Set the last time or initial time
            if (lastTime == "") {
                lastTime = moment();
                // lastTime.tz("Asia/Kolkata");
            }
            // console.log("🚀 ~ startClock ~ lastTime:", lastTime)

            // get duration between two times
            duration = moment.duration(currentTime.diff(lastTime));
            // duration += pastDuration;
            duration = moment.duration(duration + pastDuration, 'milliseconds');
            updateClock(duration);
            
            // Start the clock
            runClock = setInterval(function() {
                duration = moment.duration(duration + interval, 'milliseconds');
                updateClock(duration);
            }, interval);
        }

        function stopClock() {
            // Stop the clock
            clearInterval(runClock);

            $('#checkout').addClass('d-none')
            $('#checkin').removeClass('d-none')
            // add animation to the seconds element
            secondsElement.removeClass('animate-bounce');
        }

        // Logout
        $('#logout').click(function() {
            Cookies.remove('employee_api_token');
            Cookies.remove('employee_mobile_number');
            window.location.href = "{{ env('APP_URL') }}/employee";
        })
    })
  </script>
@endsection