<div class="space-y-6">
  <div class="flex flex-wrap items-start justify-between gap-3">
    <div>
      <a href="/events" class="text-xs text-slate-400 hover:text-slate-600">&larr; Kembali ke Kegiatan</a>
      <h1 class="text-xl font-semibold text-slate-900 mt-1"><%= event.name %></h1>
      <p class="text-sm text-slate-500 mt-0.5"><%= event.location || 'Lokasi belum diatur' %> &middot; <%= event.start_date || '-' %> s/d <%= event.end_date || '-' %></p>
    </div>
    <% if (currentUser.role === 'super_admin') { %>
      <button onclick="document.getElementById('modalEditEvent').classList.remove('hidden')" class="px-4 py-2 rounded-lg bg-slate-100 text-slate-700 text-sm font-medium hover:bg-slate-200">Edit Kegiatan</button>
    <% } %>
  </div>

  <div class="grid lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-4">
      <div class="flex items-center justify-between">
        <h2 class="text-sm font-semibold text-slate-900">Sesi Absensi</h2>
        <% if (currentUser.role === 'super_admin') { %>
          <button onclick="document.getElementById('modalAddSession').classList.remove('hidden')" class="text-xs text-blue-600 font-medium hover:underline">+ Tambah Sesi</button>
        <% } %>
      </div>
      <div class="bg-white border border-slate-200 rounded-2xl shadow-sm divide-y divide-slate-100">
        <% sessions.forEach(function(s) { %>
          <div class="p-4 flex items-center justify-between gap-3">
            <div>
              <div class="text-sm font-medium text-slate-800"><%= s.name %></div>
              <div class="text-xs text-slate-500 mt-0.5"><%= s.session_date %> &middot; <%= s.start_time %>&ndash;<%= s.end_time %> &middot; <%= s.hadir_count %> hadir</div>
            </div>
            <div class="flex items-center gap-2 shrink-0">
              <span class="text-[11px] px-2 py-0.5 rounded-full <%= s.is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500' %>"><%= s.is_active ? 'Aktif' : 'Nonaktif' %></span>
              <% if (currentUser.role === 'super_admin' || currentUser.role === 'admin') { %>
                <form method="POST" action="/sessions/<%= s.id %>/toggle" class="inline">
                  <button class="text-xs font-medium <%= s.is_active ? 'text-amber-600 hover:text-amber-700' : 'text-emerald-600 hover:text-emerald-700' %>">
                    <%= s.is_active ? 'Nonaktifkan' : 'Aktifkan' %>
                  </button>
                </form>
              <% } %>
              <% if (currentUser.role === 'panitia' || currentUser.role === 'super_admin') { %>
                <a href="/scanner/<%= s.id %>" class="text-xs text-blue-600 font-medium hover:underline">Scan</a>
              <% } %>
              <% if (currentUser.role === 'super_admin') { %>
                <button onclick="document.getElementById('editSession<%= s.id %>').classList.toggle('hidden')" class="text-xs text-slate-500 hover:text-blue-600">Edit</button>
              <% } %>
            </div>
          </div>
          <% if (currentUser.role === 'super_admin') { %>
          <div id="editSession<%= s.id %>" class="hidden bg-slate-50 px-4 py-3">
            <form method="POST" action="/sessions/<%= s.id %>/edit" class="flex flex-wrap gap-2 items-end">
              <div><label class="block text-[11px] text-slate-500">Nama Sesi</label><input name="name" value="<%= s.name %>" required class="px-2 py-1.5 rounded-lg border border-slate-200 text-sm" /></div>
              <div><label class="block text-[11px] text-slate-500">Tanggal</label><input type="date" name="session_date" value="<%= s.session_date %>" required class="px-2 py-1.5 rounded-lg border border-slate-200 text-sm" /></div>
              <div><label class="block text-[11px] text-slate-500">Mulai</label><input type="time" name="start_time" value="<%= s.start_time %>" required class="px-2 py-1.5 rounded-lg border border-slate-200 text-sm" /></div>
              <div><label class="block text-[11px] text-slate-500">Selesai</label><input type="time" name="end_time" value="<%= s.end_time %>" required class="px-2 py-1.5 rounded-lg border border-slate-200 text-sm" /></div>
              <label class="flex items-center gap-1.5 text-xs text-slate-600 pb-1.5"><input type="checkbox" name="is_active" <%= s.is_active ? 'checked' : '' %> /> Aktif</label>
              <button class="px-3 py-1.5 rounded-lg bg-blue-600 text-white text-xs font-medium">Simpan</button>
            </form>
          </div>
          <% } %>
        <% }) %>
        <% if (sessions.length === 0) { %>
          <p class="text-sm text-slate-400 p-5 text-center">Belum ada sesi.</p>
        <% } %>
      </div>
    </div>

    <% if (currentUser.role === 'super_admin') { %>
    <div class="space-y-4">
      <div>
        <h2 class="text-sm font-semibold text-slate-900 mb-2">Admin Ditugaskan</h2>
        <div class="bg-white border border-slate-200 rounded-2xl shadow-sm p-4 space-y-2">
          <% assignedAdmins.forEach(function(a) { %>
            <div class="flex items-center justify-between text-sm">
              <span class="text-slate-700"><%= a.name %></span>
              <form method="POST" action="/events/<%= event.id %>/unassign-admin/<%= a.id %>">
                <button class="text-xs text-red-500 hover:text-red-700">Hapus</button>
              </form>
            </div>
          <% }) %>
          <% if (assignedAdmins.length === 0) { %><p class="text-xs text-slate-400">Belum ada admin ditugaskan.</p><% } %>
          <form method="POST" action="/events/<%= event.id %>/assign-admin" class="flex gap-2 pt-2 border-t border-slate-100 mt-2">
            <select name="user_id" required class="flex-1 px-2 py-1.5 rounded-lg border border-slate-200 text-sm">
              <option value="">Pilih Admin</option>
              <% allAdmins.forEach(function(a) { %><option value="<%= a.id %>"><%= a.name %></option><% }) %>
            </select>
            <button class="px-3 py-1.5 rounded-lg bg-slate-800 text-white text-xs font-medium">Tugaskan</button>
          </form>
        </div>
      </div>

      <div>
        <h2 class="text-sm font-semibold text-slate-900 mb-2">Panitia Ditugaskan</h2>
        <div class="bg-white border border-slate-200 rounded-2xl shadow-sm p-4 space-y-2">
          <% assignedPanitia.forEach(function(a) { %>
            <div class="flex items-center justify-between text-sm">
              <span class="text-slate-700"><%= a.name %> <span class="text-slate-400">&middot; <%= a.session_name %></span></span>
              <form method="POST" action="/events/<%= event.id %>/unassign-panitia/<%= a.id %>/<%= a.session_id %>">
                <button class="text-xs text-red-500 hover:text-red-700">Hapus</button>
              </form>
            </div>
          <% }) %>
          <% if (assignedPanitia.length === 0) { %><p class="text-xs text-slate-400">Belum ada panitia ditugaskan.</p><% } %>
          <form method="POST" action="/events/<%= event.id %>/assign-panitia" class="space-y-2 pt-2 border-t border-slate-100 mt-2">
            <select name="user_id" required class="w-full px-2 py-1.5 rounded-lg border border-slate-200 text-sm">
              <option value="">Pilih Panitia</option>
              <% allPanitia.forEach(function(a) { %><option value="<%= a.id %>"><%= a.name %></option><% }) %>
            </select>
            <select name="session_id" required class="w-full px-2 py-1.5 rounded-lg border border-slate-200 text-sm">
              <option value="">Pilih Sesi</option>
              <% sessions.forEach(function(s) { %><option value="<%= s.id %>"><%= s.name %></option><% }) %>
            </select>
            <button class="w-full px-3 py-1.5 rounded-lg bg-slate-800 text-white text-xs font-medium">Tugaskan</button>
          </form>
        </div>
      </div>
    </div>
    <% } %>
  </div>
