<div id="add-edit-dialog" style="display: none" title="Add / Edit Course">
<form id="add-edit-form">
    <div id="messageBox1">
        <ul></ul>
    </div>
    <fieldset>
        <legend></legend>

        <input type="hidden" name="id" id="id" />

        <table class="tableform">
            <tr>
                <td>
                    <label for="name">Name </label>
                    <input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all" />
                </td>
                <td>
                    <label for="location">Location </label>
                    <input type="text" name="location" id="location" value="" class="text ui-widget-content ui-corner-all" />
                </td>
                <td>
                    <label for="category">Category </label>
                    <input type="text" name="category" id="category" value="" class="text ui-widget-content ui-corner-all" />
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <label for="description">Description </label>
                    <textarea name="description" id="description" class="text ui-widget-content ui-corner-all"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="startdate">Start Date </label>
                    <input type="text" name="startdate" id="startdate" class="text ui-widget-content ui-corner-all" />
                </td>
                <td>
                    <label for="enddate">End Date </label>
                    <input type="text" name="enddate" id="enddate" class="text ui-widget-content ui-corner-all" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="fees">Fees </label>
                    £ <input type="text" name="fees" id="fees" value="" class="text ui-widget-content ui-corner-all" style="width:100px" />
                </td>
                <td>
                    <label for="totalspace">Total Space </label>
                    <input type="text" name="totalspace" id="totalspace" value="" class="text ui-widget-content ui-corner-all" style="width:100px"  />

                </td>
            </tr>
        </table>

    </fieldset>
</form>
</div>



<div id="tabs">
<ul>
    <li><a href="#tabs-1">Courses</a></li>
</ul>
<div id="tabs-1">
    <div>
        <table id="CourseList" style="display: none"></table>
    </div>
</div>
</div>





