{% extends "base.html" %}
{% block title %}Shifts — Bid Checker{% endblock %}
{% block content %}
<div class="page-header">
  <h1 class="page-title">Shift Management</h1>
  <div style="display:flex;gap:.5rem">
    <button class="btn btn-ghost btn-sm tab-btn active" data-tab="tab-list" data-group="shifts-tabs">☰ List</button>
    <button class="btn btn-ghost btn-sm tab-btn" data-tab="tab-calendar" data-group="shifts-tabs">📅 Calendar</button>
    <button class="btn btn-primary" onclick="openModal('modal-create-shift')">＋ New Shift</button>
  </div>
</div>

<div id="shifts-tabs">

<!-- List tab -->
<div class="tab-panel active" id="tab-list">
<div class="card">
  <table class="table table-hover">
    <thead>
      <tr><th>Name</th><th>Days</th><th>Time</th><th>Users</th><th>Sites</th><th>Active</th><th>Actions</th></tr>
    </thead>
    <tbody>
      {% for s in shifts %}
      <tr>
        <td><strong>{{ s.name }}</strong><br><span class="text-muted text-sm">{{ s.note or '' }}</span></td>
        <td>{{ s.days_of_week }}</td>
        <td class="text-muted">{{ s.start_time }} – {{ s.end_time }}</td>
        <td>{{ s.user_count }}</td>
        <td>{{ s.website_count }}</td>
        <td><span class="badge badge-{{ 'success' if s.is_active else 'neutral' }}">{{ 'Active' if s.is_active else 'Inactive' }}</span></td>
        <td class="actions">
          <button class="btn btn-ghost btn-sm" onclick="loadEditShift({{ s.id }})">✎ Edit</button>
          <form method="post" action="{{ url_for('admin_shifts.delete', shift_id=s.id) }}"
                style="display:inline" onsubmit="return confirm('Deactivate shift {{ s.name }}?')">
            <button class="btn btn-danger btn-sm" type="submit">✕</button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="7" class="text-center text-muted">No shifts configured.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
</div>

<!-- Calendar tab -->
<div class="tab-panel" id="tab-calendar">
<div class="card">
  <div class="card-header"><span class="card-title">Weekly Schedule</span></div>
  <div style="overflow-x:auto">
  <table class="table">
    <thead>
      <tr>
        <th style="min-width:160px">Shift</th>
        {% for label, _ in day_map %}
        <th style="text-align:center;min-width:64px">{{ label }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for s in shifts if s.is_active %}
      <tr>
        <td>
          <strong>{{ s.name }}</strong>
          <div class="text-muted text-sm">{{ s.start_time|hhmm }}–{{ s.end_time|hhmm }}</div>
        </td>
        {% for _, day_val in day_map %}
        <td style="text-align:center">
          {% if day_val in s.days_of_week %}
          <span class="badge badge-success" title="{{ s.name }} runs on this day">✓</span>
          {% else %}
          <span class="text-muted" style="font-size:.9rem">—</span>
          {% endif %}
        </td>
        {% endfor %}
      </tr>
      {% else %}
      <tr><td colspan="8" class="text-center text-muted">No active shifts.</td></tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>
</div>

</div><!-- /shifts-tabs -->

<!-- Create Shift Modal -->
<div class="modal-overlay" id="modal-create-shift">
  <div class="modal-dialog modal-lg">
    <div class="modal-header">
      <h3>New Shift</h3>
      <button class="modal-close" onclick="closeModal('modal-create-shift')">✕</button>
    </div>
    <form method="post" action="{{ url_for('admin_shifts.create') }}">
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">Shift Name *</label>
          <input class="form-control" name="name" required>
        </div>
        <div class="form-group">
          <label class="form-label">Days of Week</label>
          <div class="day-checkboxes">
            {% for label, val in day_map %}
            <label class="day-check">
              <input type="checkbox" name="days_of_week[]" value="{{ val }}"> {{ label }}
            </label>
            {% endfor %}
          </div>
        </div>
        <div class="form-row">
          <div class="form-group flex-1">
            <label class="form-label">Start Time</label>
            <input class="form-control" type="time" name="start_time" value="08:00">
          </div>
          <div class="form-group flex-1">
            <label class="form-label">End Time</label>
            <input class="form-control" type="time" name="end_time" value="17:00">
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Assign Users</label>
          <div class="checkbox-list">
            {% for u in all_users %}
            <label><input type="checkbox" name="user_ids[]" value="{{ u.id }}"> {{ u.username }}</label>
            {% endfor %}
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Assign Websites</label>
          {% set daily_sites  = all_sites | selectattr('check_type', 'equalto', 'daily')  | list %}
          {% set weekly_sites = all_sites | selectattr('check_type', 'equalto', 'weekly') | list %}
          {% set other_sites  = all_sites | rejectattr('check_type', 'in', ['daily','weekly']) | list %}
          <div class="checkbox-list">
            {% if daily_sites %}
            <div class="site-type-header">Daily</div>
            {% for w in daily_sites %}
            <label><input type="checkbox" name="website_ids[]" value="{{ w.id }}"> {{ w.name }}</label>
            {% endfor %}
            {% endif %}
            {% if weekly_sites %}
            <div class="site-type-header">Weekly</div>
            {% for w in weekly_sites %}
            <label><input type="checkbox" name="website_ids[]" value="{{ w.id }}"> {{ w.name }}</label>
            {% endfor %}
            {% endif %}
            {% if other_sites %}
            <div class="site-type-header">Other</div>
            {% for w in other_sites %}
            <label><input type="checkbox" name="website_ids[]" value="{{ w.id }}"> {{ w.name }}</label>
            {% endfor %}
            {% endif %}
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Note</label>
          <textarea class="form-control" name="note" rows="2"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-ghost" onclick="closeModal('modal-create-shift')">Cancel</button>
        <button type="submit" class="btn btn-primary">Create Shift</button>
      </div>
    </form>
  </div>
