
<!-- Modal with the Booking Form -->

<div class="modal fade" id="booking-modal" tabindex="-1" role="dialog" aria-labelledby="bookingModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="booking-modal-title"> TITLE </h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="onCancelButtonClick()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
            <!-- ============================================================== -->
            <!-- Booking Form -->
            <!-- ============================================================== -->
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <form id="validationform" data-parsley-validate="" novalidate="">

                    <!-- Title Row -->
                    <div class="form-group row">
                        <label class="col-12 col-sm-3 col-form-label text-sm-right">Owner</label>
                        <div class="col-12 col-sm-8 col-lg-6">
                            {% if possible_owners %}
                                <select id="booking-owner-select" class="selectpicker show-tick" data-width="100%" data-live-search="true">
                                {% for lab in possible_owners %}
                                    <option data-divider="true"></option>
                                    <option value="{{lab[0]['id']}}" style="background: #71748d; color: #fff;">{{lab[0]['name']}} (PI)</option>
                                    {% for u in lab[1:] %}
                                        <option value="{{u['id']}}">{{u['name']}}</option>
                                    {% endfor %}
                                {% endfor %}
                                </select>
                            {% else %}
                                <input type="text" required="" placeholder="Owner" id="booking-owner-text" class="form-control">
                            {% endif %}
                        </div>
                    </div>

                    <!-- Title Row -->
                    <div class="form-group row">
                        <label class="col-12 col-sm-3 col-form-label text-sm-right">Title</label>
                        <div class="col-12 col-sm-8 col-lg-6">
                            <input type="text" required="" placeholder="Type something" id="booking-title" class="form-control">
                        </div>
                    </div>

                    <!-- Date Start Row -->
                    <div class="form-group row">
                        <label class="col-12 col-sm-3 col-form-label text-sm-right">Start</label>
                        <div class="col-sm-4 col-lg-3 mb-3 mb-sm-0">
                            <input type="text" class="form-control datetimepicker-input" data-target="#booking-start-date" id="booking-start-date" data-toggle="datetimepicker"/>

                        </div>
                        <div class="col-sm-4 col-lg-3">
                            <input class="form-control" type="text" id="booking-start-time" value="09:00" />
                        </div>

                    </div>

                    <!-- Date End Form -->
                    <div class="form-group row">
                        <label class="col-12 col-sm-3 col-form-label text-sm-right">End</label>
                        <div class="col-sm-4 col-lg-3 mb-3 mb-sm-0">
                             <input type="text" class="form-control datetimepicker-input" data-target="#booking-end-date" id="booking-end-date" data-toggle="datetimepicker"/>

                        </div>
                        <div class="col-sm-4 col-lg-3">
                            <input class="form-control" type="text" id="booking-end-time" value="23:59" />
                        </div>

                    </div>

                    <div class="form-group row">
                        <label class="col-12 col-sm-3 col-form-label text-sm-right">Description (Optional)</label>
                        <div class="col-12 col-sm-8 col-lg-6">
                            <textarea required="" class="form-control" id="booking-description"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <!-- ============================================================== -->
            <!-- end Booking Form -->
            <!-- ============================================================== -->
        </div>
      </div>

        <!-- Manager Section  -->
        {% if current_user.is_manager %}
        <div class="modal-body">

            <!-- Booking type -->
           <div class="form-group row">
                <label class="col-sm-3 col-form-label text-sm-right">Booking Type</label>
                <div class="col-sm-6">
                    <div class="custom-controls-stacked">
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" name="booking-type-radio" checked="" class="custom-control-input" value="booking"><span class="custom-control-label">Booking </span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" name="booking-type-radio" class="custom-control-input" value="slot"><span class="custom-control-label">Slot</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" name="booking-type-radio" class="custom-control-input" value="downtime"><span class="custom-control-label">Downtime</span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Slot Auth Row -->
            <div class="form-group row">
                <label class="col-12 col-sm-3 col-form-label text-sm-right">Sloth Authorization</label>
                <div class="col-12 col-sm-8 col-lg-6">
                <select id="booking-slot-auth" class="selectpicker show-tick" multiple data-width="100%" data-selected-text-format="count > 5" data-live-search="true" data-actions-box="true" title="Select authorization...">
                    {% for a in applications %}#}
{#                      <option value="{{a['code']}}" data-subtext="{{ a['alias'] }}" data-content="<span class='badge badge-light'>{{a['code']}}</span>">{{a['code']}}</option>#}
                      <option value="{{a['code']}}" data-subtext="{{ a['alias'] }}">{{a['code']}}</option>

                    {% endfor %}
                </select>
                </div>
            </div>

            <!-- Recurring -->
            <div class="form-group row">
                <label class="col-sm-3 col-form-label text-sm-right">Repeat</label>
                <div class="col-sm-6">
                    <div class="custom-controls-stacked">
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" name="booking-repeat-radio" checked="" class="custom-control-input" value="no"><span class="custom-control-label">No</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" name="booking-repeat-radio" class="custom-control-input" value="weekly"><span class="custom-control-label">Weekly</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" name="booking-repeat-radio" class="custom-control-input" value="bi-weekly"><span class="custom-control-label">Bi-weekly</span>
                        </label>
                        <label> Stop Date </label>
                        <label>
                            <div class="input-group date" data-target-input="nearest">
                                <input type="text" class="form-control datetimepicker-input" data-target="#booking-repeat-stopdate" id="booking-repeat-stopdate" data-toggle="datetimepicker"/>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-sm-3 col-form-label text-sm-right">Modify repeating</label>
                <div class="col-sm-6">
                    <div class="custom-controls-stacked">
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" name="booking-modify-radio" checked="" class="custom-control-input" value="no"><span class="custom-control-label">Only this</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" name="booking-modify-radio" class="custom-control-input" value="yes"><span class="custom-control-label">All upcoming</span>
                        </label>
                    </div>
                </div>
            </div>
    {% endif %}

      <div class="modal-footer">
        <button type="button" id="booking-btn-cancel"  class="btn btn-outline-secondary" data-dismiss="modal" onclick="onCancelButtonClick()">Cancel</button>
        <button type="button" id="booking-btn-delete" class="btn btn-outline-danger" onclick="onDeleteButtonClick()">Delete</button>
        <button type="button" id="booking-btn-ok" class="btn btn-outline-dark" onclick="onOkButtonClick()">Submit</button>
      </div>
    </div>
  </div>
</div>
</div>
