[Dilettante_Pro]

<style>
.modal {
  position:fixed;
  top:0px;
  display:none;
  background-color: gray;
  z-index:100;
}
</style>

<div class="container-fluid">
  
    <button class="btn btn-success" data-toggle="modal" data-target="#addAll" onclick = "showModal()">Добавить</button>
    
</div>
 


<!-------------------------------------------------------------------------------------------------------Modal addAll-->
<div id="addAll" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                
                <button type="button" class="close" data-dismiss="modal" onclick = "hideModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="validityNameAll">Введите название:</label>
                    <input class="form-control" type="text" id="validityNameAll" required="required" name="name">
                    <button type="button" class="btn btn-success addScheduleDown" onclick="addScheduleDown()">Добавить график</button>
                </div>
              
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success" onclick="addAll()">Сохранить</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal" onclick = "hideModal()">Закрыть</button>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function showModal() {
     $("#addAll").show();
}
function hideModal() {
     $("#addAll").hide();
}
//добавление новой таблицы в модалку
function addScheduleDown() {
    if($(".table").length == 0) {
    $("button.addScheduleDown").after( "" +
        "<table class=\"table\"> <thead>\n" +
        "<tr>\n" +
        "<th>Начало</th>\n" +
        "<th>Пн</th>\n" +
        "</tr>\n" +
        "</thead>\n" +
        "<tbody>\n" +
        "</tbody>" +
        "</table>"); 
    }
    $(".table tbody").append(
          "<tr>\n" +
        "<td><input type=\"time\"  name=\"beginTime\" required=\"required\"/></td>\n" +
        "<td><input type=\"checkbox\" name=\"monday\"/></td>\n" +
        "</tr>\n"
     );
}
//отправка значений на сервер в БД
function addAll() {
    var nameValidity = $('#validityNameAll').val();
    var validity = {
            nameValidity:nameValidity,
            validityScheduleList:[] };

    $(".table tbody tr").each(function() {
        var beginTime = $(this).find("input[name='beginTime']").val();
        var monday = $(this).find("input[name='monday']").prop('checked');
    
      validity.validityScheduleList.push({
            beginTime: beginTime,
            monday: monday
           });
       
   });
   alert( JSON.stringify(validity));
//    $.ajax({
//        type: "POST",
 //       url: "/schedule/addAll",
 //       contentType: "application/json; charset=utf-8",
 //       data: JSON.stringify(validity),
 //       beforeSend: function (xhr) {
 //           xhr.setRequestHeader(csrfHeader, csrfToken);
 //       },
 //       success: function (data) {
 //           window.location.replace("/validity");
 //       },
 //       error: function (e) {
 //           alert("error")
 //       }
 //   });

}
</script>