@using (Script.Foot())
{

<script type="text/javascript">

    $(function () {
        $("#tabs").tabs();
    });

    var CoursePost = {
        Id : null,
        Name: null,
        Description: null,
        Location: null,
        Category: null,
        StartDate: null,
        EndDate: null,
        Fees: null,
        TotalSpace: null,
        setVals: function (id,name,description,location,category,startdate,enddate,fees,totalspace) {

            this.Id = id;
            this.Name = name;
            this.Description = description;
            this.Location = location;
            this.Category = category;
            this.StartDate = startdate;
            this.EndDate = enddate;
            this.Fees = fees;
            this.TotalSpace = totalspace;
        }
    };

    var txtId = $("#id");
    var txtName = $("#name");
    var txtDescription = $("#description");
    var txtLocation = $("#location");
    var txtCategory = $("#category");
    var txtStartDate = $("#startdate");
    var txtEndDate = $("#enddate");
    var txtFees = $("#fees");
    var txtTotalSpace = $("#totalspace");

    $(document).ready(function () {
        $('#CourseList').flexigrid({
            url: '@Url.Action("CourseList", "Course")',
            dataType: 'json',
            colModel: [
                {
                    display: 'Id',
                    name: 'Id',
                    width: 250,
                    sortable: true,
                    align: 'left',
                    hide:true
                },
                {
                    display: 'Name',
                    name: 'Name',
                    width: 300,
                    sortable: true,
                    align: 'left'
                },
                {
                    display: 'Description',
                    name: 'Description',
                    width: 180,
                    sortable: true,
                    align: 'left',
                    hide:true
                },
                {
                    display: 'Location',
                    name: 'Location',
                    width: 250,
                    sortable: true,
                    align: 'left'
                },
                {
                    display: 'Category',
                    name: 'Category',
                    width: 100,
                    sortable: true,
                    align: 'left',
                },
                {
                    display: 'Start Date',
                    name: 'StartDate',
                    width: 80,
                    sortable: true,
                    align: 'left'
                },
                {
                    display: 'End Date',
                    name: 'EndDate',
                    width: 80,
                    sortable: true,
                    align: 'left'
                },
                {
                    display: 'Fees',
                    name: 'Fees',
                    width: 80,
                    sortable: true,
                    align: 'left',
                    hide: true
                },
                {
                    display: 'Total Space',
                    name: 'TotalSpace',
                    width: 80,
                    sortable: true,
                    align: 'left',
                    hide:true
                },

            ],
            buttons: [{
                name: 'Add',
                bclass: 'add',
                onpress: test
            }, {
                name: 'Edit',
                bclass: 'edit',
                onpress: test
            }, {
                name: 'Delete',
                bclass: 'delete',
                onpress: test
            }, {
                separator: true
            }],
            searchitems: [{
                display: 'Name',
                name: 'Name'
            }, {
                display: 'Name',
                name: 'Name',
                isdefault: true
            }],
            sortname: "Name",
            sortorder: "asc",
            usepager: true,
            title: 'Courses',
            useRp: true,
            rp: 15,
            showTableToggleBtn: true,
            width: 900,
            height: 400,
            singleSelect: true
        });
    });

    function test(com, grid) {

        var selectedRows = $('.trSelected', grid).length;

        if (com == 'Add') {

            var $datepicker = $("#startdate");
            $datepicker.datepicker();
            $datepicker.datepicker('setDate', new Date());

            var $datepicker = $("#enddate");
            $datepicker.datepicker();
            $datepicker.datepicker('setDate', new Date());

            $("#add-edit-dialog").dialog("open");
        }
        if (com == 'Edit' && selectedRows > 0) {
            if (selectedRows == 1) {

                $('.trSelected', grid).each(function () {
                    setFormControls($('td[abbr="Id"] >div', this).html(),
                        $('td[abbr="Name"] >div', this).html().replace(/&nbsp;/g, ''),
                        $('td[abbr="Description"] >div', this).html(),
                        $('td[abbr="Location"] >div', this).html().replace(/&nbsp;/g, ''),
                        $('td[abbr="Category"] >div', this).html().replace(/&nbsp;/g, ''),
                        $('td[abbr="StartDate"] >div', this).html(),
                        $('td[abbr="EndDate"] >div', this).html(),
                        $('td[abbr="Fees"] >div', this).html(),
                        $('td[abbr="TotalSpace"] >div', this).html()

                        );
                });

                $("#add-edit-dialog").dialog("open");
            } else {
                alert("Select only one row");
            }
        }
        else if (com == 'Delete' && selectedRows > 0) {

            var proceed = confirm('Delete ' + selectedRows + ' item(s)?');

            if (!proceed) {
                return false;
            }

            var id;

            $('.trSelected', grid).each(function (index) {
                id = $('td[abbr="Id"] >div', this).html();
            });

            $.ajax({
                type: 'POST',
                data: JSON.stringify({ 'Id': id }),
                url: '@Url.Action("Delete", "Course")',
                dataType: 'json',
                contentType: 'application/json',
                success: function (result) {
                    // insert new list into grid
                    $('#CourseList').flexAddData(result);
                }
            });

        }
    }

    function setFormControls(id, name, description, location, category, startdate, enddate, fees, totalspace) {
        txtId.val(id);
        txtName.val(name);
        txtDescription.val(description);
        txtLocation.val(location);
        txtCategory.val(category);
        txtStartDate.val(startdate);
        txtEndDate.val(enddate);
        txtFees.val(fees);
        txtTotalSpace.val(totalspace);
    }

    $("#add-edit-dialog").dialog({
        autoOpen: false,
        height: 600,
        width: 800,
        modal: true,
        buttons: {
            "Save": function () {
                CoursePost.setVals(txtId.val(),txtName.val(),txtDescription.val(),txtLocation.val(),txtCategory.val(),txtStartDate.val(),txtEndDate.val(),txtFees.val(),txtTotalSpace.val());
                $.ajax({
                    type: 'POST',
                    data: JSON.stringify(CoursePost),
                    url: '@Url.Action("Save", "Course")',
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (result) {
                        // insert new list into grid
                        $('#CourseList').flexAddData(result);
                    }
                });
                $(this).dialog('close');

            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },

        close: function () { setFormControls('', '', '', '',''); },
        open: function () {
            //$("#add-edit-dialog").parent().appendTo($("#add-edit-form"));
        }

    });

    $("#fees").keyup(function () {
        $("#fees").val(this.value.match(/[0-9]*/));
    });


    $("#totalspace").keyup(function () {
        $("#totalspace").val(this.value.match(/[0-9]*/));
    });


    $(function () {
        $("#startdate").datepicker();
        $("#enddate").datepicker();
    });

</script>

[HttpPost]
    public ActionResult Save(CourseRecord courserecord)
    {

        try
        {
            if (courserecord.Id > 0)
            {
                _courseRepository.Update(courserecord);

            }
            else
            {
                CourseRecord course = new CourseRecord()
                {
                    Name = courserecord.Name,
                    Description = courserecord.Description,
                    Category = courserecord.Category,
                    Location = courserecord.Location,
                    Fees = courserecord.Fees,
                    StartDate = courserecord.StartDate,
                    EndDate = courserecord.EndDate,
                    TotalSpace = courserecord.TotalSpace
                };

                _courseRepository.Create(course);
            }

            return CreateFlexiJson(_courseRepository.Table.OrderBy(p => p.StartDate).ToList(), 1, 1);
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }