{% extends "cabinet/base_client.html" %}
{% load i18n %}

{% block title %}{{ client_page_title }}{% endblock %}

{% block cabinet_content %}
  <div class="d-flex flex-column gap-4">
    {% if messages %}
      <div>
        {% for message in messages %}
          <div class="alert alert-{{ message.tags|default:'info' }} border-0 shadow-sm mb-2" role="alert">
            {{ message }}
          </div>
        {% endfor %}
      </div>
    {% endif %}

    <div class="row g-4 align-items-start">
      <div class="col-xl-4">
        <div class="card border-0 shadow-sm overflow-hidden">
          <div class="card-body p-4 text-center">
            <div class="mx-auto mb-3 rounded-circle d-flex align-items-center justify-content-center fw-bold text-white"
                 style="width:96px;height:96px;background:var(--cab-primary);font-size:2rem;">
              {{ corner_summary.initials }}
            </div>
            <h1 class="h4 mb-1">{{ corner_summary.display_name }}</h1>
            <div class="text-muted mb-4">{{ corner_summary.subtitle }}</div>

            <div class="row g-3 pt-3 border-top">
              {% for stat in corner_summary.stats %}
                <div class="col-4">
                  <div class="fw-semibold fs-4 d-flex align-items-center justify-content-center gap-1">
                    {% if stat.icon %}<span class="bi {{ stat.icon }}" style="color:#f59e0b;font-size:1rem;"></span>{% endif %}
                    {{ stat.value }}
                  </div>
                  <div class="text-muted small">{{ stat.label }}</div>
                </div>
              {% endfor %}
            </div>
          </div>
        </div>

        <div class="card border-0 shadow-sm mt-4">
          <div class="card-body p-4">
            <div class="d-flex align-items-center justify-content-between mb-3">
              <h2 class="h6 mb-0">{% trans "Bonuses" %}</h2>
              <span class="badge rounded-pill text-bg-primary">{{ bonus_summary.tier }}</span>
            </div>
            <div class="d-flex align-items-end gap-2 mb-2">
              <div class="display-6 fw-semibold lh-1">{{ bonus_summary.points }}</div>
              <div class="text-muted pb-1">{% trans "points" %}</div>
            </div>
            <div class="progress" role="progressbar" aria-valuenow="{{ bonus_summary.progress_percent }}" aria-valuemin="0" aria-valuemax="100" style="height:8px;">
              <div class="progress-bar" style="width: {{ bonus_summary.progress_percent }}%; background: var(--cab-primary);"></div>
            </div>
            <div class="text-muted small mt-2">
              {{ bonus_summary.remaining_points }} {% trans "points to Platinum status" %}
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-8">
        <div class="card border-0 shadow-sm">
          <div class="card-body p-4">
            <div class="d-flex align-items-center justify-content-between mb-4">
              <h2 class="h5 mb-0">{% trans "Personal Data" %}</h2>
              <span class="badge rounded-pill text-bg-light">{% trans "Real profile fields" %}</span>
            </div>

            <form method="post" class="row g-3">
              {% csrf_token %}
              <div class="col-md-6">
                <label class="form-label text-muted small">{% trans "First Name" %}</label>
                <input type="text" name="first_name" class="form-control" value="{{ profile_form.first_name }}">
              </div>
              <div class="col-md-6">
                <label class="form-label text-muted small">{% trans "Last Name" %}</label>
                <input type="text" name="last_name" class="form-control" value="{{ profile_form.last_name }}">
              </div>
              <div class="col-md-6">
                <label class="form-label text-muted small">{% trans "Phone" %}</label>
                <input type="text" name="phone" class="form-control" value="{{ profile_form.phone }}">
              </div>
              <div class="col-md-6">
                <label class="form-label text-muted small">{% trans "Email" %}</label>
                <input type="email" name="email" class="form-control" value="{{ profile_form.email }}">
              </div>
              <div class="col-md-6">
                <label class="form-label text-muted small">{% trans "Date of Birth" %}</label>
                <input type="date" name="birth_date" class="form-control" value="{{ profile_form.birth_date }}">
              </div>
              <div class="col-md-6">
                <label class="form-label text-muted small">{% trans "Patronymic / Middle Name" %}</label>
                <input type="text" name="patronymic" class="form-control" value="{{ profile_form.patronymic }}">
              </div>
              <div class="col-12 d-flex justify-content-end pt-2">
                <button type="submit" class="btn btn-primary px-4">{% trans "Save" %}</button>
              </div>
            </form>
          </div>
        </div>

        <div class="card border-0 shadow-sm mt-4">
          <div class="card-body p-4">
            <div class="d-flex align-items-center justify-content-between mb-3">
              <h2 class="h6 mb-0">{% trans "Favorite Services" %}</h2>
              <span class="badge rounded-pill text-bg-light">{% trans "Mock demo data" %}</span>
            </div>
            <div class="d-flex flex-wrap gap-2">
              {% for service in favorite_services %}
                <span class="badge rounded-pill px-3 py-2"
                      style="background: color-mix(in srgb, var(--cab-primary) 12%, white); color: var(--cab-primary-dark);">
                  {{ service }}
                </span>
              {% endfor %}
              <span class="badge rounded-pill px-3 py-2 text-muted bg-light">+ Add</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}