<link rel="stylesheet" href="/stylesheets/modal.css">

<div class="row">
  <div class="col-md-12 mt-2">
    <div class="row">
      <div class="col-md-3 offset-md-9">
        <!-- <div class="card w-50 float-right mb-2"><a href="/user/add" class="btn btn-sm btn-info m-1"><i
              class="fas fa-plus"></i> Add User</a></div> -->
      </div>
    </div>
    <div class="card card-info">
      <div class="card-header">
        <h3 class="card-title">
          <%=sectionTitle%>
        </h3>
      </div>
      <div class="card-body table-responsive">
        <table class="table table-hover table-head-fixed datatable">
          <thead>
            <tr>
              <th style="width: 1%">
                #
              </th>
              <th>
               User Name
              </th>
              <th>
               Coach Name
              </th>
              <th>
              Rating
              </th>
              <th>
                Status
              </th>
              <th data-orderable="false">
                Actions
              </th>
            </tr>
          </thead>
          <tbody>
            <% let index=1;%>
              <% for (data of userData){ %>
                <tr>
                  <td>
                    <%=index++%>
                  </td>
                  <td>
                    <%= data.user_name %>
                  </td>
                  <td>
                    <%= data.coach_name %>
                  </td>
                  <td>
                    <%= data.rating %>
                  </td>

                  <td>
                    <% if(data.active_status){%>
                      <span class="badge badge-primary">Active</span>
                      <%}else{%>
                        <span class="badge badge-danger">Inactive</span>
                        <%}%>
                  </td>
                  <td>
                      <a class="btn btn-info btn-sm mr-2 view-user" data-toggle="modal" data-target="#myModal"
                        data-username="<%= data.user_name %>" data-email="<%= data.user_email %>"
                        data-comment="<%= data.review %>" title="View">
                        <i class="fas fa-eye"></i>
                      </a>

                    <a class="btn btn-info btn-sm mr-2" href="/user/review-edit/<%=data.review_id%>"
                      data-toggle="tooltip"
                      title="Edit">
                      <i class="fas fa-pencil-alt">
                      </i>
                    </a>
                    <a class="btn btn-danger btn-sm" id="delete_<%=data.review_id%>"
                      onclick="deleteDataFunc(`<%=data.review_id%>`,`user/review-delete/<%=data.review_id%>`)"
                      data-toggle="tooltip"
                      title="Delete">
                      <i class="fas fa-trash">
                      </i>
                    </a>
                  </td>
                </tr>
                <% } %>
          </tbody>
        </table>
      </div>


            <div class="modal fade receipt-modal" id="myModal" tabindex="-1" role="dialog"
              aria-labelledby="my_modalLabel">
              <div class="modal-dialog modal-dialog-centered" role="dialog">
                <div class="modal-content">
                  <div class="modal-header centered-header">
                    <h2>Client Reviews</h2>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                    </div>
                  	<div class="modal-body">
                  	  <!-- <span class="top-message">To help us get better, please rate this candidate.</span> -->
                  	  <div class="rating-stars-container">
                  	    <!-- <div class="rating-stars">
                  	      <i class="rating-star fa fa-star-o" data-rating="1"></i>
                  	      <i class="rating-star fa fa-star-o" data-rating="2"></i>
                  	      <i class="rating-star fa fa-star-o" data-rating="3"></i>
                  	      <i class="rating-star fa fa-star-o" data-rating="4"></i>
                  	      <i class="rating-star fa fa-star-o" data-rating="5"></i>
                  	    </div> -->
                  	  </div>
                  	  <span class="bottom-message" id="modal-comment">Your ratings will be confidential.</span>
                  	  
                  	</div>
                  	<div class="modal-footer">
                  	  <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                  	 
                  	</div>
                  <!-- <div class="invoice-box">
                    <table cellpadding="0" cellspacing="0">

                      <tr class="item">
                        <td>
                          Username :
                        </td>

                        <td>
                          <span id="modal-username">John Doe</span>
                        </td>
                      </tr>

                      <tr class="item">
                        <td>
                          User Email :

                        </td>

                        <td>
                          <span id="modal-email">John Doe</span>
                        </td>
                      </tr>

                      <tr class="item last">
                        <td>
                          User Comment :
                        </td>

                        <td>
                          <span id="modal-comment">John Doe</span>
                        </td>
                      </tr>


                    </table>
                  </div>

                  <div class="modal-footer d-flex justify-content-center">
                    <button type="button" class="btn btn-primary" style="
              width: 7rem;
          " data-dismiss="modal">OK</button>
                  </div> -->
                </div>
              </div>
            </div>
      <!-- /.card-body -->
      <!-- <div class="card-footer"></div> -->
    </div>
    <!-- /.card -->
  </div>
  <!-- /.col -->
</div>
<!-- /.row -->


<%- contentFor('pageModalSection')%>
<%- contentFor('pageScriptsSection')%>