{{ View::make('layout.header') }}

<style>

    .fc-right .fc-state:hover {

        background-color: #fff !important;



    }



    .fc-right .fc-button {

        padding: 0.438rem 0.5rem !important;

        background: transparent;



        height: 100%;

    }



    .fc-right .fc-state-active {



        z-index: 1 !important;

    }



    .fc-next-button,

    .fc-prev-button {

        background: transparent !important;

    }



    .fc-month-button,

    .fc-agendaWeek-button {

        border-top-right-radius: 0 !important;

        border-bottom-right-radius: 0 !important;

    }



    .fc-agendaWeek-button,

    .fc-agendaDay-button {

        border-top-left-radius: 0 !important;

        border-bottom-left-radius: 0 !important;



    }



    .fc-icon-left-single-arrow:after,

    .fc-icon-right-single-arrow:after {

        top: -10% !important;

    }



    .fc-icon-left-single-arrow:after {

        font-size: 135% !important;

        font-weight: inherit !important;

        content: "\e900" !important;

    }



    .fc-icon-right-single-arrow:after {

        font-size: 135% !important;

        font-weight: inherit !important;

        content: "\e901" !important;

    }



    .fc-state-default {

        box-shadow: none !important;

    }



    .fc-content .fc-title {

        color: #fff;

        font-size: 9px;

        white-space: break-spaces !important;

    }



    .fc-right .fc-button-group {

        width: 60% !important;

        float: right !important;

    }



    @media only screen and (min-width: 768px) {



        .fc-left,

        .fc-right {

            width: 50% !important;

        }



        .app-calendar .fc-popover {

            left: 50% !important;

            top: 30% !important;

        }

    }



    @media only screen and (max-width: 768px) {



        .fc-left,

        .fc-right {

            width: 100% !important;

        }



        .app-calendar .fc-popover {

            left: 20% !important;

            top: 40% !important;

        }

    }

</style>

<style>

    /* Style the tab */

    .tab {

        overflow: hidden;



        background-color: #ffffff;

    }



    /* Style the buttons inside the tab */

    .tab button {

        background-color: inherit;

        float: left;

        border: none;

        outline: none;

        cursor: pointer;

        padding: 6px 6px;

        transition: 0.3s;

        font-size: 11px;

        border: 1px solid #ccc;

    }



    /* Change background color of buttons on hover */

    .tab button:hover {

        background-color: #ddd;

    }



    /* Create an active/current tablink class */

    .tab button.active {

        background-color: #ccc;

    }



    /* Style the tab content */

    .tabcontent {

        display: none;

        padding: 6px 12px;

        border-top: none;

    }

</style>

<!-- BEGIN: Content-->

