{{ View::make('layout.header') }}
<!-- END: Custom CSS-->

<style>
    .timeline .timeline-item .timeline-event h6 {
        word-break: break-all;
    }
</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="#">Approve / Reject / Cancel</a>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body mb-5">
            <!-- Dashboard Ecommerce Starts -->
            <section id="dashboard-ecommerce">
                <div class="row match-height">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header" style="">
                                <div class="btn-group">
                                    <div class="">
                                        <button onclick="more_filter()"
                                            class="btn btn-primary waves-effect waves-float waves-light"
                                            style="">Filter</button>
                                    </div>
                                    <div class="btn-group" style="margin-left:20px;">
                                        <button type="button"
                                            class="btn btn-success waves-effect waves-float waves-light approved-btn"
                                            disabled data-toggle="modal" data-target="#exampleModal">Approve</button>
                                        &nbsp;&nbsp;
                                        <button type="button"
                                            class="btn btn-danger waves-effect waves-float waves-light  reject-visible-btn"
                                            disabled data-toggle="modal" data-target="#rejectModal">Reject</button>
                                        &nbsp;&nbsp;
                                        {{-- <button type="button"
                                            class="btn  btn-warning waves-effect waves-float waves-light cancel-visible-btn"
                                            disabled data-toggle="modal" data-target="#cancelModal">Cancel</button> --}}
                                    </div>
                                </div>

                                <div class="d-sm-flex justify-content-between align-items-center"
                                    style="margin: 0px 0;">
                                    <div class="d-flex align-items-right">
                                        <div class="btn-group btn-align-right">
                                        </div>
                                    </div>
                                </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;

                                    </div>
                                </div>

                            </div>
                            <style>
                                .ilter-container {


                                    display: none !important;

                                }
                            </style>
                            <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-6 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-6 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-6 filter-form-group mb-1">
                                        Status &nbsp;:<span class="red">*</span>&nbsp;
                                        <select name="status-filter" class="tcal form-control" id="status-filter">
                                            <option value="4" default>All</option>
                                            <option value="1">Approved</option>
                                            <option value="0">Pending</option>
                                            <option value="2">Rejected</option>
                                        </select>
                                    </div>

                                    <div class="col-sm-6 filter-form-group" style="margin-top:19px;">
                                        <input type="button" value="Apply" onclick="search();"
                                            class="filter-apply btn btn-info" />
                                    </div>
                                </div>
                            </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;">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;">Requested Date</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>
            </section>
            <!-- Dashboard Ecommerce ends -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <h5 class="modal-title" id="exampleModalLabel">Are you sure want approve the OT(s)?
                            </h5>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary yes-btn">Yes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="rejectModal" tabindex="-1" role="dialog"
                aria-labelledby="rejectModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Are you sure want reject the OT(s)?</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="leave_id" id="leaveID">
                            <div id="rmsg"></div>
                            <label>Please enter reject Reason</label>
                            <input type="text" name="reason" id="rejectReason" class="form-control">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger reject-btn">OK</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="cancelModal" tabindex="-1" role="dialog"
                aria-labelledby="rejectModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Are you sure want cancel OT ?</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="leave_id" id="leaveID">
                            <div id="cmsg"></div>
                            <label>Please enter cancellation Reason</label>
                            <input type="text" name="reason" id="cancelReason" class="form-control">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger cancel-btn">OK</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Content-->
{{ View::make('layout.footer') }}
@include('inc.timline-model')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
    $('.yes-btn').attr('disabled', false);
    $('.reject-btn').attr('disabled', false);
    $('.delete-btn').attr('disabled', false);
    $('.reject-btn1').attr('disabled', false);
    $(document).on('click', 'input[name="inlineRadioOptions"]', function() {
        $('.approved-btn').attr('disabled', false);
        $('.reject-visible-btn').attr('disabled', false);
        $('.cancel-visible-btn').attr('disabled', false);
    });

    $(document).on('click', 'input[name="inlineRadioOptions11"]', function() {
        $('.approved-btn1').attr('disabled', false);
        $('.reject-visible-btn1').attr('disabled', false);
        $('.delete-visible-btn1').attr('disabled', false);
    });
    $(document).on('click', '.yes-btn', function() {
        var arrId = [];
        var status = 1;
        $('.yes-btn').attr('disabled', true);
        $.each($('input[class="username_checkbox"]:checked'), function() {
            var str = $(this).val();
            arrId.push(str);
        });

        var url = '{{ route('approveOTUsers') }}';
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                '_token': "{{ csrf_token() }}",
                'status': status,
                'ids': arrId

            },
            success: function(e) {
                window.location.reload();
            },
            error: function(w) {}
        });
    });

    $(document).on('click', '.reject-btn', function() {
        var arrId = [];
        var status = 2;
        $('.reject-btn').attr('disabled', true);
        if ($('#rejectReason').val() != '') {
            $.each($('input[class="username_checkbox"]:checked'), function() {
                var str = $(this).val();
                arrId.push(str);
            });


            var url = '{{ route('approveOTUsers') }}';
            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    '_token': "{{ csrf_token() }}",
                    'status': status,
                    'ids': arrId,
                    'reason': $('#rejectReason').val(),

                },
                success: function(e) {
                    window.location.reload();
                },
                error: function(w) {}
            });
        } else {
            $("#rmsg").empty();
            $("#rmsg").append('<p style="color:red;">Reason cannot be blank.</p>');
        }
    });

    // $(document).on('click', '.delete-btn', function() {
    //     var arrId = [];
    //     var arrstatus = [];
    //     $('.delete-btn').attr('disabled', true);
    //     $.each($('input[name="inlineRadioOptions11"]:checked'), function() {
    //         var str = $(this).val();
    //         var myArr = str.split(":");
    //         arrId.push(myArr[0]);
    //         arrstatus.push(myArr[1]);
    //     });
    //     //console.log(arrId);
    //     var url = '{{ route('deleteRLeave') }}';
    //     $.ajax({
    //         url: url,
    //         type: 'POST',
    //         data: {
    //             '_token': "{{ csrf_token() }}",
    //             'ids': arrId
    //         },
    //         success: function(e) {
    //             window.location.reload();
    //         },
    //         error: function(w) {}
    //     });

    // });
