@include('includes/header')

<!-- /////////////////////////////////// MAIN CONTENT /////////////////////////////////////////-->

@include('includes/sidebar')

<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <section id="minimal-statistics">
                <div class="row">
                    <div class="col-12 mb-1">
                        <h1 class="text-uppercase">Card View</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-content collpase show mt-1">
                                <div class="card-body">
                                    <form class="form">
                                        <div class="form-body">
                                            <div class="row justify-content-center align-items-center">
                                                <div class="btn-group" role="group" aria-label="Basic example">
                                                    <button type="button" class="btn btn-outline-primary">All <span class="badge badge-primary" name="all" id="allcount">0</span></button>
                                                    <button type="button" class="btn btn-outline-primary">On Duty <span class="badge badge-success" name="all" id="onlinecount">0</span></button>
                                                    <button type="button" class="btn btn-outline-primary">off Duty <span class="badge badge-danger" name="all" id="offdutycount">0</span></button>
                                                    <button type="button" class="btn btn-outline-primary">Inactive <span class="badge badge-warning" name="all" id="inactivecount">{{$inactive}}</span></button>
                                                    <input type="hidden" id="inactive_count" value="{{$inactive}}">

                                                    <!-- <button type="button" class="btn btn-outline-primary">Not Working <span class="badge badge-info" name="all" id="notworking">0</span></button> -->

                                                    <!-- <div class="form-check form-switch ml-3">
                                                        <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" checked>
                                                        <label class="form-check-label" for="autoRefreshSwitch">Auto Refresh</label>
                                                    </div> -->
                                                    
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </section>

            <section id="social-cards">
                <div class="card p-2">
                    {{-- <h2>Service</h2> --}}
                    <div class="card-header">
                        <a class="heading-elements-toggle"><i class="ft-ellipsis-h font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                {{-- <li><a data-action="collapse"><i class="ft-minus"></i></a></li> --}}
                                <!-- <li><a data-action="reload" onclick="reloadcards()"><i class="ft-rotate-cw"></i></a></li> -->
                                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            </ul>
                        </div>
                    </div>  
                    
                    <div class="row card_data">

                    </div>
                    
              
                    
                </div>

            </section>
        </div>
    </div>
</div>

