{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
  <h2>Manage Broadcast Messages</h2>

  <!-- Quill CSS -->
  <link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet">

  <!-- ✅ FILTER BAR (GET) -->
  <form method="GET" class="card shadow-sm mb-3">
    <div class="card-body row g-2 align-items-end">
      <div class="col-md-5">
        <label class="form-label fw-bold">Search</label>
        <input name="q" value="{{ q or '' }}" class="form-control" placeholder="Title / Content">
      </div>

      <div class="col-md-4">
        <label class="form-label fw-bold">Department</label>
        <select class="form-select" name="dept_id">
          <option value="">All</option>
          <option value="none" {% if dept_id=='none' %}selected{% endif %}>No Department (Broadcast All)</option>
          {% for dept in departments %}
            <option value="{{ dept.id }}" {% if dept_id and dept_id|int == dept.id %}selected{% endif %}>
              {{ dept.name }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-2">
        <div class="form-check mt-4">
          <input class="form-check-input" type="checkbox" value="1" id="activeOnly"
                 name="active" {% if active_only=='1' %}checked{% endif %}>
          <label class="form-check-label fw-bold" for="activeOnly">Active only</label>
        </div>
      </div>

      <div class="col-md-1 d-grid">
        <button class="btn btn-outline-primary">Go</button>
      </div>
    </div>
  </form>

  <!-- CREATE -->
  <form id="broadcastCreateForm" method="POST" enctype="multipart/form-data" class="mb-4 card shadow-sm">
    <div class="card-body">
      {{ csrf_token() if csrf_token is defined }}

      <div class="mb-2">
        <input name="title" class="form-control" placeholder="Title" required>
      </div>

      <!-- ✅ Quill Editor -->
      <div class="mb-2">
        <label class="form-label fw-bold">Content</label>
        <div id="quill_editor" style="height: 220px;"></div>
        <input type="hidden" name="content" id="content_html">
        <small class="text-muted d-block mt-1">
          Tip: Use bullets/numbering, bold, links, etc.
        </small>
      </div>

      <div class="mb-2">
        <small class="form-label fw-bold">Allowed: JPG, PNG, PDF, DOCX, XLSX</small>
        <input type="file" name="attachment" class="form-control"
               accept=".jpg,.jpeg,.png,.webp,.pdf,.doc,.docx,.xls,.xlsx">
      </div>

      <div class="row mb-2">
        <div class="col">
          <label class="form-label fw-bold">Start Date</label>
          <input type="date" name="start_date" class="form-control">
        </div>
        <div class="col">
          <label class="form-label fw-bold">End Date</label>
          <input type="date" name="end_date" class="form-control">
        </div>
      </div>

      <div class="mb-3">
        <label class="form-label fw-bold">Target Departments</label>
        <div class="dropdown">
          <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
            Select Departments
          </button>
          <ul class="dropdown-menu p-2" style="max-height: 200px; overflow-y: auto;">
            <li>
              <div class="form-check">
                <input class="form-check-input dept-checkbox" type="checkbox" value="all" id="dept_all">
                <label class="form-check-label" for="dept_all">All Departments</label>
              </div>
            </li>
            <hr>
            {% for dept in departments %}
            <li>
              <div class="form-check">
                <input class="form-check-input dept-checkbox" type="checkbox" name="department_ids"
                       value="{{ dept.id }}" id="dept_{{ dept.id }}">
                <label class="form-check-label" for="dept_{{ dept.id }}">{{ dept.name }}</label>
              </div>
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>

      <button class="btn btn-primary w-100">Add Broadcast</button>
    </div>
  </form>

  <h4>Existing Broadcasts</h4>
  <ul class="list-group">
    {% for b in broadcasts %}
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <div>
        <strong>{{ b.title }}</strong><br>
        <small class="text-muted">{{ b.start_date or '—' }} to {{ b.end_date or '—' }}</small>
      </div>

      <form action="{{ url_for('broadcast.delete_broadcast', broadcast_id=b.id) }}" method="POST" class="d-inline">
        {{ csrf_token() if csrf_token is defined }}
        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
      </form>
    </li>
    {% endfor %}
  </ul>
</div>

<!-- Quill JS -->
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    // ✅ Department All
    const deptAll = document.getElementById('dept_all');
    const deptCheckboxes = document.querySelectorAll('.dept-checkbox:not(#dept_all)');
    if (deptAll) {
      deptAll.addEventListener('change', function () {
        deptCheckboxes.forEach(cb => cb.checked = this.checked);
      });
    }

    // ✅ Quill init
    const quill = new Quill('#quill_editor', {
      theme: 'snow',
      modules: {
        toolbar: [
          [{ header: [1, 2, 3, false] }],
          ['bold', 'italic', 'underline', 'strike'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          [{ align: [] }],
          ['link'],
          ['clean']
        ]
      }
    });

    // ✅ Submit: copy HTML to hidden input
    const form = document.getElementById('broadcastCreateForm');
    form.addEventListener('submit', function () {
      document.getElementById('content_html').value = quill.root.innerHTML;
    });
  });
</script>
{% endblock %}