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

<style>

    .table thead th {

        padding: 8px 10px !important;

    }



    a.disable {

        pointer-events: none;

    }

</style>



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

                        <div class="breadcrumb-wrapper">

                            <ol class="breadcrumb mt-3">

                                <li class="breadcrumb-item">HR

                                </li>

                                </li>

                                <li class="breadcrumb-item active"><a

                                        href="{{ route('reports.attendance-summary') }}">Request 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-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="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 mt-1">

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

            </section> -->

        </div>



        <div class="content-body">

            <section id="dashboard-ecommerce">

                <div class="row match-height">

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

                        <div class="card">



                            <div class="card-header" style="">

                                <div class="">

                                    <button onclick="more_filter()"

                                        class="btn btn-primary waves-effect waves-float waves-light"

                                        style="">Filter</button>

                                </div>

                                <div class="d-flex align-items-right">

                                    <div class="btn-group btn-align-right MiniRightnav">

                                        <a onclick="exportpdf()" class="text-danger"><i

                                                class="fa fa-file-pdf-o report-download-btn"

                                                style="font-size:25px;"></i><span>Download PDF</span></a>

                                        &nbsp;&nbsp;

                                        <a onclick="exportexcel()" class="text-success"><i

                                                class="fa fa-file-excel-o report-download-btn"

                                                style="font-size:25px;"></i><span>Download Excel</span></a>



                                        &nbsp;&nbsp;

                                        {{-- hide and show --}}

                                        <div class="dropdown">

                                            <button class="dropbtn fa fa-gear"></button>

                                            <div id="myDropdown" class="dropdown-content">



                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class="card activity filter-container"

                                style="margin: 0px 15px; background-color:#e6e5e5; padding:10px 20px 20px 20px; display:none !important;"

                                id="empleavetoday">

                                <div class="row">

                                    <div class="col-md-12" style="padding:0px;">

                                        <button id="spanclose" onclick="more_filter()"

                                            style="float:right;border:0px;background-color:transparent;color:white;padding: 3px 8px 5px;">

                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"

                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"

                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"

                                                class="feather feather-x cursor-pointer font-large-1"

                                                data-repeater-delete="">

                                                <line x1="18" y1="6" x2="6" y2="18">

                                                </line>

                                                <line x1="6" y1="6" x2="18" y2="18">

                                                </line>

                                            </svg>

                                        </button>

                                    </div>

                                </div>

                                <div class="row">



                                    <div class="col-sm-3 filter-form-group mb-1">

                                        Date From &nbsp;:

                                        <input type="date" name="sdatefrom" id="sdatefrom"

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

                                            data-dateformat="dd-mm-yy">

                                    </div>

                                    <div class="col-sm-3 filter-form-group mb-1">

                                        Date To &nbsp;:<span class="red">*</span>&nbsp;

                                        <input type="date" name="sdateto" id="sdateto"

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

                                            data-dateformat="dd-mm-yy">

                                    </div>



                                    {{-- <div class="col-sm-3 filter-form-group mb-1">

                                        Employee&nbsp;:&nbsp;

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

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

                                            @foreach ($emps as $emp)

                                                <option value="{{ $emp->username }}">{{ $emp->name }}

                                                </option>

                                            @endforeach

                                        </select>

                                    </div> --}}



                                    <div class="col-sm-6 filter-form-group" style="margin-top:19px;">

                                        <input type="button" value="Apply" onclick="getfilterdata();"

                                            class="filter-apply btn btn-info" />

                                    </div>

                                </div>

                            </div>





                            <div class="p-2">

                                <h1>OT Request Report</h1>

                            </div>



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

                                <div class="table-responsive" style="overflow: unset;">

                                    <table class="table table-striped  my-leave-summary-entitle" id="reporttable"

                                        style="font-size:12px;">

                                        <thead>

                                            <tr>

                                                {{-- <th style="text-transform: capitalize;">Approver Name</th> --}}

                                                <th style="text-transform: capitalize;">Emp No.</th>

                                                <th style="text-transform: capitalize;  width: 18%;">Name</th>

                                                <th style="text-transform: capitalize;">Working Date</th>

                                                <th style="text-transform: capitalize;">Time</th>

                                                <th style="text-transform: capitalize;">Hours</th>

                                                <th style="text-transform: capitalize;">Reason</th>

                                                <th style="text-transform: capitalize; width: 10%;">Status</th>

                                                {{-- <th style="text-transform: capitalize;" style="text-align:center;">

                                                <input type="checkbox" id="checkAll">

                                                </th> --}}

                                            </tr>

                                        </thead>

                                        <tbody id="listbd">





                                        </tbody>

                                    </table>

                                    <!-- </div> -->

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </section>

        </div>

    </div>

</div>

<!-- END: Content-->

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

@include('E-Attendance.edit_attendance')

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