<!-- /////////////////////////////////// MAIN CONTENT /////////////////////////////////////////-->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>

    // var base_url = 'https://getmeacard.com/hrms/public/';
    var base_url = "{{ env('BASE_URL') }}";
    var x;
    // $(document).ready(function () {
    //     countTimeStart();
    //     $("#autoRefreshSwitch").change(function (val) {
    //         if ($('#autoRefreshSwitch').is(':checked')) {                
    //             countTimeStart();

    //         } else {
    //             countTimeStop();
    //         }
    //     });
    // });

    // function reloadcards(){
    //     getData();
    // }

    function getData(){

        $.ajax({
            url: base_url+'card_view',
            type: 'GET',
            success: function(response){
                console.log(base_url);
                if(response.status){
                    var onlineCount = 0;
                    var offlineCount = 0;
                    var inactiveCount = 0;
                    var offDutyCount = 0;
                    console.log(response, 'response');
                    var inactive_count = document.getElementById('inactive_count').value;
                    
                    
                    for( let i=0; i < response.data.length; i++ ){

                        var user = response.data[i];
                        if(user.isOnline){
                            onlineCount++;
                        }else{

                            if(user.attendanceInAt.length !== 0 && user.attendanceOutAt.length === 0) {
                                inactiveCount++;
                            }
                            else if( user.attendanceOutAt.length === 0 && user.attendanceInAt.length === 0 ){
                                offDutyCount++;
                            }
                            else{
                                offlineCount++;
                            }
                        }
 
                        $('#onlinecount').text(onlineCount);
                        $('#offlinecount').text(offlineCount);
                        // $('#inactivecount').text(inactiveCount);
                        $('#offdutycount').text(offDutyCount - inactive_count );
                        $('#allcount').text(onlineCount + offlineCount + offDutyCount + inactiveCount);

                        console.log(response.data[i].latitude);
                        html = ' <div class="col-xl-4 col-md-8 col-12"> '+
                            '<div class="card profile-card-with-cover">';
                        if(response.data[i].isOnline){
                            html += '<div class="ribbon"><span> Online </span></div>';
                        }else{
                            html += '<div class="ribbon offline"><span> Offline </span></div>';
                        }

                        html += '<div class="card-content shadow-lg h-100">'+
                                    '<div class="card-img-top img-fluid bg-cover height-50 bg-dark"  >'+
                                        // response.data[$i].attendanceInAt
                                        '<div class="row align-items-center">'+
                                            '<div id="60UpdatedAt" class="text-light ml-2 mt-1"> ' + response.data[i].updateAt + ' </div>';                    

                        if(response.data[i].isOnline){
                        html += '<div class="d-flex justify-content-center align-items-center col mr-3">';
                        
                        if(response.data[i].batteryLevel > 90){
                            html +='<div id=""><div class=""><i class="fa fa-battery-full text-light"> '+response.data[i].batteryLevel+' %</i></div></div>';
                        }else if( response.data[i].batteryLevel >= 70 ){
                            html +='<div id=""><div class=""><i class="fa fa-battery-three-quarters text-light"> '+response.data[i].batteryLevel+'%</i></div></div>';
                        }else if( response.data[i].batteryLevel >= 40 ){
                            html +='<div id=""><div class=""><i class="fa fa-battery-half text-light"> '+response.data[i].batteryLevel+'%</i></div></div>';
                        }else if( response.data[i].batteryLevel >= 10 ){
                            html +='<div id=""><div class=""><i class="fa fa-battery-half text-light"> '+response.data[i].batteryLevel+'%</i></div></div>';                            
                        }else{
                            html +='<div id=""><div class=""><i class="fa fa-battery-empty text-light"> '+response.data[i].batteryLevel+'%</i></div></div>';
                        }

                        if( response.data[i].isGpsOn ){
                            html += '<div id=""><i class="fa fa-location-arrow p-1 text-light"></i></div>';
                        }else{
                            html += '<div id=""><i class="fa fa-location-arrow p-1 text-danger"></i></div>';
                        }

                        if( response.data[i].isWifiOn ){
                            html += '<div id="60IsWifiOn"><i class="fa fa-wifi text-light"></i></div>';
                        }else{
                            html += '<div id=""><i class="fa fa-wifi text-danger"></i></div>';
                        }

                        }
                        html += '</div>';

                        html += '</div>'+
                                    '<div class="card-profile-image">'+
                                        '<img src="'+ response.data[i].profile +'" class="rounded-circle img-border box-shadow-1" alt="Card image">'+
                                    '</div>'+
                                    '<div class="profile-card-with-cover-content text-center">'+
                                        '<div class="profile-details mt-1">'+
                                            '<h4 class="card-title"> <a href="'+base_url+'employee/'+ response.data[i].id +'/view"> '+ response.data[i].name +' </a></h4>'+
                                            '<ul class="list-inline clearfix card-view-ul d-flex flex-column">';
                        if( response.data[i].attendanceInAt.length === 0 && response.data[i].attendanceOutAt.length === 0  ){
                            html += '<li class=""> <i class="fa fa-window-close"></i> Not Checked In</li> ';
                        }
                        if( response.data[i].attendanceInAt.length !== 0 ){
                            html += '<li class="">  <b class=""><i class="fa fa-sign-in"> </i> AttendanceIn:</b> '+ response.data[i].attendanceInAt +' </li> ';
                        }
                        if( response.data[i].attendanceOutAt.length !== 0 ){
                            html += '<li class=""> <b class=""><i class="fa fa-sign-out"> </i> AttendanceOut:</b> '+ response.data[i].attendanceOutAt +' </li> ';
                        }
                        // html += '<li class=""> <i class="fa fa-window-close"></i> Not Checked In</li> ';

                        html += '</ul>'+
                                        '</div>'+
                                        '<div class="card-body button">'+
                                        '<a class="btn btn-dark text-white" href="https://getmeacard.com/hrms/public/visit?emp=' + response.data[i].id + '&date=' + new Date().toISOString().split('T')[0] + '"><i class="fa fa-eye"></i> Visits</a>'+
                                    '</div>'+
                                         '</div> </div> </div> </div>  ';
                        $('.card_data').append(html );
                    }

                }else{
                    console.log('error');
                }

            }
        });

    }

    getData();

    // function countTimeStart() {
    //     x = setInterval(function () {
    //         console.log("Timer called")
    //         getData();
    //     }, 2000);
    // }

    function countTimeStop() {
        if (x != undefined) {
            clearInterval(x);
        }
    }

</script>

@include('includes/footer')