<%- 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 Blog</h4>

            </div>

            <div class="col-md-4 col-sm-5 text-md-end text-sm-start mt-3 mt-md-0">

              <button id="addBlogBtn" type="button" class="btn btn-primary">
                <i class="fa-solid fa-plus me-2"></i> Add Blog
              </button>
            </div>
          </div>

        </div>
      </div>


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

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

          <form id="sectionForm">

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

            <!-- 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="Blog 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="zero_config" class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>Image</th>
                    <th>Title</th>
                    <th>Description</th>
                    <th class="action-col">Action</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>

        <!-- Blog Modal -->
        <div class="modal fade" id="blogModal" tabindex="-1">
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content rounded-3 shadow">

              <!-- Header -->
              <div class="modal-header">
                <h5 class="modal-title" id="blogModalLabel">Add Blog</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
              </div>

              <!-- Body -->
              <div class="modal-body">
                <form id="blogForm" enctype="multipart/form-data">

                  <input type="hidden" id="blogId">

                  <div class="row g-4">

                    <!-- LEFT IMAGE UPLOAD AREA -->
                    <div class="col-md-4">

                      <label class="form-label fw-semibold">Image<span class="text-danger">*</span></label>

                      <!-- CLICKABLE BOX -->
                      <div id="imageBox"
                        class="border rounded d-flex justify-content-center align-items-center flex-column p-3 shadow-sm"
                        style="height: 320px; cursor: pointer; background:#f8f9fa;">


                        <p class="text-muted">Click to upload image</p>

                        <img id="previewImage" class="rounded"
                          style="display:none; width:100%; height:100%; object-fit:cover;">
                      </div>

                      <!-- hidden input -->
                      <input type="file" id="image" name="image" class="d-none">

                      <small class="text-muted d-block mt-1">
                        <i class="fa-solid fa-circle-info text-primary"></i>
                        Recommended Size: <strong>1400 x 600 px</strong>,Formats: <strong>/jpeg|jpg|png|webp/</strong>
                      </small>
                    </div>

                    <!-- RIGHT SIDE FORM -->
                    <div class="col-md-8">

                      <!-- Title -->
                      <div class="mb-3">
                        <label class="form-label fw-semibold">Title<span class="text-danger" >*</span></label>
                        <input type="text" id="title" class="form-control" required>
                      </div>

                     

                      <div class="d-flex justify-content-between align-items-center mb-2">
                        <label class="form-label fw-semibold">
                          Short Description<span class="text-danger">*</span>
                        </label>
                        <button type="button" id="generateAI" class="btn btn-sm btn-outline-primary">
                          <i class="fa-solid fa-wand-magic-sparkles me-1"></i>
                          Generate by AI
                        </button>
                      </div>


                      <!-- Short Description -->
                      <div class="mb-3">
                        <textarea id="shortDescription" class="form-control" rows="3" required></textarea>
                      </div>


                      <!-- Description -->
                      <div class="mb-3">
                        <label class="form-label fw-semibold">Description<span class="text-danger">*</span></label>
                        <div id="quillEditor" style="height: 320px; border-radius:10px; background:white;"></div>
                        <input type="hidden" id="description">
                      </div>

                      <!-- AUTHOR + CATEGORY -->
                      <div class="row mb-3">
                        <div class="col-md-6">
                          <label class="form-label fw-semibold">
                            Author <span class="text-danger">*</span>
                          </label>
                          <input type="text" class="form-control" name="author" id="author"
                            placeholder="Enter author name" required>
                        </div>

                        <div class="col-md-6">
                          <label class="form-label fw-semibold">
                            Category <span class="text-danger">*</span>
                          </label>
                          <select class="form-select" name="category" id="category" required>
                            <option value="">-- Select Category --</option>
                            <option value="All">All</option>
                            <option value="AI & Automation">AI & Automation</option>
                            <option value="No-Code">No-Code</option>
                            <option value="Tutorials">Tutorials</option>
                            <option value="Design & UX">Design & UX</option>
                            <option value="Business & Startups">Business & Startups</option>
                            <option value="SEO & Marketing">SEO & Marketing</option>
                          </select>
                        </div>
                      </div>

                    </div>


                  </div>

                </form>
              </div>

              <!-- Footer -->
              <div class="modal-footer">
                <button class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-primary" type="submit" id="saveBlogBtn">Save</button>
              </div>

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


      </div>





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

  <%- include('includes/allscripts') %>
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script src="/js/view/blog.js"></script>
    <script src="/js/view/pagesection.js"></script>