{% extends 'base.html' %}
{% block content %}
<div class="container">
    <h2>Manage Broadcast Messages</h2>
    <form method="POST" enctype="multipart/form-data" class="mb-4">
        <div class="mb-2">
            <input name="title" class="form-control" placeholder="Title" required>
        </div>
        <div class="mb-2">
            <textarea name="content" class="form-control" placeholder="Content"></textarea>
        </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 for="start_date" class="form-label fw-bold">Start Date</label>
                <input type="date" name="start_date" class="form-control" placeholder="Start Date">
            </div>
            <div class="col">
                <label for="end_date" class="form-label fw-bold">End Date</label>
                <input type="date" name="end_date" class="form-control" placeholder="End Date">
            </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>
    </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>{{ b.start_date }} to {{ b.end_date }}</small>
            </div>
            <form action="{{ url_for('broadcast.delete_broadcast', broadcast_id=b.id) }}" method="POST" class="d-inline">
                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
            </form>
        </li>
        {% endfor %}
    </ul>
</div>

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

    // Role All
    const roleAll = document.getElementById('role_all');
    const roleCheckboxes = document.querySelectorAll('.role-checkbox:not(#role_all)');
    roleAll.addEventListener('change', function () {
      roleCheckboxes.forEach(cb => cb.checked = this.checked);
    });
  });
</script>
{% endblock %}