<div class="app-content content ">

    <div class="content-overlay"></div>

    <div class="header-navbar-shadow"></div>

    <div class="content-wrapper">

        <div class="content-header row">

            <div class="content-header-left col-md-9 col-12 mb-2">

                <div class="row breadcrumbs-top">

                    <div class="col-12">

                        <div class="breadcrumb-wrapper">

                            <ol class="breadcrumb">

                                <li class="breadcrumb-item">Approval

                                </li>

                                <li class="breadcrumb-item active"><a href="#">Apply for Subordinates</a>

                                </li>

                            </ol>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="content-body">

            <!-- Dashboard Ecommerce Starts -->

            <section id="multiple-column-form">



                <div class="row">

                    <div class="col-12 col-md-4">

                        <div class="card">

                            <div class="card-header ptitle" style="color:#fff;">

                                <h4 class="card-title" style="color:#fff;">Apply Leave</h4>

                            </div>

                            <div class="col-md-12">

                                @if (\Session::has('statusMsg'))

                                    <div class="alert alert-success alert-dismissible" style="margin-top:18px;">

                                        <a href="#" class="close" data-dismiss="alert" aria-label="close"

                                            title="close">×</a>

                                        <strong>Success!</strong> {{ Session::get('statusMsg') }}

                                    </div>

                                @endif

                            </div>

                            <div class="card-body">

                                <form id="all-filter">



                                    @csrf

                                    <input type="hidden" name="year" id="year" class="form-control"

                                        style="" value="{{ date('Y') }}" placeholder="">



                                    <input type="text" name="name" id="name" class="form-control"

                                        style="padding-left: 10px;" value="" placeholder="Staff Name / Staff No.">

                                </form>

                                <form id="all-filter11" method="post" enctype="multipart/form-data">

                                                                    <input type="hidden" name="pagename" value="hr_apply_on_behalf"/>



                                    <input type="hidden" name="year" id="year" class="form-control"

                                        style="" value="{{ date('Y') }}" placeholder="">



                                    <div class="row">

                                        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

                                        <input type="hidden" name="user_id" value="{{ Auth::id() }}">

                                        <div class="col-md-12 col-12">

                                            <div class="form-group">

                                                <label class="form-label" for="payment-date">Replacement Leave Pending

                                                    :</label>



                                                <input type="text" name="rlpending" id="rlpending"

                                                    class="form-control" style="padding-left: 10px;" autocomplete="off"

                                                    value="" readonly>

                                            </div>

                                        </div>

                                        <div class="col-md-12 col-12">

                                            <div class="form-group">

                                                <label class="form-label" for="payment-date">Employee :</label>

                                                <select class="form-control" id="employee" name="username"

                                                    onchange="ajaxsearch11()">

                                                    <option value="">select</option>

                                                    @foreach ($employees as $employee)

                                                        <option value="{{ $employee->employee_id }}">

                                                            {{ $employee->name }}</option>

                                                    @endforeach

                                                </select>

                                                @if ($errors->has('username'))

                                                    <em class="required"

                                                        style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!! $errors->first('username') !!}</em>

                                                @endif

                                            </div>

                                        </div>

                                        <div class="col-md-12 col-12">

                                            <div class="form-group">

                                                <label class="form-label" for="payment-date">Leave Type :</label>

                                                <select class="form-control" id="leave_type"

                                                    onChange="leave_type_change('hidden_div', this)" name="leave_type">

                                                    @foreach ($leaveTypes as $type)

                                                        @if ($type->is_show == 1)

                                                            @if ($type->type != 'Emergency')

                                                                @if ($type->type == 'Maternity')

                                                                    @if ($upaydetails->sex == 0)

                                                                        <option

                                                                            value="{{ $type->type }}:{{ $type->upload }}:{{ $type->compulsory }}">

                                                                            {{ $type->name }}</option>

                                                                    @endif

                                                                @elseif($type->type == 'Paternity')

                                                                    @if ($upaydetails->sex == 1 && ($upaydetails->marital_status == 'Married' || $upaydetails->marital_status == 1))

                                                                        <option

                                                                            value="{{ $type->type }}:{{ $type->upload }}:{{ $type->compulsory }}">

                                                                            {{ $type->name }}</option>

                                                                    @endif

                                                                @elseif($type->type == 'Marriage')

                                                                    @if ($upaydetails->marital_status != 'Married' || $upaydetails->marital_status != 1)

                                                                        <option

                                                                            value="{{ $type->type }}:{{ $type->upload }}:{{ $type->compulsory }}">

                                                                            {{ $type->name }}</option>

                                                                    @endif

                                                                @else

                                                                    <option

                                                                        value="{{ $type->type }}:{{ $type->upload }}:{{ $type->compulsory }}">

                                                                        {{ $type->name }}</option>

                                                                @endif

                                                            @endif

                                                        @endif

                                                    @endforeach

                                                </select>

                                                @foreach ($leaveTypes as $htype)

                                                    <input type="hidden" name="hourly_{{ $htype->type }}"

                                                        id="hourly_{{ $htype->type }}"

                                                        value="{{ $htype->hourly_allow }}">

                                                @endforeach

                                                @if ($errors->has('leave_type'))

                                                    <em class="required"

                                                        style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!! $errors->first('leave_type') !!}</em>

                                                @endif

                                            </div>

                                        </div>

                                        <div class="col-md-12 col-12">

                                            <div class="form-group">

                                                <label class="form-label" for="payment-note">

                                                    @if (Helper::settingInfo('hourlyLeave', $company_id) ?? 0 == 1)

                                                        Hourly /

                                                        @endif @if ($halfdayallow->value ?? 0 == 1)

                                                            Half Day /

                                                        @endif Full Day :

                                                </label>

                                                <div class="demo-inline-spacing">

                                                    @if (Helper::settingInfo('hourlyLeave', $company_id) ?? 0 == 1)

                                                        <div class="form-check form-check-inline">

                                                            <input class="form-check-input" type="radio"

                                                                onclick="hourlySlot()" name="hof"

                                                                id="inlineRadio3" value="2" />

                                                            <label class="form-check-label"

                                                                for="inlineRadio3">Hourly</label>

                                                        </div>

                                                    @endif

                                                    @if ($halfdayallow->value ?? 0 == 1)

                                                        <div class="form-check form-check-inline">

                                                            <input class="form-check-input" type="radio"

                                                                onclick="hideenddate()" name="hof"

                                                                id="inlineRadio1" value="1" />

                                                            <label class="form-check-label" for="inlineRadio1">Half

                                                                Day</label>

                                                        </div>

                                                    @endif

                                                    <div class="form-check form-check-inline">

                                                        <input class="form-check-input" type="radio"

                                                            onclick="showenddate()" name="hof" id="inlineRadio2"

                                                            value="0" checked />

                                                        <label class="form-check-label" for="inlineRadio2">Full

                                                            Day</label>

                                                    </div>

                                                </div>

                                                @if ($errors->has('hof'))

                                                    <em class="required"

                                                        style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!! $errors->first('hof') !!}</em>

                                                @endif

                                            </div>

                                        </div>

                                        <div class="col-md-12 col-12">

                                            <div class="form-group" id="half_day_type" style="display:none;">

                                                <label>Half Day Type</label>

                                                <select name="half_day_type" class="form-control">

                                                    <option value="first">First Half</option>

                                                    <option value="second">Second Half</option>

                                                </select>

                                                @if ($errors->has('half_day_type'))

                                                    <em class="required"

                                                        style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!! $errors->first('half_day_type') !!}</em>

                                                @endif

                                            </div>

                                        </div>

                                        <div class="col-md-12 col-12">

                                            <div class="form-group">

                                                <label>Leave start Date</label>

                                                <input type="date" name="leave_start_date"

                                                    class="form-control flatpickr-basic" placeholder="DD-MM-YYYY"

                                                    autocomplete="off" id="start-date1">

                                                @if ($errors->has('leave_start_date'))

                                                    <em class="required"

                                                        style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!! $errors->first('leave_start_date') !!}</em>

                                                @endif

                                            </div>

                                        </div>

                                        <div class="col-md-12 col-12">

                                            <div id="end_date">

                                                <label>Leave End Date</label>

                                                <div class="form-group">

                                                    <input type="date" name="leave_end_date"

                                                        class="form-control flatpickr-basic" placeholder="DD-MM-YYYY"

                                                        placeholder="Leave End Date" autocomplete="off"

                                                        id="end-date1" onchange="calculatedays();">

                                                </div>

                                                @if ($errors->has('leave_end_date'))

                                                    <em class="required"

                                                        style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!! $errors->first('leave_end_date') !!}</em>

                                                @endif

                                            </div>

                                        </div>

                                        <div class="col-md-12 col-12 row" id="timeSlot"

                                            style="padding-bottom: 10px;display: none;">

                                            <div class="col-md-6">

                                                <label>From</label>

                                                <select class="form-control" id="time_from" name="time_from">

                                                    <option></option>

                                                </select>

                                            </div>



                                            <div class="col-md-6">

                                                <label>Hours</label>

                                                <select class="form-control" id="time_for" name="time_for">

                                                    <option></option>

                                                </select>

                                            </div>

                                        </div>





                                        <div class="col-md-12 col-12 row" id="openHours"

                                            style="display: none;padding-bottom: 10px;">

                                            <div class="col-md-12">

                                                <div class="tab">

                                                    <!--<button style="display:none;" class="tablinks" id="Allday_" onclick="openHours(event, 'Allday')">All day</button>-->

                                                    <button class="tablinks"

                                                        onclick="openHours(event, 'AM');hourslot('AM');">AM</button>

                                                    <button class="tablinks"

                                                        onclick="openHours(event, 'PM');hourslot('PM');">PM</button>

                                                    <button class="tablinks active"

                                                        onclick="openHours(event, 'Hours');hourslot();">Hours</button>

                                                </div>

                                                <div id="Allday" class="tabcontent">

                                                </div>

                                                <div id="AM" class="tabcontent">

                                                </div>

                                                <div id="PM" class="tabcontent">

                                                </div>

                                                <div id="Hours" class="tabcontent">

                                                </div>

                                            </div>

                                        </div>





                                        <div class="col-md-12 col-12" id="hidden_div" style="display: none;">

                                            <span id="filespan">

                                                <label>Add Slip File</label>



                                                <div>

                                                    <input type="file" name="slip_file" id="slip_file" value="" accept=".jpeg, .png, .pdf" />

                                                </div>

                                                </li>

                                            </span>

                                        </div>

                                        <div class="col-md-12 col-12">

                                            <div class="form-group">

                                                <label>Reason</label>

                                                <textarea class="form-control" name="reason" id="reason" placeholder="Type here"></textarea>

                                                @if ($errors->has('reason'))

                                                    <em class="required"

                                                        style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!! $errors->first('reason') !!}</em>

                                                @endif

                                            </div>

                                        </div>

                                        <div class="col-md-12 col-12">

                                            <div class="form-group TotalLeaveDays">

                                                <label>Total Leave Days</label>

                                                <input type="text" name="no_of_day" id="no_of_day"

                                                    onclick="calculatedays()" class="form-control" autocomplete="off"

                                                    readonly>

                                            </div>

                                            <div class="form-group TotalLeaveHours" style="display: none;">

                                                <label>Total Leave Hours</label>

                                                <input value="" type="text" name="no_of_hours"

                                                    id="no_of_hours" onclick="calculatedays()" class="form-control"

                                                    autocomplete="off" readonly>

                                            </div>

                                            <!--<div class="form-group">-->

                                            <!--    <label>Number of days</label>-->

                                            <!--    <input type="text" name="no_of_day" id="no_of_day" class="form-control"  autocomplete="off" readonly>-->

                                            <!--</div>-->

                                        </div>

                                        <div class="col-md-12 col-12">

                                            <div class="form-group">

                                                <label>Type</label>

                                                <div class="demo-inline-spacing">

                                                    <div class="form-check form-check-inline">

                                                        <input class="form-check-input" type="radio" name="status"

                                                            id="status1" value="1" checked />

                                                        <label class="form-check-label" for="status1">Approve</label>

                                                    </div>

                                                    <div class="form-check form-check-inline">

                                                        <input class="form-check-input" type="radio" name="status"

                                                            id="status2" value="3" />

                                                        <label class="form-check-label"

                                                            for="status2">Recommend</label>

                                                    </div>

                                                </div>

                                                @if ($errors->has('status'))

                                                    <em class="required"

                                                        style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!! $errors->first('status') !!}</em>

                                                @endif

                                            </div>

                                        </div>

                                        @if ($relieveallow->value ?? 0 == 1)

                                            <div class="col-md-12 col-12">

                                                <div class="form-group">

                                                    <label>Relieve</label>

                                                    <select class="form-control" name="relieve">

                                                        <option value="">Select Relieve</option>

                                                        @foreach ($relieves as $relieve)

                                                            <option value="{{ $relieve->username }}">

                                                                {{ $relieve->name }}</option>

                                                        @endforeach

                                                    </select>

                                                    @if ($errors->has('relieve'))

                                                        <em class="required"

                                                            style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!! $errors->first('relieve') !!}</em>

                                                    @endif

                                                </div>

                                            </div>

                                        @endif

                                        <div class="col-md-12 col-12">

                                            <div id="msg"></div>

                                        </div>

                                        <div class="col-md-12 col-12">

                                            <div class="form-group d-flex flex-wrap mb-0">

                                                <button type="button" onclick="saveDetails()"

                                                    class="btn btn-primary mr-1" id="apply"

                                                    style="width: 30%;">Apply</button>

                                                <button type="button" class="btn btn-outline-secondary"

                                                    data-dismiss="modal" style="width: 30%;">Cancel</button>

                                            </div>

                                        </div>

                                    </div>

                                </form>

                            </div>

                        </div>

                    </div>

                    <div class="app-calendar col-12 col-md-8">

                        <div class="card">

                            <div class="card-header ptitle" style="color:#fff;">

                                <h4 class="card-title" style="color:#fff;">Leave</h4>

                            </div>

                            <div class="card-body" style="padding:0px; ">

                                <div class="row" style="margin:0px;">

                                    <div class="position-relative">

                                        <div class="card shadow-none border-0 mb-0 rounded-0">

                                            <div class="card-body ">

                                                <div id="calendar"></div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </section>

        </div>

    </div>

