<input type="hidden" id="page-menu-id" name="" value="#menu_account" />
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Account > Report > Received Payment</h1>
</div>

<form action="" method="get" id="form-report">
    <div class="row">
        <div class="col-md-2">
            Date
        </div>
        <div class="col-md-4">
            <div class="input-group input-daterange">
                <input type="text" id="start-date" class="form-control" name="StartDate" value="@Model.StartDate" autocomplete="off" readonly>
                <div class="input-group-text" style="border-radius:0px">to</div>
                <input type="text" id="end-date" class="form-control" name="EndDate" value="@Model.EndDate" autocomplete="off" readonly>
            </div>
        </div>
        <div class="col-md-2">
            Customer:
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control" id="customer-filter" value="" autocomplete="off" />
            <input type="hidden" value="" name="CustomerId" id="hd-customer-id" />
        </div>
    </div>
    <div class="row col-md-12">&nbsp;</div>
    <div class="row">
        <div class="col-md-12 text-right">
            @*<button class="btn btn-success" type="button" onclick="exportToExcel()"><i class="fas fa-file-excel"></i> Export to Excel</button>*@
            <button class="btn btn-danger" type="button" onclick="ExportPdf()"><i class="fas fa-file-pdf"></i> Export to Pdf</button>
        </div>
    </div>
</form>

    <link href="<?php echo $path; ?>Assets/Backend/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
    <script src="<?php echo $path; ?>Assets/Backend/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="<?php echo $path; ?>Assets/Backend/vendor/moment.js"></script>
    <link href="<?php echo $path; ?>Assets/Backend/vendor/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
    <script src="<?php echo $path; ?>Assets/Backend/vendor/jquery-ui/jquery-ui.min.js"></script>
    <script>
         var urlLoadCustomer = "@Url.Action("LoadCustomerAutoComplete","Customer")";
        var customerInput = $("#customer-filter");
        var autocompCustomer = customerInput.autocomplete({
            source: function (request, response) {
                $.getJSON(urlLoadCustomer, {
                    Keyword: customerInput.val()
                }, response);
            },
            select: function (event, ui) {
                customerInput.val(ui.item.custCode + '-' + ui.item.custName);
                $("#hd-customer-id").val(ui.item.custId);
                return false;
            }
        }).change(function (e) {
            if (e.target.value == "") { $("#hd-customer-id").val(''); }
        });
        autocompCustomer.autocomplete("instance")._renderItem = function (ul, item) {

            return $("<li>").append(item.custCode + '-' + item.custName).appendTo(ul);
        };
        $('#start-date').datepicker({
            format: "dd/mm/yyyy",
        });

        $('#end-date').datepicker({
            format: "dd/mm/yyyy",
        });
        $('#start-date').datepicker().on("changeDate", function () {
            var startDate = $('#start-date').datepicker('getDate');
            var oneDayFromStartDate = moment(startDate).add(1, 'days').toDate();
            $('#end-date').datepicker('setStartDate', oneDayFromStartDate);
            @* $('#end-date').datepicker('setDate', oneDayFromStartDate);*@
        });

        $('#end-date').datepicker().on("show", function () {
            var startDate = $('#start-date').datepicker('getDate');
            $('.day.disabled').filter(function (index) {
                return $(this).text() === moment(startDate).format('D');
            }).addClass('active');
        });
        function ExportExcel() {
            var objForm = $("#form-report").serializeFormJSON();
            window.open("@Url.Action("ReceivedPaymentExcel")?" + $.param(objForm), "new");
        }
        function ExportPdf() {
            var objForm = $("#form-report").serializeFormJSON();
            window.open("@Url.Action("ReceivedPaymentPdf")?" + $.param(objForm), "new");
        }
    </script>