<style>
#check-in-sec{
box-shadow:0 0 2px #64336F;vertical-align:middle !important;    
} 
.checkout-div{box-shadow:0 0 2px #64336F;}
.checkout-div p {font-weight:600;color:#FFC107;text-transform:uppercase;}
h5{color:#FFC107;font-weight:600; font-size:18px;border-bottom:1px dotted #FFC107;}
</style>
<div class="container-fluid bg-white mt-3 mb-3">
    <div class="row">
        <div class="col-sm-12 pt-3 pb-3">
            <p id="demo"></p>
            <?php $host = gethostbyaddr($_SERVER["REMOTE_ADDR"]); ?>  
            <?php
            $eid=$this->session->userdata('tid');
            $date=date('Y-m-d');
            $check_active_checkin=$this->UserModel->check_active_checkin($eid,$date);
            if($check_active_checkin){
                foreach($check_active_checkin as $check_in_data){
            ?>
            <div class="checkout-div">
                <table class="table table-bordered">
                    <tr>
                        <th>Check In</th>
                        <th>Check Out</th>
                    </tr>
                    <tr>
                        <td><?php echo $check_in_data['place']; ?> : <?php echo date('h-i-sa',strtotime($check_in_data['checkin_time'])); ?></td>
                        <td>
                            <input type="hidden" id="activity" value="<?php echo $check_in_data['id'];?>">
                            <button type="button" id="check_out" class="btn btn-primary btn-sm">Checkout</button>
                        </td>
                    </tr>
                </table>
            </div>
            <?php
                } 
            }else{
            ?>
            <div id="check-in-sec" >
                <form method="post" action="#" class="p-3 mb-3">
                    <?php $host = gethostbyaddr($_SERVER["REMOTE_ADDR"]); ?>    
                    <h5>New Check  In</h5>
                    <div class="input-group mb-2 mr-sm-2">
                        <div class="input-group-prepend">
                            <div class="input-group-text">Place</div>
                        </div>
                        <input type="text" class="form-control" id="place" placeholder="Place" >
                    </div>
  
                    <div class="input-group mb-2 mr-sm-2">
                        <div class="input-group-prepend">
                            <div class="input-group-text">Note</div>
                        </div>
                        <input type="text" class="form-control" id="note" placeholder="Note">
                    </div>  
                    <button type="button" class="btn btn-sm btn-primary mb-2" id="check_in">Check In</button>

                </form>    
            </div>

            <?php

            }
            ?>    
        </div>    
    </div>
</div>

<script>
$(document).ready(function(){
    $(document).on("click","#check_in",function(){
        if (navigator.geolocation) {
            var x = document.getElementById("demo");        
            navigator.geolocation.getCurrentPosition(showPosition);
        }else{ 
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
        function showPosition(position){
            var latd;
            var lotd;
            var place='';
            var note;
            place=$("#place").val()
            note= $("#note").val()
            var table = 'activities';
            latd=position.coords.latitude;
            lotd=position.coords.longitude;
            var ip='<?php echo $host; ?>';
            if(place==''){
                alert("Add check in place");
            }else{
                $.ajax({
                    url: '<?php echo base_url(); ?>Staff/check_in',
                    type: 'POST',
                    data: {place:place,note:note,ip:ip,latd:latd,lotd:lotd,table:table},
                    success: function(data){
                        location.reload(); 
                    }
                });
            }
        }
    });
    $(document).on("click","#check_out",function(){
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }else{ 
            alert("Geolocation is not supported by this browser.");
        }
        function showPosition(position){
            var latd;
            var lotd;
            var activity_id;
            activity_id= $("#activity").val()
            var table = 'activities';
            latd=position.coords.latitude;
            lotd=position.coords.longitude;
            var ip='<?php echo $host; ?>';
            if(latd==''){
                alert("Enable your Geolocation");
            }else{
                $.ajax({
                    url: '<?php echo base_url(); ?>Staff/check_out',
                    type: 'POST',
                    data: {ip:ip,latd:latd,lotd:lotd,table:table,activity_id:activity_id},
                    success: function(data){
                        location.reload(); 
                    }
                });
            }
        }
    });
});
</script>