<script type="text/javascript"></script>

<script type="text/javascript">

    var base_url = $('body').attr('data-baseurl') + '/e-attendance';

    $(document).ready(function() {

        getfilterdata();

    });







    function getfilterdata() {



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

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



        // var url = 'allEmpOtData?type=HR&sdatefrom=' + sdatefrom + '&sdateto'

        var i = 1;

        $('#reporttable').DataTable({

            "lengthMenu": [

                [10, 20, 50, -1],

                [10, 20, 50, "All"]

            ],

            "processing": true,

            "destroy": true,

            "serverSide": true,

            "ajax": {

                "url": "{!! route('allEmpOtData') !!}",

                "type": 'GET',

                "data": {

                    'type': 'HR',

                    'sdatefrom': sdatefrom,

                    'sdateto': sdateto

                }

            },

            "columns": [{

                    data: 'emp_id',

                    name: 'emp_id'

                }, {

                    data: 'emp_name',

                    name: 'emp_name'

                },{

    name: 'working_date',

    "render": function(data, type, row, meta) {

        var datee = new Date(row.working_date);



        var day = datee.getDate().toString()

        if (day.length == 1) {

            day = "0" + day;

        }



        var month = (datee.getMonth() + 1).toString(); // Increment month by 1

        if (month.length == 1) {

            month = "0" + month;

        }

        

        var text = day + "-" + month + "-" + datee.getFullYear();

        return text;

    }

}

, {

                    data: 'time',

                    name: 'time'

                }, {

                    data: 'hrs',

                    name: 'hrs'

                }, {

                    data: 'reason',

                    name: 'reason'

                }, {

                    "render": function(data, type, row, meta) {

                        if (row['status'] == 0) {

                            var color = '#82868b';

                            var sts = 'pending';

                        } else if (row['status'] == 1) {

                            var color = '#28c76f';

                            var sts = 'approved';

                        } else if (row['status'] == 2) {

                            var color = '#ea5455';

                            var sts = 'Rejected';

                        }



                        var text =

                            `<div class="status-fd" style="color: ${color}"> ⦿ ${sts}</div>`;

                        return text;

                    }

                },



                // {

                //     "render": function(data, type, row, meta) {

                //         var edit =

                //             '<input type="checkbox" class="username_checkbox" name="inlineRadioOptions"id="amark' +

                //             row.i + '" value="' + row.id + '"/>';

                //         return edit;

                //     },

                // }

            ],

            "language": {

                "paginate": {

                    "previous": '&nbsp;',

                    "next": '&nbsp;'

                }

            },

            'columnDefs': [{

                "targets": [],

                "orderable": false

            }],

        });

        var columns = table.settings().init().columns;

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

            //

            var dCol =

                `<div class="toggle-vis custom-control mt-1 ml-1 custom-control-success custom-checkbox"><input class='inp custom-control-input' data-column="${i}" key="{!! $c_key !!}" id="{!! $c_key !!}_${i}"  type="checkbox" checked><label for="{!! $c_key !!}_${i}" class="custom-control-label" style="cursor: pointer">${columns[i].name}</label></div>`;

            $("#myDropdown").append(dCol);

        }



        // show hide and show data

        var daraArr = {!! json_encode($columnHideShowData) !!}

        hidefun(table, '{!! $c_key !!}', daraArr);

    }



    // excel download option



    function exportexcel() {

        var exportdata = [];

        $('.singleSelectBox').each(function() {

            if ($(this).is(":checked")) {

                exportdata.push($(this).val());

            }

        });

        exportdata = exportdata.toString();

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

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

        var random = Math.random();

        let url = "ot-report-excel?sdatefrom=" + sdatefrom + "&sdateto=" + sdateto + "&exportdata=" + exportdata +

            "&type=HR" + "&random=" + random;

        window.location.href = url;



    }



    // excel download option



    function exportpdf() {

        var exportdata = [];

        $('.singleSelectBox').each(function() {

            if ($(this).is(":checked")) {

                exportdata.push($(this).val());

            }

        });

        exportdata = exportdata.toString();

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

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

        var random = Math.random();

        let url = "ot-report-pdf?sdatefrom=" + sdatefrom + "&sdateto=" + sdateto + "&exportdata=" + exportdata +

            "&type=HR" + "&random=" + random;

        window.location.href = url;

    }

    // pdf download option





    var x = document.getElementById("empleavetoday");

    x.style.display = "none";



    function more_filter() {

        var x = document.getElementById("empleavetoday");

        if (x.style.display === "none") {

            x.style.display = "block";

        } else {

            x.style.display = "none";

        }

    }

</script>





{{-- Ot request and calender --}}

<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('getRL_Approvers') }}',

            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();

        $("#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/ot-report.blade.php:1387
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/E-Attendance/ot-report.blade.php</b> on line <b>1387</b><br />