<input type="hidden" id="page-menu-id" name="" value="#menu_case" />
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Case > Report > Time Sheet Summary</h1>
</div>
<form action="" method="get" id="export-timesheet" class="mb-3">
    <div class="row mb-2">
        <div class="col-md-2">
            Task Date
        </div>
        <div class="col-md-4">
            <div class="input-group input-daterange">
                <input type="text" id="task-start-date" class="form-control" name="TaskDateStart" value="" autocomplete="off" readonly>
                <div class="input-group-text" style="border-radius:0px">to</div>
                <input type="text" id="task-end-date" class="form-control" name="TaskDateEnd" value="" autocomplete="off" readonly>
            </div>
        </div>
        <div class="col-md-2">
            Person
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control" id="person-filter" name="UserId" value="" autocomplete="off"/>
            <input type="hidden" value="" name="UserId2" id="hd-user-id" />
        </div>
    </div>
    <div class="row">
        <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 class="col-md-2">
            Case Number:
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control" name="CaseNumber" id="case-filter" value="" autocomplete="off" />
            <input type="hidden" value="" name="CaseId" id="hd-case-id" />
        </div>
    </div>

    <div class="text-right mt-2">
        <button class="btn btn-success" type="button" onclick="ExportExcel()"><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>
</form>

<div id="jsGrid"></div>

    <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 urlLoadCaseNumber = "@Url.Action("LoadCaseAutoComplete", "CaseList")";*/
        var caseInput = $("#case-filter");
        var autocompCase = caseInput.autocomplete({
            source: function (request, response) {
                $.getJSON(urlLoadCaseNumber, {
                    Keyword: caseInput.val()
                }, response);
            },
            select: function (event, ui) {
                caseInput.val(ui.item.CaseNumber);
                $("#hd-case-id").val(ui.item.CaseId);
                return false;
            }
        }).change(function (e) {
            if (e.target.value == "") { $("#hd-case-id").val(''); }
        });
        autocompCase.autocomplete("instance")._renderItem = function (ul, item) {

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

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

        });

        $('#task-end-date').datepicker().on("show", function () {
            var startDate = $('#task-start-date').datepicker('getDate');
            $('.day.disabled').filter(function (index) {
                return $(this).text() === moment(startDate).format('D');
            }).addClass('active');
        });
        /*
        var urlLoadCustomer = "@Url.Action("LoadCustomerAutoComplete","Customer")";
        var urlLoadUser = "@Url.Action("LoadUsersAutoComplete", "Home")";
        */
        var personInput = $("#person-filter");
        var autocompUser = personInput.autocomplete({
            source: function (request, response) {
                $.getJSON(urlLoadUser, {
                    Keyword: personInput.val()
                }, response);
            },
            select: function (event, ui) {
                personInput.val(ui.item.Name + '-' + ui.item.SurName);
                $("#hd-user-id").val(ui.item.Id);
                return false;
            }
        }).change(function (e) {
            if (e.target.value == "") { $("#hd-user-id").val('');}
        });
        autocompUser.autocomplete("instance")._renderItem = function (ul, item) {

            return $("<li>").append(item.Name+' '+item.SurName).appendTo(ul);
        };
        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);
        };
        function ExportExcel() {
            /*$("#export-timesheet").attr("action", "@Url.Action("TimeSheetSummaryExcel")");*/
            var objParams = $("#export-timesheet").serializeFormJSON();
            window.open( "Excel/TimeSheetSummaryExcel.php?" + $.param(objParams), "new");
            //$("#export-timesheet").submit();
        }
        function ExportPdf() {
            var objForm = $("#export-timesheet").serializeFormJSON();
          /*  window.open("@Url.Action("TimeSheetSummaryPdf")?" + $.param(objForm), "new");*/
        }
    </script>