@extends('layouts.appuser') 
@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" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<style>
    #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;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    #agenda_d {
        border: 1px solid #d4c8c8;
    }

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

    .form-group {
        margin-bottom: .1rem;
    }

    ul.tab_navbar li {
        border: 1px solid #ccc6c6;
    }

    .tab-sub-header {
        margin-top: 10px;
        padding-left: 15px;
        color: #b6b3b9;
    }

    .card-body {
        padding-bottom: 1.5rem !important;
    }

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

    .holiday_display {
        border-left: 5px solid #5d5353;
        background: #d7e3ef;
    }

    .holiday_display:hover {
        background: #6291bf;
    }

    .cancel_display:hover {
        background: #a73939;
    }

    .cancel_display:hover td:not(:last-child),
    .holiday_display:hover td:not(:last-child) {
        opacity: 0;
    }
    
    .modal-lg .cancel_display:hover td:last-child,
    .cancel_display:hover td:last-child,
    .holiday_display:hover td:last-child {
        opacity: 1 !important;
    }

    .modal-lg .cancel_display td:last-child,.holiday_display td:last-child {
        opacity: 0;
        position: absolute;
        left: 38%;
        font-size: 16px;
        padding-top: 10px;
        font-weight: 600;
        color: white;
    }

    .cancel_display td:last-child {
        opacity: 0;
        position: absolute;
        left: 32%;
        font-size: 18px;
        padding-top: 10px;
        font-weight: 600;
        color: white;
    }

    .cancel_display {
        border-left: 5px solid red;
        background: #f1dcdc;
    }*/
</style>
@endsection @section('badcome') @endsection @section('content')

