@{
    ViewBag.Title = "FlatDetailsReport";
}


<script type="text/javascript" src="../Projectscript/Common.js"></script>
<script src="~/Scripts/Autocomplete/jquery-ui.js"></script>
<script type="text/javascript" src="~/ProjectScript/ReportPrint.js"></script>


<style>
    .form-control {
        font-weight: bold;
    }
</style>

<script>
   


    $(function () {
        function addCommas(x, flg) {
            var amt = x || 0;
            if (flg == 0) {
                var parts = amt.toString().split(".");
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                return parts.join(".");
            }
            else {
                var currency = amt;
                var number = Number(currency.replace(/[^0-9.-]+/g, ""));
                return number;
            }
        }
        //$("#FlatNo").autocomplete({
        //    delay: 0,
        //    minLength: 0,
        //    source: function (request, response) {
        //        var data = {};
        //        data.FlatNumber = $("#FlatNo").val();
        //        $.ajax({
        //            url: '../Realestate/FlatNumberSearch',
        //            type: "POST",
        //            data: data,
        //            dataType: "json",
        //            success: function (data) {

        //                response($.map(data, function (item) {
        //                    console.log(data)
        //                    return ({
        //                        ColCount: 'ONE',
        //                        label: item.FlatNumber,
        //                        FlatMasterId: item.FlatMasterId,
        //                        FlatNumber: item.FlatNumber,
        //                        headers: ["Flat No"]
        //                    })
        //                }));
        //            }

        //        })

        //    },
        //    autoFocus: true,
        //    select: function (event, ui) {
        //        $('#FlatNoId').val(ui.item.FlatMasterId);
        //        $('#btnGo').focus();
        //    },
        //});

        $('#dpDateFrom').daterangepicker({
            minDate: minDate,
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            singleDatePicker: true,
            showDropdowns: true,
            locale:
            {
                format: 'DD/MM/YYYY'
            }
        });
        //$('#FlatNo').keydown(function (e) {
        //    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
        //    if (key == 13) {
        //        e.preventDefault();
        //        $('#btnGo').focus();
        //    }
        //});

        $('#dpDateTo').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();
            Detail();
        });
    });


    function popuprefresh() {
        $('#popupdiv').hide();
    }

    function ShowReport(result)
    {
        disable_datatable('Tblreport', 'buttonPlace');
        var ResponseEntity = "<thead><tr><th>Sl#</th><th>Flat#</th><th>Building</th><th>DEWA#</th><th>Type</th><th>Status</th><th>Tenant Name</th><th>Period</th><th>Start Date</th><th>Expiry Date</th><th>Rent</th><th>Security Deposit</th></tr></thead><tbody>";
        for (var i = 0; i < result.length; i++) {
            var slno = parseInt(i + 1);
            var fltype = '';
            if (result[i].FlatName == 1) { fltype = 'Residential' }
            else if (result[i].FlatName == 2) { fltype = 'Commercial' }
            else if (result[i].FlatName == 3) { fltype = 'Other' }

            var ContractStatus = '';
            if (result[i].Status == 0) { ContractStatus = 'VACANT' }
            else if (result[i].Status == 1) { ContractStatus = 'OCCUPIED' }

            var PeriodType = "";
            var PeriodInWords = "";
            if (result[i].Period == 1) {
                PeriodType = 'Months'
                PeriodInWords = result[i].PaymentTerms;
            }
            else if (result[i].Period == 2) {
                fltype = 'Year';
                PeriodInWords='1'
            }
          

            ResponseEntity += '<tr><td style="text-align:center">' + slno + '</td><td id="Col1_' + slno + '">' + result[i].FlatNumber + '</td><td id="Col2_' + slno + '">' + result[i].NameofBuilding + '</td><td id="Col3_' + slno + '">' + result[i].DEWANO + '</td><td id="Col4_' + slno + '">' + fltype + '</td><td id="Col5_' + slno + '">' + ContractStatus + '</td><td id="Col6_' + slno + '" style="width:300px">' + result[i].TenantName + '</td><td id="Col7_' + slno + '">' + PeriodInWords + ' ' + PeriodType + '</td><td id="Col8_' + slno + '" style="text-align:center">' + result[i].FromDate + '</td><td id="Col9_' + slno + '" style="text-align:center">' + result[i].ToDate + '</td><td id="Col10_' + slno + '" style="text-align:right">' + addCommas(parseFloat(result[i].Rent).toFixed(Decimal), 0) + '</td><td id="Col11_' + slno + '" style="text-align:right">' + addCommas(parseFloat(result[i].securityDeposit).toFixed(Decimal), 0) + '</td></tr>';
        }
        $('#Tblreport').html(ResponseEntity + '</tbody><tfoot><tr><th>Sl#</th><th>Flat#</th><th>Building</th><th>DEWA#</th><th>Type</th><th>Status</th><th>Tenant Name</th><th>Period</th><th>Start Date</th><th>Expiry Date</th><th>Rent</th><th>Security Deposit</th></tr></tfoot>');

        var title = "Flat Report - from " + $("#dpDateFrom").val() + " to " + $("#dpDateTo").val() + "";
        var titles = "From " + $("#dpDateFrom").val() + " To " + $("#dpDateTo").val() + "";
        datatableWithsearch('Tblreport', true, title, 'buttonPlace');
        $('#header').text(title);
        $('#header1').text(titles);
        $('#ResultLength').val($("#Tblreport tbody tr").length);

    }


    function Detail() {
        var data = {};
        data.FromDate = $('#dpDateFrom').val();
        data.ToDate = $('#dpDateTo').val();
        //data.FlatNo = $('#FlatNoId').val();
        $.ajax({
            type: "POST",
            url: "../Realestate/Rpt_FlatDetails",
            data: data,
            success: function (result) {
                ShowReport(result);
                $('#Loading').hide();
                $('#divreport').show();
                $('#tdsummarypopup').show();
                $('#tddetailpopup').show();
                $('#popupdiv').hide();

            }
        });
    }
    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 != 'O Balance' && title != ' ')
                $(this).html('<input type="text" placeholder="Search ' + title + '" style="width=100%" />');
            if (title == 'Tenant' || title == 'Flat#' || title == 'Building' || title == 'DEWA#' || title == 'Type' || title == 'Status' || title == 'Tenant Name' || title == 'Period' || title == 'Start Date' || title == 'Expiry Date' || title == 'Rent' || title == 'Security Deposit')
                $(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"); }

            // AddColumnSelectionButton(tableButtonContainerId, tablename)

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

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

    function disable_datatable(tablename, tableButtonContainerId) {
        $('#Warningpopup').fadeOut();
        if ($.fn.DataTable.isDataTable('#' + tablename)) {
            var table = $('#' + tablename).DataTable();
            table.destroy();
            if (tableButtonContainerId) { $("#" + tableButtonContainerId).empty(); }
            return;
        }
    }
</script>
<div class="myData" data-x="M279" />
<div id="Main">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header" style="border-bottom:1px solid #e6e6e6">

                    <div>
                        <table width="100%">
                            <tr>
                                <td><h4 id="header"></h4></td>
                                <td style="display:none"><h4 id="header1"></h4></td>
                                <td width="40%"></td>

                                <td align="right"><button type="button" style="width:100px" onclick="$('#popupdiv').show()" id="btnback" class="btn btn-outline-primary">Back</button></td>
                                <td><button type="button" style="width:100px;margin-left:5%;" id="btnprint" onclick="PrintthisReportWindows('Flat', $('#ResultLength').val())" class="btn btn-primary">Print <i class="ft-printer"></i></button></td>


                                <td align="right">

                                    <div class="btn-group" id="buttonPlace">




                                        <div align="right">
                                            <div class="heading-elements">
                                                <div class="btn-group" id="buttonPlace">

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

                                    </div>
                                </td>

                            </tr>
                        </table>


                        <div align="right">

                            <div class="heading-elements">
                                <br /><hr />
                                <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>



<input type="hidden" id="ResultLength" class="form-control" />

<div id="popupdiv" class="modal fade text-left show" tabindex="-1" role="dialog" aria-labelledby="myheader" style="padding-right: 17px; background:rgba(0,0,0,0.5); display: block; display:none1;height:200%">
    <div class="modal-dialog" role="document" style="top:5%">
        <div class="modal-content">
            <div class="modal-header bg-primary white">
                <h3 class="modal-title" id="myheader">Flat Details Report</h3>
                <button type="button" class="close" onclick="popuprefresh()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form id="monthpopup" style="display:none1">

                <div class="modal-body">
                    <div class="row">
                        <label style="font-weight:bold;margin-left:10%">From</label>
                        <div class="col-md-4">
                            <input type="text" id="dpDateFrom" class="form-control" autocomplete="off">
                        </div>

                        <label style="font-weight:bold;margin-left:-1%">To</label>
                        <div class="col-md-4">
                            <input type="text" id="dpDateTo" class="form-control" autocomplete="off">
                        </div>
                    </div>
                    @*<div class="row" style="margin-top:2%">
                        <label style="font-weight:bold;margin-left:6%">Flat No.</label>
                        <div class="col-md-4">
                            <input type="text" id="FlatNo" maxlength="100" class="form-control">
                            <input type="hidden" id="FlatNoId" maxlength="100" class="form-control">
                        </div>
                    </div>*@
                </div>
                <hr />
                <div class="text-center">
                    <button type="button" style="width:100px" id="btnGo" class="btn btn-primary">Go</button>
                </div>
            </form>

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