@model CapacityManagement.Prometric.Data.Services.AllocationRule
@using CapacityManagement.Helpers
@{
    ViewBag.Title = Resources.Resources.EditPageTitle + " " + Html.DisplayTextFor(model => model.Name);

}
<script src="../../Scripts/CPE_Zone_Dropdown.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //Date picker buttons
        $('#@Html.IdFor(model => model.EffectiveStartDate)').datepicker({
            showOn: "button"
        });
        $('#@Html.IdFor(model => model.EffectiveEndDate)').datepicker({
            showOn: "button"
        });
        $('button.ui-datepicker-trigger').button({
            text: false,
            icons: {
                primary: 'ui-icon-calendar',
                secondary: ''
            }
        }).addClass('right');

        //slider
        $("#slider").slider({
            range: "min",
            min: 0,
            max: 100,
            slide: function (event, ui) {
                $("#@Html.IdFor(model => model.Amount)").val("%" + ui.value);
            }

        });

        //TODO: make this use proper selection syntax
        $("input[type='radio']").change(function () {
            var selection = $(this).val();
            $("#slider").toggle();
            $("#@Html.IdFor(model => model.Amount)").val('');
        });
    });
</script>
@using (Html.BeginForm())
{
    <div id="accordion" style="height: 610px">
        <h3>
            <a href="#">@Resources.Resources.EditAllocationRule @Html.DisplayTextFor(model => model.Name)</a></h3>
        <div>
            <fieldset>
                <table>
                    <tr>
                        <td>
                            <div class="editor-label">
                                @Html.LabelFor(model => model.Name)
                            </div>
                        </td>
                        <td colspan="3">
                            <div class="editor-field">
                                @Html.EditorFor(model => model.Name)
                                @Html.ValidationMessageFor(model => model.Name)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label">
                                @Resources.Resources.LabelEffectiveStartDate
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.EffectiveStartDate, new { @class = "jquery_datepicker", @Value = Model.EffectiveStartDate.ToString("dd/MM/yyyy") })
                                @Html.ValidationMessageFor(model => model.EffectiveStartDate)
                            </div>
                        </td>
                        <td>
                            <div class="editor-label">
                                @Resources.Resources.LabelEffectiveEndDate
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.EffectiveEndDate, new { @class = "jquery_datepicker", @Value = Model.EffectiveEndDate.ToString("dd/MM/yyyy") })
                                @Html.ValidationMessageFor(model => model.EffectiveEndDate)
                            </div>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset class="InputFieldSet">
                <legend>@Resources.Resources.LabelExamScopes</legend>
                @Html.Partial("_ExamDropDown")
                @Html.ExamGrid(Model, true)
            </fieldset>
            <fieldset class="InputFieldSet">
                <legend>@Resources.Resources.LabelZones</legend>
                @Html.Partial("_ZoneDropDown")
                @Html.ZoneGrid(Model, true)
            </fieldset>
            <fieldset>
                <table>
                    <tr>
                        <td>
                            <div class="editor-label">
                                @Resources.Resources.LabelUnitOfMeasure
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.RadioButtonFor(model => model.UnitOfMeasure, "Hours")
                                Hours
                                @Html.RadioButtonFor(model => model.UnitOfMeasure, "Percentage")
                                Percentage
                                @Html.ValidationMessageFor(model => model.UnitOfMeasure)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label">
                                @Html.LabelFor(model => model.Amount)
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.Amount)
                                @Html.ValidationMessageFor(model => model.Amount)
                            </div>
                        </td>
                        <td>
                            <div id="slider" style="width: 200px">
                            </div>
                        </td>
                    </tr>
                </table>
                @Html.HiddenFor(model => model.Finalized)
                <div class="buttonP">
                    <input type="submit" name="submit" value="@Resources.Resources.ButtonSave" />
                    <input type="submit" name="submit" value="@Resources.Resources.ButtonCommit" />
                    <input type="submit" name="submit" value="@Resources.Resources.ButtonDisable" />
                </div>
            </fieldset>
        </div>
    </div>
}