<div class="modal fade common-modal" data-backdrop="static" id="studentAssignedTutor" tabindex="-1" role="dialog" aria-labelledby="studentAssignedTutorLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="studentAssignedTutorLabel">Edit Assigned Tutor</h3>
        <button type="button" class="modal_close" data-dismiss="modal">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.04289 16.5413C5.65237 16.9318 5.65237 17.565 6.04289 17.9555C6.43342 18.346 7.06658 18.346 7.45711 17.9555L11.9987 13.4139L16.5408 17.956C16.9313 18.3466 17.5645 18.3466 17.955 17.956C18.3455 17.5655 18.3455 16.9323 17.955 16.5418L13.4129 11.9997L17.955 7.4576C18.3455 7.06707 18.3455 6.43391 17.955 6.04338C17.5645 5.65286 16.9313 5.65286 16.5408 6.04338L11.9987 10.5855L7.45711 6.0439C7.06658 5.65338 6.43342 5.65338 6.04289 6.0439C5.65237 6.43442 5.65237 7.06759 6.04289 7.45811L10.5845 11.9997L6.04289 16.5413Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
      <form method="post" action="/student-preferences/update-assigned-tutor" class="modal-form-area assigned-tutor-form" id="assigned-tutor-form">
        <input type="hidden" name="assigned_tutor_id" class="tutor_id" value="the_existing_record_id">

        <div class="modal-body">
          <input type="hidden" name="student_id" class="student_id" value="<%=currentStudent.id%>" />
          <div class="form-area gap-0">
            <div class="form-group">
              <label class="cursor-default">Tutors</label>
              <select name="tutor_id" id="tutor_id" class="">
                <option value="">Select A Tutor</option>
                <% for (let tutor of tutors) { %>
                  <option value="<%= tutor.id %>">
                    <%= tutor.first_name + ' ' + tutor.last_name %>
                  </option>
                  <% } %>
              </select>
            </div>
            <div class="form-group">
              <label class="cursor-default">Default Lesson Category</label>
              <select name="default_lesson_category" id="default_lesson_category" class="">
                <option value="">Select</option>
                <% for(let category of lessonCategory){ %>
                  <option value="<%= category.key %>">
                    <%= category.label %>
                  </option>
                  <% } %>
              </select>
            </div>
            
            <div class="position-relative form-group flaticon caption-group">
                <label class="cursor-default">Default Duration (In Mins)</label>
                <input type="number" name="default_duration" id="default_duration" step="any" min="0"/>
                <span class="input-icon"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
                <span class="caption-title">Minutes</span>
            </div>

            <div class="position-relative form-group flaticon caption-group">
              <label class="cursor-default">Price</label>
              <input type="number" name="price" id="price" step="any" min="0"/>
              <span class="input-icon"><i class="fa fa-usd" aria-hidden="true"></i></span>
              <span class="caption-title">Per Hour</span>
            </div>

            <div class="form-group mb-3">
              <label class="cursor-default">Default Billing</label>
              <% const billing=[ { id: 'no_calendar_generated_charges' , value: 'no_calendar_generated_charges' ,
                label: "Don't automatically create any calendar-generated charges" }, { id: 'lesson_based_payment' ,
                value: 'lesson_based_payment' , label: 'Student pays based on the number of lessons taken' }, {
                id: 'fixed_monthly_payment' , value: 'fixed_monthly_payment' ,
                label: 'Student pays the same amount each month regardless of number of lessons' }, {
                id: 'hourly_rate_payment' , value: 'hourly_rate_payment' , label: 'Student pays an hourly rate' ,
                note: 'Charges will automatically adjust to lesson duration' } ]; %>
                <% billing.forEach(bill=> { %>
                  <div class="form-check radio_group w-100 custom_radiobox p-0 mb-2">
                    <input type="radio" name="billing_list" value="<%= bill.value %>" id="edit_<%= bill.id %>" class="form-check-input bill-type-radio">
                    <label class="radiolabel custom_radiobox_label" for="edit_<%= bill.id %>">
                      <%= bill.label %>
                        <% if (bill.note) { %>
                          <small class="d-block text-muted">
                            <%= bill.note %>
                          </small>
                          <% } %>
                    </label>
                  </div>
                  <% }); %>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="btn-rightarea">
            <button type="button" data-dismiss="modal" class="btn theme-btn cancel-btn">Cancel</button>
            <button type="submit" class="btn theme-btn edit-assigned-tutor-submit-btn">Update</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>