</script>


<script type="text/javascript">
    $(document).ready(function() {
        empOtData();
    });

    function search() {
        empOtData();
    }

    function empOtData() {
        var sdatefrom = $("#sdatefrom").val();
        var sdateto = $("#sdateto").val();
        var statusFilter = $("#status-filter").val();

        var i = 1;
        var string_url = "allEmpOtData?sdatefrom=" + sdatefrom + "&sdateto=" + sdateto + "&type=Approval"+"&status="+statusFilter;
        $('#reporttable').DataTable({
            "lengthMenu": [
                [10, 20, 50, -1],
                [10, 20, 50, "All"]
            ],
            "processing": true,
            "destroy": true,
            "serverSide": true,
            "ajax": string_url,
            "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;
                    }
                }, {
                    data: 'applied_date',
                    name: 'applied_date'
                },

                {
                    "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": [8],
                "orderable": false
            }],
        });
    }
</script>

<script>
    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";
        }
    }

    $("#checkAll").click(function() {
        $('.approved-btn').attr('disabled', false);
        $('.reject-visible-btn').attr('disabled', false);
        $('.cancel-visible-btn').attr('disabled', false);
        $('input:checkbox').not(this).filter('.username_checkbox').not(":disabled").prop('checked', this
            .checked);
    });
</script>

<script>
    // 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 = "reports/ot-report-excel?sdatefrom=" + sdatefrom + "&sdateto=" + sdateto + "&exportdata=" +
            exportdata + "&random=" + random + "&type=Approval";
        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 = "reports/ot-report-pdf?sdatefrom=" + sdatefrom + "&sdateto=" + sdateto + "&exportdata=" + exportdata +
            "&random=" + random + "&type=Approval";
        window.location.href = url;
    }
    // pdf download option
</script>