@extends('layouts.app2') 
@section('dynamic_css_excpt')
<link href="{!! asset('css/dataTables.bootstrap4.min.css') !!}" media="all" rel="stylesheet" type="text/css"/>
@endsection

@section('dynamic_css')
<link href="{!! asset('/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') !!}" rel="stylesheet" />
<style>



</style>
@endsection @section('badcome')
@endsection 
@section('content')

<div class="container">
    <div class="row justify-content-center container_layout">
        <div class="col-md-12 pl10 pr10">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('adminhome')}}">
                            <i class="material-icons">home</i>
                        </a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{url('/approve_leave')}}">Applied leaves</a></li>
                    <li class="breadcrumb-item active">Leave verification</li>
                </ol>
            </nav>
        </div>
        <div class="col-md-12 bg-white pp10">

            <table class="table table-responsive table-striped table-bordered" id="leave_operation_table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Leave Type</th>
                        <th>Leave Start Date</th>
                        <th>Leave End Date</th>
                        <th>Document/History</th>
                        <th>Leave Days</th>
                        <th>Balanced Days</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="leave-table-body">
                    @php
                    $i = 1;
                    @endphp
                    @foreach($applied_leaves as $value)
                    <tr>
                        <td>{{$i}}</td>
                        <td>{{$value['leave_name']}}</td><td class="start-date-data">{{$value['start_date']}}</td>
                        <td class="end-date-data">{{$value['end_date']}}</td>
                        <td>
                            <a href="">
                                <i class="fa fa-file" style="color: #419641"></i>
                            </a>
                            <a href="" style="color:blue; font-weight: bold;" data-toggle="modal" data-target="#historyModal" class="history" name="{{$value['employee_code']}}_{{$value['leave_type_id']}}">History</a>
                        </td>
                        <td>
                            <a href='' name="{{$value['leave_apply_id']}}" style="color:blue; font-weight: bold;" data-toggle="modal" data-target="#leaveDatesExampleModal" class="leave_days">{{$value['leave_days']}}</a>
                        </td>
                        <td>
                            {{$value['balanced_days']}}
                        </td>
                        <td>
                            <button type="button" class="btn btn-primary btn-xs leave-approve" name="2" title="Accept" data-toggle="modal" data-target="#acceptLeaveModal"><i class="fa fa-thumbs-o-up"></i></button>
                            <button type="button" class="btn btn-danger btn-xs btn-act btn-disapprove" name="3" data-toggle="modal" data-target="#myModal" title="Reject"><i class="fa fa-remove"></i></button>
                            <!--<button type="button" class="btn btn-info btn-xs btn-act" name="5" data-toggle="modal" data-target="#myModal" title="Return"><i class="fa fa-reply"></i></button>-->

                        </td>
                    </tr>

                    @php
                    $i++;
                    @endphp
                    @endforeach
                </tbody>
            </table>
        </div>

    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">LEAVE APPROVAL</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body">
                <form method="POST" action="{{route('approve_leave')}}" class="form-horizontal" id="approve-form">
                    @csrf
                    <div class="form-group row" >
                        <div class="col-md-12">
                            <input type="hidden" name="leave_apply" class="leave_apply">
                            <input type="hidden" name="leave_status" id="leave_status">
                            <input type="hidden" name="leave_days_count" value="" id="leave_days_count">
                            <textarea class="form-control" name="leave_remarks" id="leave_remarks" placeholder="Remarks on leave rejection or return."></textarea>
                            <label class="text text-danger leave_remarks"></label>
                        </div>
                    </div>
                    <div class="form-group row" >
                        <div class="col-md-12" id="input-div">

                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-sm btn-primary" id="confirm-btn">CONFIRM</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Leave Dates</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-responsive table-striped">
                    <thead>
                        <tr>
                            <th>Date</th><th>Status</th>
                        </tr>
                    </thead>
                    <tbody id="leave_date_body">

                    </tbody>
                </table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="acceptLeaveModal" tabindex="-1" role="dialog" aria-labelledby="acceptLeaveModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Select Approval Dates</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post" action="#" id="leave_approve_form">
                    <input type='hidden' name='leave_apply' id='approve_leave_apply'><input type='hidden' name='leave_status' id='approve_leave_status'>
                    <table class="table table-responsive table-striped">
                        <thead>
                            <tr>
                                <th>Date</th><th>Status</th><th>Check</th>
                            </tr>
                        </thead>
                        <tbody id="leave_approve_date_body">

                        </tbody>
                    </table>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Leave History Modal -->