</div>

<!-- END: Content-->

{{ View::make('layout.footer') }}



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>



<script>

    $("#apply").prop("disabled", false);



    $("#start-date1").change(function() {

        calculatedays();

        $('#end-date1').flatpickr({

            minDate: $("#start-date1").val(),

            altInput: true,

            altFormat: "d-m-Y",

            dateFormat: "Y-m-d",

        });

    });



    var calender;

    var currentYear = (new Date).getFullYear();

    $(document).ready(function() {

        $("#leave_type").change();

        calender = $('#calendar').fullCalendar({

            height: 780,

            initialView: 'dayGridMonth',

            initialView: 'listMonth',

            dragScroll: true,

            left: 'title',

            dayMaxEvents: 1,



            eventResizableFromStart: true,

            customButtons: {

                sidebarToggle: {

                    text: 'Sidebar'

                }

            },

            header: {

                left: 'prev,next, title',

                right: 'month,agendaWeek,agendaDay,listMonth'

            },

            initialDate: new Date(),

            navLinks: true,

            eventClassNames: function({

                event: calendarEvent

            }) {



            },

            dateClick: function(info) {

                var date = moment(info.date).format('YYYY-MM-DD');

                resetValues();

                sidebar.modal('show');

                addEventBtn.removeClass('d-none');

                updateEventBtn.addClass('d-none');

                btnDeleteEvent.addClass('d-none');

                startDate.val(date);

                endDate.val(date);

            },

            eventClick: function(info) {

                eventClick(info);

            },

            datesSet: function() {

                modifyToggler();

            },

            viewDidMount: function() {

                modifyToggler();

            },



            eventLimit: false,



            events: null,



            eventRender: function(event, element) {

                element.css("background", event.color);

                element.css("color", event.text_color);

                element.css("font-size", '12PX');



            },

        });



    });





    $(document).on('keyup blur', '#name', function() {

        ajaxsearch();

        var name = $('#name').val();



        $.ajax({

            url: "filteremployee",

            method: "get",

            data: {

                name: name

            },

            success: function(data) {

                if (data.length > 0) {

                    

                    $("#employee").empty();

                    $.each(data, function(key, value) {

                        $("#employee").append('<option value="' + value.username + '">' +

                            value.name + '</option>');

                    });

                    getreplacemntlv();

                    leaveType();



                } else {

                   

                    $("#employee").empty();

                }

            }





        });



    });





    function getreplacemntlv() {

        $.ajax({

            url: '{{ route('getYearlyrlEntitleList') }}',

            type: 'get',

            data: {

                year: currentYear,

                start: 0,

                username: $("#employee").val(),

            },

            success: function(resObj) {

                // console.log(resObj);

                rlpendingVal = resObj.leave_count;

                $("#rlpending").val(resObj[0].balance);



                // getPermission();

            },

            error: function(w) {}

        });

    }





    function ajaxsearch() {

        $("#overlay").show();

        $.ajax({

            type: 'POST',

            url: '{{ route('calender.filter11') }}',

            data: $("#all-filter").serialize(),

            success: function(data) {

                $('#calendar').fullCalendar('removeEvents');

                $('#calendar').fullCalendar('addEventSource', data);



                data.map(function(item) {

                    $('#calendar').fullCalendar('addEventSource', item);



                });

                leaveType();

            }

        });

    }





    function ajaxsearch11() {

        $("#overlay").show();

        var employee11 = $('#employee').val();

        $.ajax({

            type: 'POST',

            url: '{{ route('calender.filter11') }}',

            data: $("#all-filter11").serialize(),

            success: function(data) {

                document.getElementById("name").value = employee11;

                $('#calendar').fullCalendar('removeEvents');

                $('#calendar').fullCalendar('addEventSource', data);



                data.map(function(item) {

                    $('#calendar').fullCalendar('addEventSource', item);



                });

                getreplacemntlv();

                leaveType();

            }

        });

    }







    $('body').on('click', 'button.fc-prev-button', function() {

        var moment = $('#calendar').fullCalendar('getDate');

        // alert(moment._d.getFullYear());

        $("#year").val(moment._d.getFullYear());

        ajaxsearch11();



    });

    $('body').on('click', 'button.fc-next-button', function() {

        var moment = $('#calendar').fullCalendar('getDate');

        // alert(moment._d.getFullYear());

        $("#year").val(moment._d.getFullYear());

        ajaxsearch11();



    });

