@extends('layouts.app2') @section('dynamic_css')
<link href="{!! asset('/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') !!}" rel="stylesheet" />
<link href="{!! asset('/css/fullcalendar.min.css') !!}" rel="stylesheet" />
<link href="{!! asset('/css/fullcalendar.print.min.css') !!}" rel="stylesheet" media="print" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<style>
    body {
        font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        font-size: 14px;
        background-color: #fff;
    }

    #calendar {
        max-width: 1050px;
        margin: 0 auto;
        background-color: white;
        width: 100%;
    }

    .h2,
    h2 {
        font-size: 1.5rem !important;
    }

    #calendar table .fc-head {
        background-color: #2bbbad!important;
        color: white;
    }

    .fc-day-header {
        height: 43px;
        font-size: 18px;
        padding-top: 16px !important;
    }

    .color_indegator {
        margin-left: 10px;
        margin-top: 2px;
        font-weight: 700;
    }

    .fc-scroller {
        height: auto !important;
        /* max-height: 350px !important; */
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    #agenda_d {
        /*   height: 300px;*/
        border: 1px solid #d4c8c8;
        /* padding: 39px; */
        /* padding-top: 10px;*/
        /*background-color: #17a2b8;*/
    }

    .row_pading {
        padding-right: 0px;
        padding-left: 0px;
    }

    .row_margin {
        margin-right: 0px;
        margin-left: 0px;
    }

    .card_header {
        padding: 0rem 0rem;
    }


    .dtp-btn-ok {
        background-color: #007bff;
        opacity: .7;
    }

    .dtp-btn-cancel {
        background-color: #dc3545;
        opacity: .7;
    }

    .dtp-btn-clear {
        background-color: #ffc107;
        opacity: .7;
    }




    /* fallback */

    @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
    }

    .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }



    .docs-tab-content {
        position: relative;
        border: 1px solid rgba(0, 0, 0, .15);
        padding: 0;
    }

    .docs-tabs .nav-link {
        border-width: 1px 1px 0 1px;
        border-color: rgba(0, 0, 0, .15);
        border-style: solid;
        border-radius: 5px 5px 0 0;
        margin-right: 8px;
        margin-bottom: -1px;
        color: #212529;
    }


    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 26px;
    }

    .switch input {display:none;}

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }


    .df{
        display: flex;
    }

    .slider_label{
        font-size: 18px;
        margin-left: 5px;
        margin-right: 5px;
    }    


    .border_bottom{
        border-bottom: 1px solid #e7e1e1;
        border-left: 3px solid #28a745;;
    }
    .border_left_red{
        border-left: 3px solid red;
    }   

    .show{
        border-bottom: 1px solid #e7e1e1;
    }

    .over_flow{
        overflow: hidden;
        text-align: left;
        text-decoration: none;
    }




</style>
@endsection @section('badcome')
<!--  <div class="badecome_div mb10">
    <div class="pb10 pt10">
         <a href="{{ url('home') }}" class="badge badge-theam p7">Home </a> <span class="badcome_line"> | </span> <a href="{{ route('meetingmanagement')}}" class="badge badge-theam p7"> Dashboard </a>
      </div>
    </div>-->
@endsection 
@section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">

            <table class="table table-responsive table-striped table-bordered" id="leave_operation_table">
                <thead>
                    <tr>
                        <th>SL No.</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>Leave Id</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="leave-table-body">
                    @php
                    $i = 1;
                    $j = 0;
                    @endphp
                    @foreach($applied_leaves as $value)
                    @php
                    $date1 = date_create($value['start_date']);
                    $date2 = date_create($value['end_date']);
                    $diff = date_diff($date1, $date2);
                    $leave_days = $diff->format('%a')+1;
                    @endphp
                    <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>&emsp;<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="#basicExampleModal" class="leave_days">{{$leave_days - $partial_leave_days_count[$j]}}</a></td>
                        <td>{{$value['balanced_days']}}</td>
                        <td class="leave-apply-id">{{$value['leave_apply_id']}}</td>
                        <td>
                            <button type="button" class="btn btn-primary btn-xs btn-act" name="2" title="Accept"><i class="fa fa-thumbs-o-up"></i></button></div>
                            <button type="button" class="btn btn-danger btn-xs btn-act" 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++;
                    $j++;
                    @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" id="leave_apply">
                            <input type="hidden" name="leave_status" id="leave_status">
                            <textarea class="form-control" name="leave_remarks" id="leave_remarks" placeholder="Remarks on leave rejection or return."></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <button type="button" class="btn btn-sm btn-primary" id="confirm-btn">CONFIRM</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" 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>
<!-- 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>
@endsection 
@section('dynamic_js')
<script src="{{ asset('plugins/bootstrap-select/js/bootstrap-select.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 src="{{ asset('js/lib/fullcalendar.min.js') }}"></script>
<script src="{{ asset('js/custom/calender_minutes.js') }}"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.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', '#confirm-btn', function () {
    swal({
        title: "Are you sure to reject or return employee leave?",
        text: "Once rejected or returned you will not be able to changee leave rejection or return.",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
            .then((willApprove) => {
                if (willApprove) {
                    $('#approve-form').submit();
                } else {
                    swal("Rejection or return of leave is cancled!");
                }
            });
});
$(document).on('click', '.leave_days', function () {
    var cancel_leave_dates = new Array();
    var button = $(this);
    $.get("{{url('/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_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>


@endsection