<h2>Time Entry</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">

    function checkForTimeSheet(formatStart, formatEnd) {
        $.ajax({
            url: '/TimeEntry/CheckForTimeSheet',
            type: 'POST',
            data: {
                Start: formatStart,
                End: formatEnd
            },
            success: function (data) {
                //Adds a row for each previously entered week
                var entryLineCounter = 1;
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        $("tr[id*='EntryLine']").last().after("<tr id='EntryLine" + entryLineCounter + "'> <td></td><td><input type='text' name='Project' id='Project' value='" + data[i]["ProjectId"] + "' readonly hidden/><input type='text' name='ProjectName' id='ProjectName' value='" + data[i]["ProjectName"] + "' readonly/></td><td><select><option>Test Option</option></select></td><td><input type='text' name='Monday' id='Monday' class='textGroup' value='" + data[i]["Monday"] + "' onclick='this.focus();this.select();'/></td><td><input type='text' name='Tuesday' id='Tuesday'   class='textGroup' value='" + data[i]["Tuesday"] + "' onclick='this.focus();this.select();'/></td><td><input type='text' name='Wednesday' id='Wednesday'  class='textGroup' value='" + data[i]["Wednesday"] + "' onclick='this.focus();this.select();'/></td><td><input type='text' name='Thursday' id='Thursday'  class='textGroup' value='" + data[i]["Thursday"] + "' onclick='this.focus();this.select();'/></td><td><input type='text' name='Friday' id='Friday'   class='textGroup' value='" + data[i]["Friday"] + "' onclick='this.focus();this.select();'/></td><td><input type='text' id='Saturday' name='Saturday'  class='textGroup' value='" + data[i]["Saturday"] + "' onclick='this.focus();this.select();'/></td><td><input type='text' name='Sunday' id='Sunday'  class='textGroup' value='" + data[i]["Sunday"] + "' onclick='this.focus();this.select();'/></td></tr>");
                        entryLineCounter++;
                    }
                }

            },
            error: function (data) {
                //does nothing as the week doesn't exist

            }
        });
    }

    function getUserProjects() {
        $.ajax({
            url: '/TimeEntry/GetUserProjects',
            type: 'POST',
            data: {

            },
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    var theName = data[i]["Name"]
                    var theId = data[i]["Id"]
                    $("tr[id='EntryLine']").children().children('#Project').append(new Option(theName, theId));
                }
            },
            error: function () {
                alert('You are not assigned to any projects, please contact your administrator.');
            }
        });
    }

    function removePreviousEntries() {
        $("tr[id^='EntryLine']").each(function () {
            if ($(this).attr("id") === "EntryLine") {

            } else {
                $(this).remove();
            }
        });
    }

    function DaysInMonth(month, year) {
        return new Date(year, month, 0).getDate();
    }
    function showDates(startDate) {
        $(".th-day").each(function () {


        });
    }
    $(function () {

        //Begin Initial page load
        var date = new Date();
        var rawStartDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
        var rawEndDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
        $('#startDate').text($.datepicker.formatDate('mm/dd/yy', rawStartDate));
        $('#endDate').text($.datepicker.formatDate('mm/dd/yy',rawEndDate));
        var formatStart = Number(rawStartDate.getMonth() + 1) + '/' + rawStartDate.getDate() + '/' + rawStartDate.getFullYear();
        var formatEnd = Number(rawEndDate.getMonth() + 1) + '/' + rawEndDate.getDate() + '/' + rawEndDate.getFullYear();
        checkForTimeSheet(formatStart, formatEnd);
        getUserProjects();
        showDates(rawStartDate);


        //End Initial Page load

        //Begin Week Button Controls
        $('#previous-week').button().click(function (event) {
            event.preventDefault();
            rawStartDate = new Date(rawStartDate.getFullYear(), rawStartDate.getMonth(), rawStartDate.getDate() - rawStartDate.getDay() - 7)
            rawEndDate = new Date(rawEndDate.getFullYear(), rawEndDate.getMonth(), rawEndDate.getDate() - rawEndDate.getDay() - 1);
            $('#startDate').text($.datepicker.formatDate('mm/dd/yy', rawStartDate));
            $('#endDate').text($.datepicker.formatDate('mm/dd/yy', rawEndDate));
            var formatStart = Number(rawStartDate.getMonth() + 1) + '/' + rawStartDate.getDate() + '/' + rawStartDate.getFullYear();
            var formatEnd = Number(rawEndDate.getMonth() + 1) + '/' + rawEndDate.getDate() + '/' + rawEndDate.getFullYear();
            removePreviousEntries();
            checkForTimeSheet(formatStart, formatEnd);

        });

        $('#next-week').button().click(function (event) {
            event.preventDefault();
            rawStartDate = new Date(rawStartDate.getFullYear(), rawStartDate.getMonth(), rawStartDate.getDate() - rawStartDate.getDay() + 7)
            rawEndDate = new Date(rawEndDate.getFullYear(), rawEndDate.getMonth(), rawEndDate.getDate() - rawEndDate.getDay() + 13);
            $('#startDate').text($.datepicker.formatDate('mm/dd/yy', rawStartDate));
            $('#endDate').text($.datepicker.formatDate('mm/dd/yy', rawEndDate));
            var formatStart = Number(rawStartDate.getMonth() + 1) + '/' + rawStartDate.getDate() + '/' + rawStartDate.getFullYear();
            var formatEnd = Number(rawEndDate.getMonth() + 1) + '/' + rawEndDate.getDate() + '/' + rawEndDate.getFullYear();
            removePreviousEntries();
            checkForTimeSheet(formatStart, formatEnd);
        });

        //End Week Button Controls

        //Submit Time Shet Controls
        $('#submit-time').button().click(function (event) {
            var TimeEntries = [];
            $("tr[id^='EntryLine']").each(function () {
                var Project = $(this).find("#Project").val();
                var Monday = $(this).find("#Monday").val();
                var Tuesday = $(this).find("#Tuesday").val();
                var Wednesday = $(this).find("#Wednesday").val();
                var Thursday = $(this).find("#Thursday").val();
                var Friday = $(this).find("#Friday").val();
                var Saturday = $(this).find("#Saturday").val();
                var Sunday = $(this).find("#Sunday").val();
                var LineEntry =
                {

                    ProjectId: Project,
                    Monday: Monday,
                    Tuesday: Tuesday,
                    Wednesday: Wednesday,
                    Thursday: Thursday,
                    Friday: Friday,
                    Saturday: Saturday,
                    Sunday: Sunday

                };
                TimeEntries.push(LineEntry);
            });
            event.preventDefault();
            var formatStart = Number(startDate.getMonth() + 1) + '/' + startDate.getDate() + '/' + startDate.getFullYear();
            var formatEnd = Number(endDate.getMonth() + 1) + '/' + endDate.getDate() + '/' + endDate.getFullYear();

            $.ajax({
                url: '/TimeEntry/SubmitTimeSheet',
                type: 'POST',
                data: {
                    Start: formatStart,
                    End: formatEnd,
                    TimeEntry: JSON.stringify(TimeEntries)
                }
            ,
                success: function (data) {
                    alert("Time Entry Data Saved");
                },
                error: function () {
                    alert("Failed to save time entry please try again later.");
                }
            });
        });

        $('#lock-time').button().click(function (event) {
            event.preventDefault();
        });

        //End Time Sheet Controls

        // Begin add Line
        $('#addLine').button().click(function (event) {
            event.preventDefault();
            var EntryList = $("tr[id*='EntryLine']");
            $("tr[id*='EntryLine']").last().after("<tr id='EntryLine" + EntryList.length + "'> <td></td><td><select id='Project' name='Project'></select></td><td><select><option>Test Option</option></select></td><td><input type='text' name='Monday' id='Monday' value='0' class='textGroup' onclick='this.focus();this.select();'/></td><td><input type='text' name='Tuesday' id='Tuesday' value='0' class='textGroup' onclick='this.focus();this.select();'/></td><td><input type='text' name='Wednesday' id='Wednesday' value='0' class='textGroup' onclick='this.focus();this.select();'/></td><td><input type='text' name='Thursday' id='Thursday' value='0' class='textGroup' onclick='this.focus();this.select();'/></td><td><input type='text' name='Friday' id='Friday' value='0' class='textGroup' onclick='this.focus();this.select();'/></td><td><input type='text' id='Saturday' name='Saturday' value='0' class='textGroup' onclick='this.focus();this.select();'/></td><td><input type='text' name='Sunday' id='Sunday' value='0' class='textGroup' onclick='this.focus();this.select();'/></td><td><textbox id='totalLine'></textbox></td></tr>");
            $.ajax({
                url: '/TimeEntry/GetUserProjects',
                type: 'POST',
                data: {

                },
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var theName = data[i]["Name"]
                        var theId = data[i]["Id"]
                        $("tr[id='EntryLine"+EntryList.length+"']").children().children('#Project').append(new Option(theName, theId));
                    }
                },
                error: function () {
                    alert('You are not assigned to any projects, please contact your administrator.');
                }
            });
        });

        //End Add Line

        // Live Functions
        $(document).on('change', '.textGroup', function () {
            var totalValue = 0;
            $(this).closest("tr[id*='EntryLine']").children().children('.textGroup').each(function () {
                var tempVal = parseInt($(this).val());
                totalValue += tempVal;
                console.log($(this).val());
            });
            $(this).closest("tr[id*='EntryLine']").children().children('#totalLine').text(totalValue);
        });
        $(document).on('change keyup', '.textGroup', function () {
            var sanitized = $(this).val().replace(/[^0-9.]/g, '0');
            sanitized = sanitized.replace(/\.(?=.*\.)/, '');
            $(this).val(sanitized);
        });

        // End Live Functions
    });