<div class="container">

    <div class="row justify-content-center container_layout">
        <div class="col-md-12">
            <!-- Nav tabs -->
            <div class="col-md-12">
                <ul class="nav nav-tabs md-tabs nav-justified row tab_navbar">
                    <li class="nav-item col-md-4">
                        <a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">
                            <i class="fa fa-check-circle-o fa-lg mr5" aria-hidden="true"></i> Apply For Leave
                        </a>
                    </li>
                    <li class="nav-item col-md-4">
                        <a class="nav-link" data-toggle="tab" href="#panel2" role="tab">
                            <i class="fa fa-th-large fa-lg mr5" aria-hidden="true"></i> Leave Balance
                        </a>
                    </li>
                    <li class="nav-item col-md-4 leave_history">
                        <a class="nav-link" data-toggle="tab" href="#panel3" role="tab">
                            <i class="fa fa-history fa-lg mr5" aria-hidden="true"></i> Leave History
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 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">
                            <span class="text-left">
                                   <i class="fa fa-check-square-o fa-lg mr5" aria-hidden="true"></i> Leave Application
                                </span>
                            <span class="float-right">
                                    <a href="" id="leave_balance_view_btn"><i class="fa fa-eye fa-lg mr5" aria-hidden="true"></i> Balance</a>
                                </span>
                        </div>

                        <div class="card-body" style="padding:0.001rem;">
                            <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_field() }}
                                        <div class="row mr0 ml0">
                                            <div class="col-md">
                                                <div class="form-group">
                                                    <label for="leave_type" class="col-form-label text-md-right">
                                                        Leave Type <span style="color:red;font-size:17px;">*</span> 
                                                    </label>
                                                    <select class="form-control" name="leave_type" id="leave_type">
                                                        <option value="" selected disabled>---Leave Type---</option>
                                                        @foreach($leave_balances as $value)
                                                        <option value="{{$value['id']}}" data-balance="{{$value['balanced_days']}}"  @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 <span style="color:red;font-size:17px;">*</span> 
                                                    </label>
                                                <select class="form-control" name="leave_session" id="leave_session">
                                                        <option value="" disabled selected>---Leave Session---</option>
                                                        @foreach($leave_session as $value)
                                                        <option value="{{$value['id']}}" @if (old('leave_session') == $value['id']) selected="selected" @elseif( $value['id']==1) {{'selected'}} @endif>{{$value['session_name']}} Day</option>
                                                        @endforeach
                                                    </select>
                                                <label class="text text-danger leave_session"></label>
                                            </div>
                                        </div>
                                        <div class="row mr0 ml0" hidden="hidden" id="day-div">
                                            <div class="form-group col-md">
                                                <label for="partital_day" class="col-form-label text-md-right">
                                                        Partial Days <span style="color:red;font-size:17px;">*</span> 
                                                    </label>
                                                <select class="form-control" name="partial_day" id="partial_day">
                                                        <option value=""  disabled selected>---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 <span style="color:red;font-size:17px;">*</span> 
                                                    </label>
                                                <select class="form-control" name="day_part" id="day_part">
                                                        <option value="" disabled selected>---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 mr0 ml0" id="date_show_div" style="display:none;">

                                            <div class="form-group col-md">
                                                <label for="from_date" class="col-form-label text-md-right">
                                                        Leave From Date <span style="color:red;font-size:17px;">*</span> 
                                                    </label>
                                                <input type="text" name="from_date" id="from_date" class="datepicker form-control mm_input" required="required" value="{{old('from_date')}}">

                                                <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 <span style="color:red;font-size:17px;">*</span> 
                                                    </label>
                                                <input type="text" name="to_date" id="to_date" class="form-control" value="{{old('to_date')}}">
                                                <label class="text text-danger to_date"></label>
                                            </div>
                                        </div>
                                        <div class="row ml0 mr0" id="leave_days_div">

                                        </div>
                                        <div class="form-group row ml0 mr0">
                                            <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="form-group row ml0 mr0">
                                            <div class="col-md">
                                                <label for="leave_reason" class="col-form-label text-md-right">
                                                        Reason for leave application <span style="color:red;font-size:17px;">*</span> 
                                                    </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"></textarea>
                                                <label class="text text-danger leave_reason"></label>

                                            </div>
                                        </div>

                                        <div class="form-group  mb-0 row ml0 mr0">
                                            <div class="col-md-12 text-right">
                                                <button type="submit" class="btn btn-primary btn-sm">
                                                        <i class="fa fa-check-square-o" aria-hidden="true"></i> APPLY LEAVE
                                                    </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <!--<div class="col-md-1"></div>-->
                                <div class="col-md-4 offset-md-2" id="blance_view">
                                    <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)
                                            <tr>
                                                <td>{{$i++}}</td>
                                                <td>{{$value['leave_name']}}</td>
                                                <td>{{$value['balanced_days']}}</td>
                                            </tr>
                                            @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"><i class="fa fa-th-large fa-lg mr5" aria-hidden="true"></i> 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)
                                    <tr>
                                        <td>{{$i++}}</td>
                                        <td>{{$value['leave_name']}}</td>
                                        <td>{{$value['total_leave']}}</td>
                                        <td><a href="#">{{$value['total_leave']-$value['balanced_days']}}</a></td>
                                        <td>{{$value['balanced_days']}}</td>
                                    </tr>
                                    @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" style="padding:0.51rem;">
                            <ul class="nav nav-tabs row" id="myTab" role="tablist" style="margin-top:10px;">
                                <li class="nav-item col text-center">
                                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#active-leaves" role="tab" aria-controls="home" aria-selected="true"><b><i class="fa fa-star" aria-hidden="true"></i> Active Leaves</b></a>
                                </li>
                                <li class="nav-item col text-center">
                                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#past-leaves" role="tab" aria-controls="profile" aria-selected="false"><b><i class="fa fa-server" aria-hidden="true"></i> Past Leaves</b></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="tab-sub-header">
                                        <span><i class="fa fa-star" aria-hidden="true"></i> Active Leaves </span>
                                    </div>
                                    <hr style="margin: 10px 0px;">
                                    <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; @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='' name="{{$value['id_leave_apply']}}" style="color:blue; font-weight: bold;" data-toggle="modal" data-target="#leaveDatesExampleModal" class="leave_days">{{$value['leave_days']}}
                                                        </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" target="_blank">
                                                               <i class="fa fa-download"></i>
                                                            </a>
                                                        @endif
                                                        @if(!in_array($value['id'],[3,6]))
                                                            @if($value['leave_days']!=0)
                                                                <button type="button" class="btn btn-danger btn-xs btn-rounded leave-cancel" name="{{$value['id_leave_apply']}}" title="Cancel Leave Dates">
                                                                    <i class="fa fa-remove"></i>
                                                                </button>
                                                            @endif
                                                        @endif
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>

                                    </div>
                                </div>
                                <div class="tab-pane fade" id="past-leaves" role="tabpanel" aria-labelledby="profile-tab">
                                    <div class="tab-sub-header">
                                        <span><i class="fa fa-server" aria-hidden="true"></i> Past Leaves </span>
                                    </div>
                                    <hr style="margin: 10px 0px;">
                                    <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) 
                                                @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">{{$value['leave_days']}}
                                                        </a>
                                                    </td>
                                                    <td>{{$value['status_name']}}</td>
                                                    <td>{{$value['remarks']}}</td>
                                                    <td>@if($value['document'] != "")
                                                        <a href="{{$global_data['config']->image_url.$value['document']}}" target="_blank" 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 bslsnce view-->
