{% extends "showcase/cabinet/booking/base_booking.html" %}

{% block title %}Booking — {{ page_title }}{% endblock %}

{% block extra_css %}
<style>
[x-cloak] { display: none !important; }
.modal-overlay { display: flex; }
.appt-row { cursor: pointer; transition: background .12s; }
.appt-row:hover { background: #f8fafc; }
.action-btn { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; width: 100%; text-align: left; transition: all .12s; cursor: pointer; font-size: .86rem; }
.action-btn:hover { border-color: #6366f1; background: #f5f3ff; }
.action-btn--danger:hover { border-color: #ef4444; background: #fef2f2; }
.action-btn--success:hover { border-color: #22c55e; background: #f0fdf4; }
.action-btn .icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
</style>
{% endblock %}

{% block cabinet_content %}
<div x-data="apptModal()">

  {# ── Header ── #}
  {% include "showcase/cabinet/includes/_page_header.html" with title="Appointments" subtitle="All bookings log" btn_label="+ New booking" btn_url="codex_showcase:booking_new" btn_icon="bi-plus-lg" %}

  {# ── Status filter tabs ── #}
  <div class="d-flex gap-2 mb-4 flex-wrap">
    {% for tab in status_tabs %}
    <a href="{% url 'codex_showcase:booking_appointments' %}{% if tab.key != 'all' %}?status={{ tab.key }}{% endif %}"
       class="btn btn-sm {% if tab.key == active_status %}btn-dark{% else %}btn-outline-secondary{% endif %}"
       style="font-size: .8rem; border-radius: 20px;">
      {{ tab.label }}
      <span class="ms-1 {% if tab.key == active_status %}text-white-50{% else %}text-muted{% endif %}" style="font-size: .72rem;">({{ tab.count }})</span>
    </a>
    {% endfor %}
  </div>

  {# ── Table ── #}
  <div class="bg-white rounded-3 border overflow-hidden">
    <table class="table mb-0" style="font-size: .84rem;">
      <thead style="background: #f8fafc; border-bottom: 2px solid #e2e8f0;">
        <tr>
          <th class="px-4 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 220px;">Client</th>
          <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none;">SERVICE</th>
          <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 130px;">SPECIALIST</th>
          <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 150px;">Date / Time</th>
          <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 80px;">Price</th>
          <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 130px;">STATUS</th>
        </tr>
      </thead>
      <tbody>
        {% for appt in appointments %}
        <tr class="appt-row align-middle"
            data-client="{{ appt.client }}"
            data-phone="{{ appt.phone }}"
            data-service="{{ appt.service }}"
            data-duration="{{ appt.duration }}"
            data-staff="{{ appt.staff_name }}"
            data-date="23 March 2026"
            data-start="{{ appt.start_label }}"
            data-end="{{ appt.end_label }}"
            data-price="{{ appt.price }}"
            data-status="{{ appt.status }}"
            data-status-label="{{ appt.status_label }}"
            data-status-color="{{ appt.status_color }}"
            data-status-bg="{{ appt.status_bg }}"
            data-color="{{ appt.booking_color }}"
            data-initials="{{ appt.initials }}"
            @click="open($el)">

          <td class="px-4 py-3" style="border: none;">
            <div class="d-flex align-items-center gap-2">
              <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold flex-shrink-0" style="width: 34px; height: 34px; font-size: .7rem; background: {{ appt.booking_color }};">{{ appt.initials }}</div>
              <div>
                <div class="fw-semibold" style="line-height: 1.3;">{{ appt.client }}</div>
                <div class="text-muted" style="font-size: .72rem;">{{ appt.phone }}</div>
              </div>
            </div>
          </td>

          <td class="px-3 py-3" style="border: none;">
            <div style="line-height: 1.3;">{{ appt.service }}</div>
            <div class="text-muted" style="font-size: .72rem;">{{ appt.duration }} min</div>
          </td>

          <td class="px-3 py-3" style="border: none;">
            <div class="d-flex align-items-center gap-2">
              <div class="rounded-circle d-flex align-items-center justify-content-center text-white flex-shrink-0" style="width: 26px; height: 26px; font-size: .6rem; background: {{ appt.staff_color }};">{{ appt.staff_initials }}</div>
              <span style="font-size: .8rem;">{{ appt.staff_name }}</span>
            </div>
          </td>

          <td class="px-3 py-3" style="border: none;">
            <div class="fw-semibold" style="line-height: 1.3;">23 March 2026</div>
            <div class="text-muted" style="font-size: .75rem;">{{ appt.start_label }} — {{ appt.end_label }}</div>
          </td>

          <td class="px-3 py-3 fw-semibold" style="border: none;">{{ appt.price }}</td>

          <td class="px-3 py-3" style="border: none;">
            <span class="badge rounded-pill px-2 py-1" style="background: {{ appt.status_bg }}; color: {{ appt.status_color }}; font-size: .72rem; font-weight: 600;">
              <span class="me-1" style="font-size: .55rem;">●</span>{{ appt.status_label }}
            </span>
          </td>

        </tr>
        {% empty %}
        <tr>
          <td colspan="6" style="border: none;">
            {% include "showcase/cabinet/includes/_empty_state.html" with icon="bi-calendar-x" title="No records" subtitle="No records found for the selected filters" %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {# ── Action Modal ── #}
  <div x-cloak x-show="show"
       class="position-fixed modal-overlay align-items-center justify-content-center"
       style="inset:0; background: rgba(15,23,42,.45); z-index: 1050;"
       @click.self="close()">

    <div class="bg-white rounded-4 shadow-lg" style="width: 440px; max-width: 95vw; overflow: hidden;">

      {# Modal header #}
      <div class="d-flex align-items-center justify-content-between px-4 py-3 border-bottom">
        <div class="d-flex align-items-center gap-3">
          <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold flex-shrink-0"
               :style="`width:38px;height:38px;font-size:.72rem;background:${a.color}`"
               x-text="a.initials"></div>
          <div>
            <div class="fw-semibold" style="font-size:.95rem;" x-text="a.client"></div>
            <div class="text-muted" style="font-size:.75rem;" x-text="a.phone"></div>
          </div>
        </div>
        <div class="d-flex align-items-center gap-2">
          <span class="badge rounded-pill px-2 py-1"
                :style="`background:${a.statusBg};color:${a.statusColor};font-size:.72rem;font-weight:600`"
                x-text="'● ' + a.statusLabel"></span>
          <button @click="close()" class="btn btn-sm btn-outline-secondary d-flex align-items-center justify-content-center" style="width:30px;height:30px;padding:0;border-radius:50%;">
            <span class="bi bi-x" style="font-size:.9rem;"></span>
          </button>
        </div>
      </div>

      {# Appointment details #}
      <div class="px-4 pt-3 pb-2">
        <div class="rounded-3 p-3 mb-3" style="background:#f8fafc; border:1px solid #e2e8f0; font-size:.82rem;">
          <div class="d-flex gap-4">
            <div>
              <div class="text-muted mb-1" style="font-size:.7rem; text-transform:uppercase; letter-spacing:.03em;">SERVICE</div>
              <div class="fw-semibold" x-text="a.service"></div>
              <div class="text-muted" x-text="a.duration + ' min'"></div>
            </div>
            <div>
              <div class="text-muted mb-1" style="font-size:.7rem; text-transform:uppercase; letter-spacing:.03em;">DATE AND TIME</div>
              <div class="fw-semibold" x-text="a.date"></div>
              <div class="text-muted" x-text="a.start + ' — ' + a.end"></div>
            </div>
            <div>
              <div class="text-muted mb-1" style="font-size:.7rem; text-transform:uppercase; letter-spacing:.03em;">SPECIALIST / Price</div>
              <div class="fw-semibold" x-text="a.staff"></div>
              <div class="text-muted" x-text="a.price"></div>
            </div>
          </div>
        </div>

        {# Sub-form: reschedule #}
        <div x-show="subForm === 'reschedule'" x-cloak class="rounded-3 p-3 mb-3" style="background:#f0f9ff; border:1px solid #bae6fd;">
          <div class="fw-semibold mb-2" style="font-size:.82rem; color:#0369a1;">
            <span class="bi bi-calendar-event me-1"></span> New date and time
          </div>
          <div class="d-flex gap-2">
            <input type="date" class="form-control form-control-sm" style="font-size:.82rem;" value="2026-03-25">
            <input type="time" class="form-control form-control-sm" style="font-size:.82rem;" value="10:00">
          </div>
          <textarea class="form-control form-control-sm mt-2" rows="2" placeholder="Message to client (optional)" style="font-size:.8rem; resize:none;"></textarea>
        </div>

        {# Sub-form: message #}
        <div x-show="subForm === 'message'" x-cloak class="rounded-3 p-3 mb-3" style="background:#fafafa; border:1px solid #e2e8f0;">
          <div class="fw-semibold mb-2" style="font-size:.82rem;">
            <span class="bi bi-chat-dots me-1"></span> Message to client
          </div>
          <textarea class="form-control form-control-sm" rows="3" placeholder="Enter message..." style="font-size:.82rem; resize:none;"></textarea>
          <div class="d-flex gap-2 mt-2">
            <button class="btn btn-sm flex-fill" style="font-size:.78rem; background:#e7f3ff; color:#1d4ed8; border:1px solid #bfdbfe;">
              <span class="bi bi-envelope me-1"></span>Email
            </button>
            <button class="btn btn-sm flex-fill" style="font-size:.78rem; background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0;">
              <span class="bi bi-whatsapp me-1"></span>WhatsApp
            </button>
          </div>
        </div>

        {# Action buttons — vary by status #}
        <div class="d-flex flex-column gap-2 pb-3">

          {# pending actions #}
          <template x-if="a.status === 'pending'">
            <div class="d-flex flex-column gap-2">
              <button class="action-btn action-btn--success" @click="subForm = ''">
                <span class="icon" style="background:#dcfce7; color:#16a34a;"><span class="bi bi-check-lg"></span></span>
                <div><div class="fw-semibold">Confirm booking</div><div class="text-muted" style="font-size:.75rem;">Notify client about confirmation</div></div>
              </button>
              <button class="action-btn" @click="subForm = subForm === 'reschedule' ? '' : 'reschedule'">
                <span class="icon" style="background:#e0f2fe; color:#0369a1;"><span class="bi bi-calendar-event"></span></span>
                <div><div class="fw-semibold">Propose another time</div><div class="text-muted" style="font-size:.75rem;">Choose new date and send to client</div></div>
                <span class="bi bi-chevron-down ms-auto text-muted" style="font-size:.75rem;" :class="subForm==='reschedule' ? 'bi-chevron-up' : 'bi-chevron-down'"></span>
              </button>
              <button class="action-btn" @click="subForm = subForm === 'message' ? '' : 'message'">
                <span class="icon" style="background:#f3e8ff; color:#7c3aed;"><span class="bi bi-chat-dots"></span></span>
                <div><div class="fw-semibold">Write to client</div><div class="text-muted" style="font-size:.75rem;">Email or WhatsApp</div></div>
                <span class="ms-auto text-muted" style="font-size:.75rem;" :class="subForm==='message' ? 'bi bi-chevron-up' : 'bi bi-chevron-down'"></span>
              </button>
              <button class="action-btn action-btn--danger" @click="subForm = ''">
                <span class="icon" style="background:#fee2e2; color:#dc2626;"><span class="bi bi-x-lg"></span></span>
                <div><div class="fw-semibold">Cancel booking</div><div class="text-muted" style="font-size:.75rem;">Notify client about cancellation</div></div>
              </button>
            </div>
          </template>

          {# confirmed actions #}
          <template x-if="a.status === 'confirmed'">
            <div class="d-flex flex-column gap-2">
              <button class="action-btn action-btn--success" @click="subForm = ''">
                <span class="icon" style="background:#dcfce7; color:#16a34a;"><span class="bi bi-check2-circle"></span></span>
                <div><div class="fw-semibold">Complete</div><div class="text-muted" style="font-size:.75rem;">Mark as completed</div></div>
              </button>
              <button class="action-btn" @click="subForm = subForm === 'reschedule' ? '' : 'reschedule'">
                <span class="icon" style="background:#e0f2fe; color:#0369a1;"><span class="bi bi-arrow-left-right"></span></span>
                <div><div class="fw-semibold">Reschedule</div><div class="text-muted" style="font-size:.75rem;">Choose new date and time</div></div>
                <span class="ms-auto text-muted" style="font-size:.75rem;" :class="subForm==='reschedule' ? 'bi bi-chevron-up' : 'bi bi-chevron-down'"></span>
              </button>
              <button class="action-btn" @click="subForm = subForm === 'message' ? '' : 'message'">
                <span class="icon" style="background:#f3e8ff; color:#7c3aed;"><span class="bi bi-chat-dots"></span></span>
                <div><div class="fw-semibold">Write to client</div><div class="text-muted" style="font-size:.75rem;">Email or WhatsApp</div></div>
                <span class="ms-auto text-muted" style="font-size:.75rem;" :class="subForm==='message' ? 'bi bi-chevron-up' : 'bi bi-chevron-down'"></span>
              </button>
              <button class="action-btn action-btn--danger" @click="subForm = ''">
                <span class="icon" style="background:#fee2e2; color:#dc2626;"><span class="bi bi-x-lg"></span></span>
                <div><div class="fw-semibold">Cancel booking</div><div class="text-muted" style="font-size:.75rem;">Notify client about cancellation</div></div>
              </button>
            </div>
          </template>

          {# completed / cancelled — view only #}
          <template x-if="a.status === 'completed' || a.status === 'cancelled'">
            <div class="text-center py-2 text-muted" style="font-size:.82rem;">
              <span class="bi bi-info-circle me-1"></span>
              <span x-text="a.status === 'completed' ? 'Booking completed' : 'Booking cancelled'"></span>
            </div>
          </template>

        </div>
      </div>

    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
function apptModal() {
  return {
    show: false,
    subForm: '',
    a: {},
    open(row) {
      const d = row.dataset;
      this.a = {
        client: d.client, phone: d.phone, service: d.service,
        duration: d.duration, staff: d.staff, date: d.date,
        start: d.start, end: d.end, price: d.price,
        status: d.status, statusLabel: d.statusLabel,
        statusColor: d.statusColor, statusBg: d.statusBg,
        color: d.color, initials: d.initials
      };
      this.subForm = '';
      this.show = true;
    },
    close() { this.show = false; this.subForm = ''; }
  }
}
</script>
{% endblock %}