</script>

<script src="{{ asset('app-assets/js/scripts/pages/app-calendar.js') }}"></script>

<style>

    /* .fc .fc-toolbar .fc-prev-button .fc-icon, .fc .fc-toolbar .fc-next-button .fc-icon{

        display:none;

    } */

    /* .fc .fc-button-group{

        display:none;

    } */

</style>

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script type="text/javascript">

    $("#time_for").change(function() {

        calculatedays();

    });

    hourslot();

    perhours();



    function perhours() {

        var k;

        var html = '';

        for (k = 1; k <= 8; k++) {

            html += '<option value="' + k + ':00">' + k + '</option>';



        }

        $("#time_for").html(html);

    }



    function hourslot(type = '') {

        var html = '';

        if (type == 'AM') {

            html += amslot();

        } else if (type == 'PM') {

            html += pmslot();

        } else {

            html += amslot();

            html += pmslot();

        }

        $("#time_from").html(html);

    }



    function pmslot() {

        var k;

        var html = '';

        for (k = 1; k <= 12; k++) {

            if (k == 12) {

                var pm = 'AM';

            } else {

                var pm = 'PM';

            }

            html += '<option value="' + k + ' ' + pm + '">' + k + ':00 ' + pm + '</option>';

            html += '<option value="' + k + ':30 ' + pm + '">' + k + ':30 ' + pm + '</option>';

        }

        return html;

    }



    function amslot() {

        var k;

        var html = '';

        for (k = 1; k <= 12; k++) {

            if (k == 12) {

                var am = 'PM';

            } else {

                var am = 'AM';

            }

            html += '<option value="' + k + ' ' + am + '">' + k + ':00 ' + am + '</option>';

            html += '<option value="' + k + ':30 ' + am + '">' + k + ':30 ' + am + '</option>';

        }

        return html;

    }



    function openHours(evt, cityName) {

        if (cityName != 'Allday') {

            $("#timeSlot").show();

        } else {

            $("#timeSlot").hide();

        }

        perhours();

        evt.preventDefault();

        var i, tabcontent, tablinks;

        tabcontent = document.getElementsByClassName("tabcontent");

        for (i = 0; i < tabcontent.length; i++) {

            tabcontent[i].style.display = "none";

        }

        tablinks = document.getElementsByClassName("tablinks");

        for (i = 0; i < tablinks.length; i++) {

            tablinks[i].className = tablinks[i].className.replace(" active", "");

        }

        document.getElementById(cityName).style.display = "block";

        evt.currentTarget.className += " active";

    }

