<?php
$instructorPageTitle = "Instructor Course Form";
$instructorExtraStyles = ["css/form-layout.css"];
require __DIR__ . "/header.php";
?>

<main class="main-content instructor-form-page">
  <section class="page-head">
    <div>
      <p class="page-head__eyebrow">Instructor Workspace</p>
      <h1>Create New Course</h1>
      <p>Use this reusable instructor form to publish and manage your course content inside the LMS panel.</p>
    </div>
    <div class="page-head__actions">
      <button type="button" class="btn btn-outline-secondary rounded-pill px-3">Draft</button>
      <button type="submit" form="courseForm" class="btn btn-primary rounded-pill px-3">Save Course</button>
    </div>
  </section>

  <section class="content-card form-card">
    <div class="content-card__head">
      <h2>Course Information</h2>
      <span class="form-card__hint">All fields are required</span>
    </div>

    <form id="courseForm" class="needs-validation" novalidate>
      <div id="formFeedback" class="alert d-none mb-3" role="alert"></div>
      <div class="row g-3 g-lg-4 form-grid">
        <div class="col-12 col-md-6">
          <label class="form-label" for="courseTitle">Course Title</label>
          <input type="text" class="form-control" id="courseTitle" required>
          <div class="invalid-feedback">Course title is required.</div>
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label" for="category">Category</label>
          <select class="form-select" id="category" required>
            <option value="" selected disabled>Select category</option>
            <option>Programming</option>
            <option>Data Science</option>
            <option>Business</option>
            <option>Design</option>
          </select>
          <div class="invalid-feedback">Please select a category.</div>
        </div>

        <div class="col-12">
          <label class="form-label" for="description">Description</label>
          <textarea class="form-control" id="description" rows="5" required></textarea>
          <div class="invalid-feedback">Please provide a course description.</div>
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label" for="price">Price</label>
          <div class="input-group">
            <span class="input-group-text">$</span>
            <input type="number" class="form-control" id="price" min="0" step="0.01" required>
          </div>
          <div class="invalid-feedback">Please enter a valid price.</div>
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label" for="thumbnail">Thumbnail Upload</label>
          <input class="form-control" type="file" id="thumbnail" accept=".jpg,.jpeg,.png,.webp" required>
          <div class="invalid-feedback">Please upload a thumbnail image.</div>
        </div>

        <div class="col-12 form-actions">
          <button type="button" class="btn btn-outline-secondary rounded-pill px-3">Cancel</button>
          <button type="submit" class="btn btn-primary rounded-pill px-3">Publish Course</button>
        </div>
      </div>
    </form>
  </section>
</main>

<?php require __DIR__ . "/footer.php"; ?>