</div>

<!-- Edit Shift Modal -->
<div class="modal-overlay" id="modal-edit-shift">
  <div class="modal-dialog modal-lg">
    <div class="modal-header">
      <h3>Edit Shift</h3>
      <button class="modal-close" onclick="closeModal('modal-edit-shift')">✕</button>
    </div>
    <form method="post" id="edit-shift-form">
      <div class="modal-body" id="edit-shift-body"><div class="text-center text-muted">Loading…</div></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-ghost" onclick="closeModal('modal-edit-shift')">Cancel</button>
        <button type="submit" class="btn btn-primary">Save Changes</button>
      </div>
    </form>
  </div>
</div>


<script>
const ALL_USERS  = {{ all_users | tojson }};
const ALL_SITES  = {{ all_sites | tojson }};
const DAY_MAP    = {{ day_map | tojson }};

function loadEditShift(id) {
  fetch('/admin/shifts/' + id + '/detail')
    .then(r => r.json())
    .then(s => {
      document.getElementById('edit-shift-form').action = '/admin/shifts/' + id + '/edit';
      document.getElementById('edit-shift-body').innerHTML = buildShiftForm(s);
      openModal('modal-edit-shift');
    });
}

function buildShiftForm(s) {
  const days = DAY_MAP.map(([lbl, val]) => `
    <label class="day-check">
      <input type="checkbox" name="days_of_week[]" value="${val}"
             ${s.days_of_week.includes(val)?'checked':''}>${lbl}
    </label>`).join('');

  const users = ALL_USERS.map(u => `
    <label><input type="checkbox" name="user_ids[]" value="${u.id}"
      ${s.user_ids.includes(u.id)?'checked':''}> ${u.username}</label>`).join('');

  const siteGroups = [
    { label: 'Daily',  items: ALL_SITES.filter(w => w.check_type === 'daily')  },
    { label: 'Weekly', items: ALL_SITES.filter(w => w.check_type === 'weekly') },
    { label: 'Other',  items: ALL_SITES.filter(w => w.check_type !== 'daily' && w.check_type !== 'weekly') },
  ];
  const sites = siteGroups.filter(g => g.items.length).map(g =>
    `<div class="site-type-header">${g.label}</div>` +
    g.items.map(w =>
      `<label><input type="checkbox" name="website_ids[]" value="${w.id}"
        ${s.website_ids.includes(w.id)?'checked':''}> ${esc(w.name)}</label>`
    ).join('')
  ).join('');

  return `
    <div class="form-group"><label class="form-label">Shift Name *</label>
      <input class="form-control" name="name" value="${esc(s.name)}" required></div>
    <div class="form-group"><label class="form-label">Days of Week</label>
      <div class="day-checkboxes">${days}</div></div>
    <div class="form-row">
      <div class="form-group flex-1"><label class="form-label">Start Time</label>
        <input class="form-control" type="time" name="start_time" value="${esc(s.start_time)}"></div>
      <div class="form-group flex-1"><label class="form-label">End Time</label>
        <input class="form-control" type="time" name="end_time" value="${esc(s.end_time)}"></div>
    </div>
    <div class="form-group"><label class="form-label">Active</label>
      <select class="form-control" name="is_active">
        <option value="1" ${s.is_active?'selected':''}>Yes</option>
        <option value="0" ${!s.is_active?'selected':''}>No</option>
      </select></div>
    <div class="form-group"><label class="form-label">Assign Users</label>
      <div class="checkbox-list">${users}</div></div>
    <div class="form-group"><label class="form-label">Assign Websites</label>
      <div class="checkbox-list">${sites}</div></div>
    <div class="form-group"><label class="form-label">Note</label>
      <textarea class="form-control" name="note" rows="2">${esc(s.note)}</textarea></div>`;
}
function esc(s) { return (s||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }

// Highlight today's column in the calendar
(function() {
  var jsDay   = new Date().getDay();                      // 0=Sun … 6=Sat
  var mysqlDay = String(jsDay === 0 ? 1 : jsDay + 1);    // MySQL DAYOFWEEK: 1=Sun, 2=Mon…
  var colIdx  = DAY_MAP.findIndex(function(d) { return d[1] === mysqlDay; });
  if (colIdx === -1) return;
  var calTable = document.querySelector('#tab-calendar table');
  if (!calTable) return;
  calTable.querySelectorAll('tr').forEach(function(tr) {
    var cells = tr.querySelectorAll('th, td');
    var cell  = cells[colIdx + 1];   // +1 for the leading Shift name column
    if (cell) cell.classList.add('cal-today');
  });
})();
</script>

<style>
.site-type-header {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: .55rem .1rem .2rem;
  margin-top: .25rem;
  border-top: 1px solid var(--border);
}
.site-type-header:first-child { border-top: none; margin-top: 0; padding-top: .1rem; }
.cal-today { background: #eff6ff !important; }
.cal-today th, thead .cal-today {
  background: #dbeafe !important;
  font-weight: 700;
  color: #1d4ed8;
}
</style>
{% endblock %}