aa

@{

  ViewBag.Title = "test";

}

<h2>test</h2>

<!-- Large modal -->

      <div class="modal-body">

        <ul class="nav nav-tabs" id="myTab" role="tablist">

          <li class="nav-item">

            <a class="nav-link" data-toggle="tab" href="#ads" role="tab">TRAVEL INFORMATION</a>

          <li>

          <li class="nav-item">

            <a class="nav-link" data-toggle="tab" href="#placementPanel" role="tab">FLIGHT INFORMATION</a>

          <li>

          <li class="nav-item">

            <a class="nav-link" data-toggle="tab" href="#schedulePanel" role="tab">TR NO & TRAVEL COST </a>

          <li>

          <li class="nav-item">

            <a class="nav-link" data-toggle="tab" href="#reviewPanel" role="tab">EXTENSION</a>

          <li>

        </ul>

        <div class="tab-content mt-2">

          <div class="tab-pane fade" id="ads" role="tabpanel">

            <h4>TRAVEL INFORMATION</h4>

            <div class="form-group col-md-4">

              @Html.Label("NIK :", htmlAttributes: new { @class = "control-label" }) <br />

              @Html.Editor("SearchNIK", new { htmlAttributes = new { @class = "form-control", required = "required" } }) <br />

              @Html.Label("Name :", htmlAttributes: new { @class = "control-label" })

              @Html.Editor("SearchNIK", new { htmlAttributes = new { @class = "form-control", required = "required" } }) <br />

              @Html.Label("Position :", htmlAttributes: new { @class = "control-label" })

              @Html.Editor("SearchNIK", new { htmlAttributes = new { @class = "form-control", required = "required" } }) <br />

              <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">

                <div class="card-block">

                  <div class="form-group">

                    <label for="venueSelect">Select a Venue</label>

                    <select class="form-control" id="venueSelect">

                      <option selected disabled>Choose a venue</option>

                      <option>Venue 1</option>

                      <option>Venue 2</option>

                      <option>Venue 3</option>

                      <option>Venue 4</option>

                      <option>Venue 5</option>

                    </select>

                  </div>

                </div>

              </div>

            </div>

            <div class="form-group col-md-4">

              @Html.Label("Join Date :", htmlAttributes: new { @class = "control-label" }) <br />

              @Html.Editor("SearchNIK", new { htmlAttributes = new { @class = "form-control", required = "required" } }) <br />

              @Html.Label("POH :", htmlAttributes: new { @class = "control-label" })

              @Html.Editor("SearchNIK", new { htmlAttributes = new { @class = "form-control", required = "required" } }) <br />

              @Html.Label("Phone :", htmlAttributes: new { @class = "control-label" })

              @Html.Editor("SearchNIK", new { htmlAttributes = new { @class = "form-control", required = "required" } }) <br />

            </div>

            <div class="form-group col-md-4">

              @Html.Label("Status On Side :", htmlAttributes: new { @class = "control-label" }) <br />

              @Html.Editor("SearchNIK", new { htmlAttributes = new { @class = "form-control", required = "required" } }) <br />

              @Html.Label("Work Schedule :", htmlAttributes: new { @class = "control-label" })

              @Html.Editor("SearchNIK", new { htmlAttributes = new { @class = "form-control", required = "required" } }) <br />

            </div>

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <div class="card-header" role="tab" id="headingTwo">

              <h5 class="mb-0">

                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                  Specific Kiosks

                </a>

              </h5>

            </div>

          </div>

          <div class="tab-pane fade" id="placementPanel" role="tabpanel">

            <h4>Placement</h4>

            <div id="accordion" class="mb-3" role="tablist" aria-multiselectable="true">

              <div class="card">

                <div class="card-header" role="tab" id="headingOne">

                  <h5 class="mb-0">

                  </h5>

                </div>

              </div>

              <div class="card">

                <div class="card-header" role="tab" id="headingTwo">

                  <h5 class="mb-0">

                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                      Specific Kiosks

                    </a>

                  </h5>

                </div>

                <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">

                  <div class="card-block">

                    <div class="form-group">

                      <label for="kioskSelectVenue">First, choose a venue.</label>

                      <select class="form-control" id="kioskSelectVenue">

                        <option selected disabled>Choose a venue</option>

                        <option>Venue 1</option>

                        <option>Venue 2</option>

                        <option>Venue 3</option>

                        <option>Venue 4</option>

                        <option>Venue 5</option>

                      </select>

                    </div>

                    <div class="form-group">

                      <label for="exampleSelect2">Then select kiosks (you can select multiple)</label>

                      <select multiple class="form-control" id="exampleSelect2">

                        <option>Kiosk 1</option>

                        <option>Kiosk 2</option>

                        <option>Kiosk 3</option>

                        <option>Kiosk 4</option>

                        <option>Kiosk 5</option>

                      </select>

                    </div>

                  </div>

                </div>

              </div>

              <div class="card">

                <div class="card-header" role="tab" id="headingThree">

                  <h5 class="mb-0">

                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

                      Specific Screens

                    </a>

                  </h5>

                </div>

                <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">

                  <div class="card-block">

                    <div class="form-group">

                      <label for="kioskSelectVenue">First, choose a venue.</label>

                      <select class="form-control" id="kioskSelectVenue">

                        <option selected disabled>Choose a venue</option>

                        <option>Venue 1</option>

                        <option>Venue 2</option>

                        <option>Venue 3</option>

                        <option>Venue 4</option>

                        <option>Venue 5</option>

                      </select>

                    </div>

                    <div class="form-group">

                      <label for="exampleSelect2">Then select screens (you can select multiple)</label>

                      <select multiple class="form-control" id="exampleSelect2">

                        <option>Kiosk 1 - Screen 1</option>

                        <option>Kiosk 1 - Screen 2</option>

                        <option>Kiosk 2 - Screen 1</option>

                        <option>Kiosk 2 - Screen 2</option>

                      </select>

                    </div>

                  </div>

                </div>

              </div>

            </div>

            <button class="btn btn-secondary" id="placementContinue">Continue</button>

          </div>

          <div class="tab-pane fade" id="schedulePanel" role="tabpanel">

            <h4>Schedule</h4>

            <div id="scheduleAccordion" class="mb-3" role="tablist" aria-multiselectable="true">

              <div class="card">

                <div class="card-header" role="tab" id="headingOne">

                  <h5 class="mb-0">

                    <a data-toggle="collapse" data-parent="#scheduleAccordion" href="#scheduleAccordioncollapseOne" aria-expanded="true" aria-controls="collapseOne">

                      Start and Stop Date

                    </a>

                  </h5>

                </div>

                <div id="scheduleAccordioncollapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">

                  <div class="card-block">

                    <div class="form-group row">

                      <label for="example-date-input" class="col-2 col-form-label">Start Date</label>

                      <div class="col-10">

                        <input class="form-control" type="date" value="2018-01-09" id="start-date">

                      </div>

                    </div>

                    <div class="form-group row">

                      <label for="example-date-input" class="col-2 col-form-label">Stop Date</label>

                      <div class="col-10">

                        <input class="form-control" type="date" value="2018-01-09" id="stop-date">

                      </div>

                    </div>

                  </div>

                </div>

              </div>

              <div class="card">

                <div class="card-header" role="tab" id="headingTwo">

                  <h5 class="mb-0">

                    <a class="collapsed" data-toggle="collapse" data-parent="#scheduleAccordion" href="#scheduleAccordioncollapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                      Rules for Specific Days

                    </a>

                  </h5>

                </div>

                <div id="scheduleAccordioncollapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">

                  <div class="card-block">

                    <h6>Play on the following days (check all that apply)</h6>

                    <div class="form-check">

                      <label class="form-check-label">

                        <input type="checkbox" class="form-check-input" id="sunday">

                        Sunday

                      </label>

                    </div>

                    <div class="form-check">

                      <label class="form-check-label">

                        <input type="checkbox" class="form-check-input" id="monday">

                        Monday

                      </label>

                    </div>

                    <div class="form-check">

                      <label class="form-check-label">

                        <input type="checkbox" class="form-check-input" id="tuesday">

                        Tuesday

                      </label>

                    </div>

                    <div class="form-check">

                      <label class="form-check-label">

                        <input type="checkbox" class="form-check-input" id="wednesday">

                        Wednesday

                      </label>

                    </div>

                    <div class="form-check">

                      <label class="form-check-label">

                        <input type="checkbox" class="form-check-input" id="thursday">

                        Thursday

                      </label>

                    </div>

                    <div class="form-check">

                      <label class="form-check-label">

                        <input type="checkbox" class="form-check-input" id="friday">

                        Friday

                      </label>

                    </div>

                    <div class="form-check">

                      <label class="form-check-label">

                        <input type="checkbox" class="form-check-input" id="saturday">

                        Saturday

                      </label>

                    </div>

                  </div>

                </div>

              </div>

              <div class="card">

                <div class="card-header" role="tab" id="headingThree">

                  <h5 class="mb-0">

                    <a class="collapsed" data-toggle="collapse" data-parent="#scheduleAccordion" href="#scheduleAccordioncollapseThree" aria-expanded="false" aria-controls="collapseThree">

                      Rules for Specific Times

                    </a>

                  </h5>

                </div>

                <div id="scheduleAccordioncollapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">

                  <div class="card-block">

                    <h6>Play during the following timeframes (applies to each day)</h6>

                    <div class="form-group row">

                      <label for="example-time-input" class="col-2 col-form-label">Start Time</label>

                      <div class="col-10">

                        <input class="form-control" type="time" value="13:45:00" id="start-time">

                      </div>

                    </div>

                    <div class="form-group row">

                      <label for="example-time-input" class="col-2 col-form-label">End Time</label>

                      <div class="col-10">

                        <input class="form-control" type="time" value="13:45:00" id="end-time">

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </div>

            <button class="btn btn-secondary" id="scheduleContinue">Continue</button>

          </div>

          <div class="tab-pane fade" id="reviewPanel" role="tabpanel">

            <h4>EXTENSION</h4>

            <div class="form-group">

              <label for="exampleInputFile">Notes</label>

              <input type="text" name="name" value="" />

              <br />

              <label for="exampleInputFile">Upload Attachment</label>

              <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">

            </div>

          </div>

        </div>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

        <button type="button" class="btn btn-primary">Save for later</button>

      </div>

<script>

  $(function () {

 $('#modalToggle').click(function() {

  $('#modal').modal({

   backdrop: 'static'

  });

 });

 $('#activate').click(function (e) {

  e.preventDefault();

  var formData = {

   campaign_name: $('#campaignName').val(),

   start_date: $('#start-date').val(),

   end_date: $('#end-date').val(),

   days: {

    sunday: $('#sunday').prop('checked'),

    monday: $('#monday').prop('checked'),

    tuesday: $('#tuesday').prop('checked'),

    wednesday: $('#wednesday').prop('checked'),

    thurday: $('#thursday').prop('checked'),

    friday: $('#friday').prop('checked'),

    saturday: $('#saturday').prop('checked'),

   },

   start_time: $('#start-time').val(),

   end_time: $('#end-time').val()

  }

  alert(JSON.stringify(formData));

 })

})

</script>