@extends('layouts.appuser')

@section('dynamic_css_excpt')
   <link href="https://cdn.datatables.net/1.10.19/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" />

<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">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs md-tabs nav-justified ">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">Apply For Leave</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#panel2" role="tab">Leave Balance</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#panel3" role="tab">Leave History</a>
                </li>
            </ul>
            <!-- Tab panels -->
            <div class="tab-content">
                <!--Panel 1-->
                <div class="tab-pane fade in show active" id="panel1" role="tabpanel">
                    <div class="card">
                        <div class="card-header">Leave Application</div>

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <form method="POST" action="{{route('leaveapply')}}" aria-label="Leave Application" enctype="multipart/form-data" id="leave-apply-form" class="form-horizontal" style="width: 100%">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md">
                                                <div class="form-group">
                                                    <label for="leave_type" class="col-form-label text-md-right">Leave Type</label>
                                                    <select class="form-control" name="leave_type" id="leave_type" required="required">
                                                        <option value="">---Leave Type---</option>
                                                        @foreach($leave_type as $value)
                                                        <option value="{{$value['id']}}"  @if (old('leave_type') == $value['id']) selected="selected" @endif>{{$value['leave_name']}}</option>
                                                        @endforeach
                                                    </select>
                                                    <label class="text text-danger leave_type" ></label>
                                                </div>
                                            </div>
                                            <div class="form-group col-md">
                                                <label for="leave_session" class="col-form-label text-md-right">Leave Session</label>
                                                <select  class="form-control" name="leave_session" id="leave_session" required="required">
                                                    <option value="">---Leave Session---</option>
                                                    @foreach($leave_session as $value)
                                                    <option value="{{$value['id']}}" @if (old('leave_session') == $value['id']) selected="selected" @endif>{{$value['session_name']}}</option>
                                                    @endforeach
                                                </select>
                                                <label class="text text-danger leave_session" ></label>
                                            </div>
                                        </div>
                                        <div class="row" hidden="hidden" id="day-div">
                                            <div class="form-group col-md">
                                                <label for="partital_day" class="col-form-label text-md-right">Partial Days</label>
                                                <select class="form-control" name="partial_day" id="partial_day" >
                                                    <option value="">---Partial Days---</option>
                                                    @foreach($partial_days as $value)
                                                    <option value="{{$value['id']}}" @if (old('partial_day') == $value['id']) selected="selected" @endif>{{$value['partial_day_name']}}</option>
                                                    @endforeach
                                                </select>

                                                <label class="text text-danger partial_day" ></label>
                                            </div>
                                            <div class=" form-group col-md">
                                                <label for="day_part" class="col-form-label text-md-right">Day Part</label>
                                                <select class="form-control" name="day_part" id="day_part">
                                                    <option value="">---Day Part---</option>
                                                    @foreach($day_parts as $value)
                                                    <option value="{{$value['id']}}" @if (old('day_part') == $value['id']) selected="selected" @endif>{{$value['day_part_name']}}</option>
                                                    @endforeach

                                                </select>

                                                <label class="text text-danger day_part" ></label>
                                            </div>
                                        </div>
                                        <div class="row">

                                            <div class="form-group col-md">
                                                <label for="from_date" class="col-form-label text-md-right">Leave From Date</label>
                                                <input type="text" name="from_date" id="from_date" class="datepicker form-control mm_input" required="required" value="{{old('from_date')}}" disabled="">

                                                <label class="text text-danger from_date" ></label>
                                            </div>
                                            <div class="form-group col-md">
                                                <label for="to_date" class="col-form-label text-md-right">Leave Till Date</label>
                                                <input type="text" name="to_date" id="to_date" class="form-control"  value="{{old('to_date')}}" disabled="">
                                                <label class="text text-danger to_date" ></label>
                                            </div>
                                        </div>
                                        <div class="form-group row" hidden="hidden" id="relevant_doc_div">
                                            <div class="col-md">
                                                <label for="relevant_doc" class="col-form-label text-md-right">If Any relevant document available</label>
                                                <input type="file" name="relevant_doc" id="relevant_doc" class="form-control"  value="{{old('to_date')}}" >
                                                <label class="text text-danger relevant_doc" ></label>
                                            </div>
                                        </div>
                                        <div class="row" id="leave_days_div">

                                        </div>

                                        <div class="form-group row">
                                            <div class="col-md">
                                                <label for="leave_reason" class="col-form-label text-md-right">Reason for leave application</label>
                                                <!--<textarea name="leave_reason" id="leave_reason" class="form-control" placeholder="Reason for a leave" required="required">
                                        {{old('leave_reason')}}
                                                </textarea>-->
                                                <textarea class="form-control" id="leave_reason" name="leave_reason" placeholder="Reason of leave" required=""></textarea>
                                                <label class="text text-danger leave_reason" ></label>

                                            </div>
                                        </div>

                                        <div class="form-group row mb-0">
                                            <div class="col-md-8">
                                                <button type="submit" class="btn btn-primary">
                                                    APPLY LEAVE
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <!--<div class="col-md-1"></div>-->
                                <div class="col-md-4 offset-md-2">
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>#</th><th>Leave</th><th>Leave Balance </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                            $i = 1;
                                            @endphp
                                            @foreach($leave_balances as $value)
                                            @if($i != 4)
                                            <tr>
                                                <td>{{$i++}}</td><td>{{$value['leave_name']}}</td><td>{{$value['balanced_days']}}</td>
                                            </tr>
                                            @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!--/.Panel 1-->
                <!--Panel 2-->
                <div class="tab-pane fade" id="panel2" role="tabpanel">
                    <div class="card cb">
                        <div class="card-header">Leave Balance</div>

                        <div class=" card-body">
                            <table class="table table-striped table-bordered table-responsive">
                                <thead>
                                    <tr>
                                        <th>#</th><th>Leave</th><th>Alloted Days</th><th>Leave Taken</th><th>Leave Balance</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                    $i = 1;
                                    @endphp
                                    @foreach($leave_balances as $value)
                                    @if($i != 4)
                                    <tr>
                                        <td>{{$i++}}</td><td>{{$value['leave_name']}}</td><td>{{$value['alloted_leave_days']}}</td><td><a href="#">{{$value['alloted_leave_days']-$value['balanced_days']}}</a></td><td>{{$value['balanced_days']}}</td>
                                    </tr>
                                    @endif
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--/.Panel 2-->
                <!--Panel 3-->
                <div class="tab-pane fade" id="panel3" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#active-leaves" role="tab" aria-controls="home" aria-selected="true">Active Leaves</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#past-leaves" role="tab" aria-controls="profile" aria-selected="false">Past Leaves</a>
                                </li>

                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="active-leaves" role="tabpanel" aria-labelledby="home-tab">
                                    <div class="section_padding"> 

                                        <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>
                                <div class="tab-pane fade" id="past-leaves" role="tabpanel" aria-labelledby="profile-tab">
                                    <div class="section_padding">
                                        <table class="table table-striped table-bordered table-responsive" id="past_leave_table">
                                            <thead>
                                                <tr>
                                                    <th>Sl No.</th>
                                                    <th>Type</th>
                                                    <th>Start Date</th>
                                                    <th>Last Date</th>
                                                    <th>Leave Days</th>
                                                    <th>Status</th>
                                                    <th>Remarks</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)
                                                <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>{{$value['remarks']}}</td>
                                                    <td>@if($value['document'] != "")<a href="{{$value['document']}}" class="btn btn-success btn-xs btn-rounded" title="Download leave document"><i class="fa fa-download"></i></a>@endif </td>
                                                </tr>
                                                @endif
                                                @php
                                                $j++;
                                                @endphp
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/.Panel 2-->

            </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">
            <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>

