@{
    ViewBag.Title = "EmployeeDocumentExpiry";
}

<script type="text/javascript" src="../Projectscript/Common.js"></script>


<style type="text/css">
    .form-control {
        font-weight: bold;
    }
</style>



<script>

    function ShowReport(result) {
        if (document.getElementById("rbList").checked == true) {
        disable_datatable('tblreport');
        var ResponseEntity = "<thead><tr><th>Sl#</th><th>Employee Code</th><th>Employee Name</th><th>Document</th><th>Gender</th><th>DOB</th><th>Mobile</th><th>Email</th></tr></thead><tbody>";
        var counter = 0;
       
            for (var i = 0; i < result.length; i++) {
                var slno = parseInt(i + 1);
                var empid = result[i].EmpCode;

                var combination = result[i].IDType + ":" + result[i].PassportNo + ", Issued On:" + result[i].FromDate + ", Expired On:" + result[i].ToDate;

                ResponseEntity += '<tr><td>' + slno + '</td><td>' + result[i].EmpCode + '</td><td>' + result[i].EmpName + '</td><td>' + combination + '</td><td>' + result[i].Gender + '</td><td>' + result[i].DOB + '</td><td>' + result[i].Mobile + '</td><td>' + result[i].Email + '</td></tr>';
            }

            $('#divcard').hide();
            $('#divReport').show();
            $('#tblreport').html(ResponseEntity + '</tbody><tfoot><tr><th>Sl#</th><th>Employee Code</th><th>Employee Name</th><th>Document</th><th>Gender</th><th>DOB</th><th>Mobile</th><th>Email</th></tr> </tfoot>');
            datatableWithsearch('tblreport');

        }
        else {
            $('#divReport').hide();
            $('#divcard').show();
            CardPrint(result)
           
           
        }
    }

    function datatableWithsearch(tablename, download, title, tableButtonContainerId) {

        var a = '#' + tablename + ' tfoot th'
        $(a).each(function () {
            var title = $(this).text();
            if (title != 'Edit' && title != 'Select' && title != 'Slno' && title != 'Sl#' && title != 'Credit Limit' && title != 'Due Days' && title != ' ')
                $(this).html('<input type="text" placeholder="Search ' + title + '" style="width=100%" />');
            if (title == 'Date')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');
            if (title == 'Bill#')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');
            if (title == 'Delivery#')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');
            if (title == 'Dept.Code')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');
            if (title == 'Item Code')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');
            if (title == 'Item Name')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');
            if (title == 'Location')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');

        });
        var table = null;
        if (download) {
            if (!title || !tableButtonContainerId) { console.log("download table need title and button container"); }


            table = $('#' + tablename).DataTable({
                // dom: 'Bfrtip',
                dom: "<'row'<'col-sm-1'l><'col-sm-11'f>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-1'i><'col-sm-11'p>>",
                buttons: []

            });
            new $.fn.dataTable.Buttons(table, {
                buttons: [
                {
                    extend: 'collection',
                    text: 'Export',
                    className: 'excelexport',
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            title: title,
                            messageTop: 'EUMI ERP',
                            exportOptions: { columns: ":visible" }
                        },
                        {
                            extend: 'pdfHtml5',
                            title: title,
                            messageTop: 'EUMI ERP',
                            exportOptions: { columns: ":visible" }
                        },
                        {
                            extend: 'print',
                            title: title,
                            messageTop: 'EUMI ERP',
                            exportOptions: { columns: ":visible" }
                        }
                    ]
                },
                'colvis'
                ]
            });
            table.buttons(0, null).container().appendTo($("#" + tableButtonContainerId));
            $("#" + tableButtonContainerId).find(".buttons-collection").addClass("btn-outline-primary mx-1").css("border-radius", "4px");
            //$("#" + tableButtonContainerId).off("click.emButtonEvent").on("click.emButtonEvent", "[data-em-col]", function () {
            //    var column = table.column($(this).attr('data-em-col'));
            //    console.log($(this).attr('data-em-col'));
            //    console.log(column);
            //    column.visible($(this).prop("checked"));
            //});
        } else {
            table = $('#' + tablename).DataTable();
        }
        table.columns().every(function () {
            var that = this;
            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();

                }
            });
        });
        if (ExcelExport == 0) {
            $('.excelexport').hide();
        }
    }


    var j = 1;
    function CardPrint(result) {
        $('#divReport').hide();
        var Card = '<div class="row match-height">';
        for (var i = 0; i < result.length; i++) {
            if (j % 7) {
                Card += '<div class="col-xl-3 col-lg-6 col-md-12"><div class="card" style="height: 495px;width:300px;border:2px solid #e6e6e6"><div class="card-body" style="width:300px;"><img class="card-img-top img-fluid" src="../app-assets/img/photos/06.jpg" alt="Card image cap"><div class="card-block"><h4 class="card-title">' + result[i].EmpName + '</h4><p class="card-text">ID: ' + result[i].IDType + '</br>ID Number: ' + result[i].PassportNo + '</br>Emp Code: ' + result[i].EmpCode + '</br>Issued On: ' + result[i].FromDate + '</br>Expired On: ' + result[i].ToDate + '</br>Gender: ' + result[i].Gender + '</br>DOB: ' + result[i].DOB + '</br>Mobile: ' + result[i].Mobile + '</br>Email: ' + result[i].Email + '</p></div></div></div></div>';
            }
            else {
                Card += '<div class="col-xl-3 col-lg-6 col-md-12"><div class="card" style="height: 495px;width:300px;border:2px solid #e6e6e6"><div class="card-body" style="width:300px;"><img class="card-img-top img-fluid" src="../app-assets/img/photos/06.jpg" alt="Card image cap"><div class="card-block"><h4 class="card-title">' + result[i].EmpName + '</h4><p class="card-text">ID :' + result[i].IDType + '</br>ID Number: ' + result[i].PassportNo + '</br>Emp Code: ' + result[i].EmpCode + '</br>Issued On: ' + result[i].FromDate + '</br>Expired On: ' + result[i].ToDate + '</br>Gender: ' + result[i].Gender + '</br>DOB: ' + result[i].DOB + '</br>Mobile: ' + result[i].Mobile + '</br>Email: ' + result[i].Email + '</p></div></div></div></div>';
            }
            j++
        }
        $('#basic-examples').html(Card)
    }

    $(function () {

        $('#dpFromDate').daterangepicker({
            minDate: minDate,
           // maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            singleDatePicker: true,
            showDropdowns: true,
            locale:
            {
                format: 'DD/MM/YYYY'
            }
        });


        $('#dpToDate').daterangepicker({
            minDate: minDate,
           // maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            singleDatePicker: true,
            showDropdowns: true,
            locale:
            {
                format: 'DD/MM/YYYY'
            }
        });


        $("#btnGo").click(function (e) {
            $('#Loading').show();

            var data = {};
            data.FromDate = $('#dpFromDate').val();
            data.ToDate = $('#dpToDate').val();
            data.DocumentType = $('#cmbDocumentType').val();

            $.ajax({
                type: "POST",
                url: "../Purchaseandsalesreports/EmployeeDocumentExpiryGet",
                data: data,
                success: function (result) {
                    ShowReport(result);
                    $('#Loading').hide();
                   // $('#divReport').show();

                }
            });
        });
    });

