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

{% block title %}My Corner{% endblock %}
{% block page_title %}My Corner{% endblock %}

{% block cabinet_content %}

<div class="row g-4">

  {# ─── Left col: avatar + quick info ─── #}
  <div class="col-md-4">

    <div class="card border-0 shadow-sm text-center p-4 mb-3">
      <div class="mx-auto mb-3 rounded-circle d-flex align-items-center justify-content-center fw-bold text-white"
           style="width:80px;height:80px;background:var(--cab-primary);font-size:1.75rem;">
        AI
      </div>
      <h6 class="fw-semibold mb-0">Anna Smith</h6>
      <div class="text-muted" style="font-size:.85rem;">Client since March 2025</div>
      <hr>
      <div class="d-flex justify-content-around text-center">
        <div>
          <div class="fw-bold">15</div>
          <div class="text-muted" style="font-size:.75rem;">Visits</div>
        </div>
        <div>
          <div class="fw-bold">$450</div>
          <div class="text-muted" style="font-size:.75rem;">Spent</div>
        </div>
        <div>
          <div class="fw-bold">⭐ 4.9</div>
          <div class="text-muted" style="font-size:.75rem;">Rating</div>
        </div>
      </div>
    </div>

    {# Loyalty card #}
    <div class="card border-0 shadow-sm p-3">
      <div class="d-flex align-items-center justify-content-between mb-2">
        <span class="fw-semibold" style="font-size:.9rem;">Bonuses</span>
        <span class="badge bg-primary">Gold</span>
      </div>
      <div class="fw-bold fs-4 mb-1">1,250 <span style="font-size:.9rem;font-weight:400;color:#64748b;">points</span></div>
      <div class="progress" style="height:6px;">
        <div class="progress-bar" style="width:62%;background:var(--cab-primary);"></div>
      </div>
      <div class="text-muted mt-1" style="font-size:.75rem;">750 points to Platinum status</div>
    </div>

  </div>

  {# ─── Right col: personal data form ─── #}
  <div class="col-md-8">

    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0">Personal Data</h6>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label text-muted" style="font-size:.8rem;">First Name</label>
            <input type="text" class="form-control" value="Anna">
          </div>
          <div class="col-md-6">
            <label class="form-label text-muted" style="font-size:.8rem;">Last Name</label>
            <input type="text" class="form-control" value="Smith">
          </div>
          <div class="col-md-6">
            <label class="form-label text-muted" style="font-size:.8rem;">Phone</label>
            <input type="tel" class="form-control" value="+1 (555) 123-4567">
          </div>
          <div class="col-md-6">
            <label class="form-label text-muted" style="font-size:.8rem;">Email</label>
            <input type="email" class="form-control" value="anna@example.com">
          </div>
          <div class="col-md-6">
            <label class="form-label text-muted" style="font-size:.8rem;">Date of Birth</label>
            <input type="date" class="form-control" value="1990-05-15">
          </div>
          <div class="col-md-6">
            <label class="form-label text-muted" style="font-size:.8rem;">Gender</label>
            <select class="form-select">
              <option selected>Female</option>
              <option>Male</option>
              <option>Not specified</option>
            </select>
          </div>
          <div class="col-12 text-end">
            <button class="btn btn-primary">Save</button>
          </div>
        </div>
      </div>
    </div>

    {# Preferred services #}
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0">Favorite Services</h6>
      </div>
      <div class="card-body d-flex flex-wrap gap-2">
        <span class="badge rounded-pill" style="background:#ede9fe;color:#7c3aed;padding:.5rem 1rem;">Haircut</span>
        <span class="badge rounded-pill" style="background:#ede9fe;color:#7c3aed;padding:.5rem 1rem;">Coloring</span>
        <span class="badge rounded-pill" style="background:#ede9fe;color:#7c3aed;padding:.5rem 1rem;">Manicure</span>
        <span class="badge rounded-pill" style="background:#f1f5f9;color:#64748b;padding:.5rem 1rem;">+ Add</span>
      </div>
    </div>

  </div>

</div>

{% endblock %}