@extends('portal.layout.app')
<link rel="stylesheet" href="{{ URL::asset('assets/css/global.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/input.css') }}">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" />
@section('content')
<style>
    .margin-top-two{
        margin-top: -3px;
    }
    .title_text{
        color: #343434;
        font-weight: 700px !important;
        font-size: 13px;
        font: Roboto, sans-serif !important;
        margin-top: -6px;
    }
   .notification_custom {
      bottom: 6% !important;
      margin-top: 0px !important;
      margin-right: auto !important;
      margin-left: auto !important;
   }
   .mr_two {
        margin-right:-2px !important;
    }
    .zebra, td, tr, th {
        padding: 0;
        margin: 0;
        border-collapse: collapse;
        text-align: left;
    }
    .zebra {
        width: 100%;
        background: #fff;
        border: 0;
    }
    .zebra tbody td {
        padding: 5px 7px;
    }
    .zebra tbody td {
        /*border: 1px solid #e6e6e6;*/
        white-space: nowrap;
        line-height: 1.6em;
        transition: 0.3s;
    }
    td {
        margin: 0;
        border-collapse: collapse;
        text-align: left;
    }
    .zebra tbody td input {
        /*background: url('/assets/images/backgrounds/input-back.gif') repeat-x left top;*/
        border: 1px solid #dcdcdc;
        outline: 0;
        font: 12px/1.2em Arial;
        height: 33px;
    }
    #button-list, .button-list {
        list-style: none;
        display: inline-block;
        width: 100%;
        margin-top: 13px;
        text-align: right;
    }
    #dialog {
        display: none;
    }
    .gray {
        color: #666666;
    }
    h1, h2 {
        font: 12px Arial, Tahoma, Verdana;
        font-weight: 600;
    }
    #wrapper {
        min-height: 93.6%;
        padding-bottom: 0px;
        position: relative;
        width: 1280px;
        /*background: #FFFFFF url('/assets/images/backgrounds/header_bgtile.gif') top repeat-x;*/
        margin: 0 auto;
        padding: 0px;
        text-align: left;
        display: inline-block;
    }
    #footer .content {
        height: auto;
        background: none;
        text-indent: 15px;
        padding-top: 7px;
        color: #FFF;
        text-decoration: none;
    }
    #wrapper #container {
        position: relative;
        padding: 12px 2px 20px 7px;
    }
    h1:first-child {
        margin: -3px 0 0;
    }
    h1{
        font: 12px Arial, Tahoma, Verdana;
        color: #0096dc;
        font-weight: 600;
        margin-bottom: 5px !important;
        padding: 0px 0 5px 7px;
    }
    #wrapper #container .section {
        float: left;
        background: #FFFFFF;
        width: 100%;
    }
    #wrapper #container.login .box, #wrapper #container .section .box {
        display: block;
        margin: 0 5px 10px 5px;
        zoom: 1;
        background: white;
        border: 1px solid #e7e7e7;
        border-spacing: 0;
        -webkit-border-radius: 4px 4px 0 0;
    }
    #wrapper #container .section .box .title {
        display: block;
        position: relative;
        background: url('/assets/images/backgrounds/box-title.gif') repeat-x left top;
        padding: 6px 10px 0;
        font: 13px Roboto, sans-serif;
        color: #343434;
        height: 30px;
        font-weight: 700;
    }
    #wrapper #container .section .box {
        border-spacing: 0;
    }
    #wrapper{
        text-align: left;
    }
    #wrapper #container .section .box .content {
        display: block;
        padding: 5px 5px 0px 5px;
        padding-right: 15px;
        padding-left: 15px;
    }
