@model WebApplication6.Models.Movie

@{
    ViewData["Title"] = "CreateMovie";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<hr />
   <!-- ** BEGIN POP-UP MESSAGE AREA ** -->
   <div class="submit-progress hidden">
     <i class="fa fa-2x fa-spinner fa-spin"></i>
     <label>Please wait while Saving Data...</label>
   </div>
   <!-- ** END POP-UP MESSAGE AREA ** -->
<div class="row">
    <div class="col-md-4">
        <form asp-action="CreateMovie">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
            <div class="form-group">
                <label asp-for="Id" class="control-label"></label>
                <input asp-for="Id" class="form-control" />
                <span asp-validation-for="Id" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Title" class="control-label"></label>
                <input asp-for="Title" class="form-control" />
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ReleaseDate" class="control-label"></label>
                <input asp-for="ReleaseDate" class="form-control" />
                <span asp-validation-for="ReleaseDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Genre" class="control-label"></label>
                <input asp-for="Genre" class="form-control" />
                <span asp-validation-for="Genre" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div> 
            <div class="form-group">
                <input type="submit" onclick="return DisplayProgressMessage(this, 'Saving...');" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>
    
 <style>
   .submit-progress-bg {
     background-color: lightgray;
     opacity: .5;
   }
    
   .submit-progress {
     position: fixed;
     top: 50%;
     left: 50%;
     height: 6em;
     padding-top: 2.3em;
     z-index: 1;
     /* The following properties are the ones most likely to change */
     width: 20em;
     /* Set 'margin-left' to a negative number that is 1/2 of 'width' */
     margin-left: -10em;
     padding-left: 2.1em;
     background-color: black;
     color: white;
     -webkit-border-radius: 0.4em;
     -moz-border-radius: 0.4em;
     border-radius: 0.4em;
     box-shadow: 0.4em 0.4em rgba(0,0,0,0.6);
     -webkit-box-shadow: 0.4em 0.4em rgba(0,0,0,0.6);
     -moz-box-shadow: 0.4em 0.4em rgba(0,0,0,0.6);
   }
    
   /* Changing style for spinner */
   .submit-progress {
     padding-top: 2em;
     width: 23em;
     margin-left: -11.5em; /* Set to a negative number that is 1/2 of the width */
   }
    
     .submit-progress i {
       margin-right: 0.5em;
     }
     .hidden{
         display:none;
     }
 </style>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script type="text/javascript">
    function DisplayProgressMessage(ctl, msg) {
        //if use the submit button, you can use event.preventDefault to prevent the default submit form behavior.
        event.preventDefault();
        // Turn off the "Save" button and change text
        $(ctl).prop("disabled", true).val(msg);
        // Gray out background on page
        $("body").addClass("submit-progress-bg");    
        // Wrap in setTimeout so the UI can update the spinners
        $(".submit-progress").removeClass("hidden");
        //submit the form.
        setTimeout(function () {
            $("form").submit(); 
        }, 1);    
        return true;
    }
 </script>
}