@endsection 
@section('dynamic_js')

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script> 

<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>
$(document).on('change', '#leave_type', function(){
    if($('#from_date').val() != "" || $('#to_date').val() != ""){
        $('#from_date').val("");
        $('#to_date').val("");
        $('#leave_days_div').html("")
    }
    if($(this).val() != ""){
        $('#from_date').removeAttr("disabled");
        $('#to_date').removeAttr("disabled");
    }
    else{
        $('#from_date').attr("disabled","disabled");
        $('#to_date').attr("disabled","disabled");
    }
if ($(this).val() == "2"){
$('#relevant_doc_div').removeAttr("hidden");
}
else{
$('#relevant_doc_div').attr("hidden", "hidden");
}
})

        $(document).on('submit', '#leave-apply-form', function (e) {
e.preventDefault();
var form = this;
$.get("{{url('user/check_holiday')}}", {

from_date: $('#from_date').val(),
        to_date: $('#to_date').val()
}, function(j){
var tr = "";
for (var i = 1; i < j.length; i++) {
tr += "and holidays" + j[i].holiday_name + "\n " + j[i].holiday_start + " " + j[i].holiday_end + " " + j[i].day_name + "\n\n";
}
apply_leave(tr, form);
});
});
function  apply_leave(tr, form){
swal({
title: "Are you sure?",
        text: "You are about to apply your leaves.! " + tr,
        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('user_leaveapply')}}",
                dataType: "json",
                data: new FormData(form),
                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");
                        $('#leave-apply-form').trigger('reset')
                        }
                        else{
                        swal(data.error + " !!", "", "error");
                        }
                        location.reload();
                        },
                        500: function () {
                        swal("Something went wrong. Please try again.", "", "warning");
                        }
                },
                error: function (data) {

                },
                success: function () {
                swal("Leave application is successfully saved.!", "", "success");
                }
        });
        } else {
        swal("You have canceled your operation!");
        }
        });
}
$(document).on('keypress', '.form-control', function () {
$('.' + $(this).attr('name')).text("");
});
    
    
$(document).on('submit', '#leave-cancel-form', function (e) {
e.preventDefault();
swal({
title: "Are you sure?",
        text: "You are about to cancel your leaves.!",
        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");
                        $('#leave-apply-form').trigger('reset');
                        location.reload();
                        }
                        else{
                        swal(data.error + " !!", "", "error");
                        }

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

                },
                success: function () {
                swal("Leave application is successfully saved.!", "", "success");
                }
        });
        } else {
        swal("You have canceled your operation!");
        }
        });
});
    
    
    
