<?php $__env->startSection('head'); ?>
    <?php echo HTML::style("assets/global/css/plugins.css"); ?>

    <?php echo HTML::style("assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css"); ?>

    <?php echo HTML::style("assets/global/plugins/select2/css/select2.css"); ?>

    <?php echo HTML::style("assets/global/plugins/select2/css/select2-bootstrap.min.css"); ?>

    <?php echo HTML::style("assets/global/plugins/jquery-multi-select/css/multi-select.css"); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('mainarea'); ?>
    <div class="col-md-9">
        <!--Profile Body-->
        <div class="profile-body">
            
            <div class="row">
                <div class="col-lg-12">
                    <div id="outer_msg"></div>
                    <div class="panel ">
                        <div class="panel-heading service-block-u">
                            <div class="row">
                                <div class="col-sm-6"><h3 class="panel-title"><i class="fa fa-clock-o"></i><?php echo e(trans('core.attendance')); ?> <?php echo app('translator')->get('core.summary'); ?>
                            </h3></div><div class="col-sm-6" style="text-align: right;"><button class="btn btn-success" onclick="timesheetModal();return false;">Timesheet Record</button></div>
                            </div>
                            
                            
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <form class="sky-form">
                                    <fieldset class="no-padding-fieldset">
                                        <div class="row">
                                            <section class="col col-6">
                                                <label class="control-label"><?php echo app('translator')->get('core.from'); ?></label>
                                                <div class="input">
                                                    <i class="icon-append fa fa-calendar"></i>
                                                    <input type="text" name="from_date" id="from_date"
                                                           placeholder="<?php echo e(trans('core.startDate')); ?>">
                                                </div>
                                            </section>
                                            <section class="col col-6">
                                                <label class="control-label"><?php echo app('translator')->get('core.to'); ?></label>
                                                <div class="input">
                                                    <i class="icon-append fa fa-calendar"></i>
                                                    <input type="text" name="to_date" id="to_date"
                                                           placeholder="<?php echo e(trans('core.endDate')); ?>">
                                                </div>
                                            </section>
                                        </div>
                                    </fieldset>
                                </form>
                            </div>

                            <table class="table table-striped table-bordered table-hover" id="attendance_table">
                                <thead>
                                <tr>
                                    <th> <?php echo e(trans('core.serialNo')); ?> </th>

                                    <th class="all"> <?php echo e(trans('core.date')); ?> </th>
                                    <th class="all"> <?php echo e(trans('core.status')); ?> </th>
                                    <th class="min-tablet-l"> <?php echo e(trans('core.progress')); ?> </th>
                                    <th class="min-tablet-l"> Description </th>
                                    <th> <?php echo app('translator')->get('core.hours'); ?></th>

                                </tr>
                                </thead>
                                <tbody>


                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>

                                </tr>


                                </tbody>
                            </table>

                        </div>
                        <!--End Profile Post-->
                    </div><!--/end row-->
                    <!--End Profile Body-->
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade apply_modal in" id="createTimesheet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">


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

<?php $__env->stopSection(); ?>

