<%- include('includes/header', {username: admin[0].name,email: admin[0].email } ) %>

  <div class="body-wrapper">
    <div class="container-fluid">
      <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
        <div class="card-body px-4 py-3">
          <div class="row align-items-center">
            <div class="col-md-8 col-sm-7">
              <h4 class="fw-semibold mb-1">Manage Testimonial</h4>

            </div>

            <div class="col-md-4 col-sm-5 text-md-end text-sm-start mt-3 mt-md-0">
              <button id="addReviewBtn" type="button" class="btn btn-primary">
                <i class="fa-solid fa-plus me-2"></i> Add Testimonial
              </button>
            </div>
          </div>

        </div>
      </div>
      <div class="card shadow-sm">
        <div class="card-body">

          <h4 class="mb-4">Update Testimonial Section</h4>

          <form id="sectionForm">

            <!-- TYPE (HIDDEN) -->
            <input type="hidden" name="type" value="<%= section ? section.type : 'testimonials' %>">

            <!-- LABEL + TITLE (ONE LINE) -->
            <div class="row mb-3">
              <div class="col-md-6">
                <label class="form-label fw-semibold">Section Label</label>
                <input type="text" class="form-control" name="badge" value="<%= section ? section.badge : '' %>"
                  placeholder="Testimonial Section Label">
              </div>
              <div class="col-md-6">
                <label class="form-label fw-semibold">Title</label>
                <input type="text" class="form-control" name="title" value="<%= section ? section.title : '' %>"
                  placeholder="Custom Title for Every Requirement" >
                   <small class="text-muted">
                                    Highlight any word using <code>&lt;span&gt;word&lt;/span&gt;</code>
                                </small>
              </div>
            </div>

            <!-- SHORT DESCRIPTION -->
            <div class="mb-4">
              <label class="form-label fw-semibold">Short Description</label>
              <textarea class="form-control" name="shortDescription" rows="3"
                placeholder="Write short description here..."
                ><%= section ? section.shortDescription : '' %></textarea>
            </div>

            <!-- BUTTON -->
            <button type="submit" class="btn btn-primary px-4">
              Update Section
            </button>

          </form>

        </div>
      </div>

      <div class="datatables">




        <div class="card">
          <div class="card-body">
            <div class="table-responsive">
              <table id="testimonial_table" class="table table-striped table-bordered w-100">
                <thead>
                  <tr>
                    <th>Image</th>
                    <th>Name</th>
                    <th>User Name</th>
                    <th>Review</th>
                    <th>Rating</th>
                    <th class="text-center">Action</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="reviewModal" tabindex="-1" aria-hidden="true">
          <div class="modal-dialog modal-md modal-dialog-top">
            <div class="modal-content">
              <div class="modal-header bg-light">
                <h5 class="modal-title" id="reviewModalLabel">Add Testimonial</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>

              <div class="modal-body">
                <form id="reviewForm" enctype="multipart/form-data">
                  <input type="hidden" id="reviewId" name="id">

                  <div class="mb-3">
                    <label class="form-label">Image</label>
                    <input type="file" id="reviewImage" name="image" class="form-control">
                  </div>

                  <small class="text-muted d-block mt-1">
                    <i class="fa-solid fa-circle-info text-primary"></i>
                    Recommended Size: <strong>56 x 56 px</strong>, Formats: <strong>/jpeg|jpg|png|webp/</strong>
                  </small>
                  <div class="mb-3 text-center">
                    <img id="previewImage" src="" style="max-width:150px; display:none;" class="img-thumbnail">
                  </div>

                  <!--  Name & Username side by side -->
                  <div class="row">
                    <div class="col-md-6 mb-3">
                      <label class="form-label">Name<span class="text-danger">*</span></label>
                      <input type="text" id="name" name="name" class="form-control" required>
                    </div>

                    <div class="col-md-6 mb-3">
                      <label class="form-label">@Username<span class="text-danger">*</span></label>
                      <input type="text" id="username" name="username" class="form-control" placeholder="Enter username"
                        required>
                    </div>
                  </div>


                  <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="form-label fw-semibold">
                      Review<span class="text-danger">*</span>
                    </label>
                    <button type="button" id="generateAIReview" class="btn btn-sm btn-outline-primary">
                      <i class="fa-solid fa-wand-magic-sparkles me-1"></i>
                      Generate by AI
                    </button>
                  </div>
                  <div class="mb-3">
                    <textarea id="reviewText" name="review" class="form-control" rows="4" required></textarea>
                  </div>

                  <div class="mb-3">
                    <label class="form-label">Rating (1-5)<span class="text-danger">*</span></label>
                    <input type="number" id="rating" name="rating" class="form-control" min="1" max="5" value="5"
                      required>
                  </div>

                  <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" form="reviewForm" class="btn btn-primary">Save</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>


      </div>



    </div>
  </div>
  </div>

  <%- include('includes/allscripts') %>
    <script src="/js/view/testimonial.js"></script>
    <script src="/js/view/pagesection.js"></script>