{{ View::make('layout.header') }}
<style>

</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="#">Print Report</a>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </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="btn-group">
                                    <input type="text" name="name" id="staff_name" class="form-control"
                                        placeholder="Staff name"
                                        style="padding-left: 10px; border-width: 0 1px 0 0px; border-radius:0px;"
                                        value="{{ request()->get('name') ? request()->get('name') : '' }}">
                                    &nbsp;&nbsp;&nbsp;&nbsp;<div class="">
                                        <button onclick="more_filter()"
                                            class="btn btn-primary waves-effect waves-float waves-light"
                                            style="">Filter</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 MiniRightnav">
                                            <!-- <a href="{{ route('report-pdf-doenload', ['name' => request()->get('name') ?? '', 'type' => request()->get('type') ?? '', 'status' => request()->get('status') ?? '']) }}" class="text-danger" ><i class="fa fa-file-pdf-o report-download-btn" style="font-size:25px;"></i></a> -->
                                            <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>
                            <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">
                                        Leave Type &nbsp;:<span class="red">*</span>&nbsp;
                                        <select class="select form-control" id="type" name="type">
                                            <option value="">All</option>
                                            @foreach ($leaveTypes as $leaveType)
                                                <option value="{{ $leaveType->type }}">{{ $leaveType->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <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">
                                        Employee Name &nbsp;:
                                        <input type="text" name="name" id="name" placeholder="Enter Name"
                                            class="tcal form-control">
                                    </div>
                                    <div class="col-sm-6 filter-form-group mb-1">
                                        Employee No. &nbsp;:
                                        <input type="text" name="phone" id="phone"
                                            placeholder="Enter Employee No." class="tcal form-control">
                                    </div>
                                    <div class="col-sm-6 filter-form-group mb-1">
                                        Status &nbsp;:<span class="red">*</span>&nbsp;
                                        <select name="status" id="status" class="select2 form-control">
                                            <option value="">All</option>
                                            <option value="0">Pending</option>
                                            <option value="1">Approved</option>
                                            <option value="2">Rejected</option>
                                            <option value="3">Recommended</option>
                                            <option value="4">Cancelled</option>
                                            <option value="5">Cancellation Pending</option>
                                        </select>
                                    </div>   
            <div class="col-sm-6 filter-form-group mb-1">
    Category &nbsp;:<span class="red">*</span>&nbsp;
    <select name="category" id="category" class="select2 form-control">
        <option value="">All</option>
        @foreach($categories as $id => $name)
            <option value="{{ $id }}">{{ $name }}</option>
        @endforeach
    </select>
</div>                                   
                                    <div class="col-sm-6 filter-form-group mb-1">
                                        Department &nbsp;:<span class="red">*</span>&nbsp;
                                        
                                                                                <select name="department" id="department" class="select2 form-control">
                                                                                            <option value="">All</option>
        @foreach($departments as $id => $name)
            <option value="{{ $id }}">{{ $name }}</option>
        @endforeach
        </select>
                                    </div>                                    
                                    <div class="col-sm-6 filter-form-group mb-1">
                                        Branch &nbsp;:<span class="red">*</span>&nbsp;
                                        <select name="branch" id="branch" class="select2 form-control">
                                                    <option value="">All</option>
        @foreach($branches as $id => $name)
            <option value="{{ $id }}">{{ $name }}</option>
        @endforeach
                                        </select>
                                    </div>
                                    
                                    <div class="col-sm-6 filter-form-group" style="margin-top:5px;">
                                        <input type="button" value="Apply" onclick="search();"
                                            class="filter-apply btn btn-info" />
                                    </div>
                                </div>
                            </div>
                            <div class="card-body"
                                style="padding-top:0px !important;  padding-bottom:0px !important;">
                                <div class="" style="overflow-x: unset !important;">
                                    <table class="table table-striped table-responsive" id="reporttable"
                                        style=" font-size:12px; table-layout: fixed;">
                                        <thead>
                                            <tr>
                                                <th style="text-transform: capitalize;" width="12%">Emp No.</th>
                                                                                                <th style="text-transform: capitalize;" width="{{ $percent }}%">
                                                    Name</th>
                                                <th style="text-transform: capitalize;" width="9%">Relief</th>
                                                <th style="text-transform: capitalize;" width="7%">Type</th>
                                                <th style="text-transform: capitalize;" width="15%">Date</th>
                                                <th style="text-transform: capitalize;white-space: nowrap;"
                                                    width="4%">Days</th>
                                                <th style="text-transform: capitalize;" width="16%">Reason</th>
                                                <th style="text-transform: capitalize;" width="20%">Status</th>
                                                <th style="text-transform: capitalize;" style="text-align:center;"
                                                    width="2%"><input type="checkbox" id="checkAll"></th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h4>Replacement Leaves </h4>
                            </div>
                            <div class="card-body"
                                style="padding-top:0px !important;  padding-bottom:0px !important;">

                                <div class="table-responsive" style="overflow-x: unset !important;">
                                    <table class="table table-striped" id="reporttable11"
                                        style=" font-size:12px; table-layout: fixed;">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Date</th>
                                                <th>Days / Hours</th>
                                                <th>Reason</th>
                                                <th>Applied On</th>
                                                <th>Status</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($replacement as $value)
                                                <tr>
                                                    <td>{{ $value->name }}</td>
                                                    <td>{{ $value->start_date }}</td>
                                                    <td>
                                                        @if ($value->is_hourly == 1)
                                                            {{ $value->no_hours }}
                                                        @else
                                                            {{ $value->no_granted }}
                                                        @endif
                                                    </td>
                                                    <td>{{ $value->reason }}</td>
                                                    <td>{{ $value->date_applied }}</td>
                                                    <td>{{ $value->status }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </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"></script>

<script type="text/javascript">
    var base_url = $('body').attr('data-baseurl') + '/e-leave';
    $(document).ready(function() {
        $('#reporttable11').DataTable({
            "lengthMenu": [
                [20, 50, 100, -1],
                [20, 50, 100, "All"]
            ],

            "processing": true,

            "language": {
                "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                }
            },

        });

        var table = $('#reporttable').DataTable({
            "lengthMenu": [
                [20, 50, 100, -1],
                [20, 50, 100, "All"]
            ],

            "processing": true,
            "destroy": true,
            "serverSide": true,
            "ajax": "{!! route('get-report-data') !!}",
            "order": [],
            "columns": [


                {
                    data: 'emp_no',
                    name: 'emp_no'
                },
                {
                    data: 'emp_name',
                    name: 'emp_name'
                },
                {
                    data: 'r_name',
                    name: 'Relief'
                },
                {
                    data: 'leave_type',
                    name: 'Type',
                    "render": function(data, type, row, meta) {
                        var ltype = '';
                        var ids = row.id;
                        if (row.filename != '') {
                            ltype += '<a href="' + base_url + '/view-file/' + row.leave_id +
                                '" style="color:blue;">';
                            ltype += row.leave_type;
                            ltype += '</a>';
                        } else {
                            ltype += row.leave_type;
                        }
                        return ltype;
                    }
                },
                {
                    data: 'start_date',
                    name: 'Date',
                    "render": function(data, type, row, meta) {
                        var date = row.start_date != null ? row.start_date.split("-").reverse()
                            .join("-") : ''
                        var ldate =
                            '<a class="appDialog-model" data-toggle="modal" data-target="#inlineForm" data-id="' +
                            row.id + '" style="color:#3192F4;">' + date + '</a>';


                        return ldate;
                    }
                },
                {
                    data: 'no_days',
                    name: 'Days',
                    "render": function(data, type, row, meta) {
                        if (row.is_hourly != 0) {
                            var nodays = parseFloat(row.no_of_hours).toFixed(2) + ' Hour(s)';
                        } else {
                            var nodays = row.no_days + '&nbsp;' + row.half_day + ' Day(s)';
                        }

                        return nodays;
                    }
                },
                {
                    data: 'reason',
                    name: 'Reason'
                },
                {
                    data: 'leave_status',
                    name: 'Status',

                    "render": function(data, type, row, meta) {
                        var colorData = row.back_color;
                        // var leave = `<div class="status-fd"><div style="display:inline-block; margin-top:5px; margin-right:5%; border-width: 2px; border-style:solid; border-color: ${colorData}; border-radius: 50%;width: 12px;height: 12px;text-align:center;"><div style="height: 5px;width: 5px; background-color: ${colorData}; border-radius: 50%;padding:2px 2px;margin: auto auto;margin-top:1.5px;"></div></div>`+ row.leave_status +`</div>`;
                        var leave = `<div class="status-fd" style="color: ${colorData}"> ⦿  ` +
                            row.leave_status + `</div>`;
                        return leave;
                    }

                },
                {
                    name: 'Action',
                    "render": function(data, type, row, meta) {
                        var action =
                            '<input type="checkbox" alldata[] class="singleSelectBox" data-id="' +
                            row.id + '" value="' + row.id + '">';
                        return action;
                    }
                },

            ],
            'columnDefs': [{
                "targets": [8],
                "orderable": false
            }],
            "language": {
                "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                }
            },
            'rowCallback': function(row, data, index) {
                $(row).find('td:eq(7)').css('color', data.back_color);
                $(row).find('td:eq(7)').css('width', '20%');
                $(row).find('td:eq(7)').css('font-weight', 'bold');
                $(row).find('td:eq(6)').css('word-break', 'break-all');
                $(row).find('td:eq(8)').css('text-align', 'center');
            }


        });


        getfilterdata();
    });
    $("#staff_name").keyup(function() {

        getfilterdata();
        document.getElementById("type").value = '';
        document.getElementById("status").value = '';
        document.getElementById("sdatefrom").value = '';
        document.getElementById("sdateto").value = '';
        document.getElementById("name").value = '';
        document.getElementById("phone").value = '';
    });

    function search() {
        getfilterdata();
        document.getElementById("staff_name").value = '';

    }

    function getfilterdata() {

        var nam = $("#staff_name").val();
        var type = $("#type").val();
        var status = $("#status").val();
        var ename = $("#name").val();
        var phone = $("#phone").val();
        var from = $("#sdatefrom").val();
        var to = $("#sdateto").val();
        var category = $("#category").val();
        var department = $("#department").val();
        var branch = $("#branch").val();


        var string_url = "getreportdata?name=" + nam + "&type=" + type + "&status=" + status + "&ename=" + ename +
            "&phone=" + phone + "&from=" + from + "&to=" + to+"&branch="+branch+"&category="+category+"&department="+department;

        var table = $('#reporttable').DataTable({
            "lengthMenu": [
                [20, 50, 100, -1],
                [20, 50, 100, "All"]
            ],
            "processing": true,
            "destroy": true,
            "serverSide": true,
            "order": [],
            "ajax": string_url,

            "columns": [


                {
                    data: 'emp_no',
                    name: 'emp_no'
                },
                {
                    data: 'emp_name',
                    name: 'emp_name'
                },
                {
                    data: 'r_name',
                    name: 'Relief'
                },
                {
                    data: 'leave_type',
                    name: 'Type',
                    "render": function(data, type, row, meta) {
                        var ltype = '';
                        var ids = row.id;
                        if (row.filename != '') {
                            ltype += '<a href="' + base_url + '/view-file/' + row.leave_id +
                                '" style="color:blue;">';
                            ltype += row.leave_type;
                            ltype += '</a>';
                        } else {
                            ltype += row.leave_type;
                        }
                        return ltype;
                    }
                },
                {
                    data: 'start_date',
                    name: 'Date',
                    "render": function(data, type, row, meta) {
                        var date = row.start_date != null ? row.start_date.split("-").reverse()
                            .join("-") : ''
                        var ldate =
                            '<a class="appDialog-model" data-toggle="modal" data-target="#inlineForm" data-id="' +
                            row.id + '" style="color:#3192F4;">' + date + '</a>';


                        return ldate;
                    }
                },
                {
                    data: 'no_days',
                    name: 'Days',
                    "render": function(data, type, row, meta) {
                        if (row.is_hourly != 0) {
                            var nodays = parseFloat(row.no_of_hours).toFixed(2) + ' Hour(s)';
                        } else {
                            var nodays = row.no_days + '&nbsp;' + row.half_day + ' Day(s)';
                        }

                        return nodays;
                    }
                },
                {
                    data: 'reason',
                    name: 'Reason'
                },
                {
                    data: 'leave_status',
                    name: 'Status',

                    "render": function(data, type, row, meta) {
                        var colorData = row.back_color;
                        // var leave = `<div class="status-fd"><div style="display:inline-block; margin-top:5px; margin-right:5%; border-width: 2px; border-style:solid; border-color: ${colorData}; border-radius: 50%;width: 12px;height: 12px;text-align:center;"><div style="height: 5px;width: 5px; background-color: ${colorData}; border-radius: 50%;padding:2px 2px;margin: auto auto;margin-top:1.5px;"></div></div>`+ row.leave_status +`</div>`;
                        var leave = `<div class="status-fd" style="color: ${colorData}"> ⦿  ` +
                            row.leave_status + `</div>`;
                        return leave;
                    }

                },
                {
                    name: 'Action',
                    "render": function(data, type, row, meta) {
                        var action =
                            '<input type="checkbox" alldata[] class="singleSelectBox" data-id="' +
                            row.id + '" value="' + row.id + '">';
                        return action;
                    }
                },

            ],
            'columnDefs': [{
                "targets": [8],
                "orderable": false
            }],
            "language": {
                "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                }
            },
            'rowCallback': function(row, data, index) {
                $(row).find('td:eq(7)').css('color', data.back_color);
                $(row).find('td:eq(7)').css('width', '20%');
                $(row).find('td:eq(7)').css('font-weight', 'bold');
                $(row).find('td:eq(6)').css('word-break', 'break-all');

                $(row).find('td:eq(8)').css('text-align', 'center');
            }
        });

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

    }

    function more_filter() {
        var x = document.getElementById("empleavetoday");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }

    function exportpdf() {
        var exportdata = [];
        $('.singleSelectBox').each(function() {
            if ($(this).is(":checked")) {
                exportdata.push($(this).val());
            }
        });
        exportdata = exportdata.toString();
        var nam = $("#staff_name").val();
        var type = $("#type").val();
        var status = $("#status").val();
        var ename = $("#name").val();
        var phone = $("#phone").val();
        var from = $("#sdatefrom").val();
        var to = $("#sdateto").val();
        let url = "pdf?name=" + nam + "&type=" + type + "&status=" + status + "&ename=" + ename + "&phone=" + phone +
            "&from=" + from + "&to=" + to + "&exportdata=" + exportdata;

        window.location.href = url;

    }

    function exportexcel() {
        var exportdata = [];
        $('.singleSelectBox').each(function() {
            if ($(this).is(":checked")) {
                exportdata.push($(this).val());
            }
        });
        exportdata = exportdata.toString();
        var nam = $("#staff_name").val();
        var type = $("#type").val();
        var status = $("#status").val();
        var ename = $("#name").val();
        var phone = $("#phone").val();
        var from = $("#sdatefrom").val();
        var to = $("#sdateto").val();
        let url = "export?name=" + nam + "&type=" + type + "&status=" + status + "&ename=" + ename + "&phone=" + phone +
            "&from=" + from + "&to=" + to + "&exportdata=" + exportdata;

        window.location.href = url;

    }
    $("#checkAll").click(function() {
        $('input:checkbox').not(this).not(":disabled").prop('checked', this.checked);
    });
</script>