@model Disco.Web.Models.Job.CreateModel
@{
    Authorization.Require(Claims.Job.Actions.Create);
    
    Layout = MVC.Shared.Views._DialogLayout;
    ViewBag.Title = Html.ToBreadcrumb("Jobs", MVC.Job.Index(), "Create");
}
<div id="createJob_Container">
    @using (Html.BeginForm(MVC.Job.Create()))
    {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(m => m.DeviceSerialNumber)
        @Html.HiddenFor(m => m.UserId)
        @Html.HiddenFor(m => m.SourceUrl)
    
        @Html.Partial(MVC.Job.Views._CreateSubject, Model)
        @Html.ValidationSummary(true)
        
        <div id="createJob_Types" class="createJob_Component">
            <div id="createJob_Type">
                <h3>Type</h3>
                @Html.ValidationMessageFor(m => m.Type)
                @CommonHelpers.RadioButtonList("Type", Model.JobTypes.ToSelectListItems(Model.Type), 3)
                @Html.ValidationMessageFor(m => m.SubTypes)
            </div>
            <div id="createJob_SubTypes">
                @foreach (var jt in Model.JobTypes)
                {
                    <div id="createJob_SubType_@(jt.Id)" class="createJob_SubType">
                        <div class="createJob_SubTypes">
                            @CommonHelpers.CheckBoxList("SubTypes", jt.JobSubTypes.ToSelectListItems(Model.SubTypes, true), 3, true, null, false)
                        </div>
                    </div>
                }
            </div>
        </div>
        if (Authorization.Has(Claims.Job.Properties.DeviceHeld)){
        <div id="createJob_DeviceHeldContainer" class="createJob_Component">
            @Html.ValidationMessageFor(m => m.DeviceHeld)
            @Html.HiddenFor(m => m.DeviceHeld)
            <table>
                <tr>
                    <td>
                        <h3>Device Held</h3>
                    </td>
                    <td>
                        <input id="createJob_DeviceHeld" name="_DeviceHeld" type="radio" value="true" /><label for="createJob_DeviceHeld">Held</label>
                    </td>
                    <td>
                        <input id="createJob_DeviceNotHeld" name="_DeviceHeld" type="radio" value="false" /><label for="createJob_DeviceNotHeld">Not Held</label>
                    </td>
                </tr>
            </table>
        </div>
        }else{
            @Html.Hidden("DeviceHeld", false)
        }
        <div id="createJob_CommentsContainer" class="createJob_Component" data-dynamic="@(Model.RegenerateCommentsOnTypeChange ? Url.Action(MVC.API.Job.InitialComments()) : null)">
            <table>
                <tr>
                    <td>
                        <h3>Comments</h3>
                    </td>
                    <td>
                        @Html.EditorFor(m => m.Comments)
                    </td>
                </tr>
            </table>
        </div>
        if (Authorization.Has(Claims.Job.Actions.Close)){
        <div id="createJob_QuickLogContainer" class="createJob_Component">
            <div id="createJob_QuickLogAutoCloseContainer">
                <input id="createJob_QuickLog" name="QuickLog" type="checkbox" value="true" /><label for="createJob_QuickLog">Automatically close this job</label>
            </div>
            <div id="createJob_QuickLogTaskTimeContainer">
                <h4>Task Time:</h4>
                <input type="radio" id="createJob_TaskTime5" name="QuickLogTaskTimeMinutes" value="5" /><label for="createJob_TaskTime5">5 Minutes</label>
                <input type="radio" id="createJob_TaskTime10" name="QuickLogTaskTimeMinutes" value="10" /><label for="createJob_TaskTime10">10 Minutes</label>
                <input type="radio" id="createJob_TaskTime30" name="QuickLogTaskTimeMinutes" value="30" /><label for="createJob_TaskTime30">30 Minutes</label>
                <input type="radio" id="createJob_TaskTime60" name="QuickLogTaskTimeMinutes" value="60" /><label for="createJob_TaskTime60">1 Hour</label>
                <input type="radio" id="createJob_TaskTime120" name="QuickLogTaskTimeMinutes" value="120" /><label for="createJob_TaskTime120">2 Hours</label>
                <input type="radio" id="createJob_TaskTimeOther" name="QuickLogTaskTimeMinutes" value="" /><label for="createJob_TaskTimeOther">Other</label>
                <span id="createJob_TaskTimeOtherMinutesContainer">
                    <input type="number" id="createJob_TaskTimeOtherMinutes" name="QuickLogTaskTimeMinutesOther" value="" disabled="disabled" />
                    Minutes
                </span>
                @Html.ValidationMessageFor(m => m.QuickLogTaskTimeMinutes)
            </div>
        </div>
        }
    }
    <script type="text/javascript">
        $(function () {
            var discoDialogMethods;
            var init = true;
            //#region Parent Dialog
            if (window.parent && window.parent.document) {
                $('#SourceUrl').val(window.parent.window.location.href);

                var parentDialog = $('#createJobDialog', window.parent.document);
                if (parentDialog.length > 0) {
                    discoDialogMethods = parentDialog[0].discoDialogMethods;
                    var buttons = {
                        "Create Job": function () {
                            createJobForm.submit()
                        },
                        Cancel: function () {
                            discoDialogMethods.close();
                        }
                    }

                    discoDialogMethods.setButtons(buttons);
                }
            }
            //#endregion


            var createJobForm = $('form');
            var validator = createJobForm.data('validator');
            var unobtrusiveValidation = createJobForm.data('unobtrusiveValidation');

            // Validate all Fields
            validator.settings.ignore = '';

            //#region Job Type/SubTypes
            var $jobTypeContainer = $('#createJob_Type');
            var $typeValidationMessage = $('[data-valmsg-for="Type"]', $jobTypeContainer)
            var $subTypesValidationMessage = $('[data-valmsg-for="SubTypes"]', $jobTypeContainer)
            var $jobTypes = $jobTypeContainer.find('input[type="radio"]').change(jobTypeChange);
            $('#createJob_SubTypes').find('input[type="checkbox"]').change(jobSubTypeHighlight).each(jobSubTypeHighlight);
            jobTypeChange();
            function jobSubTypeHighlight() {
                var $this = $(this);
                if ($this.is(':checked'))
                    $this.closest('li').addClass('highlight');
                else
                    $this.closest('li').removeClass('highlight');
            }
            function jobTypeChange() {
                var $checkedItem = $jobTypes.filter(':checked');

                $jobTypes.closest('li').removeClass('highlight');

                $checkedItem.closest('li').addClass('highlight');

                if (init) {
                    var jobType = $checkedItem.val();
                    $('#createJob_SubType_' + jobType).show();
                } else {
                    $('#createJob_SubTypes').find('.createJob_SubType:visible').slideUp();
                    var jobType = $checkedItem.val();
                    $('#createJob_SubType_' + jobType).slideDown();
                }
            }

            const initialCommentsUrl = $('#createJob_CommentsContainer').attr('data-dynamic');
            if (!!initialCommentsUrl) {
                let commentsDirty = false;
                $('#Comments').on('change', function () {
                    commentsDirty = true;
                });
                $('#createJob_Types').on('change', 'input', async function () {
                    if (commentsDirty) {
                        return;
                    }
                    const body = new FormData(createJobForm.get(0));
                    const response = await fetch(initialCommentsUrl, {
                        method: 'POST',
                        body: body
                    });
                    if (response.ok) {
                        const comments = await response.json();
                        $('#Comments').val(comments);
                    } else {
                        console.error('Failed to fetch updated initial comments');
                    }
                })
            }

            var additionalValidation = function (form) {
                var isValid = true;

                // Validate Type
                var typeValue = $jobTypes.filter(':checked').val();
                if (typeValue) {
                    $typeValidationMessage.removeClass('field-validation-error').addClass('field-validation-valid');
                    // Validate SubTypes
                    if ($('#createJob_SubType_' + typeValue).find('input:checked').length > 0) {
                        $subTypesValidationMessage.removeClass('field-validation-error').addClass('field-validation-valid');
                    } else {
                        $subTypesValidationMessage.text('At least one Job Sub Type is required').removeClass('field-validation-valid').addClass('field-validation-error');
                        isValid = false;
                    }
                } else {
                    $typeValidationMessage.text('A Job Type is required').removeClass('field-validation-valid').addClass('field-validation-error');
                    isValid = false;
                }

                @if (Authorization.Has(Claims.Job.Actions.Close)){
                <text>
                // Validate QuickLog Task Time
                if ($quickLog.is(':checked')) {
                    var selectedTime = $quickLogTaskTimes.filter(':checked');
                    if (selectedTime.length > 0) {
                        if (selectedTime.val() === '') {
                            // Handle 'Other'
                            var otherTime = parseInt($quickLogTaskTimeOtherMinutes.val());
                            if (!otherTime || otherTime <= 0) {
                                $quickLogTaskTimeValidationMessage.text('A Task Time is required').removeClass('field-validation-valid').addClass('field-validation-error');
                                isValid = false;
                            }
                        } else {
                            $quickLogTaskTimeValidationMessage.removeClass('field-validation-valid').addClass('field-validation-error');
                        }
                    } else {
                        $quickLogTaskTimeValidationMessage.text('A Task Time is required').removeClass('field-validation-valid').addClass('field-validation-error');
                        isValid = false;
                    }
                } else {
                    $quickLogTaskTimeValidationMessage.removeClass('field-validation-valid').addClass('field-validation-error');
                }
                </text>
                }

                return isValid;
            }

            validator.settings.submitHandler = function (form) {
                if (additionalValidation()) {
                    discoDialogMethods.setButtons({});
                    form.submit();
                }
            }
            //#endregion

            //#region DeviceHeld
            var $deviceHeld = $('#DeviceHeld');

            @if (Authorization.Has(Claims.Job.Properties.DeviceHeld)){<text>
            if ($('#DeviceSerialNumber').val()) {
                switch ($deviceHeld.val()) {
                    case 'True':
                        $('#createJob_DeviceHeld').prop('checked', true);
                        $('#createJob_DeviceNotHeld').prop('checked', false);
                        break;
                    case 'False':
                        $('#createJob_DeviceHeld').prop('checked', false);
                        $('#createJob_DeviceNotHeld').prop('checked', true);
                        break;
                    default:
                        $('#createJob_DeviceHeld').prop('checked', false);
                        $('#createJob_DeviceNotHeld').prop('checked', false);
                        break;
                }
                $('#createJob_DeviceHeldContainer').find('input[type="radio"]').change(function () {
                    // Update Hidden Field with Boolean Value
                    // Set DeviceHeld
                    var deviceHeldValue = '';
                    if ($('#createJob_DeviceHeld').is(':checked'))
                        deviceHeldValue = 'True';
                    if ($('#createJob_DeviceNotHeld').is(':checked'))
                        deviceHeldValue = 'False';
                    $deviceHeld.val(deviceHeldValue).change();
                });
            } else {
                // No Device Associated
                $deviceHeld.val('False');
                $('#createJob_DeviceHeldContainer').hide();
            }
            </text>}
            //#endregion

            @if (Authorization.Has(Claims.Job.Actions.Close)){
                <text>
            //#region QuickLog
            var $quickLog = $('#createJob_QuickLog');
            var $quickLogContainer = $('#createJob_QuickLogContainer');
            var $quickLogTaskTimeContainer = $('#createJob_QuickLogTaskTimeContainer');
            var $quickLogTaskTimes = $quickLogTaskTimeContainer.find('input[type="radio"]');
            var $quickLogTaskTimeOtherMinutes = $('#createJob_TaskTimeOtherMinutes');
            var $quickLogTaskTimeValidationMessage = $quickLogTaskTimeContainer.find('[data-valmsg-for="QuickLogTaskTimeMinutes"]');

            $deviceHeld.change(validateQuickLog);
            $jobTypes.change(validateQuickLog);
            validateQuickLog();

            function validateQuickLog() {
                var quickLogAllowed = false;

                if ($deviceHeld.val() === 'True') {
                    quickLogAllowed = false;
                } else {
                    // Allow Quick-Log only for certain Job Types
                    var selectedType = $jobTypes.filter(':checked').val();
                    switch (selectedType) {
                        case 'HMisc':
                        case 'SApp':
                        case 'SImg':
                        case 'SOS':
                        case 'UMgmt':
                            quickLogAllowed = true;
                            break;
                        default:
                            quickLogAllowed = false;
                            break;
                    }
                }

                if (quickLogAllowed) {
                    $quickLogContainer.slideDown();
                } else {
                    if (init)
                        $quickLogContainer.hide();
                    else
                        $quickLogContainer.slideUp();
                    $quickLog.prop('checked', false).change();
                }
            }

            $quickLog.change(function () {
                if ($(this).is(':checked')) {
                    $quickLogTaskTimeContainer.slideDown();
                    $('#createJob_SubTypes').addClass('isQuickLog');
                } else {
                    $quickLogTaskTimeContainer.slideUp();
                    $('#createJob_SubTypes').removeClass('isQuickLog');
                }
            });

            $quickLogTaskTimes.change(function () {
                if ($quickLogTaskTimes.filter(':checked').val() === "") {
                    $('#createJob_TaskTimeOtherMinutesContainer').show();
                    $quickLogTaskTimeOtherMinutes.attr('disabled', null).focus().select();
                } else {
                    $('#createJob_TaskTimeOtherMinutesContainer').hide();
                    $quickLogTaskTimeOtherMinutes.attr('disabled', 'disabled');
                }
            });
            //#endregion
            </text>
            }

            init = false;
        });
    </script>
</div>