function check_holiday(){
var acceptStatus = 0;
if ($('leave_type').val() === "3") {
$('#leave_session').removeAttr("disabled");
}

return 1;
}

</script>
<script>
                    <!---Shyam JQuery ---->
                @if(session('message'))
                    
                    swal("{{session('message')}}");
                    
                    
                @endif
                
                @php
                    $start = new Carbon\Carbon('first day of this month');
                    @endphp
                $('#from_date').bootstrapMaterialDatePicker({
        weekStart: 0,
        time: false,
        minDate: "{{$start->parse()->format('Y-m-d')}}"
                }).on('change', function () {
        $('#to_date').bootstrapMaterialDatePicker({
weekStart: 0,
        time: false,
        minDate: $('#from_date').val()
                        }).change(function () {
        var date1 = new Date($('#from_date').val());
var date2 = new Date($('#to_date').val());
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
if($('#partial_day').val() == 2 || $('#partial_day').val() == 3){
    diffDays -= 0.5;
}
if($('#partial_day').val() == 1){
    diffDays *= 0.5;
}
if($('#partial_day').val() == 4){
    diffDays -= 1;
}
if ($('#leave_type').val() === "1" && diffDays > 2.5) {
swal("Casual leave cannot be applied more than 2 days in a month."+diffDays);
$('#to_date').val("");
                                        }
                                            /*if ($('#leave_session').val() === "2" && diffDays > 1) {
        swal("On half session leave more than one day cannot be taken.");
$('#to_date').val("");
                                                }*/
                                                if ($('#leave_type').val() === "2" && diffDays > 14) {
        var loss_of_pay_days = diffDays - 14;
swal("Your sick leave exceeds its balanced days limits. Its exceeded " + loss_of_pay_days + " days will be considered as loss of pay");
                                                    }
                                                    var actual_leave_days = diffDays;
                                                    if($('#leave_session').val() == "2"){
        if ($('#partial_day').val() == "1"){
diffDays *= 0.5;
    }
    else if($('#partial_day').val() == "2" || $('#partial_day').val() == "3"){
        diffDays -= 0.5
    }
    else if($('#partial_day').val() == "4"){
        diffDays -= 1
    }
    }
    var input = "<div class='col-md-6'><label class='control-label'>Actual Applied Days</label><input type='text' class='form-control' value='"+actual_leave_days+"' disabled></div><div class='col-md-6'><label class='control-label'>Applicable Leave Days</label><input type='text' class='form-control' value='"+diffDays+"' disabled></div>";
                                                    $('#leave_days_div').html(input);
                                                    });
                                                    });
                                                    
                                                
                                                
                                                
                                            $(document).on('click', '#leave-apply-btn', function () {

                                                            $.get("check_holiday", {
                                                            from_date: $('#from_date').val(),
                                                                    to_date: $('#to_date').val()
                                                }, function (j) {
                                                                    if (j.length === 1) {
                                                            submit_apply_leave();
                                                    } else {

                                                    }
                                                    });
                                                    
                                                    });
                                                    
                                                
                                               function submit_apply_leave() {
                                                                    swal({
                                                                    title: "Are you sure to apply for leave?",
                                                                            text: "Once applied can be canceled !",
                                                                            icon: "warning",
                                                                            buttons: true,
                                                                            dangerMode: true,
                                                    })
                                                    .then((willApply) => {
                                                                            if (willApply) {
                                                                    $('#leave-apply-form').submit();
                                                 } else {
                                                                            swal("Your have canceled your application!"
                                                                                    )
                                                                            ;
                                                }
                                                })
                                                ;
                                                }  
                                                
                                                
                                                
                                                
                                            
                                            $(document).on('click', '.leave-cancel', 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_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('change', '#leave_session', function () {
                                                                        /*var leave_types = [3, 4, 5];
                                                                         if (leave_types.includes(parseInt($('#leave_type').val())) && $(this).val() === "2") {
                                                                         swal("Leaves like Privilege, Maternity and Paternal leave cannot be taken as half day leave");
                                                                         $(this).val("");
                                                                         }*/
                                                                        if ($(this).val() === "2") {
                                                                $("#day-div").removeAttr("hidden");
                                                                $('#partital_day').attr("required", "required");
                                                                $('#day_part').attr("required", "required");
                                            } else {
                                                                        $("#day-div").attr("hidden", "hidden");
                                                                $('#partital_day').removeAttr("required");
                                                                $('#day_part').removeAttr("required");
                                    }
                                });
                        $(document).on('change', '#leave_type', function () {
                                                                        if ($(this).val() === "2") {
                                                                $('#relevant_doc').attr("required", "required");
                        } else {
                                                                        $('#relevant_doc').removeAttr("required");
                                }
                                });
                                $(document).on('change','#leave_session',function(){
                                                                        if ($('#leave_type').val() === "3" && $('#leave_session').val() === "2"){
                                                                swal("Privilege leave cannot be applied as half leave.");
                                                                $('#leave_session').val("");
                        }
                        });
                            $(document).ready(function () {
                                                                        if ($('#leave_session').val() === "2") {
                                                                $("#day-div").removeAttr("hidden");
                                                                $('#partital_day').attr("required", "required");
                                                                $('#day_part').attr("required", "required");
            }
            });
            $(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")   // 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