{{ 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>
<!-- 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">
                        <h2 class="content-header-title float-left mb-0">E-Attendance</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">Employee
                                </li>
                                <li class="breadcrumb-item active"><a href="#">Request for OT</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">
                                <h4 class="card-title">OT Request</h4>
                            </div>
                            <div class="card-body" style="padding-top:0px;">
                                <form id="all-filter11" method="post" enctype="multipart/form-data">
                                    <input type="hidden" name="year" id="year" class="form-control"
                                        style="" value="{{ date('Y') }}" placeholder="">

                                    <div class="row" id="leave">
                                        <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">Approver :</label>
                                                <select class="form-control" name="approver_" id="approver" disabled>
                                                </select>
                                                <input type="hidden" name="approver" id="approver_val" />
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-12">
                                            <div class="form-group">
                                                <label class="form-label" for="payment-date">Work Date :</label>

                                                <input type="date" name="lstartdate" id="lstartdate"
                                                    class="form-control flatpickr-basic" style="padding-left: 10px;"
                                                    autocomplete="off" value="" placeholder="DD-MM-YYYY" readonly>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-12">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>Time From</label>
                                                        <input class="form-control" type="time" id="time_from"
                                                            name="time_from">
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>Time To</label>
                                                        <input class="form-control" type="time" id="time_to"
                                                            name="time_to">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-12">
                                            <div class="form-group">
                                                <label>Reason</label>
                                                <textarea class="form-control" name="rl_reason" id="rl_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 mb-1">
                                            <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="apply_Ot()" class="btn btn-info mr-1"
                                                    id="apply" style="width: 30%;">Apply</button>
                                                <button type="button" onclick="clear_form('#leave')"
                                                    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">
                                <h4 class="card-title">Overtime Request</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 " style="padding-top:0px;">
                                                <div id="calendar"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12 col-md-12 col-12">
                    <div class="content-body">
                        <!-- Dashboard Ecommerce Starts -->
                        <section id="multiple-column-form">
                            <div class="card">
                                <div class="card-header" style="">
                                    <div class="d-flex align-items-center">
                                        <h4 class="card-title" style="margin-bottom:0px;">Requested OT</h4>
                                    </div>
                                    <div class="row">
                                        <div class="mt-2">
                                            <button type="button"
                                                class="btn btn-danger waves-effect waves-float waves-light  reject-visible-btn"
                                                disabled>Delete</button>
                                        </div>
                                        &nbsp;
                                    </div>

                                </div>
                                <div class="card-body" style="padding-top:0px !important; ">
                                    <div class="table-responsive " style="overflow-x: unset !important;">
                                        <table class="table table-striped" id="reporttable" style=" font-size:12px;">
                                            <thead>
                                                <tr>
                                                    <th width="15%" style="text-transform: capitalize;">Date</th>
                                                    <th width="15%" style="text-transform: capitalize;">Time</th>
                                                    <th width="15%" style="text-transform: capitalize;">Hours</th>
                                                    <th width="15%" style="text-transform: capitalize;">Reason</th>
                                                    <th width="15%" style="text-transform: capitalize;">Status</th>
                                                    <th width="15%" style="text-transform: capitalize;">Requested
                                                        Date</th>
                                                    <th style="text-transform:capitalize; white-space: nowrap; border: none;"
                                                        width="15%"><input type="checkbox" id="checkAll"></th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade text-left" id="inlineForm11" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel33" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel33">Update OT Request Data</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="row container">
                    <input type="hidden" name="username" id="username" value="">
                    <input type="hidden" name="id" id="id" value="">
                    <div class="col-md-6 mb-2 mt-2">
                        <label for="">Time From</label>
                        <input type="time" id="from_time" class="form-control" value="">
                    </div>
                    <div class="col-md-6 mb-2 mt-2">
                        <label for="">Time To</label>
                        <input type="time" id="to_time" class="form-control" value="">
                    </div>
                    <div class="col-md-6 mb-2">
                        <label for="">Date</label>
                        <input type="date" id="working_date" class="form-control" value="">
                    </div>
                    <div class="col-md-6 mb-2">
                        <label for="">Reason</label>
                        <textarea class="form-control" id="reason"></textarea>
                    </div>
                </div>
                <div class='col-md-12 mb-2 text-center'>
                    <a onclick='updatedRequestOt()' style='margin-top:23px;' class='edcc btn btn-info'>Update</a>
                </div>
            </div>
        </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>
    var currentMonth = (new Date).getMonth();



    var today = new Date();

    var dd = today.getDate();

    var mm = today.getMonth() + 1;

    var yyyy = today.getFullYear();

    var pastemp = 0;

    var pastleavepermission = '';

    var max_noof_pastleave = 0;

    var nextStepAllowed = 1;
    var currentYear = (new Date).getFullYear();
    var rlpendingVal = '';
    var calender;
    if (dd < 10) {
        dd = '0' + dd
    }
    if (mm < 10) {
        mm = '0' + mm
    }
    today = dd + '-' + mm + '-' + yyyy;


    function getApprover() {
        $.ajax({
            type: 'get',
            url: '{{ route('getMyApprover') }}',
            success: function(resObj) {
                var html = '';
                for (var i = 0; i < resObj.length; i++) {
                    if (resObj[i].name != '' && resObj[i].name != null) {
                        if (i == 0) {
                            $("#approver_val").val(resObj[i].username);
                            html += '<option value="' + resObj[i].username + '" selected="selected">' +
                                resObj[i].name + '</option>';
                        } else {
                            html += '<option value="' + resObj[i].username + '" >' + resObj[i].name +
                                '</option>';
                        }
                    }
                }
                $("#approver").html(html);
            }
        });
    }
    $(document).ready(function() {
        getApprover();
        empOtData();
        $("#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');

            },
        });

    });


    function apply_Ot() {
        if (validate()) {
            var noday = 0;

            $.ajax({
                type: 'post',
                url: '{{ route('addOtReq') }}',
                data: {
                    _token: '<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/ecoleave/public_html/backup/v6/resources/views/E-Attendance/approvals/ot-request.blade.php:441
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/E-Attendance/approvals/ot-request.blade.php</b> on line <b>441</b><br />