{% load i18n %}
{% comment %}
  Widget: Booking Summary (Floating)
  Expected context: `summary` (BookingSummaryData)
{% endcomment %}

<div class="cab-summary-card p-4">
  <div class="fw-semibold mb-3" style="font-size: .92rem;">Summary</div>


  <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, index) in selectedServices" :key="svc.id">
      <div class="mb-3 pb-2" style="border-bottom: 1px solid #f1f5f9;">
        <div class="d-flex justify-content-between align-items-start mb-1">
          <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>

        <!-- Per-service Master Selection -->
        <div class="mt-2">
          <label class="text-muted mb-1" style="font-size: .65rem; text-transform: uppercase; letter-spacing: .05em;">{% trans "Master" %}</label>
          <select class="form-select form-select-sm"
                  style="font-size: .72rem; padding: 2px 8px; border-radius: 4px;"
                  x-model="svc.masterId">
            <option value="">{% trans "Any available" %}</option>
            {% for master in summary.masters %}
            <option value="{{ master.id }}">{{ master.name }}</option>
            {% endfor %}
          </select>
        </div>
      </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: var(--cab-primary);" x-text="totalPrice() + ' $'"></span>
    </div>
  </div>

  <div class="py-2 mb-3" x-show="selectedServices.length > 0" x-cloak style="border-top: 1px solid #f1f5f9;">
    <div class="text-muted mb-2" style="font-size: .65rem; text-transform: uppercase; letter-spacing: .05em;">Chain preview</div>
    <template x-for="step in chainPreview()" :key="step.id + '-' + step.start">
      <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
          <div class="fw-semibold text-dark" style="font-size: .78rem;" x-text="step.name"></div>
          <div class="text-muted" style="font-size: .7rem;" x-text="step.start + ' → ' + step.end"></div>
        </div>
        <span class="text-muted" style="font-size: .72rem;" x-text="step.masterName || 'Any available'"></span>
      </div>
    </template>
  </div>

  <!-- Date/Time Reminder -->
  <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="selectedDateText() || '—'"></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>

  <!-- Client Reminder (New) -->
  <div class="py-2 mb-4" x-show="selectedClient || (clientFName.trim().length > 0)" x-cloak style="border-top: 1px solid #f1f5f9;">
    <div class="text-muted mb-1" style="font-size: .65rem; text-transform: uppercase; letter-spacing: .05em;">Client</div>
    <div class="d-flex align-items-center">
      <div class="avatar-circle-sm me-2 d-flex align-items-center justify-content-center text-white fw-bold bg-primary"
           style="width: 24px; height: 24px; border-radius: 50%; font-size: 0.65rem;"
           x-text="selectedClient ? selectedClient.name.split(' ').map(n=>n[0]).join('') : (clientFName[0] || '?')">
      </div>
      <div>
        <div class="fw-semibold text-dark" style="font-size: .82rem; line-height: 1.2;"
             x-text="selectedClient ? selectedClient.name : (clientFName + ' ' + clientLName).trim()"></div>
        <div class="text-muted" style="font-size: .7rem;" x-text="selectedClient ? selectedClient.phone : clientPhone"></div>
      </div>
    </div>
  </div>

  <form method="POST" :action="'{{ summary.confirm_url }}'">
    {% csrf_token %}
    <input type="hidden" name="data" :value="JSON.stringify({client: selectedClient || {name: clientFName + ' ' + clientLName, phone: clientPhone, email: clientEmail}, services: selectedServices, date: selectedDate, time: selectedTime})">
    <button type="submit" class="btn btn-primary w-100"
            :disabled="selectedServices.length === 0 || !selectedDate || !selectedTime || (!selectedClient && !clientFName)"
            style="font-size: .86rem; padding: 10px;">
      <span class="bi bi-check-lg me-1"></span> {% trans "Confirm booking" %}
    </button>
  </form>

  <button class="btn btn-light w-100 mt-2" style="font-size: .82rem;" @click="resetAll()">
    Reset
  </button>
</div>