.content{
    width: 1176px;
    margin-top: 5px !important;
}
    #wrapper #container .section .box .footer {
        display: block;
        position: relative;
        background: #e6e6e6;
        padding: 6px 10px 4px;
        font: 11px Roboto, sans-serif;
        color: #343434;
        height: 27px;
    }
    #wrapper #container .section .box .footer #button-list {
        margin-top: 1px;
        text-align: right;
        width: 100% !important;
    }
    #button-list, .button-list {
        list-style: none;
        display: inline-block;
    }
    #button-list a{
        position: relative;
        padding: 2px 6px 2px 6px;
        border: 1px solid #e6e6e6;
        background: #fcfcfc url('/assets/images/backgrounds/btn_bgtile.gif') repeat-x;
        font: 11px Roboto, sans-serif;
        color: #3080EA;
        margin: 5px 0 5px 2px;
        text-decoration: none;
        border-radius: 4px;
    }
    #wrapper #container .section .box .footer #button-list{
        text-align: right;
    }
    input.file {
        margin: 2px;
    }
    #upload-file {
        width: 95.9%;
    }
    .file-btn {
        background: url('../assets/images/backgrounds/Attachment.svg') no-repeat left top !important;
        text-align: right;
        background-size: cover !important;
        width: 17px;
        height: 17px;
        background-position: right center;
        display: inline-block;
        margin-bottom: -6px;
        overflow: hidden;
        cursor: pointer;
        margin-left: -28px;
    }
    .file-input {
        cursor: pointer;
        opacity: 0;
        margin-left: -179px;
    }
    .datepicker {
        /*left: 40% !important;*/
        position: absolute !important;
        z-index: 9999;
    }
    .datepicker_size {
        padding: 9px 10px;
    }
    ::placeholder {
      color: #8D8D8D !important;
    }
    .bootstrap-timepicker-widget table td input {
        width: 35px;
    }
    .bootstrap-timepicker-widget.dropdown-menu {
        min-width: 160px;
        height: 108px;
    }
    html, body{
        font-size: 12px !important;
    }
    .margin_left_twentyeight {
        margin-left: 0px;
    }
    .correction_tbl input {
        width: 230px;
    }
    .modal-content {
        width: 596px !important;
        margin-left: 102px !important
    }
    .search_btn {
        margin-left: unset;
        border-radius: 3px;
    }
    .modal-header {
        height: 29px !important;
    }
    .mb-12 {
        margin-bottom: 1.5rem;
    }

    .abc{
        width: 1250px !important;
    }
    .inner_box{
        width: 1188px;
        margin-left: -10px !important;
    }
    .margin_left_thirtysix{
        margin-left: 36px !important;
    }
    .margin_left_thirtyfive{
        margin-left: 35px !important;
    }
    .margin_top_fifteen {
        margin-top: 15px;
        margin-bottom: 8px;
    }
    .margin_top_eleven {
        margin-top: 10px;
    }
    .section {
        width: 1220px !important;
        margin-left: 8px;
        background: transparent !important;
    }
    .title{
        background: transparent linear-gradient(180deg, #F7F7F7 0%, #D6D6D6 100%) 0% 0% no-repeat padding-box !important;
        opacity: 1 !important;
        height: 28px !important;
    }
    .inner_box_title{
        background: #EDEDED 0% 0% no-repeat padding-box !important;
    }
    .glyphicon
    {
        font-size: 10px;
    }
</style>
<div class="breadcrum">
    HR Services / Attendance & Leave / <span class="text-primary">Attendance</span>
</div>
<div id="container">
    <div class="section">
        <div>
            <div class="box">
                <div class="title">
                    Attendance
                </div>
                <div class="content">
            <div class="box inner_box">
                <div class="title inner_box_title">
                    Attendance Correction
                </div>
                <div class="content">
                    <form>
                        @csrf    
                        <div class="row col-md-12">
                            <div style="display:flex;">
                                    <div class="material-textfield margin_top_eleven">
                                        <input placeholder=" " type="text" name="employee-code" id="employee-code">
                                        <label>Employee Code</label>
                                    </div>
                                    <div class="material-textfield margin_top_eleven margin_left_thirtyfive">
                                        <input placeholder=" " type="text" name="attendance_dateTimeIn" id="attendance_dateTimeIn">
                                        <label>Time In Date</label>
                                    </div>
                                    <div class="material-textfield margin_top_eleven margin_left_thirtysix">
                                        <input class="timepicker" placeholder=" " type="text" name="time-in" id="time-in">
                                        <label>Time In</label>
                                        <input type="hidden" name="timeInId">
                                    </div>
                                    <div class="material-textfield margin_top_eleven margin_left_thirtyfive">
                                        <input placeholder=" " type="text" name="attendance_dateTimeOut" id="attendance_dateTimeOut">
                                        <label>Time Out Date</label>
                                    </div>
                                </div>
                                    <div class="material-textfield margin_top_fifteen">
                                        <input class="timepicker" placeholder=" " type="text" name="time-out" id="time-out">
                                        <label>Time Out</label>
                                        <input type="hidden" name="timeOutId">
                                    </div>
                                </div>
                        </table>
                    </form>
                </div>
                <div class="footer">
                    <p style="margin-top: 2px;margin-bottom: -0.6rem;"><span style="color:#E84F2D"> <b style="font-size: 12px;">Note:</b> </span> Please make sure date format is (MM-DD-YYYY)</p>
                    <div id="button-list" style="margin-top:-6px;">
                        <a href="javascript;" class="search_btn mr_two" id="save-attendnce-data">Submit</a>
                    </div>
                </div>
            </div>

            <div class="box inner_box">
                <div class="title inner_box_title">
                    Upload
                </div>
                <div class="content">
                    <form id="attendance-upload-form" action="{{ config('app.BASE_URL').'attendance_utility/correction' }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="comments" id="comments" value="" />
                        <table id="" class="zebra" style="font-size: small;">
                            <tbody>
                                <tr>
                                    <td style="width: 68px;"><b style="color: #343434;">Select File</b></td>
                                    <td style="width: 400px;">
                                        <input class="file" id="upload-file" style="display: inline;" readonly>
                                        <div class="file-btn" style="width: 17px; height: 17px; background-position: right center; display: inline-block; margin-bottom: -4px; overflow: hidden; cursor: pointer;">
                                            <input type="file" name="file" id="file" style="position: relative; height: 21px; width: 200px; display: inline; margin-bottom: -6px; cursor: pointer; opacity: 0; margin-left: -179px;">
                                        </div>
                                    </td>
                                    <td style="text-align: left;">
                                        <strong>
                                            <a href="{{ URL::asset('assets/templates/People_Attendance_Upload_Template.xlsx') }}">Download Template</a>
                                        </strong>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="footer">
                    <div id="button-list">
                        <a href="javascript;" class="search_btn mr_two" id="attendance-upload-btn">Submit</a>
                    </div>
                </div>
            </div>
                </div>
                <div class="footer">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Reason model start -->
<div class="modal fade" id="reasonModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelreasonModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content modal_content" style="width: 500px !important;">
          <div class="modal-header">
            <span class="title_text" id="myModalLabelreasonModal"><b>Please Provide Reason</b></span>
            <a class="close close_btn" data-dismiss="modal" aria-label="Close" style="margin-top: -20px !important;">
              <span class="test" aria-hidden="true" style="padding-top: 10px !important;">&times;</span>
            </a>
          </div>
            <form>
                @csrf
                <input type="hidden" id="submit_type">
                <div class="modal-body modal_body" style="width: 500px !important">
                    <div class="col-md-12 display_item_flex">
                        <div id="messageBox" style="color: red;display: none;">Please enter the reason.</div>
                    </div>
                    <div class="row mb-12">
                        <div class="input_div display_item_flex">
                            <div class="material-textfield margin_left_twentythree margin-top-two">
                                <input placeholder=" " type="text" name="reason" id="reason" style="width:458px;">
                                <label>Reason</label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-12">
                        <div class="input_div display_item_flex">
                            <div class="material-textfield margin_left_twentythree margin-top-two" style="margin-top:-13px; margin-bottom:-2px;">
                                <input placeholder=" " type="text" name="evidence" id="evidence" readonly style="width:458px;">
                                <label>Evidence</label>
                            </div>
                            <div class="file-btn" style="position: absolute; float: right;margin-left: 457px; margin-top: -8px;">
                                <input type="file" class="file-input" name="attachment" id="attachment" form="attendance-upload-form">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer py-2" style="border-top: 0 none; padding-bottom: 0px !important;">
                <div class="disbursement_modal_footer">
                    <div class="footr float-right">
                        <button id="submit_request" class="search_btn" style="margin-right: 3px; margin-top: 5px;">Submit</button>
                        <button class="search_btn" onclick="closePopUp()" style="margin-right: 10px; margin-top: 5px;">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- model end -->
@section('scripts')
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/calendar.js') }}"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> -->
<script type="text/javascript">
     var response_message = "";
    if(response_message) {
        var response_type = null;
        if(response_type =="failure") {
            $('.error_message').show();
            $('.error_message_text').html(response_message);
            HideMessage('.error_message');
            // setInterval(function () {$('.error_message').hide()}, 5000);
        } else {
            $('.success_message').show();
            $('.success_message_text').html(response_message);
            HideMessage('.success_message');
            // setInterval(function () { $('.success_message').hide()}, 5000);
        }
    }
    $(function () {
        $('.timepicker').timepicker({
            showMeridian: false,
            showInputs: true,
            minuteStep: 1
        });
    });
    $(".timepicker").focus(function(){
        if ($(this).val() == '') {
            var dt = new Date();
            $(this).val(dt.getHours() + ":" + dt.getMinutes());
        } else {
            var attendanc_time = $(this).val();
            $(this).timepicker('setTime', attendanc_time);
        }
    });
    $( document ).ready(function() {
        $('.timepicker').val('');
        setInterval(function() {
            $('.file_response').css('display', 'none');
        }, 5000);
    });
    $('#attendance_dateTimeIn').datepicker({
        format: 'dd-MM-yyyy',
    }).on('changeDate', function(e) {
        $('.datepicker').hide();
        $("input[name='timeInId']").val('');
        $("input[name='timeOutId']").val('');
        $.ajax({
            url: $('.base_url').val()+'api/attendance/getDailyRecord',
            type: 'POST',
            headers: {
                'Authorization':localStorage.getItem("laravel_token")
            },
            dataType: 'json',
            data: {
                'emp_code': $('#employee-code').val(),
                'attendance_date': $('#attendance_dateTimeIn').val(),
                'type': 'time_in',
                'time_out_date': $('#attendance_dateTimeOut').val(),
            },
            success: function (response) {
                if (response.timeIn.length>0) {
                    $('#time-in').val(response.timeIn[0]['time']);
                    $("input[name='timeInId']").val(response.timeIn[0]['id']);
                }
                if (response.timeOut.length>0) {
                    $('#attendance_dateTimeOut').val($('#attendance_dateTimeIn').val());
                    $('#time-out').val(response.timeOut[0]['time']);
                    $("input[name='timeOutId']").val(response.timeOut[0]['id']);
                }
            }
        });
    });

    $('#attendance_dateTimeOut').datepicker({
        format: 'dd-MM-yyyy',
    }).on('changeDate', function(e) {
        $('.datepicker').hide();
        $("input[name='timeOutId']").val('');
        $.ajax({
            url: $('.base_url').val()+'api/attendance/getDailyRecord',
            type: 'POST',
            headers: {
                'Authorization':localStorage.getItem("laravel_token")
            },
            dataType: 'json',
            data: {
                'emp_code': $('#employee-code').val(),
                'attendance_date': $('#attendance_dateTimeOut').val(),
                'type': 'time_out',
                'time_in_date': $('#attendance_dateTimeIn').val(),
            },
            success: function (response) {
                if (response.code == '404') {
                    $('.error_message').show();
                    $('.error_message_text').html(response.message);
                    HideMessage('.error_message');
                    // setInterval(function () {$('.error_message').hide()}, 5000);
                } else if (response.timeOut.length>0) {
                    $('#time-out').val(response.timeOut[0]['time']);
                    $("input[name='timeOutId']").val(response.timeOut[0]['id']);
                } else {
                    $('#time-out').val('');
                    $("input[name='timeOutId']").val('');
                }
            }
        });
    });
    $('#save-attendnce-data').on('click', function (e) {
        e.preventDefault();
        var emp_code = $('#employee-code').val();
        var attendance_dateTimeIn = $('#attendance_dateTimeIn').val();
        var attendance_dateTimeOut = $('#attendance_dateTimeOut').val();
        var timein = $('#time-in').val();
        var timeout = $('#time-out').val();
        if (emp_code == '') {
            $('#employee-code').focus();
            $('.error_message').show();
            $('.error_message_text').html('Employee code required.');
            HideMessage('.error_message');
            // setInterval(function () {$('.error_message').hide()}, 5000);
            return false;
        } else if (attendance_dateTimeIn == '') {
            $('#attendance_dateTimeIn').focus();
            $('.error_message').show();
            $('.error_message_text').html('Time in Date required.');
            HideMessage('.error_message');
            // setInterval(function () {$('.error_message').hide()}, 5000);
            return false;
        } else if (timein == '') {
            $('#time-in').focus();
            $('.error_message').show();
            $('.error_message_text').html('Time in required.');
            HideMessage('.error_message');
            // setInterval(function () {$('.error_message').hide()}, 5000);
            return false;
        } else if (attendance_dateTimeOut == '') {
            $('#attendance_dateTimeOut').focus();
            $('.error_message').show();
            $('.error_message_text').html('Time out Date required.');
            HideMessage('.error_message');
            // setInterval(function () {$('.error_message').hide()}, 5000);
            return false;
        } else if (timeout == '') {
            $('#time-out').focus();
            $('.error_message').show();
            $('.error_message_text').html('Time out required.');
            HideMessage('.error_message');
            // setInterval(function () {$('.error_message').hide()}, 5000);
            return false;
        }
        $('#submit_type').val('correction');
        $("#reason").val('');
        $('#messageBox').css("display", "none");
        $("input.file-input").val('');
        $('#evidence').val('');
        $('#reasonModal').modal('show');
    });

    $(document).on('click', '#attendance-upload-btn', function (e) {
        e.preventDefault();
        if ($('#file').get(0).files.length === 0) {
            $('.error_message').show();
            $('.error_message_text').html('Please select a file.');
            HideMessage('.error_message');
            // setInterval(function () {$('.error_message').hide()}, 5000);
        } else {
            $('#submit_type').val('upload');
            $("#reason").val('');
            $('#messageBox').css("display", "none");
            $("input.file-input").val('');
            $('#evidence').val('');
            $('#reasonModal').modal('show');
        }
    });

    $("input#file").change(function () {
        $('#upload-file').val($(this).val());
    });

    $("input.file-input").change(function () {
        $('#evidence').val($(this).val());
    });

    function closePopUp() {
        $('#reasonModal').modal('hide');
    }

    $(document).on('click', '#submit_request', function (e) {
        e.preventDefault();
        if ($("#reason").val() == '') {
            $('#messageBox').css("display", "block");
            $("#reason").focus();
            return false;
        } else {
            var submit_type = $('#submit_type').val();
            if (submit_type == 'correction') {
                var emp_code = $('#employee-code').val();
                var attendance_dateTimeIn = $('#attendance_dateTimeIn').val();
                var attendance_dateTimeOut = $('#attendance_dateTimeOut').val();
                var timein = $('#time-in').val();
                var timeout = $('#time-out').val();
                var formData = new FormData();
                formData.append("emp_code", emp_code);
                formData.append("attendance_dateTimeIn", attendance_dateTimeIn);
                formData.append("attendance_dateTimeOut", attendance_dateTimeOut);
                formData.append("time_in", timein);
                formData.append("timeInId", $("input[name='timeInId']").val());
                formData.append("time_out", timeout);
                formData.append("timeOutId", $("input[name='timeOutId']").val());
                formData.append("comments", $("#reason").val());
                var attachment = document.getElementById("attachment");
                formData.append( 'attachment', attachment.files[0] );
                $('#reasonModal').modal('hide');
                $.ajax({
                    url: $('.base_url').val()+'api/attendance/correction',
                    type: 'POST',
                    headers: {
                        'Authorization':localStorage.getItem("laravel_token")
                    },
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response.status == 'pass') {
                            $('.success_message').show();
                            $('.success_message_text').html(response.message);
                            HideMessage('.success_message');
                            // setInterval(function () { $('.success_message').hide()}, 5000);
                            $('#employee-code').val('');
                            $('#attendance_dateTimeIn').val('');
                            $('#attendance_dateTimeOut').val('');
                            $('#time-in').val('')
                            $('#time-out').val('');
                            $("input[name='timeInId']").val('');
                            $("input[name='timeOutId']").val('');
                        } else {
                            $('.error_message').show();
                            $('.error_message_text').html(response.message);
                            HideMessage('.error_message');
                            // setInterval(function () {$('.error_message').hide()}, 5000);
                            // $('#employee-code').val('');
                            // $('#attendan.ce_dateTimeIn').val('');
                            // $('#attendance_dateTimeOut').val('');
                            // $('#time-in').val('')
                            // $('#time-out').val('');
                            // $("input[name='timeInId']").val('');
                            // $("input[name='timeOutId']").val('');
                        }
                    }
                });
            } else {
                $("#comments").val($("#reason").val());
                $('#attendance-upload-form').submit();
            }
        }
    });

    $('#reason').on('input', function() {
        if($(this).val() != ''){
            $('#messageBox').css("display", "none");
        }
    });
</script>
@endsection
@stop