{% extends 'base.html' %}

{% block title %}Schema Markup Generator — Free Online Tool{% endblock %}

{% block content %}
<div class="container py-5">

  <!-- Breadcrumb -->
  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">Home</a></li>
      <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}#webtools">Web Tools</a></li>
      <li class="breadcrumb-item active" aria-current="page">Schema Markup Generator</li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-solid fa-brackets-curly me-2 text-primary"></i>Schema Markup Generator</h1>
      <p class="text-muted">Generate JSON-LD structured data markup for articles, products, FAQs, businesses, and more.</p>
    </div>
  </div>

  <div class="row g-4">
    <!-- Form -->
    <div class="col-lg-6">
      <div class="card shadow-sm border-0">
        <div class="card-body p-4">
          <!-- Schema Type Select -->
          <div class="mb-4">
            <label for="schemaType" class="form-label fw-semibold">Schema Type <span class="text-danger">*</span></label>
            <select id="schemaType" class="form-select form-select-lg">
              <option value="Article">Article</option>
              <option value="Product">Product</option>
              <option value="FAQPage">FAQPage</option>
              <option value="LocalBusiness">LocalBusiness</option>
              <option value="BreadcrumbList">BreadcrumbList</option>
              <option value="VideoObject">VideoObject</option>
              <option value="Person">Person</option>
            </select>
          </div>

          <!-- Dynamic Form Area -->
          <div id="dynamicForm"></div>

          <!-- Error Alert -->
          <div id="errorAlert" class="alert alert-danger d-none mt-3" role="alert">
            <i class="fa-solid fa-circle-xmark me-2"></i>
            <span id="errorMsg"></span>
          </div>

          <div class="d-grid mt-4">
            <button id="submitBtn" type="button" class="btn btn-primary btn-lg">
              <i class="fa-solid fa-code me-2"></i>Generate Schema
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Results -->
    <div class="col-lg-6">
      <!-- Loading -->
      <div id="loadingCard" class="card shadow-sm border-0 d-none">
        <div class="card-body p-5 text-center">
          <div class="spinner-border text-primary mb-3" style="width:3rem;height:3rem;" role="status">
            <span class="visually-hidden">Generating...</span>
          </div>
          <p class="fw-semibold mb-0">Generating schema markup…</p>
        </div>
      </div>

      <!-- Results -->
      <div id="resultsSection" class="d-none">
        <div class="card shadow-sm border-0">
          <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
            <span><i class="fa-solid fa-code me-2"></i>JSON-LD Output</span>
            <button id="copySchemaBtn" class="btn btn-sm btn-outline-secondary">
              <i class="fa-solid fa-copy me-1"></i>Copy
            </button>
          </div>
          <div class="card-body p-0">
            <pre id="schemaOutput" class="mb-0 p-3 bg-dark text-light rounded-bottom small font-monospace"
                 style="max-height:500px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;"></pre>
          </div>
        </div>
        <div class="alert alert-info mt-3 small">
          <i class="fa-solid fa-circle-info me-2"></i>
          Paste this code inside a <code>&lt;script type="application/ld+json"&gt;</code> tag in the <code>&lt;head&gt;</code> of your page.
        </div>
      </div>

      <!-- Placeholder -->
      <div id="placeholderCard" class="card border-0 bg-light">
        <div class="card-body p-5 text-center text-muted">
          <i class="fa-solid fa-brackets-curly fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">JSON-LD schema markup will appear here.</p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  'use strict';

  const schemaTypeEl   = document.getElementById('schemaType');
  const dynamicForm    = document.getElementById('dynamicForm');
  const submitBtn      = document.getElementById('submitBtn');
  const errorAlert     = document.getElementById('errorAlert');
  const errorMsg       = document.getElementById('errorMsg');
  const loadingCard    = document.getElementById('loadingCard');
  const resultsSection = document.getElementById('resultsSection');
  const placeholder    = document.getElementById('placeholderCard');

  // ─── Form Templates ──────────────────────────────────────────────────────────
  const forms = {
    Article: `
      <div class="mb-3"><label class="form-label fw-semibold">Headline *</label>
        <input type="text" class="form-control" name="headline" placeholder="Article headline" required></div>
      <div class="mb-3"><label class="form-label fw-semibold">Author Name *</label>
        <input type="text" class="form-control" name="author" placeholder="Author full name" required></div>
      <div class="mb-3"><label class="form-label fw-semibold">Date Published (YYYY-MM-DD)</label>
        <input type="date" class="form-control" name="datePublished"></div>
      <div class="mb-3"><label class="form-label fw-semibold">Image URL</label>
        <input type="text" class="form-control" name="image" placeholder="https://example.com/image.jpg"></div>
      <div class="mb-3"><label class="form-label fw-semibold">Publisher Name</label>
        <input type="text" class="form-control" name="publisher" placeholder="Publisher or organization name"></div>`,

    Product: `
      <div class="mb-3"><label class="form-label fw-semibold">Product Name *</label>
        <input type="text" class="form-control" name="name" placeholder="Product name" required></div>
      <div class="mb-3"><label class="form-label fw-semibold">Description</label>
        <textarea class="form-control" name="description" rows="2" placeholder="Product description"></textarea></div>
      <div class="row g-2 mb-3">
        <div class="col"><label class="form-label fw-semibold">Price *</label>
          <input type="text" class="form-control" name="price" placeholder="29.99" required></div>
        <div class="col"><label class="form-label fw-semibold">Currency</label>
          <select class="form-select" name="currency">
            <option>USD</option><option>EUR</option><option>GBP</option><option>CAD</option><option>AUD</option><option>INR</option>
          </select></div>
      </div>
      <div class="mb-3"><label class="form-label fw-semibold">Availability</label>
        <select class="form-select" name="availability">
          <option value="InStock">In Stock</option>
          <option value="OutOfStock">Out of Stock</option>
          <option value="PreOrder">Pre-Order</option>
        </select></div>
      <div class="mb-3"><label class="form-label fw-semibold">SKU</label>
        <input type="text" class="form-control" name="sku" placeholder="SKU-001"></div>
      <div class="mb-3"><label class="form-label fw-semibold">Brand</label>
        <input type="text" class="form-control" name="brand" placeholder="Brand name"></div>`,

    FAQPage: `
      <div id="faqList">
        <div class="mb-3 faq-pair">
          <label class="form-label fw-semibold">Question 1 *</label>
          <input type="text" class="form-control mb-2 faq-question" placeholder="Your question?" required>
          <textarea class="form-control faq-answer" rows="2" placeholder="Answer…" required></textarea>
        </div>
      </div>
      <button type="button" id="addFaq" class="btn btn-outline-primary btn-sm mb-2">
        <i class="fa-solid fa-plus me-1"></i>Add Question
      </button>`,

    LocalBusiness: `
      <div class="mb-3"><label class="form-label fw-semibold">Business Name *</label>
        <input type="text" class="form-control" name="name" placeholder="Acme Corp" required></div>
      <div class="mb-3"><label class="form-label fw-semibold">Street Address</label>
        <input type="text" class="form-control" name="streetAddress" placeholder="123 Main St"></div>
      <div class="row g-2 mb-3">
        <div class="col"><label class="form-label fw-semibold">City</label>
          <input type="text" class="form-control" name="city" placeholder="New York"></div>
        <div class="col"><label class="form-label fw-semibold">Country</label>
          <input type="text" class="form-control" name="country" placeholder="US"></div>
      </div>
      <div class="mb-3"><label class="form-label fw-semibold">Phone</label>
        <input type="text" class="form-control" name="phone" placeholder="+1-555-000-0000"></div>
      <div class="mb-3"><label class="form-label fw-semibold">Opening Hours (e.g. Mo-Fr 09:00-17:00)</label>
        <input type="text" class="form-control" name="openingHours" placeholder="Mo-Fr 09:00-17:00"></div>
      <div class="mb-3"><label class="form-label fw-semibold">Rating (1-5)</label>
        <input type="number" class="form-control" name="rating" min="1" max="5" step="0.1" placeholder="4.5"></div>`,

    BreadcrumbList: `
      <p class="text-muted small">Add breadcrumb items in order.</p>
      <div id="breadcrumbList">
        <div class="row g-2 mb-2 breadcrumb-row">
          <div class="col-5"><input type="text" class="form-control form-control-sm bc-name" placeholder="Home"></div>
          <div class="col-6"><input type="text" class="form-control form-control-sm bc-url" placeholder="https://example.com/"></div>
          <div class="col-auto"><button type="button" class="btn btn-sm btn-outline-danger remove-bc"><i class="fa-solid fa-trash-can"></i></button></div>
        </div>
      </div>
      <button type="button" id="addBreadcrumb" class="btn btn-outline-primary btn-sm mb-2">
        <i class="fa-solid fa-plus me-1"></i>Add Item
      </button>`,

    VideoObject: `
      <div class="mb-3"><label class="form-label fw-semibold">Video Name *</label>
        <input type="text" class="form-control" name="name" placeholder="Video title" required></div>
      <div class="mb-3"><label class="form-label fw-semibold">Description</label>
        <textarea class="form-control" name="description" rows="2" placeholder="Video description"></textarea></div>
      <div class="mb-3"><label class="form-label fw-semibold">Thumbnail URL</label>
        <input type="text" class="form-control" name="thumbnailUrl" placeholder="https://example.com/thumb.jpg"></div>
      <div class="mb-3"><label class="form-label fw-semibold">Upload Date (YYYY-MM-DD)</label>
        <input type="date" class="form-control" name="uploadDate"></div>
      <div class="mb-3"><label class="form-label fw-semibold">Duration (ISO 8601, e.g. PT5M30S)</label>
        <input type="text" class="form-control" name="duration" placeholder="PT5M30S"></div>
      <div class="mb-3"><label class="form-label fw-semibold">Content URL</label>
        <input type="text" class="form-control" name="contentUrl" placeholder="https://example.com/video.mp4"></div>`,

    Person: `
      <div class="mb-3"><label class="form-label fw-semibold">Full Name *</label>
        <input type="text" class="form-control" name="name" placeholder="Jane Doe" required></div>
      <div class="mb-3"><label class="form-label fw-semibold">Job Title</label>
        <input type="text" class="form-control" name="jobTitle" placeholder="Software Engineer"></div>
      <div class="mb-3"><label class="form-label fw-semibold">URL (profile page)</label>
        <input type="text" class="form-control" name="url" placeholder="https://example.com/jane"></div>
      <div class="mb-3"><label class="form-label fw-semibold">Image URL</label>
        <input type="text" class="form-control" name="image" placeholder="https://example.com/photo.jpg"></div>
      <div class="mb-3"><label class="form-label fw-semibold">Email</label>
        <input type="email" class="form-control" name="email" placeholder="jane@example.com"></div>`,
  };

  function renderForm(type) {
    dynamicForm.innerHTML = forms[type] || '';
    // FAQ-specific dynamic rows
    if (type === 'FAQPage') {
      let faqCount = 1;
      document.getElementById('addFaq').addEventListener('click', () => {
        faqCount++;
        const div = document.createElement('div');
        div.className = 'mb-3 faq-pair';
        div.innerHTML = `
          <div class="d-flex justify-content-between align-items-center mb-1">
            <label class="form-label fw-semibold mb-0">Question ${faqCount}</label>
            <button type="button" class="btn btn-sm btn-outline-danger remove-faq"><i class="fa-solid fa-trash-can"></i></button>
          </div>
          <input type="text" class="form-control mb-2 faq-question" placeholder="Your question?">
          <textarea class="form-control faq-answer" rows="2" placeholder="Answer…"></textarea>`;
        document.getElementById('faqList').appendChild(div);
      });
      document.addEventListener('click', e => {
        if (e.target.closest('.remove-faq')) e.target.closest('.faq-pair').remove();
      });
    }
    // Breadcrumb-specific dynamic rows
    if (type === 'BreadcrumbList') {
      document.getElementById('addBreadcrumb').addEventListener('click', () => {
        const row = document.createElement('div');
        row.className = 'row g-2 mb-2 breadcrumb-row';
        row.innerHTML = `
          <div class="col-5"><input type="text" class="form-control form-control-sm bc-name" placeholder="Page Name"></div>
          <div class="col-6"><input type="text" class="form-control form-control-sm bc-url" placeholder="https://example.com/page"></div>
          <div class="col-auto"><button type="button" class="btn btn-sm btn-outline-danger remove-bc"><i class="fa-solid fa-trash-can"></i></button></div>`;
        document.getElementById('breadcrumbList').appendChild(row);
      });
      document.addEventListener('click', e => {
        if (e.target.closest('.remove-bc')) e.target.closest('.breadcrumb-row').remove();
      });
    }
  }

  schemaTypeEl.addEventListener('change', () => renderForm(schemaTypeEl.value));
  renderForm(schemaTypeEl.value);

  function showError(msg) {
    errorMsg.textContent = msg;
    errorAlert.classList.remove('d-none');
    loadingCard.classList.add('d-none');
    placeholder.classList.remove('d-none');
    resultsSection.classList.add('d-none');
  }

  function collectFormData(type) {
    const data = { schema_type: type };
    // Named inputs
    dynamicForm.querySelectorAll('[name]').forEach(el => {
      data[el.name] = el.value.trim();
    });
    // FAQ pairs
    if (type === 'FAQPage') {
      data.faqs = [];
      document.querySelectorAll('.faq-pair').forEach(pair => {
        const q = pair.querySelector('.faq-question')?.value.trim();
        const a = pair.querySelector('.faq-answer')?.value.trim();
        if (q) data.faqs.push({ question: q, answer: a || '' });
      });
    }
    // Breadcrumb items
    if (type === 'BreadcrumbList') {
      data.items = [];
      document.querySelectorAll('.breadcrumb-row').forEach(row => {
        const name = row.querySelector('.bc-name')?.value.trim();
        const url  = row.querySelector('.bc-url')?.value.trim();
        if (name || url) data.items.push({ name: name || '', url: url || '' });
      });
    }
    return data;
  }

  document.getElementById('copySchemaBtn').addEventListener('click', () => {
    const text = document.getElementById('schemaOutput').textContent;
    navigator.clipboard.writeText(text).then(() => {
      const btn = document.getElementById('copySchemaBtn');
      btn.innerHTML = '<i class="fa-solid fa-check text-success me-1"></i>Copied!';
      setTimeout(() => { btn.innerHTML = '<i class="fa-solid fa-copy me-1"></i>Copy'; }, 2000);
    });
  });

  submitBtn.addEventListener('click', async () => {
    const type = schemaTypeEl.value;
    const payload = collectFormData(type);

    errorAlert.classList.add('d-none');
    loadingCard.classList.remove('d-none');
    resultsSection.classList.add('d-none');
    placeholder.classList.add('d-none');
    submitBtn.disabled = true;

    try {
      const resp = await fetch('/tools/webtools/schema-markup/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      const data = await resp.json();
      if (!resp.ok) throw new Error(data.error || 'Server error ' + resp.status);

      document.getElementById('schemaOutput').textContent = data.schema_json || '{}';
      loadingCard.classList.add('d-none');
      resultsSection.classList.remove('d-none');
    } catch (err) {
      showError(err.message);
    } finally {
      submitBtn.disabled = false;
    }
  });
})();
</script>
{% endblock %}