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

<style>

    table.dataTable thead .sorting:before,

    table.dataTable thead .sorting_asc:before,

    table.dataTable thead .sorting_desc:before,

    table.dataTable thead .sorting:after,

    table.dataTable thead .sorting_asc:after,

    table.dataTable thead .sorting_desc:after {

        display: none;

    }





    #reporttable td {

        width: 10% !important;

        text-align: left;

    }



    #reporttable th {

        width: 10% !important;

    }



    #reporttable th {

        width: 8.5% !important;

    }



    #reporttable th:nth-child(10) {

        width: 20% !important;

    }



    #reporttable td {

        width: 8.5% !important;

        text-align: left;

    }



    #reporttable td:nth-child(10) {

        width: 20% !important;

        text-align: left;

    }

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

                                </li>

                                <li class="breadcrumb-item">Reports

                                </li>

                                <li class="breadcrumb-item active"><a href="#">Leave 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;<div class="">

                                        <button onclick="more_filter()" class="btn btn-primary" tabindex="0"

                                            type="button"><span>Filter</span></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 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>

                                            {{-- hide and show --}}

                                            &nbsp;&nbsp;

                                            <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-4 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-4 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-4 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 $type)

                                                <option value="{{ $type->type }}"

                                                    {{ request()->get('type') && request()->get('type') == $type->name ? 'selected' : '' }}>

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

                                            @endforeach

                                        </select>

                                    </div>

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

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

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

                                            <option value="">All</option>

                                            <option value="1">Approved</option>

                                            <option value="4">Cancelled</option>

                                            <option value="5">Cancellation Pending</option>

                                            <option value="0">Pending</option>

                                            <option value="2">Rejected</option>

                                            <option value="3">Recommended</option>



                                        </select>

                                    </div>



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

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

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

                                            <option value="">Branch</option>

                                            @foreach ($branches as $branch)

                                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>

                                            @endforeach

                                        </select>

                                    </div>





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

                                        Employee Name &nbsp;:

                                        <input type="text" name="name" id="name" placeholder="Enter Name"

                                            class="tcal form-control datepicker" data-dateformat="dd-mm-yy">

                                    </div>



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

                                        Employee No. &nbsp;:

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

                                            placeholder="Enter Employee No." class="tcal form-control datepicker"

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

                                    </div>

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

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

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

                                            <option value="">Department</option>

                                            @foreach ($departments as $department)

                                                <option value="{{ $department->id }}">{{ $department->name }}</option>

                                            @endforeach

                                        </select>

                                    </div>



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

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

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

                                            <option value="">Category</option>

                                            @foreach ($categories as $category)

                                                <option value="{{ $category->id }}">{{ $category->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; ">

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

                                    <table class="table table-striped" id="reporttable" style=" font-size:12px;">

                                        <thead>

                                            <tr>

                                                <th style="text-transform: capitalize;  white-space: nowrap;">Emp No.

                                                </th>

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

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

                                                <th style="text-transform: capitalize; white-space: nowrap;">Leave Type

                                                </th>

                                                <th style="text-transform: capitalize;  white-space: nowrap;">Leave

                                                    Date</th>

                                                <th style="text-transform: capitalize; white-space: nowrap;">Date

                                                    Approved</th>

                                                <th style="text-transform: capitalize; white-space: nowrap;">Date

                                                    Applied</th>

                                                <th style="text-transform: capitalize;white-space: nowrap;">Days</th>

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

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



                                            </tr>

                                        </thead>

                                        <tbody>



                                        </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() {

        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 branch = $("#branch").val();

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

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

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

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

        var string_url = "getrleavedata?name=" + nam + "&type=" + type + "&status=" + status + "&ename=" + ename +

            "&phone=" + phone + "&branch=" + branch + "&department=" + department + "&category=" + category + "&from=" +

            from + "&to=" + to;



        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: 'Name'

                },

                {

                    data: 'r_name',

                    name: 'Relief'

                },

                {

                    data: 'leave_type',

                    name: 'leave_type',

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

                        var ltype = '';

                        var ids = row.id;

                        if (row.filename != '') {

                            ltype += '<a target="_blank" 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: 'date',

                    name: 'Leave Date',

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

                        if (row.reason != "Past Leave") {

                            var ldate =

                                '<a class="appDialog-model" data-toggle="modal" data-target="#inlineForm" data-id="' +

                                row.id + '" style="color:#3192F4;">' + row.date.split("-").reverse()

                                .join("-") + '</a>';



                        } else {

                            var ldate = row.date.split("-").reverse().join("-");

                        }

                        return ldate;

                    }

                },

                {

                    data: 'date_approved',

                    name: 'Date Approved',

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

                        if (row.date_approved != null && row.date_approved != '0000-00-00') {

                            var ldate = row.date_approved.split("-").reverse().join("-");

                        } else {

                            var ldate = '';

                        }



                        return ldate;

                    }

                },

                {

                    data: 'date_applied',

                    name: 'Date Applied',

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

                        var ldate = '';

                        if (row.date_applied != null)

                            var ldate = row.date_applied.split("-").reverse().join("-");





                        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;

                    }



                },



            ],

            'columnDefs': [{

            }],

            "language": {

                "paginate": {

                    // remove previous & next text from pagination

                    "previous": '&nbsp;',

                    "next": '&nbsp;'

                }

            },

            'rowCallback': function(row, data, index) {

                $(row).find('td:eq(9)').css('color', data.back_color);

                $(row).find('td:eq(9)').css('width', '18%');

                $(row).find('td:eq(9)').css('font-weight', 'bold');

                $(row).find('td:eq(8)').css('word-break', 'break-all');

            }

        });



        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 branch = $("#branch").val();

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

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

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

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

        let url = "leavepdf?name=" + nam + "&type=" + type + "&status=" + status + "&ename=" + ename + "&phone=" +

            phone + "&branch=" + branch + "&department=" + department + "&category=" + category + "&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 branch = $("#branch").val();

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

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

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

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



    // Generate a random number

    var randomNum = Math.floor(Math.random() * 1000000); // Adjust range if needed



    // Construct URL with random number appended

    let url = "leaveexport?name=" + nam + "&type=" + type + "&status=" + status + "&ename=" + ename + "&phone=" +

        phone + "&branch=" + branch + "&department=" + department + "&category=" + category + "&from=" + from +

        "&to=" + to + "&exportdata=" + exportdata + "&random=" + randomNum;



    window.location.href = url;

}



    $("#checkAll").click(function() {

        $('input:checkbox').not(this).prop('checked', this.checked);

    });

</script>