{% extends "cabinet/base_cabinet.html" %}

{% block title %}Booking — New booking{% endblock %}

{% block extra_css %}
<style>
  .step-card { background: #fff; border: 2px solid #e2e8f0; border-radius: 12px; }
  .step-card.active { border-color: var(--cab-primary, #6366f1); }
  .step-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; background: #e0e7ff; color: #6366f1; flex-shrink: 0; }
  .service-item { border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
  .service-item:hover { border-color: #6366f1; background: #f5f3ff; }
  .service-item.selected { border-color: #6366f1; background: #eef2ff; }
  .cal-day { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .82rem; cursor: pointer; transition: background .1s; }
  .cal-day:hover { background: #e0e7ff; }
  .cal-day.today { background: #6366f1; color: #fff; font-weight: 700; }
  .cal-day.other { color: #cbd5e1; }
  .time-slot { border: 1.5px solid #e2e8f0; border-radius: 6px; padding: 5px 10px; font-size: .78rem; cursor: pointer; transition: all .1s; text-align: center; }
  .time-slot:hover { border-color: #6366f1; color: #6366f1; }
  .time-slot.selected { background: #6366f1; border-color: #6366f1; color: #fff; }
  .time-slot.busy { background: #f8fafc; color: #cbd5e1; pointer-events: none; text-decoration: line-through; }
</style>
{% endblock %}

{% block cabinet_content %}
<div x-data="{
  selectedServices: [],
  selectedMaster: null,
  selectedDate: 23,
  selectedTime: null,
  clientSearch: '',
  toggleService(id, name, price, duration) {
    const idx = this.selectedServices.findIndex(s => s.id === id);
    if (idx >= 0) this.selectedServices.splice(idx, 1);
    else this.selectedServices.push({id, name, price, duration});
  },
  hasService(id) { return this.selectedServices.some(s => s.id === id); },
  totalDuration() { return this.selectedServices.reduce((s, x) => s + x.duration, 0); },
  totalPrice() { return this.selectedServices.reduce((s, x) => s + x.price, 0); }
}">

  {# ── Header ── #}
  <div class="d-flex align-items-center justify-content-between mb-4">
      <h5 class="fw-semibold mb-0" style="font-size: 1.05rem;">New booking</h5>
      <span class="text-muted" style="font-size: .8rem;">Complete the steps below</span>
    </div>
    <a href="{% url 'codex_showcase:booking' %}" class="btn btn-sm btn-outline-secondary">
      <span class="bi bi-arrow-left me-1"></span> Back to schedule
    </a>
  </div>

  <div class="row g-4">

    {# ── Left column: steps 1-4 ── #}
    <div class="col-lg-8">

      {# STEP 1: Services #}
      <div class="step-card p-4 mb-3 active">
        <div class="d-flex align-items-center gap-2 mb-3">
          <div class="step-num">1</div>
          <span class="fw-semibold" style="font-size: .92rem;">Select Services</span>
          <span x-show="selectedServices.length" x-cloak class="badge rounded-pill ms-1" style="background: #eef2ff; color: #6366f1; font-size: .7rem;" x-text="selectedServices.length + ' selected'"></span>
        </div>

        {# Category tabs #}
        <div class="d-flex gap-2 flex-wrap mb-3">
          {% for cat in categories %}
          <button class="btn btn-sm {% if forloop.first %}btn-dark{% else %}btn-outline-secondary{% endif %}" style="font-size: .75rem; border-radius: 20px;">{{ cat.name }}</button>
          {% endfor %}
        </div>

        {# Services grid #}
        <div class="row g-2">
          {% for svc in services %}
          <div class="col-md-6">
            <div class="service-item" :class="{ selected: hasService({{ svc.id }}) }" @click="toggleService({{ svc.id }}, '{{ svc.name }}', {{ svc.price_raw }}, {{ svc.duration }})">
              <div class="d-flex justify-content-between align-items-start">
                <div class="fw-semibold" style="font-size: .83rem; line-height: 1.3;">{{ svc.name }}</div>
                <span x-show="hasService({{ svc.id }})" x-cloak class="bi bi-check-circle-fill text-primary ms-2 flex-shrink-0" style="font-size: .9rem;"></span>
              </div>
              <div class="d-flex justify-content-between mt-1">
                <span class="text-muted" style="font-size: .72rem;"><span class="bi bi-clock me-1"></span>{{ svc.duration }} min</span>
                <span class="fw-semibold" style="font-size: .8rem;">{{ svc.price }}</span>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>

      {# STEP 2: Master #}
      <div class="step-card p-4 mb-3">
        <div class="d-flex align-items-center gap-2 mb-3">
          <div class="step-num">2</div>
          <span class="fw-semibold" style="font-size: .92rem;">SPECIALIST</span>
        </div>
        <div class="row g-2">
          {% for s in staff_list %}
          <div class="col-auto">
            <div class="d-flex align-items-center gap-2 px-3 py-2 rounded-3 cursor-pointer"
                 :class="selectedMaster === {{ s.id }} ? 'border border-primary bg-light' : 'border'"
                 style="cursor: pointer; transition: all .15s;"
                 @click="selectedMaster = (selectedMaster === {{ s.id }} ? null : {{ s.id }})">
              <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold" style="width: 36px; height: 36px; font-size: .72rem; background: {{ s.color }}; flex-shrink: 0;">{{ s.initials }}</div>
              <div>
                <div class="fw-semibold" style="font-size: .83rem;">{{ s.name }}</div>
                <div class="text-muted" style="font-size: .7rem;">{{ s.specialty }}</div>
              </div>
              <span x-show="selectedMaster === {{ s.id }}" x-cloak class="bi bi-check-circle-fill text-primary ms-1" style="font-size: .9rem;"></span>
            </div>
          </div>
          {% endfor %}
          <div class="col-auto">
            <div class="d-flex align-items-center gap-2 px-3 py-2 rounded-3 border"
                 :class="selectedMaster === 0 ? 'border-primary bg-light' : ''"
                 style="cursor: pointer; transition: all .15s; color: #64748b;"
                 @click="selectedMaster = (selectedMaster === 0 ? null : 0)">
              <span class="bi bi-shuffle" style="font-size: .9rem;"></span>
              <span style="font-size: .83rem;">Any available specialist</span>
            </div>
          </div>
        </div>
      </div>

      {# STEP 3: Date & Time #}
      <div class="step-card p-4 mb-3">
        <div class="d-flex align-items-center gap-2 mb-3">
          <div class="step-num">3</div>
          <span class="fw-semibold" style="font-size: .92rem;">DATE AND TIME</span>
        </div>
        <div class="row g-4">
          {# Mini calendar #}
          <div class="col-auto">
            <div style="min-width: 240px;">
              <div class="d-flex align-items-center justify-content-between mb-3">
                <button class="btn btn-sm btn-outline-secondary" style="width: 28px; height: 28px; padding: 0;"><span class="bi bi-chevron-left" style="font-size: .65rem;"></span></button>
                <span class="fw-semibold" style="font-size: .85rem;">March 2026</span>
                <button class="btn btn-sm btn-outline-secondary" style="width: 28px; height: 28px; padding: 0;"><span class="bi bi-chevron-right" style="font-size: .65rem;"></span></button>
              </div>
              <div class="d-grid mb-1" style="grid-template-columns: repeat(7,1fr); display: grid; gap: 2px;">
                {% for d in weekdays %}<div class="text-center text-muted" style="font-size: .65rem; font-weight: 600; padding: 4px 0;">{{ d }}</div>{% endfor %}
              </div>
              <div style="display: grid; grid-template-columns: repeat(7,1fr); gap: 2px;">
                {% for day in cal_days %}
                <div class="cal-day {% if day.today %}today{% elif not day.current_month %}other{% endif %} justify-content-center"
                     :class="selectedDate === {{ day.num }} && {{ day.current_month|lower }} ? 'today' : ''"
                     @click="{% if day.current_month %}selectedDate = {{ day.num }}{% endif %}"
                     style="{% if not day.current_month %}cursor: default;{% endif %}">
                  {{ day.num }}
                </div>
                {% endfor %}
              </div>
            </div>
          </div>

          {# Time slots #}
          <div class="col">
            <div class="text-muted mb-2" style="font-size: .78rem;">Available time:</div>
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;">
              {% for slot in time_options %}
              <div class="time-slot {% if slot.busy %}busy{% endif %}"
                   :class="selectedTime === '{{ slot.time }}' ? 'selected' : ''"
                   @click="{% if not slot.busy %}selectedTime = (selectedTime === '{{ slot.time }}' ? null : '{{ slot.time }}'){% endif %}">
                {{ slot.time }}
              </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>

      {# STEP 4: Client #}
      <div class="step-card p-4">
        <div class="d-flex align-items-center gap-2 mb-3">
          <div class="step-num">4</div>
          <span class="fw-semibold" style="font-size: .92rem;">Client</span>
        </div>

        {# Search existing #}
        <div class="input-group mb-3" style="max-width: 400px;">
          <span class="input-group-text bg-white border-end-0" style="font-size: .85rem;"><span class="bi bi-search text-muted"></span></span>
          <input type="text" class="form-control border-start-0 ps-0" placeholder="Search by name or phone..." style="font-size: .84rem;" x-model="clientSearch">
        </div>

        {# Found clients (fake) #}
        <div class="mb-3">
          {% for c in recent_clients %}
          <div class="d-flex align-items-center gap-3 px-3 py-2 rounded-3 mb-1" style="cursor: pointer; border: 1.5px solid #e2e8f0; transition: border-color .15s;" onmouseenter="this.style.borderColor='#6366f1'" onmouseleave="this.style.borderColor='#e2e8f0'">
            <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold" style="width: 36px; height: 36px; font-size: .72rem; background: #6366f1; flex-shrink: 0;">{{ c.initials }}</div>
            <div class="flex-grow-1">
              <div class="fw-semibold" style="font-size: .84rem;">{{ c.name }}</div>
              <div class="text-muted" style="font-size: .72rem;">{{ c.phone }} · {{ c.visits }} visits</div>
            </div>
            <button class="btn btn-sm btn-outline-primary" style="font-size: .72rem;">Select</button>
          </div>
          {% endfor %}
        </div>

        <div class="text-muted mb-2" style="font-size: .78rem;">— or create new —</div>
        <div class="row g-2" style="max-width: 500px;">
          <div class="col-6"><input type="text" class="form-control form-control-sm" placeholder="First Name" style="font-size: .83rem;"></div>
          <div class="col-6"><input type="text" class="form-control form-control-sm" placeholder="Last Name" style="font-size: .83rem;"></div>
          <div class="col-6"><input type="text" class="form-control form-control-sm" placeholder="Phone" style="font-size: .83rem;"></div>
          <div class="col-6"><input type="email" class="form-control form-control-sm" placeholder="Email" style="font-size: .83rem;"></div>
        </div>

      </div>

    </div>

    {# ── Right column: summary ── #}
    <div class="col-lg-4">
      <div class="step-card p-4" style="position: sticky; top: 80px;">
        <div class="fw-semibold mb-3" style="font-size: .92rem;">Summary</div>

        {# Selected services list #}
        <div x-show="selectedServices.length === 0" x-cloak class="text-muted text-center py-3" style="font-size: .82rem;">
          <span class="bi bi-bag d-block mb-1" style="font-size: 1.5rem; opacity: .3;"></span>
          Select Services
        </div>
        <div x-show="selectedServices.length > 0" x-cloak>
          <template x-for="svc in selectedServices" :key="svc.id">
            <div class="d-flex justify-content-between align-items-start mb-2 pb-2" style="border-bottom: 1px solid #f1f5f9;">
              <div>
                <div style="font-size: .82rem; line-height: 1.3;" x-text="svc.name"></div>
                <div class="text-muted" style="font-size: .7rem;" x-text="svc.duration + ' min'"></div>
              </div>
              <span class="fw-semibold ms-2 flex-shrink-0" style="font-size: .82rem;" x-text="svc.price + ' $'"></span>
            </div>
          </template>

          <div class="d-flex justify-content-between mt-2 mb-1">
            <span class="text-muted" style="font-size: .78rem;">Duration</span>
            <span class="fw-semibold" style="font-size: .82rem;" x-text="totalDuration() + ' min'"></span>
          </div>
          <div class="d-flex justify-content-between mb-3">
            <span class="text-muted" style="font-size: .78rem;">Total</span>
            <span class="fw-semibold" style="font-size: .95rem; color: #6366f1;" x-text="totalPrice() + ' $'"></span>
          </div>
        </div>

        {# Master #}
        <div class="py-2 mb-2" style="border-top: 1px solid #f1f5f9;">
          <div class="d-flex justify-content-between">
            <span class="text-muted" style="font-size: .78rem;">SPECIALIST</span>
            <span style="font-size: .8rem;" x-text="selectedMaster === 0 ? 'Any' : selectedMaster ? '{{ staff_list.0.name }}' : '—'"></span>
          </div>
        </div>

        {# Date & Time #}
        <div class="py-2 mb-3" style="border-top: 1px solid #f1f5f9;">
          <div class="d-flex justify-content-between mb-1">
            <span class="text-muted" style="font-size: .78rem;">Date</span>
            <span style="font-size: .8rem;" x-text="selectedDate ? selectedDate + ' March 2026' : '—'"></span>
          </div>
          <div class="d-flex justify-content-between">
            <span class="text-muted" style="font-size: .78rem;">Time</span>
            <span style="font-size: .8rem;" x-text="selectedTime || '—'"></span>
          </div>
        </div>

        <button class="btn btn-primary w-100" style="font-size: .86rem; padding: 10px;">
          <span class="bi bi-check-lg me-1"></span> Confirm booking
        </button>
        <button class="btn btn-light w-100 mt-2" style="font-size: .82rem;" @click="selectedServices=[]; selectedMaster=null; selectedTime=null;">
          Reset
        </button>

      </div>
    </div>

  </div>

</div>
{% endblock %}