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

<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;
    }

    #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');
    }

    .section_padding{
        padding-top: 20px;
    }
    .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;
    }

    @media (max-width: 768px)
    {
        .cb .card-body {
            padding: 0px !important; 
        }        
    }


</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 mt20">
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-responsive" id="active_leave_table">
                <thead>
                    <tr>
                        <th>Sl No.</th>
                        <th>Type</th>
                        <th>Start Date</th>
                        <th>Last Date</th>
                        <th>Leave Days</th>
                        <th>Leave Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @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
                    @if($value['id'] == 1 || $value['id'] == 4 )
                    <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='' name="{{$value['id_leave_apply']}}"style="color:blue; font-weight: bold;" data-toggle="modal" data-target="#leaveDatesExampleModal" class="leave_days">{{$leave_days - $partial_leave_days_count[$j]}}</a></td>   
                        <td>{{$value['status_name']}}</td>
                        <td>@if($value['document'] != "")<a href="{{$global_data['config']->image_url.$value['document']}}" class="btn btn-success btn-xs btn-rounded"><i class="fa fa-download"></i></a>@endif<button type="button" class="btn btn-danger btn-xs btn-rounded leave-cancel" data-toggle="modal" data-target="#basicExampleModal" name="{{$value['id_leave_apply']}}" title="Cancel Leave Dates"><i class="fa fa-remove"></i></button></td>
                    </tr>
                    @endif
                    @php
                    $j++
                    @endphp
                    @endforeach
                </tbody>
            </table>
        </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">
                <form method="post" action="" class="form-horizontal" id="leave-cancel-form">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Leave Cancelation</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        @csrf
                        <input type="hidden" name="leave_apply" id="leave_apply">
                        <table class="table table-responsive table-striped">
                            <thead>
                                <tr>
                                    <th>Sl. No.</th><th>Date</th><th>Mark</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>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </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">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_cancel_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>
</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="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>

$('#leave-cancel-form').on('submit', function (e) {
e.preventDefault();
swal({
title: "Are you sure?",
        text: "You are about to cancel for a 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('cancel_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 ");
                        }
                        else if (data.error){
                        swal(data.error + " !", "", "error");
                        }


                        },
                        500: function () {
                        swal("Something went wrong. Please try again.", "", "warning");
                        }
                },
                error: function (data) {
                swal(data.error + " !", "", "warning");
                },
                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("");
    });
    
    
</script>
<script>
    $(document).on('click', '.leave-cancel', function () {
        $('#leave_apply').val($(this).attr('name'));
        var cancel_leave_dates = new Array();
        var button = $(this);
        $.get("{{url('/user/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 = "";
            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='cancel_leave_date[]' value='" + leave_date + "'></td></tr>";
            }

        }
        tr += "<tr><td colspan='3'><textarea name='cancel_reason' id='cancel_reason' placeholder='Reason for leave cancel' class='form-control'></textarea></td></tr>";
        $('#leave_date_body').html(tr);
    }
    
    $(document).on('click', '.leave_days', function () {
    var cancel_leave_dates = new Array();
    var button = $(this);
    $.get("{{url('/user/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_canceled_leave_dates(start_date, end_date, cancel_leave_dates);
    });
});
function get_canceled_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_cancel_date_body').html(tr);
}
$(document).ready(function () {
    $('#active_leave_table').DataTable();
    $('#past_leave_table').DataTable();
});
</script>        
@endsection