<div class="modal fade" id="leave_balance_view_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLabel"><i class="fa fa-th" aria-hidden="true"></i> Leave Balance</h6>
                <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-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)
                        <tr>
                            <td>{{$i++}}</td>
                            <td>{{$value['leave_name']}}</td>
                            <td>{{$value['balanced_days']}}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning btn-sm" data-dismiss="modal">
                        <i class="fa fa-times" aria-hidden="true"></i> Close
                    </button>
                <!--<button type="submit" class="btn btn-primary">Save changes</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 modal-lg" 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"><i class="fa fa-ban" aria-hidden="true"></i> Leave Cancelation</h5>
                    <button type="button" class="close cancle_leave_btn"  aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    {{ csrf_field() }}
                    <input type="hidden" name="leave_apply" id="leave_apply">
                    <table class="table table-responsive applied_leave_table">
                        <thead>
                            <tr>
                                <th style="min-width:120px;">Date</th>
                                <th>Status</th>
                                <th>Session</th>
                                <th style="min-width: 100px;">Day Part</th>
                                <th style="min-width: 100px;">Mark</th>
                            </tr>
                        </thead>
                        <tbody id="leave_date_body">

                        </tbody>
                    </table>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning btn-sm cancle_leave_btn"> <i class="fa fa-times-circle mr5" aria-hidden="true"></i> Close</button>
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-sign-in mr5" aria-hidden="true"></i> 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"><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="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="http://localhost/pnrdhcms.dev/public/js/lib/jquery.dataTables.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>
    
    var leave_balance=0;
    
    $("#leave-apply-form").validate({
        rules: {
            leave_type: {
                required: true,
            },
            leave_session: {
                required: true,
            },
            partial_day: {
                required: true,
            },
            day_part: {
                required: true,
            },
            from_date: {
                required: true,
            },
            to_date: {
                required: true,
            },
            relevant_doc: {
                extension: "jpg|jpeg|png|pdf|doc",
                filesize: 5,
            },
            leave_reason: {
                required: true,
            }
        },
        messages: {
            relevant_doc: {
                extension: "Select only jpg or jpeg or png or pdf or doc file",
            }
        }
    });



    $.validator.addMethod('filesize', function(value, element, param) {
        param = param * 1024 * 1024;
        return this.optional(element) || (element.files[0].size <= param)
    }, 'File size must be less than {0} MB');









    $(document).on('click', '#leave_balance_view_btn', function(e) {
        e.preventDefault();
        $('#leave_balance_view_modal').modal('show');
    })




    $(document).on('submit', '#leave-apply-form', function(e) {
        e.preventDefault();
        swal({
                title: "Are you sure?",
                text: "You are about to apply your leaves.!",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
            .then((willStore) => {
                if (willStore) {
                    $("#leave-apply-form").validate();
                    if ($("#leave-apply-form").valid()) {
                        $('.page-loader-wrapper').fadeIn();
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: "POST",
                            url: "{{route('user_leaveapply')}}",
                            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");*/
                                        swal({
                                            title: "Success",
                                            text: data.msg,
                                            icon: "success",
                                            buttons: true,
                                            dangerMode: true,
                                        })
                                        .then((willStore) => {
                                            if (willStore) {
                                              location.reload();  
                                            }
                                        });
                                        $('#leave-apply-form').trigger('reset')
                                        
                                    } 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");
                            },
                            complete: function(data) {
                                $('.page-loader-wrapper').fadeOut();
                            }
                        });

                    }


                } 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();
        var error=0;
        var leave_apply=$('#leave_apply').val();
        
        if($("input[name='cancel_leave_date[]']:checked").length<1){
            error=1;
            Swal.fire({
              type: 'error',
              title: 'Error...',
              text: 'Please select atleast one date to cancel.!',
            })
        }
        
        if(!$("textarea[name='cancel_reason']").val()){
            error=1;
            Swal.fire({
              type: 'error',
              title: 'Error...',
              text: 'Please provide reason of leave cancel.',
            })
        }       
       
        if(error==0){
            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");
                                        $("textarea[name='cancel_reason']").val('');
                                            get_cancel_data(leave_apply);
                                        /*$('#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!");
            }
        });
        
      }
});
    
    
    
    
    
    
    
    
    
    @if(session('message'))
    swal("{{session('message')}}");
    @endif

    @php
    $start = new Carbon\ Carbon('first day of this month');
    @endphp

    var hotlist = [];

    $.ajax({
        type: "GET",
        url: "{{ route('getholidaysatearray') }}",
        dataType: "json",
        success: function(data) {
            if (data.msgType == true) {
                set_holiday(data.data)
            } else {
                toastr.error(data.msg);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
        },
        complete: function(data) {
            $('.page-loader-wrapper').fadeOut();
        }
    });


    function set_holiday(data) {

        hotlist = data;

        $('#from_date').bootstrapMaterialDatePicker({
            weekStart: 0,
            time: false,
            minDate: "{{$start->parse()->format('Y-m-d')}}",
            disabledDates: hotlist
        }).on('change', function(e, date) {
            $('#to_date').bootstrapMaterialDatePicker('setMinDate', date).on('change', function() {
                var diffDays = get_applied_date();
                if ($('#leave_type').val() === "1" && diffDays >{{$appliableBalances}}) {

                      swal("You cannot apply leave more than {{$appliableBalances}} days.");
                      $('#to_date').val("");
                      $('#appliedLeaveDayes').val(""); 
                    
                }else if((leave_balance-diffDays)<{{$lower_limit_cl}}){
                      swal("You leave balance must not be exceded {{$lower_limit_cl}}.");
                      $('#to_date').val("");
                      $('#appliedLeaveDayes').val(""); 
                }
            });
        });



        $('#to_date').bootstrapMaterialDatePicker({
            weekStart: 0,
            time: false,
            minDate: "{{$start->parse()->format('Y-m-d')}}",
            disabledDates: hotlist
        }).on('change', function(e, date) {
            $('#from_date').bootstrapMaterialDatePicker('setMaxDate', date).on('change', function() {
                var diffDays = get_applied_date();
                if ($('#leave_type').val() === "1" && diffDays >{{$appliableBalances}}) {
                    
                    swal("You cannot apply leave more than {{$appliableBalances}} days.");
                    $('#from_date').val("");
                    $('#appliedLeaveDayes').val(""); 
                    
                }else if((leave_balance-diffDays)<{{$lower_limit_cl}}){
                      swal("You leave balance must not be exceded {{$lower_limit_cl}}.");
                      $('#from_date').val("");
                      $('#appliedLeaveDayes').val(""); 
                    
                }
            });
        });


    }

    function get_applied_date() {
        var retVal = [];
        var date1_string = $('#from_date').val();
        var date2_string = $('#to_date').val();
        var diffDays = 0;
        if ((date1_string) && (date2_string)) {
            var date1 = new Date(date1_string);
            var date2 = new Date(date2_string);
            var timeDiff = Math.abs(date2.getTime() - date1.getTime());
            diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;


            var getDateArray = function(start, end) {
                var arr = new Array();
                var dt = new Date(start);
                while (dt <= end) {
                    var currentData = formatDate(new Date(dt));
                    var a = hotlist.indexOf(currentData);
                    if (a > 0)
                        arr.push(currentData);
                    dt.setDate(dt.getDate() + 1);
                }
                return arr;
            }

            var dateArr = getDateArray(date1, date2);
            if (dateArr.length > 0) {
                diffDays = diffDays - dateArr.length;
            }


            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'><label class='control-label'>Applied Leave Days</label><input type='text' class='form-control' value='" + diffDays + "' name='appliedLeaveDayes' id='appliedLeaveDayes' readonly></div>";
        $('#leave_days_div').html(input);

        return diffDays;
    }

    function formatDate(date) {
        var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;

        return [year, month, day].join('-');
    }



    $(document).on('click', '#leave-apply-btn', function() {
        if ($('leave_type').val() === "3") {
            $('#leave_session').removeAttr("disabled");
        }

        $.get("check_holiday", {
            from_date: $('#from_date').val(),
            to_date: $('#to_date').val()
        }, function(j) {
            if (j.length === 1) {
                submit_apply_leave();
            } else {
                var tr = "";
                for (var i = 1; i < j.length; i++) {
                    tr += "" + j[i].holiday_name + "\n " + j[i].holiday_start + " " + j[i].holiday_end + " " + j[i].day_name + "\n\n";
                }
                swal({
                    title: "Holiday List",
                    text: tr,
                    html: true,
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                }).then((willApply) => {
                    if (willApply) {
                        $('#leave-apply-form').submit();
                    } else {
                        swal("Your have canceled your application!");
                    }
                });
            }
        });

    });


    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','.cancle_leave_btn',function(e){
        $('#basicExampleModal').modal('hide');
        sessionStorage.setItem("reloading", "true");
        document.location.reload();
        
    }) 
    
   window.onload = function() {
    var reloading = sessionStorage.getItem("reloading");
    if (reloading) {
        sessionStorage.removeItem("reloading");
        $('.leave_history').children('a').trigger("click");
    }
   } 
    
    

    $(document).on('click', '.leave-cancel', function() {
        var leave_apply = $(this).attr('name');
        $('#leave_apply').val(leave_apply);
        get_cancel_data(leave_apply);
        $('#basicExampleModal').modal({
            backdrop: 'static',
            keyboard: false
        });
    });
    
    function get_cancel_data(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_date_body').empty();
                    
                    $.each(data.data, function(key, value) {
                        var status = (value.cancel ? "<i class='fa fa-remove' style='color:#dc3545;'></i>" : "<i class='fa fa-check' style='color: #28a745'></i>");
                        var hover_text=''; 
                        var holiday_day = (value.holiday ? 'holiday_display' : ' ');
                        var cancel_day = (value.cancel ? 'cancel_display' : ' ');
                        var check_box="<input type='checkbox' name='cancel_leave_date[]' value='" + value.apply_date + "' checked>";
                        if (value.cancel == 1){
                            hover_text = "Leave Canceled";
                            check_box='';
                        }
                        if (value.holiday == 1){
                            hover_text = "Holiday";
                            check_box='';
                        }

                        $('#leave_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>"+check_box+"</td><td>" + hover_text + "</td></tr>");
                    })
                    
                     $('#leave_date_body').append("<tr><td colspan='5'><textarea rows='4' name='cancel_reason' id='cancel_reason' placeholder='Reason for leave cancel' class='form-control'></textarea></td><td></td></tr>");

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

/*    $(document).on('click', '.leave-cancel1', 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")  
                .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 = "";
            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() {
        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");*/
        }

        get_applied_date();
    });


    $(document).on('change', '#partial_day', function() {
        get_applied_date();
    });


    $(document).on('change', '#leave_type', function() {
        leave_balance=$(this).find(':selected').attr('data-balance');
        $('#date_show_div').show();
        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 leave_apply = $(this).attr('name');

        $.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();
            }
        });
    });


    /*************************** leave days ******************************************************************************/

    $(document).on('click', '.leave_days1', 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)) {
                var currentData = formatDate(new Date(leave_date));
                var a = hotlist.indexOf(currentData);
                if (a > 0)
                    tr += "<tr style='background-color:#d0cfcf;'><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-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);
    }
    /*************************** leave days ******************************************************************************/

    



    $('#active_leave_table').DataTable();
    $('#past_leave_table').DataTable();
</script>
@endsection