<div class="modal fade" id="historyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Leave Dates</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-responsive table-striped">
                    <thead>
                        <tr>
                            <th>SL No.</th><th>Start Date</th><th>End Date</th><th>Status</th>
                        </tr>
                    </thead>
                    <tbody id="leave_history_body">

                    </tbody>
                </table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="leaveDatesExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><i class="fa fa-calendar" aria-hidden="true"></i> Applied Leave Dates</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
            </div>
            <div class="modal-body">
                <table class="table table-responsive applied_leave_table">
                    <thead>
                        <tr>
                            <th style="min-width:125px;">Date</th>
                            <th>Status</th>
                            <th>Session</th>
                            <th style="min-width: 100px;">Day Part</th>
                        </tr>
                    </thead>
                    <tbody id="leave_cancel_date_body">

                    </tbody>
                </table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
                        <i class='fa fa-remove' style=''></i> Ok
                    </button>
            </div>
        </div>
    </div>
</div>
@endsection 
@section('dynamic_js')
<script src="{{ asset('js/lib/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/lib/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('js/lib/moment.min.js') }}"></script>
<script src="{{ asset('plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script>

<script>
$(document).on('click', '.btn-act', function () {
    $('.modal-title').text("Leave " + $(this).attr('title'));
    var button = $(this);
    var leave_apply_id = button.closest("tr")   // Finds the closest row <tr> 
            .find(".leave-apply-id")     // Gets a descendent with class="nr"
            .text();
    $('#leave_apply').val(leave_apply_id);
    if ($(this).attr('name') === "2") {
        $('#leave_remarks').removeAttr('required');
        $('#leave_status').val($(this).attr('name'));
        swal({
            title: "Are you sure to approve employee leave?",
            text: "Once approved you will not be able to cancel leave approval.",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
                .then((willApprove) => {
                    if (willApprove) {
                        $('#approve-form').submit();
                    } else {
                        swal("Approval of leave is cancled!");
                    }
                });
    } else {
        $('#leave_status').val($(this).attr('name'));
        $('#leave_remarks').attr('required', 'required');
    }
});
$(document).on('click', '.btn-act', function () {
    $('#leave_days_count').val($(this).parent().siblings('.leave_days').text());
});
    
/*$(document).on('click', '.leave_days', function () {
    var cancel_leave_dates = new Array();
    var button = $(this);
    $.get("{{route('get_canceled_leave_dates')}}", {
        leave_apply: $(this).attr('name')
    }, function (j) {
        for (var i = 1; i < j.length; i++) {
            cancel_leave_dates[i - 1] = j[i].cancel_date;
        }
        var start_date = button.closest("tr")    
                .find(".start-date-data")     
                .text();
        var end_date = button.closest("tr")   
                .find(".end-date-data")     
                .text();
        if (end_date === "") {
            end_date = start_date;
        }
        get_leave_dates(start_date, end_date, cancel_leave_dates);
    });
});
    
    
function get_leave_dates(start_date, end_date, cancel_leave_dates) {
    var date1 = new Date(start_date);
    var date2 = new Date(end_date);
    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
    var tr = "";
    for (var i = 0; i <= diffDays; i++) {
        var dat = new Date(start_date);
        var dd = "";
        var end_dd = "";
        dat.setDate(dat.getDate() + i);
        var mm = dat.getMonth() + 1; // getMonth() is zero-based
        var dd = dat.getDate();
        var leave_date = [dat.getFullYear(),
            (mm > 9 ? '-' : '-0') + mm,
            (dd > 9 ? '-' : '-0') + dd
        ].join('');

        if (!cancel_leave_dates.includes(leave_date)) {
            tr += "<tr><td>" + leave_date + "</td><td><i class='fa fa-check' style='color: #28a745'></i></td></tr>";
        } else {
            tr += "<tr><td>" + leave_date + "</td><td><i class='fa fa-remove' style='color:#dc3545'></i></td></tr>";

        }

    }
    $('#leave_date_body').html(tr);
}*/
    
    
    
$(document).on('click', '.history', function () {
    $.get("{{url('/get_leave_history')}}", {
        leave_employee: $(this).attr('name')
    }, function (j) {
        var tr = "";
        for (var i = 1; i < j.length; i++) {
            tr += "<tr><td>" + i + "</td><td>" + j[i].start_date + "</td><td>" + j[i].end_date + "</td><td>" + j[i].status_name + "</td></tr>";
        }
        $('#leave_history_body').html(tr);
    });
});
$(document).ready(function () {
    $('#leave_operation_table').DataTable();
});
</script>
<script>
    $('#approve-form').on('submit', function (e) {
        e.preventDefault();

        swal({
            title: "Are you sure?",
            text: "You are about disapprove an employee leave!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
                .then((willStore) => {
                    if (willStore) {
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: "POST",
                            url: "{{route('approve_leave')}}",
                            dataType: "json",
                            data: new FormData(this),
                            contentType: false,
                            cache: false,
                            processData: false,
                            statusCode: {
                                422: function (data) {
                                    // Error...
                                    var object = "";
                                    $.each(data, function (key, val) {

                                        if (key === "responseText") {
                                            object = jQuery.parseJSON(val);
                                        }

                                    });
                                    var error = "";
                                    $.each(object.errors, function (key, val) {

                                        $('.' + key).text(val);

                                    });
                                    swal("In valid data has been provided please check!", "", "error");
                                },
                                200: function (data) {
                                    swal(data.msg + " !", "", "success");

                                },
                                500: function () {
                                    swal("Something went wrong. Please try again.", "", "warning");
                                }
                            },
                            error: function (data) {

                            },
                            success: function () {
                                swal("Other specification is successfully saved.!", "", "success");
                            }
                        });
                    } else {
                        swal("You have canceled your operation!");
                    }
                })



    });
    $(document).on('click', '.leave-approve', function () {
        $('#approve_leave_status').val($(this).attr('name'));
        var leave_apply_id = $(this).closest("tr")   // Finds the closest row <tr> 
                .find(".leave-apply-id")     // Gets a descendent with class="nr"
                .text();
        $('#approve_leave_apply').val(leave_apply_id);
    });
    $(document).on('click', '.btn-disapprove', function () {
        $('#approve_leave_status').val($(this).attr('name'));
        var leave_apply_id = $(this).closest("tr")   // Finds the closest row <tr> 
                .find(".leave-apply-id")     // Gets a descendent with class="nr"
                .text();
        $('.leave_apply').val(leave_apply_id);
    });
    $('#leave_approve_form').on('submit', function (e) {
        e.preventDefault();

        swal({
            title: "Are you sure?",
            text: "You are about approve an employee leave!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
                .then((willStore) => {
                    if (willStore) {
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: "POST",
                            url: "{{route('approve_leave')}}",
                            dataType: "json",
                            data: new FormData(this),
                            contentType: false,
                            cache: false,
                            processData: false,
                            statusCode: {
                                422: function (data) {
                                    // Error...
                                    var object = "";
                                    $.each(data, function (key, val) {

                                        if (key === "responseText") {
                                            object = jQuery.parseJSON(val);
                                        }

                                    });
                                    var error = "";
                                    $.each(object.errors, function (key, val) {

                                        $('.' + key).text(val);

                                    });
                                    swal("In valid data has been provided please check!", "", "error");
                                },
                                200: function (data) {
                                    if(data.msg){
                                        swal(data.msg + " !", "", "success");
                                        location.reload();
                                    }
                                    else{
                                     swal(data.error + " !", "", "error");   
                                    }

                                },
                                500: function () {
                                    swal("Something went wrong. Please try again.", "", "warning");
                                }
                            },
                            error: function (data) {

                            },
                            success: function () {
                                swal("Other specification is successfully saved.!", "", "success");
                            }
                        });
                    } else {
                        swal("You have canceled your operation!");
                    }
                })



    });
    $(document).on('keypress', '.form-control', function () {
        $('.' + $(this).attr('name')).text("");
    });

    $(document).on('click', '.btn-disapprove', function () {
        $('#input-div').html("");
        var button = $(this);
        var start_date = button.closest("tr")   // Finds the closest row <tr> 
                .find(".start-date-data")     // Gets a descendent with class="nr"
                .text();
        var end_date = button.closest("tr")   // Finds the closest row <tr> 
                .find(".end-date-data")     // Gets a descendent with class="nr"
                .text();
        var date1 = new Date(start_date);
        var date2 = new Date(end_date);
        var timeDiff = Math.abs(date2.getTime() - date1.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
        var input = "";
        var leave_date = "";

        for (var i = 0; i <= diffDays; i++) {
            var dat = date1;
            var dd = "";
            dat.setDate(dat.getDate() + i);
            var mm = dat.getMonth() + 1; // getMonth() is zero-based
            var dd = dat.getDate();
            leave_date = [dat.getFullYear(),
                (mm > 9 ? '-' : '-0') + mm,
                (dd > 9 ? '-' : '-0') + dd
            ].join('');
            input += "<input type='hidden' name='appliedLeaveDate[]' value='" + leave_date + "'>";
            $('#input-div').append(input);

        }
    });
    $(document).on('click', '.leave-approve', function () {
        $('#leave_apply').val($(this).attr('name'));
        var cancel_leave_dates = new Array();
        var button = $(this);
        $.get("get_canceled_leave_dates", {
            leave_apply: $(this).attr('name')
        }, function (j) {

            for (var i = 1; i < j.length; i++) {
                cancel_leave_dates[i - 1] = j[i].cancel_date;
            }
            var start_date = button.closest("tr")   // Finds the closest row <tr> 
                    .find(".start-date-data")     // Gets a descendent with class="nr"
                    .text();
            var end_date = button.closest("tr")   // Finds the closest row <tr> 
                    .find(".end-date-data")     // Gets a descendent with class="nr"
                    .text();
            if (end_date === "") {
                end_date = start_date;
            }
            get_approve_leave_dates(start_date, end_date, cancel_leave_dates);
        });
    });
    
    
    function get_approve_leave_dates(start_date, end_date, cancel_leave_dates) {
        var date1 = new Date(start_date);
        var date2 = new Date(end_date);
        var timeDiff = Math.abs(date2.getTime() - date1.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
        var tr = "";
        for (var i = 0; i <= diffDays; i++) {
            var dat = new Date(start_date);
            var dd = "";
            dat.setDate(dat.getDate() + i);
            var mm = dat.getMonth() + 1; // getMonth() is zero-based
            var dd = dat.getDate();
            var leave_date = [dat.getFullYear(),
                (mm > 9 ? '-' : '-0') + mm,
                (dd > 9 ? '-' : '-0') + dd
            ].join('');

            if (!cancel_leave_dates.includes(leave_date)) {
                tr += "<tr><td>" + (i + 1) + "</td><td>" + leave_date + "</td><td><input type='checkbox' name='accept_leave_date[]' value='" + leave_date + "' checked><input type='hidden' name='all_leave_date[]' value='" + leave_date + "'></td></tr>";
            }

        }
        tr += "<tr><td colspan='3'><input type='submit' class='btn btn-primary btn-sm' value='APPROVE'></td></tr>";
        $('#leave_approve_date_body').html(tr);
    }
    
    
    
    
    
    $(document).on('click', '.leave_days', function() {
      
        var leave_apply = $(this).attr('name');
        if(leave_apply){
            $.ajax({
                type: "GET",
                url: "{{ route('getappiedleavedays') }}",
                data: {
                    'leave_apply': leave_apply
                },
                dataType: "json",
                success: function(data) {
                    if (data.msgType == true) {
                        /*toastr.success(data.msg);*/
                        $('#leave_cancel_date_body').empty();
                        $.each(data.data, function(key, value) {
                            var  hover_text='';
                            var status = (value.cancel ? "<i class='fa fa-remove' style='color:#dc3545;'></i>" : "<i class='fa fa-check' style='color: #28a745'></i>");
                            var holiday_day = (value.holiday ? 'holiday_display' : ' ');
                            var cancel_day = (value.cancel ? 'cancel_display' : ' ');
                            if (value.cancel == 1)
                                hover_text = "Leave Canceled";
                            if (value.holiday == 1)
                                hover_text = "Holiday";

                            $('#leave_cancel_date_body').append("<tr class='" + holiday_day + " " + cancel_day + "'><td><i class='fa fa-calendar-o mr5' aria-hidden='true'></i> " + value.apply_date + "</td><td>" + status + "</td><td>" + value.session + "</td><td>" + (value.day_part ? value.day_part : " ") + "</td><td>" + hover_text + "</td></tr>");
                        })

                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function(data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });
        }
    }); 
    
    
</script>

@endsection