<style>
    
.dashboard-item{
/*box-shadow:0 0 2px #efcdf7;*/
width:100%;
}

</style>
<?php $host = gethostbyaddr($_SERVER["REMOTE_ADDR"]); ?>  
<div class="container-fluid bg-white mt-3 mb-3">
    <div class="row">
        <div class="col-sm-12 pt-3 pb-3">
            <!--<ul class="breadcrumb">-->
            <!--    <li class="breadcrumb-item">-->
            <!--        <a href="<?php echo base_url(); ?>Welcome">Home</a>-->
            <!--    </li>-->
            <!--    <li class="breadcrumb-item">Attendance</li>-->
            <!--</ul>-->
    
        <?php
        $eid=$this->session->userdata('tid');
        $date=date('Y-m-d');
        $check_day_status=$this->UserModel->check_day_attendance($date,$eid);
        if($check_day_status){
            foreach($check_day_status as $data1){    
        ?>
            <div class="dashboard-item">
                <div class="table-responsive">
                        <table class="table table-bordered" style="width:100%;">
                            <thead>
                                <tr>
                                    <th>Mark In</th>    
                                    <th>Mark Out</th>
                                </tr>    
                            </thead>
                            <tbody>
                                <tr>
                                    <td><?php echo date("h-i-sa", strtotime($data1['markInTime'])); ?></td>    
                                    <td>
                                        <?php 
                                        $markout_status=$data1['is_markout'];
                                        if($markout_status==0){
                                        ?>
                                        <input type="hidden" id="day_id" value="<?php echo $data1['id'];?>">
                                        <button class="btn btn-warning btn-sm text-white font-weight-bold" id="markout">Mark Out</button>
                                        <?php 
                                        }else{
                                            echo date("h-i-sa", strtotime($data1['markOutTime']));
                                        }
                                        ?>
                                    </td>
                                </tr>    
                            </tbody>    
                        </table>    
                    </div>    
                </div>  
        <?php
            }
        }else{
        ?>    
            <a href="<?php echo base_url();?>Staff/new_day_start" class="btn btn-success btn-lg btn-block">Start Day</a>       
        <?php 
        }
        ?>    
  
        </div>    
    </div>
</div>
<script>
$(document).ready(function(){
    $(document).on("click","#markout",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= $("#day_id").val()
            var table = 'staff_attendence';
            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/mark_out',
                    type: 'POST',
                    data: {ip:ip,latd:latd,lotd:lotd,table:table,activity_id:activity_id},
                    success: function(data){
                        location.reload(); 
                    }
                });
            }
        }
    });    
}); 
</script>