@model WebApplication6.Models.MusicGenre

@{
    ViewData["Title"] = "CreateGenre";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!-- Styles for Wait Messages -->
 <link href="~/Content/font-awesome.min.css" rel="stylesheet" />
    
 <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>
    
 @using (Html.BeginForm())
 {
   <!-- ** 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-sm-6 center-block">
       <div class="panel panel-default">
         <div class="panel-heading">
           <h3 class="panel-title">Add Music Genre</h3>
         </div>
         <div class="panel-body">
           <div class="form-group">
             <label>Music Genre</label>
             @Html.TextBoxFor(m => m.Genre, new { @class = "form-control" })
           </div>
         </div>
         <div class="panel-footer">
           <button type="submit"
                   id="submitButton"
                   class="btn btn-primary"
                   onclick="return DisplayProgressMessage(this, 'Saving...');">
             Save
           </button>
         </div>
       </div>
     </div>
   </div>
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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).text(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(); 
        }, 2000);
    
        return true;
    }
 </script>