</script>

<div class="myData" data-x="M135" />

<div id="Main">
 
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header" style="border-bottom:1px solid #e6e6e6">
                    <table style="margin-top:0px;" width="100%">
                        <tr>
                            <td><h4 class="card-title mb-0">Employee Document Nearest Expiry</h4></td>
                            <td align="right">
                                <div class="col-md-5">
                                    <div class="input-group">
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="rbList" checked="" name="customRadioInline1" class="custom-control-input">
                                            <label class="custom-control-label" for="rbList">List</label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="rbCard" name="customRadioInline1" class="custom-control-input">
                                            <label class="custom-control-label" for="rbCard">Card</label>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>

                </div>
                <div class="card-body">
                    <div class="px-3">
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div style="height:15px;"></div>
                                <form action="#">
                                    <div class="form-body">
                                        <div style="height:15px;"></div>

                                        <div class="row" style="margin-left:10%">

                                            <div class="col-md-3">
                                                <div class="form-group row">
                                                    <label class="col-md-3 label-control" style="font-weight:bold">From</label>
                                                    <div class="col-md-5">
                                                        <input type="text" id="dpFromDate" class="form-control" />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-3" style="margin-left:-5%">
                                                <div class="form-group row">
                                                    <label class="col-md-2 label-control" style="font-weight:bold">To</label>
                                                    <div class="col-md-5">
                                                        <input type="text" id="dpToDate" class="form-control" />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-3" style="margin-left:-5%">
                                                <div class="form-group row">
                                                    <label class="col-md-5 label-control" style="font-weight:bold">Document Type</label>
                                                    <div class="col-md-5">
                                                        <select id="cmbDocumentType" class="form-control" name="priority">
                                                            <option value="0">-All-</option>
                                                            <option value="1">Passport Number</option>
                                                            <option value="2">Visa Number</option>
                                                            <option value="3">National ID</option>
                                                            <option value="4">Driving Licence</option>
                                                            <option value="5">Labour Number</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <div class="form-group row">
                                                    <div class="col-md-8">
                                                        <button type="button" id="btnGo" style="width:100px;" class="btn btn-primary btn-min-width mr-1 mb-1">Go</button>
                                                    </div>
                                                </div>
                                            </div>

                                            @*<div align="right">
                                                    <div class="heading-elements">
                                                        <div class="btn-group">

                                                            <button type="button" class="btn btn-outline-primary"><i class="ft-edit"></i> Export</button>
                                                            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown"
                                                                    aria-haspopup="true" aria-expanded="false">
                                                                <span class="sr-only">Toggle Dropdown</span>
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Excel</a>
                                                                <a class="dropdown-item" href="#">PDF</a>
                                                                <div class="dropdown-divider"></div>
                                                                <a class="dropdown-item" href="#">Print</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>*@

                                        </div>

                                    </div>
                                </form>

                                <br /><hr />


                                <div id="divcard">

                                    <section id="basic-examples"></section>
                                    @*<table id="cardtbl"></table>*@
                                    <br />
                                </div>

                                <div id="divReport" style="overflow:auto;display:none">
                                    <table id="tblreport" class="table table-striped table-bordered base-style dataTable"></table><br />
                                </div>
                                <div style="display:none">
                                    <table id="Tblreportprint"></table>
                                </div>
                                <br /><br />

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