<?php $__env->startSection('footerjs'); ?>
    <?php echo HTML::script("assets/global/plugins/datatables/datatables.min.js"); ?>

    <?php echo HTML::script("assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js"); ?>

    <?php echo HTML::script("assets/global/plugins/datatables/plugins/responsive/dataTables.responsive.min.js"); ?>

    <?php echo HTML::script("assets/js/moment-timezone.js"); ?>

    <?php echo HTML::script('assets/global/plugins/select2/js/select2.min.js'); ?>

    <?php echo HTML::script('assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js'); ?>


    <script>
        $('#clock_out').prop('disabled', true);
                <?php if(isset($clock_in_time)): ?>
        var clock_in_word = moment('<?php echo e($clock_in_time->timezone($timezones[$setting->timezone])->format("Y-m-d H:i:s")); ?>');
                <?php else: ?>
        var clock_in_word = null;
                <?php endif; ?>

                <?php if(isset($clock_out_time)): ?>
        var clock_out_word = moment('<?php echo e($clock_out_time->timezone($timezones[$setting->timezone])->format("Y-m-d H:i:s")); ?>');
                <?php else: ?>
        var clock_out_word = null;
                <?php endif; ?>
        var url = "<?php echo e(URL::route("front.timesheet.ajax_timesheet")); ?>";
        var clock_flag = '<?php echo e($clock_set ?? ''); ?>';

        var momentTime = moment();




        
        
        function checkTime(i) {
            if (i < 10) {
                i = "0", + i
            }
            // add zero in front of numbers < 10
            return i;
        }

        $("#work_form").blur(function () {
            var work_from = $(this).val();

            $.ajax({
                type: "POST",
                url: "<?php echo route('front.attendance.work_from'); ?>",
                data: {'work_from': work_from}
            }).done(function (response) {
                return true;
            });
        });

        $("#notes").blur(function () {
            var notes = $(this).val();
            $.ajax({
                type: "POST",
                url: "<?php echo route('front.attendance.notes'); ?>",
                data: {'notes': notes}
            }).done(function (response) {
                return true;
            });
        });

        $('#from_date').on('change', function () {
            date_change();
        });
        $('#to_date').on('change', function () {
            date_change();
        });

        function setClock() {
            $.easyAjax({
                type: "POST",
                url: "<?php echo route('front.attendance.clockIn'); ?>",
                data: $('.sky-form').serialize(),
                messagePosition: 'inline',
                container: "#clock_panel",
                success: function (response) {

                    if (response.status === "success") {
                        clock_flag = 1;
                        clock_in_word = moment(response.time_date);
                        table.fnDraw();
                        $('#clock_set_div').html('<span class="clock-time"><strong><?php echo e(__('core.clockIn')); ?></strong>: ' + response.time + '<br></span><p class="text-center"><small id="setClockInWords">' + response.timeDiff + '</small></p>');
                        setTimeout(function () {
                            $('#alert').html('');
                        }, 5000);
                    }
                }
            });
            return false;
        }

        var table = $('#attendance_table').dataTable({
            processing: true,
            serverSide: true,
            "ajax": url ,
            "aaSorting": [[0, "asc"]],
            columns: [
                {data: 's_id', name: 's_id'},
                {data: 'date', name: 'date'},
                {data: 'status', name: 'status'},

                {data: 'clock_out', name: 'clock_out'},
                {data: 'description', name: 'description'},
                {data: 'Hours', name: 'Hours'},
            ],
            "sPaginationType": "full_numbers",
            "language": {
                "lengthMenu": "Display _MENU_ records per page",
                "info": "Showing page _PAGE_ of _PAGES_",
                "emptyTable": "<?php echo e(trans('messages.noDataTable')); ?>",
                "infoFiltered": "(filtered from _MAX_ total records)",
                "search": "<?php echo e(trans('core.search')); ?>:"
            },
            "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                var oSettings = this.fnSettings();
                $("td:first", nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1);
                return nRow;
            }
        });



        function unsetClock() {
            $.easyAjax({
                type: "POST",
                url: "<?php echo route('front.attendance.clockOut'); ?>",
                messagePosition: 'inline',
                container: "#clock_panel",
                success: function (response) {

                    if (response.status == 'success') {
                        table.fnDraw();
                        clock_out_word = moment(response.unset_time);

                        $('#clock_unset_div').html('<span class="clock-time"><strong><?php echo e(__('core.clockOut')); ?></strong>: ' + response.unset_time + '<br></span><p class="text-center"><small id="unSetClockInWords">' + response.unset_time_diff + '</small></p>');
                        setTimeout(function () {
                            $('#alert').html('');
                        }, 5000);
                    } else {
                        setTimeout(function () {
                            $('#alert').html('');
                        }, 5000);
                    }
                }
            });
            return false;
        }

        function date_change() {

            var from_date = $('#from_date').val();
            var to_date = $('#to_date').val();
            url = "<?php echo e(URL::route('front.attendance.ajax_attendance')); ?>?from_date=" + from_date + "&to_date=" + to_date;
            table.fnDraw();
        }

        function timeInWords(clock_in, clock_out) {
            if (clock_in != null) {
                $('#setClockInWords').html(clock_in.fromNow());
            } else {
                $('#setClockInWords').html('');
            }

            if (clock_out != null) {
                $('#unSetClockInWords').html(clock_out.fromNow());
            } else {
                $('#unSetClockInWords').html('');
            }
            setTimeout(timeInWords, 1000, clock_in_word, clock_out_word);
        }

        jQuery(document).ready(function () {
            startTime();
            timeInWords(clock_in_word, clock_out_word);
            table.fnDraw();
            $('#from_date').datepicker({
                dateFormat: 'dd-mm-yy',
                prevText: '<i class="fa fa-angle-left"></i>',
                nextText: '<i class="fa fa-angle-right"></i>'
            });
            $('#to_date').datepicker({
                dateFormat: 'dd-mm-yy',
                prevText: '<i class="fa fa-angle-left"></i>',
                nextText: '<i class="fa fa-angle-right"></i>'
            });
        });


        function timesheetModal() {
        $.ajaxModal('#createTimesheet', '<?php echo e(route('timesheets.create')); ?>');
    }


    
        function startTime() {
            $('#current_time').val(moment().tz('<?php echo e($timezones[$setting->timezone]); ?>').format('hh:mm:ss A'));
            if (clock_flag == '1') {
                $('#clock_out').prop('disabled', false);
            }
            setTimeout(startTime, 1000);
        }

    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('front.layouts.frontlayout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/kodiinit/hrm.kodiinitiative.org/resources/views/front/timesheet/index.blade.php ENDPATH**/ ?>