{{ 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">HR
                                </li>
                                <li class="breadcrumb-item">Reports
                                </li>
                                <li class="breadcrumb-item active"><a href="#">Eclaim 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">
                                <div class="btn-group">

                                    <button onclick="more_filter()" class="btn btn-primary" tabindex="0"
                                        type="button"><span>Filter</span></button>
                                </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" style="">
                                                <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-3 filter-form-group mb-1">
                                        Date From &nbsp;:&nbsp;
                                        <input type="date" class="form-control flatpickr-basic" id="date_from"
                                            placeholder="DD-MM-YYYY">
                                    </div>

                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Date To &nbsp;:&nbsp;
                                        <input type="date" class="form-control flatpickr-basic" id="date_to"
                                            placeholder="DD-MM-YYYY">
                                    </div>

                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Updated Date &nbsp;:&nbsp;
                                        <input type="date" class="form-control flatpickr-basic" id="updated_at"
                                            placeholder="DD-MM-YYYY">
                                    </div>

                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Employee &nbsp;:&nbsp;
                                        <select class="form-control" id="emp">
                                            <option value="">Select Employee</option>
                                            @foreach ($employees as $emp)
                                                <option value="{{ $emp->username }}">{{ $emp->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Amount From &nbsp;:&nbsp;
                                        <input class="form-control" type="number" id="amount_from">
                                    </div>

                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Amount To &nbsp;:&nbsp;
                                        <input class="form-control" type="number" id="amount_to">
                                    </div>

                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Status From &nbsp;:&nbsp;
                                        <select class="form-control" id="status_from">
                                            <option value="">Select Status</option>
                                            @foreach ($claimStatus as $key => $status)
                                                <option value="{{ $key }}">{{ $status }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Status To &nbsp;:&nbsp;
                                        <select class="form-control" id="status_to">
                                            <option value="">Select Status</option>
                                            @foreach ($claimStatus as $key => $status)
                                                <option value="{{ $key }}">{{ $status }}</option>
                                            @endforeach
                                        </select>
                                    </div>


                                    <div class="col-sm-6 filter-form-group" style="margin-top:18px;">
                                        <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: scroll !important;">
                                    <table width="100%;" class="table table-striped" id="reporttable"
                                        style=" font-size:12px;">
                                        <thead>
                                            <tr style="white-space:nowrap;">
                                                <th style="text-transform: capitalize; " width="">Admin</th>
                                                <th style="text-transform: capitalize; " width="">Emp No.</th>
                                                <th style="text-transform: capitalize; " width="">Emp Name</th>
                                                <th style="text-transform: capitalize; " width="">Updated
                                                    Date
                                                </th>
                                                <th style="text-transform: capitalize; " width="">Deleted
                                                    Date/Time
                                                </th>

                                                <th
                                                    style="width:10%;text-align:center;text-transform: capitalize; padding-left: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important;">
                                                    Amount
                                                    <table class="tableheading"
                                                        style="width:100%; margin-top: 0.72rem !important;     border-top: 1px solid #ebe9f1;">
                                                        <tbody>
                                                            <tr style="background:transparent;">
                                                                <td
                                                                    style="border-top:none;border-bottom:none; border-left:none; width:50%;">
                                                                    From</td>
                                                                <td
                                                                    style="border-top:none;border-bottom:none;border-right:none; width:50%">
                                                                    To</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </th>
                                                <th
                                                    style="width:10%;text-align:center;text-transform: capitalize; padding-left: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important;">
                                                    Type
                                                    <table class="tableheading"
                                                        style="width:100%; margin-top: 0.72rem !important; border-top: 1px solid #ebe9f1;">
                                                        <tbody>
                                                            <tr style="background:transparent;">
                                                                <td
                                                                    style="border-top:none;border-bottom:none; width:50%">
                                                                    From</td>
                                                                <td
                                                                    style="border-top:none;border-bottom:none; width:50%">
                                                                    To</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </th>
                                                <th
                                                    style="width:10%;text-align:center;text-transform: capitalize; padding-left: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important;">
                                                    Status
                                                    <table class="tableheading"
                                                        style="width:100%; margin-top: 0.72rem !important; border-top: 1px solid #ebe9f1;">
                                                        <tbody>
                                                            <tr style="background:transparent;">
                                                                <td
                                                                    style="border-top:none;border-bottom:none; width:50%">
                                                                    From</td>
                                                                <td
                                                                    style="border-top:none;border-bottom:none; width:50%; text-align: left;">
                                                                    To</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<!-- END: Content-->
{{ View::make('layout.footer') }}
@include('inc-eclaim.report-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();

    }

    function getfilterdata() {

        var date_from = $("#date_from").val();
        var date_to = $("#date_to").val();

        var updated_at = $("#updated_at").val();
        var emp = $("#emp").val();
        var amount_form = $("#amount_from").val();
        var amount_to = $("#amount_to").val();
        var status_from = $("#status_from").val();
        var status_to = $("#status_to").val();

        var string_url = "geteclaimauditdata?date_from=" + date_from + "&date_to=" + date_to + "&updated_at=" +
            updated_at + "&emp=" + emp + "&amount_from=" + amount_from + "&amount_to=" + amount_to + "&status_from=" +
            status_from + "&status_to=" + status_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: 'admin',
                    name: 'Admin'
                },
                {
                    data: 'emp_id',
                    name: 'Emp No'
                },

                {
                    data: 'emp_name',
                    name: 'Emp Name'
                },
                {
                    data: 'created_at',
                    name: 'Updated Date'
                },

                {
                    data: 'deleted_at',
                    name: 'Deleted Date/Time'
                },

                {
                    name: 'Amount',
                    "render": function(data, type, row, meta) {
                        if (row.amount_from != 0 && row.amount_to != null && row.amount_from != row
                            .amount_to) {
                            var redAmt = 'color:red';
                        } else {
                            var redAmt = '';
                        }

                        var text =
                            `<table style="width: 100%; border: none;"><tr style="background: none;"><td style="text-align:left;">${row.amount_from}</td><td style="text-align:right; ${redAmt}">${row.amount_to}<td></tr></table>`;
                        return text;
                    }
                },
                {
                    name: 'Type',
                    "render": function(data, type, row, meta) {

                        if (row.type_to != null && row.type_from != row.type_to) {
                            var redType = 'color:red';
                        } else {
                            var redType = '';
                        }
                        var text =
                            `<table style="width: 100%; border: none;"><tr style="background: none;"><td style="text-align:left;">${row.type_from}</td><td style="text-align:right; ${redType}">${row.type_to}<td></tr></table>`;
                        return text;
                    }
                },
                {
                    name: 'Status',
                    "render": function(data, type, row, meta) {

                        if (row.status_from != '' && row.status_to != null && row.status_from != row
                            .status_to) {
                            var redStatus = 'style ="color:red"; width: 50%;';
                        } else {
                            var redStatus = 'style =width: 50%;';;
                        }

                        var text =
                            `<table style="width: 100%; border: none;"><tr style="background: none;"><td style="width: 50%;">${row.status_from}</td><td ${redStatus}>${row.status_to}<td></tr></table>`;
                        return text;
                    }
                },

            ],
            'rowCallback': function(row, data, index) {
                $('table', row).css('border', 'hidden');
            },

            'columnDefs': [{
                "targets": [7],
                "orderable": false
            }],
            "language": {
                "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                }
            },

        });

        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 date_from = $("#date_from").val();
        var date_to = $("#date_to").val();
        let url = "eclaimauditpdf?date_from=" + date_from + "&date_to=" + date_to + "&updated_at=" +
            updated_at + "&emp=" + emp + "&amount_from=" + amount_from + "&amount_to=" + amount_to + "&status_from=" +
            status_from + "&status_to=" + status_to
        window.location.href = url;
    }

    function exportexcel() {
        var exportdata = [];
        $('.singleSelectBox').each(function() {
            if ($(this).is(":checked")) {
                exportdata.push($(this).val());
            }
        });
        exportdata = exportdata.toString();

        var date_from = $("#date_from").val();
        var date_to = $("#date_to").val();
        let url = "eclaimauditexport?date_from=" + date_from + "&date_to=" + date_to + "&updated_at=" +
            updated_at + "&emp=" + emp + "&amount_from=" + amount_from + "&amount_to=" + amount_to + "&status_from=" +
            status_from + "&status_to=" + status_to

        window.location.href = url;

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