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

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

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

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


<div class="modal-header">
    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
    <h4 id="myLargeModalLabel" class="modal-title">
        <?php echo e(__('menu.timeSlot')); ?>

    </h4>
</div>
<div class="modal-body">
    <div class="portlet-body form">

        <div class="tab-v1 margin-bottom-40">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#button-1"
                                      data-toggle="tab"> Project Attendance</a></li>
               
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade active in" id="button-1">
                    <div class="clearfix margin-bottom-10"></div>
                    
                    <!------------------------------ BEGIN FORM ----------------------------------------->
                    <?php echo Form::open(array('class'=>'sky-form','id'=>'single_leaves_form','method'=>'POST')); ?>

                    <input type="hidden" name="days_single" id="days_single" value="1">
                    <input type="hidden" name="leaveformType" id="leaveformType" value="single_leaves">

                    <div class="row">
                        <div class="col-md-4 form-group">
                            <div>
                                <label class="input">
                                    <i class="icon-append fa fa-calendar"></i>
                                    <input type="text" class="margin-bottom-10 from-control" name="date" id="start_date"
                                           placeholder="Start Date">
                                </label>
                            </div>
                        </div>
                       
                        <div class="col-lg-4 col-md-12">
                            <div class="input-icon input-icon-sm">
                                <input type="text" class="form-control timepicker clockout input-sm" id="clock_out52" name="clock_in" value="8:00 AM">
                            </div>
                        </div>
                       
                        <div class="col-lg-4 col-md-12">
                            <div class="input-icon input-icon-sm">
                                <input type="text" class="form-control timepicker clockout input-sm" id="clock_out52" name="clock_out" value="5:00 PM">
                            </div>
                        </div>
                       
                       
                    </div>
                    <div class="col-md-1"></div>
                    <div class="row">
                            <div class="col-lg-5" style="padding: 10px;">
                                <select id="project_id" class="select2me form-control" data-show-subtext="true" name="project">
                                    
                                        <option value="">test
                                                </option>
                                   

                                </select>
                            </div>
                            <div class="col-md-1"></div>
                            <div class="col-lg-5" style="padding: 10px;">
                                <select id="task_id" class="select2ta form-control" data-show-subtext="true" name="task">
                                                                     

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

                    <div class="form-group">
                       

                        <div class="col-md-12">
                            <textarea class="form-control" id="description" name="description"></textarea>
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div id="insertBefore"></div>

                    
                    <div class="row">
                        <div class="col-md-12">
                            <button type="submit" class="btn-u btn-u-sea"
                                    onclick="submitLeaves('single_leaves');return false;"><i
                                        class="fa fa-check"></i> <?php echo e(trans('core.btnSubmit')); ?></button>

                        </div>

                    </div>
                <?php echo Form::close(); ?>

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


    </div>
    <div class="alert alert-info">
        <strong><?php echo e(trans('messages.note')); ?>!</strong> <?php echo e(trans('messages.timeOverlap')); ?>

    </div>
</div>

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

<?php echo HTML::script("assets/global/plugins/typeahead/typeahead.bundle.min.js"); ?>

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

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



<?php echo HTML::script("assets/admin/pages/scripts/components-pickers.js"); ?>

<script>

    jQuery(document).ready(function ($) {
        "use strict";
        $('.contentHolder').perfectScrollbar();

        $('#start_date').datepicker({
            dateFormat: 'dd/mm/yy',
            prevText: '<i class="fa fa-angle-left"></i>',
            nextText: '<i class="fa fa-angle-right"></i>',
            minDate: 0,
            value: '01/04/2022',
            onSelect: function (selectedDate) {

            }
        });


        let d = new Date();
        let ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
        let mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(d);
        let da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
        
        $('#start_date').val((`${mo}/${da}/${ye}`));
     


        $('.timepicker').timepicker({
            autoclose: true,
            minuteStep: 5,
            disableMousewheel: true,
            disableFocus: true
        });

        var bindDatePicker = function (element) {
            $(element).timepicker({
                autoclose: true,
                minuteStep: 5,
                disableMousewheel: true,
                disableFocus: true
            });
        };

        $('#description').summernote({
            height: 300
        });


        $.fn.select2.defaults.set("theme", "bootstrap");
            

            $('.select2ta').select2({
                placeholder: "Select Task",
                width: '100%',
                allowClear: false
            });

            $.ajax({
            url: "timesheets_projects",
            type: 'GET',
            dataType: 'json', 
            success: function(data) {
                $('.select2me').select2({
                    placeholder: "Select Project",
                    width: '100%',
                    data: data,
                    allowClear: false
                });

                var project_id = $('#banks-select :selected').val();
            }
        });


    });

    $('#project_id').on('select2:select', function(e) {
        var data = e.params.data;

        var project_id = data.id;

        $('#task_id').empty();
        $.ajax({
            url: "timesheets_tasks?id=" + project_id,
            type: 'GET',
            dataType: 'json', 
            success: function(data) {
                $('.select2ta').select2({
                    placeholder: "Select Task",
                    width: '100%',
                    data: data,
                    allowClear: false
                });

            }
        });

    });



    $('input[type=checkbox]').uniform();
    $('#leave').datepicker({
            prevText: '<i class="fa fa-angle-left"></i>',
            nextText: '<i class="fa fa-angle-right"></i>',
            dateFormat: 'dd/mm/yy',
            minDate: 0

        }
    );
    $('.halfLeaveType').hide();
    var $insertBefore = $('#insertBefore');
    var $i = 0;

   

    function halfDayToggle(id, value) {
        if (value == 'half day') {
            $('#halfLeaveType' + id).show(100);
        } else {
            $('#halfLeaveType' + id).hide(100);
        }
    }

    function submitLeaves(type) {

        var container = $('#' + type + '_form');
        console.log(container , 'submit leave');
        
        $.easyAjax({
            type: 'POST',
            url: '<?php echo e(route('timesheets.store')); ?>',
            data: container.serialize(),
            container: container,
            success: function (response) {
                if (response.status === "success") {
                    // $('#applyLeave').modal('hide');
                    window.location.reload();
                }
            }
        });
    }




</script>
<?php /**PATH /home/dmwachinga/projects/hr/KodiHRM/resources/views/front/timesheet/create.blade.php ENDPATH**/ ?>