</script>
<div class="week-picker"></div>
<br /><br />
<button id="previous-week">Previous Week</button>
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
<button id="next-week">Next Week</button>
<div id="timesheet">
    <table id="timeGrid">
        <tbody>

            <tr>
                <th><button id="addLine">Add</button></th>
                <th>Project </th>
                <th>Activity</th>
                <th class="th-day">Monday</th>
                <th class="th-day">Tuesday</th>
                <th class="th-day">Wednesday</th>
                <th class="th-day">Thursday</th>
                <th class="th-day">Friday</th>
                <th class="th-day">Saturday</th>
                <th class="th-day">Sunday</th>
                <th>Total</th>
            </tr>

            <tr id="EntryLine">
                <td><!-- Space Holder--></td>
                <td><select id="Project" name="Project"></select></td>
                <td><select id="Activity" name="Activity"><option>Test Option</option></select></td>
                <td>@Html.TextBox("Monday", "0", new { @class = "textGroup", @onclick="this.focus();this.select();" })</td>
                <td>@Html.TextBox("Tuesday", "0", new { @class = "textGroup", @onclick = "this.focus();this.select();" })</td>
                <td>@Html.TextBox("Wednesday", "0", new { @class = "textGroup", @onclick = "this.focus();this.select();" })</td>
                <td>@Html.TextBox("Thursday", "0", new { @class = "textGroup", @onclick = "this.focus();this.select();" })</td>
                <td>@Html.TextBox("Friday", "0", new { @class = "textGroup", @onclick = "this.focus();this.select();" })</td>
                <td>@Html.TextBox("Saturday", "0", new { @class = "textGroup", @onclick = "this.focus();this.select();" })</td>
                <td>@Html.TextBox("Sunday", "0", new { @class = "textGroup", @onclick = "this.focus();this.select();" })</td>
                <td><textbox id="totalLine"></textbox></td>
            </tr>

        </tbody>

    </table>
    <button id="submit-time">Save Time</button>
    <button id="lock-time">Submit for Approval</button>
</div>