<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <h4 class="page-title">Attendance:</h4>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="card-box table-responsive">
                    <h4 class="header-title m-t-0 m-b-30">
                        Day's Attendance
                    </h4>
                    <!--<img src="https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=day%3A1%2F2%2F2022&choe=UTF-8" title="Link to Google.com" />-->
                    <?php if($this->session->userdata('role')=='Super User' || $this->session->userdata('role')=='Admin' || $this->session->userdata('role')=='HR'){ ?>
                    <div class='row'>
                        <form method="post" action="<?php echo base_url();?>staff_controller/day_attendance">
                        <div class='col-md-4'>
                            <div class="form-group">
                                <label class='form-label' for='myDate'>Date:</label>
                                <input class='datepicker form-control' id='myDate' name='myDate' value='<?php if(null!==$mydate){echo $mydate;}?>'>                               
                            </div>                           
                        </div>
                        <div class="col-md-2">                            
                            <button class="btn btn-warning btn-sm m-t-30" type="submit">Run</button>  
                         </div>    
                        </form>
                    </div>
                    <?php } ?>
                    <div class='row'>
                        <div class='col-md-12'>
                            <table id="tblattendance" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th style="width:10%"></th>
                                        <th style="display:none">ID</th>
                                        <th style="width:30%">Staff </th>
                                        <th style="width:10%">Cell</th>
                                        <th style="width:25%">Time In</th>
                                        <th style="width:25%">Time Out</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($staff as $s) { ?>
                                        <tr>
                                            <?php $staff_image = file_exists($s['staff_image']) ? base_url().$s['staff_image'] : base_url().'assets/images/staff/' . "nu.png"; ?>
                                            <td><img class="img-circle thumb-lg img-thumbnail m-b-10" src="<?php echo $staff_image; ?>" alt="<?php echo $s['staff_fullname']; ?>"  /></td>
                                            <td style="display:none"><?php echo $s['id_staff']; ?></td>
                                            <td><?php echo $s['staff_fullname']; ?></td>
                                            <td><?php echo $s['staff_cell']; ?></td>
                                            <td><span id="stimein_<?php echo $s['id_staff'];?>"><?php
                                                if ($s['time_in'] !== "" && $s['time_in'] !== null) { ?>
                                                    <input id="<?php echo $s['id_staff']; ?>_time" class="time" style="border: none; background: transparent;" <?php if($this->session->userdata('role')!=='Super User' && $this->session->userdata('role')!=='Admin'){ echo 'readonly="readonly"';}?> value="<?php echo $s['time_in']; ?>">
                                                     <?php if($this->session->userdata('role')=='Super User' || $this->session->userdata('role')=='Admin' || $this->session->userdata('role')=='HR'){ ?>
                                                    <button class="btn btn-sm" onclick="updatetimein('<?php echo $s['id_staff']; ?>','<?php echo $s['id_staff_attendance']; ?>');">Update</button>
                                                     <?php } ?>
                                                <?php } else {
                                                    ?>
                                                    <button class="btn btn-pink " onClick="$(this).attr('disabled','diabled'); timein('<?php echo $s['id_staff'];?>');">Time In</button>
                                                <?php } ?></span>
                                            </td>
                                            <td><span id="stimeout_<?php echo $s['id_staff'];?>"><?php
                                            if ($s['time_out'] !== "" && $s['time_out'] !== null) {?>
                                               <input id="<?php echo $s['id_staff']; ?>_timeout" class="time" style="border: none; background: transparent;" <?php if($this->session->userdata('role')!=='Super User' && $this->session->userdata('role')!=='Admin'){ echo 'readonly="readonly"';}?> value="<?php echo $s['time_out']; ?>">
                                                     <?php if($this->session->userdata('role')=='Super User' || $this->session->userdata('role')=='Admin'){ ?>
                                                    <button class="btn btn-sm" onclick="updatetimeout('<?php echo $s['id_staff']; ?>','<?php echo $s['id_staff_attendance']; ?>');">Update</button>
                                                     <?php } ?>
                                            <?php } else if ($s['time_in'] !== "" && $s['time_in'] !== null) {
                                                ?>
                                                <button onClick="timeout('<?php echo $s['id_staff']; ?>','<?php echo $s['id_staff_attendance']; ?>')" class="btn btn-danger ">Time Out</button>
                                            <?php } ?>
                                                </span>
                                            </td>
                                            <td> <?php if($s['id_staff_attendance'] != ''){ ?>
                                                <button class="btn btn-sm btn-danger" onclick="confirm_removal(<?php echo $s['id_staff']; ?>, <?php echo $s['id_staff_attendance']; ?>);">x</button>
                                                <?php } ?>
                                            </td>
                                        </tr>
                                    <?php } ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div><!-- end col -->
        </div>
        <!-- end row -->

        <script>
            var startdate = '';
            var enddate = '';
            $(document).ready(function () {
                $("#myDate").datepicker({
                    autoclose: true,
                    todayHighlight: true,
                    format: 'yyyy-mm-dd'
                });
                
                $('.time').timepicker({
                        showMeridian: false                
                        ,showInputs: true});
                
                
                $('#tblattendance').DataTable({
                    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    stateSave: true,
                    <?php if(DOWNLOAD == true || $this->session->userdata('role') == 'Admin' || $this->session->userdata('role')=='Super User'){ ?>
                        dom: "Bfrtlip",
                        buttons: [{extend: "copy", className: "btn-sm btn-custom btn-trans"}, {extend: "csv", className: "btn-sm btn-pink btn-trans", footer: true}, {
                                extend: "excel",
                                className: "btn-sm btn-warning btn-trans"
                            }, {extend: "pdf", className: "btn-sm btn-purple btn-trans", footer: true}
                            , {extend: "print", className: "btn-sm btn-primary btn-trans", footer: true}],
                    <?php } else { ?>
                        dom: "frtlip",
                    <?php } ?>
                            responsive: 0,
                    order: []
                });
            });
            
        function timein(id_staff){
             var t = "#stimein_"+id_staff;
             $(t).html('');
             
             
             var mdate = $('#myDate').val();
             
             $.ajax({
                    type: 'POST',
                    url: '<?php echo base_url();?>staff_controller/timein',
                    data: {id: id_staff, mdate:mdate},
                    success: function(data) {
                        
                        var result = data.split("|");
                        if (result[0] === "success") {
                            toastr.success(data, 'Updated');
                            
                           $(t).html(result[1]);
                           
                            var to = "#stimeout_"+id_staff;
                            var btn= '<button onClick="timeout('+ id_staff +')" class="btn btn-danger ">Time Out</button>';
                            $(to).html(btn);
                        } 
                    }
                });
            
        }
        
        function timeout(id_staff, id_attendance){
            var t = "#stimeout_"+id_staff;
            
            var mdate = $('#myDate').val();
            
            $(t).html('');
             $.ajax({
                    type: 'POST',
                    url: '<?php echo base_url();?>staff_controller/timeout',
                    data: {id: id_staff, id_attendance: id_attendance, mdate:mdate},
                    success: function(data) {
                        var result = data.split("|");
                        if (result[0] === "success") {
                            toastr.success(data, 'Updated');
                            
                           $(t).html(result[1]);
                           
                        } 
                    }
                });
            
        }
         
         
         function updatetimein(id_staff, id_attendance){
             var t = id_staff+"_time";
             var mytime = $("#myDate").val()  + " " +$('#'+t).val();
             //console.log(mytime); return false;
             $(t).html('');
             $.ajax({
                    type: 'POST',
                    url: '<?php echo base_url();?>staff_controller/timein',
                    data: {id: id_staff, id_attendance: id_attendance, mydatetime: mytime},
                    success: function(data) {
                        
                        var result = data.split("|");
                        if (result[0] === "success") {
                            toastr.success(data, 'Updated');
                            
                           $('#'+t).val(result[1]);
                           
                           
                        } 
                    }
                });
            
        }
        
        function updatetimeout(id_staff, id_attendance){
            var t = id_staff+"_timeout";
            var mytime = $("#myDate").val()  + " " +$('#'+t).val();
            $(t).html('');
            $.ajax({
                type: 'POST',
                url: '<?php echo base_url();?>staff_controller/timeout',
                data: {id: id_staff, id_attendance: id_attendance, mydatetime: mytime},
                success: function(data) {
                    var result = data.split("|");
                    if (result[0] === "success") {
                        toastr.success(data, 'Updated');

                       $('#'+t).val(result[1]);

                    } 
                }
            });
        
        }
        function confirm_removal(id_staff, id_attendance){         
            swal({
                    title: 'This will remove the marked attendance record',
                    text: "Are you sure?",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ff5b5b !important',
                    cancelButtonColor: '#d33',
                    cancelButtonText: 'No',
                    confirmButtonText: 'Yes'
                    
                }, function(isConfirm) {          
                    if(isConfirm){
                        remove_attendance(id_staff, id_attendance);
                    }
                });
        }
        

        function remove_attendance(id_staff, id_attendance){

            $.ajax({
                type: 'POST',
                url: '<?php echo base_url();?>staff_controller/remove_attendance',
                data: {id_staff: id_staff, id_attendance: id_attendance},
                success: function(data) {
                    var result = data.split("|");
                    if (result[0] === "success") {
                        toastr.success(data, ' deleted');
                        location.reload();
                    } 
                }
            });


        }
        </script>