</script>



<script type="text/javascript">

    // function showenddate() {

    //     document.getElementById('end_date').style.display='block';

    //     document.getElementById('half_day_type').style.display='none';

    //     $('#start-date1').val('');

    //     $('#end-date1').val('');

    //     $('#no_of_day').val('');

    //     daysBetween();

    // }

    // function hideenddate() {

    //     document.getElementById('end_date').style.display='none';

    //     document.getElementById('half_day_type').style.display='block';

    //     $('#start-date1').val('');

    //     $('#end-date1').val('');

    //     $('#no_of_day').val('');

    //     daysBetween();

    // }



    $(document).ready(function() {

        var holidays = null;

        $("#calendar tr tbody td").map(function(index, elem) {

            $.each(holidays, function(key, value) {

                if ($(elem).data('date') == value.date) {

                    $(elem).find('.fc-daygrid-day-events').css('background', '#2088F2');

                    $(elem).find('.fc-daygrid-day-events').css('color', 'black');

                    $(elem).find('.fc-daygrid-day-events').css('text-align', 'center');

                    $(elem).find('.fc-daygrid-day-events').html(value.description);

                }



            });



        });

    });





    // function showenddate() {

    //     document.getElementById('end_date').style.display='block';

    //     document.getElementById('half_day_type').style.display='none';

    //     $('#start-date1').val('');

    //     $('#end_date1').val('');

    //     $('#no_of_day').val('');

    //     daysBetween();

    // }



    // function hideenddate() {

    //     document.getElementById('end_date').style.display='none';

    //     document.getElementById('half_day_type').style.display='block';

    //     $('#start-date1').val('');

    //     $('#end-date1').val('');

    //     $('#no_of_day').val('');

    //     daysBetween();

    // }



    function showenddate() {

        document.getElementById('end_date').style.display = 'block';

        document.getElementById('half_day_type').style.display = 'none';

        // $('#start-dates').val('');

        // $('#end-dates').val('');

        $('#no_of_day').val('');

        $('#end_date').show();

        $('#timeSlot').hide();

        $('#openHours').hide();

        $('.TotalLeaveDays').show();

        $('.TotalLeaveHours').hide();

        $('#no_of_hours').val('');

        calculatedays();

    }



    function hideenddate() {

        document.getElementById('end_date').style.display = 'none';

        document.getElementById('half_day_type').style.display = 'block';

        $('#no_of_day').val('');

        $('#timeSlot').hide();

        $('#openHours').hide();

        $('#no_of_hours').val('');



        $('.TotalLeaveDays').show();

        $('.TotalLeaveHours').hide();

        calculatedays();

    }



    function daysBetween() {



        var statDate = $('#start-date1').val();

        var endDate = $('#end-date1').val();

        const date1 = new Date(statDate);

        const date2 = new Date(endDate);



        const oneDay = 1000 * 60 * 60 * 24;





        const diffInTime = date2.getTime() - date1.getTime();

        const diffInDaysb = 0;

        if (statDate == "" && endDate == "" && $("input[name='hof']:checked").val() == 0) {

            diffInDays = 0;

        }

        if (statDate !== "" && endDate == "" && $("input[name='hof']:checked").val() == 0) {

            diffInDays = 0;

        }

        if (statDate == endDate && $("input[name='hof']:checked").val() == 0) {

            diffInDays = 1;

        }

        if (statDate != endDate && $("input[name='hof']:checked").val() == 0) {

            diffInDays = Math.round(diffInTime / oneDay) + 1;

        }

        // console.log(statDate != endDate, $("input[name='hof']").val() == 0, $("input[name='hof']:checked").val());

        if ($("input[name='hof']:checked").val() == 1) {

            diffInDays = 0.5;

        }



        $('#no_of_days').val(diffInDays);

    }



    leaveTypeChange();



    function hourlySlot() {

        $('#end_date').hide();

        $('#half_day_type').hide();

        $('#timeSlot').show();

        $('#openHours').show();

        $('.TotalLeaveDays').hide();

        $('.TotalLeaveHours').show();

        calculatedays();

    }



    function leaveTypeChange() {

        var leave_type = $('#leave_type').val();

        var ltype = leave_type.split(":");

        var hourly_allow = $("#hourly_" + ltype[0]).val();

        if (hourly_allow == 1) {

            $("#inlineRadio3").prop('disabled', false)

            $("#inlineRadio2").prop("checked", true);

            $("#inlineRadio1").prop('disabled', false);

            $("#inlineRadio2").prop('disabled', false);

            showenddate();

        } else {

            showenddate();

            $("#inlineRadio1").prop('disabled', false);

            $("#inlineRadio2").prop('disabled', false);

            $("#inlineRadio3").prop('disabled', true);

            $("#inlineRadio2").prop("checked", true);

        }

    }



    function leave_type_change(divId, element) {

        leaveTypeChange();

        var str = element.value;

        var myArr = str.split(":");

        document.getElementById(divId).style.display = myArr[1] == 1 ? 'block' : 'none';

    }



    function calculatedays() {

        var rad = $('input[name=hof]:checked').val();

        var endDate = $("#end-date1").val();

        if ($('input[name="hof"]:checked').val() == 0 && $("#basicSelect").val() == "" && $("#end-date1").val() == "" &&

            $("#start-date1").val() == "") {

            return;

        }

        if ($('input[name="hof"]:checked').val() == 1) {

            endDate = $("#start-date1").val();

        }

        if ($('input[name="hof"]:checked').val() == 2) {

            var data = {

                'username': $("#employee").val(),

                'type': $("#basicSelect").val(),

                'start_date': $("#start-date1").val(),

                'end_date': $("#start-date1").val(),

                'time_from': $("#time_from").val(),

                'time_for': $("#time_for").val(),

                'hourly': 1,

                'no_of_hours': $("#no_of_hours").val(),

                '_token': "{{ csrf_token() }}",

            }

        } else {

            var data = {

                'username': $("#employee").val(),

                'type': $("#basicSelect").val(),

                'start_date': $("#start-date1").val(),

                'end_date': endDate,

                "is_half_day": $('input[name="hof"]:checked').val(),

                '_token': "{{ csrf_token() }}",

                'action': "getLeaveDaysCount"

            }

        }

        $.ajax({

            type: "POST",

            url: "{{ route('remainingDays11') }}",

            data: data,

            before: function(response) {

                //console.log(response);

                // console.log(response);

            },

            success: function(response) {

                //console.log(response.no_leave_days);

                //$("#no-of-days").val(response.no_leave_days);

                if ($("input[name='hof']:checked").val() == 1) {

                    if (response.no_leave_days != 0) {

                        $totlleaveday = 0.5;

                    } else {

                        $totlleaveday = response.no_leave_days;

                    }



                }

                if ($("input[name='hof']:checked").val() == 0) {

                    $totlleaveday = response.no_leave_days;

                }

                if ($("input[name='hof']:checked").val() == 2) {

                    $("#no_of_hours").val(response.no_leave_days);

                } else {

                    $("#no_of_day").val($totlleaveday);

                }

                $("#msg").empty();

                if (response.no_leave_days == 0) {

                    $("#msg").append('<p style="color:red;">Applied dates no valid</p>');

                    document.getElementById("apply").disabled = true;

                }

                if (response.no_leave_days > 0) {

                    document.getElementById("apply").disabled = false;



                }

                // console.log(response);

            },

            error: function(response) {

                // console.log(response);

                // console.log(response);

            }

        });



    }



    // function calculatedays()

    // {

    //     var endDate = $("#end-date1").val();

    //     if($('input[name="hof"]:checked').val() == 0 && $("#basicSelect").val() == "" && $("#end-date1").val() == "" && $("#start-date1").val() == "" ){

    //         return;

    //     }

    //     if($('input[name="hof"]:checked').val() == 1){

    //         endDate = $("#start-date1").val();

    //     }

    //     var data = {

    //         'username':  $("#employee").val(),

    //         'type':  $("#basicSelect").val(),

    //         'start_date':  $("#start-date1").val(),

    //         'end_date': endDate,

    //         "is_half_day": $('input[name="hof"]:checked').val(),

    //         '_token' : "{{ csrf_token() }}",

    //         'action': "getLeaveDaysCount"

    //     }

    //     $.ajax({

    //         type: "POST",

    //         url: "{{ route('remainingDays11') }}",

    //         data: data,

    //         before: function (response) {

    //             //console.log(response);

    //             // console.log(response);

    //         },

    //         success: function (response) {

    //             console.log(response.no_leave_days);

    //             //$("#no-of-days").val(response.no_leave_days);

    //             if($("input[name='hof']:checked").val() == 1){

    //                 if(response.no_leave_days!=0){

    //                     $totlleaveday=0.5;

    //                 }

    //                 else{

    //                     $totlleaveday=response.no_leave_days;

    //                 }



    //             }

    //             if($("input[name='hof']:checked").val() == 0){

    //                 $totlleaveday=response.no_leave_days;

    //             }

    //             // if($("input[name='hof']:checked").val() == 2){

    //             //     $totlleaveday=response.no_leave_days;

    //             // }





    //             $("#no_of_day").val($totlleaveday);

    //             $("#msg").empty();

    //             if(response.no_leave_days==0){

    //             $("#msg").append('<p style="color:red;">Applied dates no valid</p>');

    //             document.getElementById("apply").disabled = true;

    //             }

    //             if(response.no_leave_days>0){

    //              document.getElementById("apply").disabled = false;



    //             }

    //             // console.log(response);

    //         },

    //         error: function (response) {

    //             console.log(response);

    //             // console.log(response);

    //         }

    //     });



    // }



    function leaveType() {

        var username = $('#employee').val();

        $.ajax({

            type: 'GET',

            url: '{{ route('leaveType') }}',

            data: {

                username: username

            },

            success: function(data) {

                if (data) {

                    $("#leave_type").empty();

                    $.each(data, function(key, value) {

                        $("#leave_type").append('<option value="' + value.type + ':' + value

                            .upload + ':' + value.compulsory + '">' + value.name + '</option>');

                    });

                }

            }

        });

    }





    function saveDetails(e) {

        $("#apply").prop("disabled", true);

        var employee = $("#employee").val();

        var str = $("#leave_type").val();

        var myArr = str.split(":");

        var reason = $("#reason").val();

        var slip_file = $("#slip_file").val();

        var rad = $('input[name=hof]:checked').val();



        if (employee == '') {

            $("#msg").empty();

            $("#msg").append('<p style="color:red;">Please Select Employee Name</p>');

            return false;

        }

        if (rad == 2) {

            if (document.getElementById('inlineRadio3').checked == true) {

                var stdate = $("#start-date1").val();

                //alert(stdate);

                //console.log(stdate);

                $("#msg").empty();

                if (stdate == '') {

                    $("#msg").append('<p style="color:red;">Please Select Leave Start Date</p>');

                    return false;



                }

            }

        }

        if (document.getElementById('inlineRadio2').checked == true) {

            var stdate = $("#start-date1").val();

            var endate = $("#end-date1").val();

            $("#msg").empty();

            if (stdate == '') {

                $("#msg").append('<p style="color:red;">Please Select Leave Start Date</p>');

                return false;

            }

            if (endate == '') {

                $("#msg").append('<p style="color:red;">Please Select Leave End Date</p>');

                return false;

            }

        }

        if (0 == 1) {

            if (document.getElementById('inlineRadio1').checked == true) {

                var stdate = $("#start-date1").val();

                $("#msg").empty();

                if (stdate == '') {

                    $("#msg").append('<p style="color:red;">Please Select Leave Start Date</p>');

                    return false;

                }

            }

        }

        if (myArr[2] == 1) {

            if (slip_file == '') {

                $("#msg").empty();

                $("#msg").append('<p style="color:red;">Please Upload File</p>');

                return false;

            }

        }

        if (reason == '') {

            $("#msg").empty();

            $("#msg").append('<p style="color:red;">Reason cannot be blank.</p>')

            return false;

        }

        var leaveForm = document.querySelector("#all-filter11");

        var data = new FormData(leaveForm);

        $('#type-error').html('');

        $('#day-error').html('');

        $('#start-date-error').html('');

        $('#end-date-error').html('');

        $('#relive-error').html('');

        $('#reason-error').html('');

        $.ajax({

            url: '{{ route('applyonbehalf') }}',

            contentType: false,

            cache: false,

            processData: false,

            method: 'POST',

            data: data,

            success: function(e) {
                if (e.result) {

                    $("#msg").empty();

                    $("#msg").append('<p style="color:green;">Leave Applied Sucessfully</p>');

                    $("#apply").prop("disabled", false);

                    window.location.reload();

                } else {

                    $("#apply").prop("disabled", false);

                    $("#msg").empty();

                    if (e.msg) {

                        $("#msg").append('<p style="color:red;">' + e.msg + '</p>');

                    }

                }

            },

            error: function(w) {

                if (w.responseJSON.errors) {

                    if (w.responseJSON.errors.leave_type) {

                        $('#type-error').html(w.responseJSON.errors.leave_type[0]);

                    }

                    if (w.responseJSON.errors.hof) {

                        $('#day-error').html(w.responseJSON.errors.hof[0]);

                    }

                    if (w.responseJSON.errors.leave_start_date) {

                        $('#start-date-error').html(w.responseJSON.errors.leave_start_date[0]);

                    }

                    if (w.responseJSON.errors.leave_end_date) {

                        $('#end-date-error').html(w.responseJSON.errors.leave_end_date[0]);

                    }

                    if (w.responseJSON.errors.reason) {

                        $('#reason-error').html(w.responseJSON.errors.reason[0]);

                    }

                    if (w.responseJSON.errors.relieve) {

                        $('#relive-error').html(w.responseJSON.errors.relieve[0]);

                    }



                }

            }

        });





    }

</script>