<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Job Creator</title>

    <!-- Bootstrap core CSS-->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

    <!-- Custom styles for this template-->
    <link href="css/sb-admin.css" rel="stylesheet">

  </head>

  <body id="page-top">

    <div id="wrapper">

      <div id="content-wrapper">

        <div class="container-fluid">

          <div class="row">
        <div class="col-lg-12 text-center">
          <h1 class="mt-5">Create your scheduled jobs in an easy way!</h1>
          <p class="lead">Just provide the information requested below, the query and that's it</p>
        </div>
      </div>

          <div class="card">
            <div class="card-body">
              <form method="post">

                <h5 class="card-title">BASIC INFO</h5>
                <div class="form-row">

                  <div class="form-group col-sm-3">
                    <label for="job_name">Job Name</label>
                    <input type="text" class="form-control" id="job_name" name="job_name" aria-describedby="job_name_help" placeholder="a_cool_report" required>
                    <small id="job_name_help" class="form-text text-muted">The name of the job to be created.</small>
                  </div>
              
                  
                  <div class="form-group col-sm-4">
                    <label for="error_email">Error Email</label>
                    <input type="text" class="form-control" id="error_email" name="error_email" aria-describedby="error_email_help" placeholder="a.user@criteo.com; b.user@criteo.com" required>
                    <small id="error_email_help" class="form-text text-muted">Who is going to receive the email if the job fails (separate multiple users with semicolon).</small>
                  </div>

                  <div class="form-group col-md-5">
                    <label for="output_dir">Output Folder</label>
                    <input class="form-control" id="output_dir" name="output_dir" aria-describedby="output_dir_help" placeholder="C:\Users\j.gajardo" required>
                    <small id="output_dir_help" class="form-text text-muted">Write the directory where to put the folder with the script.</small>
                  </div>

                </div>
                

                <h5 class="card-title">PERIODICITY</h5>

                <div class="row">

                  <div class="form-group col-sm-4">
                    <div class="card border-0">
                      <div class="card-body">
                        <label>Day of the Month</label>
                        <div class="form-group row">
                          <div class="col-sm-2">
                            <div class="form-check"><input class="form-check-input" type="checkbox" id="all_daynum"><label class="form-check-label" for="all_daynum">all</label></div>
                          </div>
                        </div>
                        <!-- daynum -->
                        <div class="form-group row">
                          <div class="col-sm-2">

                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="1" name="1"><label class="form-check-label" for="1">1</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="2" name="2"><label class="form-check-label" for="2">2</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="3" name="3"><label class="form-check-label" for="3">3</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="4" name="4"><label class="form-check-label" for="4">4</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="5" name="5"><label class="form-check-label" for="5">5</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="6" name="6"><label class="form-check-label" for="6">6</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="7" name="7"><label class="form-check-label" for="7">7</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="8" name="8"><label class="form-check-label" for="8">8</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="9" name="9"><label class="form-check-label" for="9">9</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="10" name="10"><label class="form-check-label" for="10">10</label></div>
                          </div>
                          <div class="col-sm-2">
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="11" name="11"><label class="form-check-label" for="11">11</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="12" name="12"><label class="form-check-label" for="12">12</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="13" name="13"><label class="form-check-label" for="13">13</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="14" name="14"><label class="form-check-label" for="14">14</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="15" name="15"><label class="form-check-label" for="15">15</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="16" name="16"><label class="form-check-label" for="16">16</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="17" name="17"><label class="form-check-label" for="17">17</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="18" name="18"><label class="form-check-label" for="18">18</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="19" name="19"><label class="form-check-label" for="19">19</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="20" name="20"><label class="form-check-label" for="20">20</label></div>

                          </div>
                          <div class="col-sm-2">
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="21" name="21"><label class="form-check-label" for="21">21</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="22" name="22"><label class="form-check-label" for="22">22</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="23" name="23"><label class="form-check-label" for="23">23</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="24" name="24"><label class="form-check-label" for="24">24</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="25" name="25"><label class="form-check-label" for="25">25</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="26" name="26"><label class="form-check-label" for="26">26</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="27" name="27"><label class="form-check-label" for="27">27</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="28" name="28"><label class="form-check-label" for="28">28</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="29" name="29"><label class="form-check-label" for="29">29</label></div>
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="30" name="30"><label class="form-check-label" for="30">30</label></div>
                          </div>
                          <div class="col-sm-2">
                            <div class="form-check"><input class="form-check-input day-num" type="checkbox" id="31" name="31"><label class="form-check-label" for="31">31</label></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-sm-4">
                    <div class="card border-0">
                      <div class="card-body">
                        <!-- weekdays -->
                        <label>Weekdays</label>
                        <div class="form-group row">
                          <div class="col-sm-2">
                            <div class="form-check"><input class="form-check-input" type="checkbox" id="all_weekday"><label class="form-check-label" for="all_weekday">all</label></div>
                          </div>
                        </div>
                        <div class="form-group row">
                          <div class="col-md-12">
                            <div class="form-check"><input class="form-check-input weekday" type="checkbox" id="monday" name="monday"><label class="form-check-label" for="monday">Monday</label></div>
                            <div class="form-check"><input class="form-check-input weekday" type="checkbox" id="tuesday" name="tuesday"><label class="form-check-label" for="tuesday">Tuesday</label></div>
                            <div class="form-check"><input class="form-check-input weekday" type="checkbox" id="wednesday" name="wednesday"><label class="form-check-label" for="wednesday">Wednesday</label></div>
                            <div class="form-check"><input class="form-check-input weekday" type="checkbox" id="thursday" name="thursday"><label class="form-check-label" for="thursday">Thursday</label></div>
                            <div class="form-check"><input class="form-check-input weekday" type="checkbox" id="friday" name="friday"><label class="form-check-label" for="friday">Friday</label></div>
                            <div class="form-check"><input class="form-check-input weekday" type="checkbox" id="saturday" name="saturday"><label class="form-check-label" for="saturday">Saturday</label></div>
                            <div class="form-check"><input class="form-check-input weekday" type="checkbox" id="sunday" name="sunday"><label class="form-check-label" for="sunday">Sunday</label></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>


                  <div class="col-sm-4">
                    <div class="card border-0">
                      <div class="card-body">
                        <!-- months -->
                        <label>Months</label>
                        <div class="form-group row">
                          <div class="col-sm-2">
                            <div class="form-check"><input class="form-check-input" type="checkbox" id="all_month"><label class="form-check-label" for="all_month">all</label></div>
                          </div>
                        </div>
                        <div class="form-group row">
                          <div class="col-md-4">
                            <div class="form-check"><input class="form-check-input month" type="checkbox" id="jan" name="jan"><label class="form-check-label" for="jan">Jan</label></div>
                            <div class="form-check"><input class="form-check-input month" type="checkbox" id="feb" name="feb"><label class="form-check-label" for="feb">Feb</label></div>
                            <div class="form-check"><input class="form-check-input month" type="checkbox" id="mar" name="mar"><label class="form-check-label" for="mar">Mar</label></div>
                            <div class="form-check"><input class="form-check-input month" type="checkbox" id="apr" name="apr"><label class="form-check-label" for="apr">Apr</label></div>
                            <div class="form-check"><input class="form-check-input month" type="checkbox" id="may" name="may"><label class="form-check-label" for="may">May</label></div>
                            <div class="form-check"><input class="form-check-input month" type="checkbox" id="jun" name="jun"><label class="form-check-label" for="jun">Jun</label></div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-check"><input class="form-check-input month" type="checkbox" id="jul" name="jul"><label class="form-check-label" for="jul">Jul</label></div>
                            <div class="form-check"><input class="form-check-input month" type="checkbox" id="aug" name="aug"><label class="form-check-label" for="aug">Aug</label></div>
                            <div class="form-check"><input class="form-check-input month" type="checkbox" id="sep" name="sep"><label class="form-check-label" for="sep">Sep</label></div>
                            <div class="form-check"><input class="form-check-input month" type="checkbox" id="oct" name="oct"><label class="form-check-label" for="oct">Oct</label></div>
                            <div class="form-check"><input class="form-check-input month" type="checkbox" id="nov" name="nov"><label class="form-check-label" for="nov">Nov</label></div>
                            <div class="form-check"><input class="form-check-input month" type="checkbox" id="dec" name="dec"><label class="form-check-label" for="dec">Dec</label></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>


                <h5 class="card-title">REPORT</h5>

                <div class="form-row">

                  <div class="form-group col-md-5">
                    <label for="destination_email">Destination Email</label>
                    <input type="text" class="form-control" id="destination_email" name="destination_email" aria-describedby="destination_email_help" placeholder="a.user@criteo.com; b.user@criteo.com" required>
                    <small id="destination_email_help" class="form-text text-muted">Who is going to receive the email with the report (separate multiple users with semicolon).</small>
                  </div>

                  <div class="form-group col-md-5">
                    <label for="subject_email">Email Subject</label>
                    <input type="text" class="form-control" id="subject_email" name="subject_email" aria-describedby="subject_email_help" placeholder="A cool report" required>
                    <small id="subject_email_help" class="form-text text-muted">The Subject of the email to be sent.</small>
                  </div>

                  <div class="form-group col-md-2">
                    <label for="output_type">Output Format</label>
                    <select id="output_type" name="output_type" class="form-control" aria-describedby="output_type_help" required>
                      <option>=select option=</option>
                      <option value="csv">csv</option>
                      <option value="excel">Excel</option>
                    </select>
                    <small id="output_type_help" class="form-text text-muted">The format of the file that the user will receive.</small>
                  </div>

                  

                </div>
                <div class="form-row">

                  

                  <div class="form-group col-sm-12">
                    <label for="body_email">Email Body</label>
                    <textarea class="form-control" id="body_email" name="body_email" rows="6" required>Dear Account Manager,
