<%- include('partials-header.ejs', { title: 'Quản lý lịch trình', user: user }) %>

<section class="section">
  <div class="page-shell">
    <h1 class="h3 mb-3">Quản lý lịch trình</h1>

    <div class="panel mb-3">
      <h2 class="h5 mb-2">Thời gian bắt đầu sự kiện</h2>
      <p class="muted mb-3">Thay đổi thời gian đếm ngược trên trang giới thiệu.</p>
      <form action="/admin/countdown" method="post" class="row g-3 align-items-end">
        <div class="col-md-6">
          <label class="form-label" for="eventStartAt">Ngày giờ bắt đầu sự kiện</label>
          <input
            class="form-control"
            id="eventStartAt"
            name="eventStartAt"
            type="datetime-local"
            value="<%= typeof eventStartInput !== 'undefined' ? eventStartInput : '2026-08-12T09:00' %>"
            required
          >
        </div>
        <div class="col-md-6">
          <button class="btn btn-brand" type="submit">Lưu thời gian</button>
          <% if (typeof eventStartAt !== 'undefined' && eventStartAt) { %>
            <span class="muted ms-2">Hiện tại: <%= new Date(eventStartAt).toLocaleString('vi-VN') %></span>
          <% } %>
        </div>
      </form>
    </div>

    <div class="panel mb-3">
      <h2 class="h5 mb-3">Thêm lịch trình</h2>
      <form action="/admin/agenda" method="post" class="row g-3">
        <div class="col-md-6">
          <label class="form-label">Tiêu đề</label>
          <input class="form-control" name="title">
        </div>
        <div class="col-md-3">
          <label class="form-label">Bắt đầu</label>
          <input class="form-control" name="startAt" type="datetime-local" required>
        </div>
        <div class="col-md-3">
          <label class="form-label">Kết thúc</label>
          <input class="form-control" name="endAt" type="datetime-local" required>
        </div>
        <div class="col-md-4">
          <label class="form-label">Diễn giả</label>
          <input class="form-control" name="speaker">
        </div>
        <div class="col-md-4">
          <label class="form-label">Địa điểm</label>
          <input class="form-control" name="location">
        </div>
        <div class="col-md-2">
          <label class="form-label">Thứ tự</label>
          <input class="form-control" name="sortOrder" type="number" value="0">
        </div>
        <div class="col-md-2 d-flex align-items-end">
          <label class="form-check">
            <input class="form-check-input" name="isPublished" type="checkbox" checked>
            <span class="form-check-label">Xuất bản</span>
          </label>
        </div>
        <div class="col-12">
          <label class="form-label">Mô tả</label>
          <textarea class="form-control" name="description" rows="2"></textarea>
        </div>
        <div class="col-12">
          <button class="btn btn-brand" type="submit">Thêm</button>
        </div>
      </form>
    </div>

    <div class="vstack gap-3">
      <% agenda.forEach(function(item) { %>
        <div class="panel">
          <form id="agenda-update-<%= item.id %>" action="/admin/agenda/<%= item.id %>" method="post" class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Tiêu đề</label>
              <input class="form-control" name="title" value="<%= item.title || '' %>">
            </div>
            <div class="col-md-3">
              <label class="form-label">Bắt đầu</label>
              <input class="form-control" name="startAt" type="datetime-local" value="<%= new Date(item.startAt).toISOString().slice(0, 16) %>" required>
            </div>
            <div class="col-md-3">
              <label class="form-label">Kết thúc</label>
              <input class="form-control" name="endAt" type="datetime-local" value="<%= new Date(item.endAt).toISOString().slice(0, 16) %>" required>
            </div>
            <div class="col-md-4">
              <label class="form-label">Diễn giả</label>
              <input class="form-control" name="speaker" value="<%= item.speaker %>">
            </div>
            <div class="col-md-4">
              <label class="form-label">Địa điểm</label>
              <input class="form-control" name="location" value="<%= item.location %>">
            </div>
            <div class="col-md-2">
              <label class="form-label">Thứ tự</label>
              <input class="form-control" name="sortOrder" type="number" value="<%= item.sortOrder %>">
            </div>
            <div class="col-md-2 d-flex align-items-end">
              <label class="form-check">
                <input class="form-check-input" name="isPublished" type="checkbox" <%= item.isPublished ? 'checked' : '' %>>
                <span class="form-check-label">Xuất bản</span>
              </label>
            </div>
            <div class="col-12">
              <label class="form-label">Mô tả</label>
              <textarea class="form-control" name="description" rows="2"><%= item.description || '' %></textarea>
            </div>
          </form>
          <div class="d-flex align-items-center gap-2 flex-wrap mt-3">
            <button class="btn btn-brand" type="submit" form="agenda-update-<%= item.id %>">Lưu</button>
            <form action="/admin/agenda/<%= item.id %>/delete" method="post" class="m-0">
              <button class="btn btn-outline-danger" type="submit">Xóa</button>
            </form>
          </div>
        </div>
      <% }); %>
    </div>
  </div>
</section>

<%- include('partials-footer.ejs') %>