</div>

<% if (currentUser.role === 'super_admin') { %>
<div id="modalAddSession" class="hidden fixed inset-0 bg-slate-900/40 flex items-center justify-center z-40 px-4">
  <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-sm font-semibold text-slate-900">Tambah Sesi</h3>
      <button onclick="document.getElementById('modalAddSession').classList.add('hidden')" class="text-slate-400 hover:text-slate-600">&times;</button>
    </div>
    <form method="POST" action="/events/<%= event.id %>/sessions" class="space-y-3">
      <div><label class="block text-xs font-medium text-slate-600 mb-1">Nama Sesi</label><input name="name" required placeholder="Mis. Registrasi" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
      <div><label class="block text-xs font-medium text-slate-600 mb-1">Tanggal</label><input type="date" name="session_date" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
      <div class="grid grid-cols-2 gap-3">
        <div><label class="block text-xs font-medium text-slate-600 mb-1">Jam Mulai</label><input type="time" name="start_time" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
        <div><label class="block text-xs font-medium text-slate-600 mb-1">Jam Selesai</label><input type="time" name="end_time" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
      </div>
      <div class="flex justify-end gap-2 pt-2">
        <button type="button" onclick="document.getElementById('modalAddSession').classList.add('hidden')" class="px-4 py-2 rounded-lg bg-slate-100 text-slate-700 text-sm font-medium">Batal</button>
        <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium">Simpan</button>
      </div>
    </form>
  </div>
</div>

<div id="modalEditEvent" class="hidden fixed inset-0 bg-slate-900/40 flex items-center justify-center z-40 px-4">
  <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-sm font-semibold text-slate-900">Edit Kegiatan</h3>
      <button onclick="document.getElementById('modalEditEvent').classList.add('hidden')" class="text-slate-400 hover:text-slate-600">&times;</button>
    </div>
    <form method="POST" action="/events/<%= event.id %>/edit" class="space-y-3">
      <div><label class="block text-xs font-medium text-slate-600 mb-1">Nama Kegiatan</label><input name="name" value="<%= event.name %>" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
      <div><label class="block text-xs font-medium text-slate-600 mb-1">Deskripsi</label><textarea name="description" rows="2" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm"><%= event.description || '' %></textarea></div>
      <div><label class="block text-xs font-medium text-slate-600 mb-1">Lokasi</label><input name="location" value="<%= event.location || '' %>" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
      <div class="grid grid-cols-2 gap-3">
        <div><label class="block text-xs font-medium text-slate-600 mb-1">Tanggal Mulai</label><input type="date" name="start_date" value="<%= event.start_date || '' %>" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
        <div><label class="block text-xs font-medium text-slate-600 mb-1">Tanggal Selesai</label><input type="date" name="end_date" value="<%= event.end_date || '' %>" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
      </div>
      <div><label class="block text-xs font-medium text-slate-600 mb-1">Status</label>
        <select name="status" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
          <option value="active" <%= event.status==='active'?'selected':'' %>>Aktif</option>
          <option value="inactive" <%= event.status==='inactive'?'selected':'' %>>Nonaktif</option>
          <option value="archived" <%= event.status==='archived'?'selected':'' %>>Arsip</option>
        </select>
      </div>
      <div class="flex justify-end gap-2 pt-2">
        <button type="button" onclick="document.getElementById('modalEditEvent').classList.add('hidden')" class="px-4 py-2 rounded-lg bg-slate-100 text-slate-700 text-sm font-medium">Batal</button>
        <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium">Simpan</button>
      </div>
    </form>
  </div>
</div>
<% } %>