Please find your cool report attached.

Best Regards
Cool AX
</textarea>
                  </div>
                </div>


                <h5 class="card-title">QUERY</h5>

                <div class="form-row">
                  <div class="form-group col-md-2">
                    <label for="kind_of_query">Kind of Query</label>
                    <select id="kind_of_query" name="kind_of_query" class="form-control" required>
                      <option>=select option=</option>
                      <option value="vertica">Vertica</option>
                      <option value="hive" disabled>Hive</option>
                    </select>
                  </div>

                </div>
                <div class="form-row">

                  <div class="form-group col-md-12">
                    <label for="query">Query Body</label>
                    <textarea class="form-control" id="query" name="query" rows="20" required>
SELECT *
FROM bi_core.dim_client
WHERE client_name = 'cool client'
ORDER BY coolness
                    </textarea>
                  </div>
                </div>

                <div class="row justify-content-end">
                  <div class="col-2 justify-content-end">
    <button type="submit" class="btn btn-primary">Create Script</button>
    </div>
    </div>

                

              </form>

          </div>

          </div>
          
          


        </div>
        <!-- /.container-fluid -->

      </div>
      <!-- /.content-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- Bootstrap core JavaScript-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>


    <!-- Custom scripts for all pages-->
    <script src="js/sb-admin.min.js"></script>

    <script>
      var select_all_daynum = document.getElementById("all_daynum");
      var daynum_checkboxes = document.getElementsByClassName("day-num");

      var select_all_weekday = document.getElementById("all_weekday");
      var weekday_checkboxes = document.getElementsByClassName("weekday");

      var select_all_month = document.getElementById("all_month");
      var month_checkboxes = document.getElementsByClassName("month");



      select_all_daynum.addEventListener("change", function(e){
          for (i = 0; i < daynum_checkboxes.length; i++){
              daynum_checkboxes[i].checked = select_all_daynum.checked;
              console.log('holi');
          }
      });


      for (var i = 0; i < daynum_checkboxes.length; i++){
          daynum_checkboxes[i].addEventListener("change", function(e){
              if(this.checked == false){
                  select_all_daynum.checked = false;
              }

              if(document.querySelectorAll('.day-num:checked').length == daynum_checkboxes.length){
                  select_all_daynum.checked = true;
              }
          });
      }


      select_all_weekday.addEventListener("change", function(e){
          for (i = 0; i < weekday_checkboxes.length; i++){
              weekday_checkboxes[i].checked = select_all_weekday.checked;
              console.log('holi');
          }
      });


      for (var i = 0; i < weekday_checkboxes.length; i++){
          weekday_checkboxes[i].addEventListener("change", function(e){
              if(this.checked == false){
                  select_all_weekday.checked = false;
              }

              if(document.querySelectorAll('.weekday:checked').length == weekday_checkboxes.length){
                  select_all_weekday.checked = true;
              }
          });
      }



      select_all_month.addEventListener("change", function(e){
          for (i = 0; i < month_checkboxes.length; i++){
              month_checkboxes[i].checked = select_all_month.checked;
              console.log('holi');
          }
      });


      for (var i = 0; i < month_checkboxes.length; i++){
          month_checkboxes[i].addEventListener("change", function(e){
              if(this.checked == false){
                  select_all_month.checked = false;
              }

              if(document.querySelectorAll('.month:checked').length == month_checkboxes.length){
                  select_all_month.checked = true;
              }
          });
      }


    </script>

  </body>

</html>