{% extends "dashboard/_shell.html" %}
{% block title %}پنل کاربری | مرکز راهبری کسب‌وکار{% endblock %}
{% block dash_content %}

<div class="dash-hero dash-fade">
  <span class="dash-hero-badge"><i></i> دسترسی امن به حساب</span>
  <div class="dash-hero-user">
    <div class="dash-avatar">{{ request.user.username|first|upper }}</div>
    <div>
      <div class="dash-eyebrow"><i></i> خوش آمدید</div>
      <h1>سلام، {{ request.user.get_full_name|default:request.user.username }} 👋</h1>
      <p>از اینجا وضعیت درخواست‌های مشاوره، خدمت فعال و اطلاعات حساب خود را مدیریت می‌کنید.</p>
    </div>
  </div>
  <a class="btn btn-primary" href="{% url 'consultation_create' %}">+ درخواست مشاوره جدید</a>
</div>

<div class="dash-actions-title reveal"><span></span> مدیریت حساب کاربری</div>
<div class="dash-actions-grid">
  <a class="dash-action-card tilt-card reveal" href="{% url 'profile' %}">
    <div class="dash-action-icon">
      <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7"/></svg>
    </div>
    <div class="dash-action-body">
      <b>تغییر اطلاعات شخصی</b>
      <p>نام، نام خانوادگی و ایمیل حساب کاربری خود را ویرایش و به‌روزرسانی کنید.</p>
    </div>
    <span class="dash-action-arrow">←</span>
  </a>
  <a class="dash-action-card tilt-card is-assessment reveal" href="{% url 'business_assessment' %}">
    <div class="dash-action-icon">✦</div>
    <div class="dash-action-body">
      <b>ارزیابی کسب‌وکار</b>
      <p>تست ۲۵ سؤالی را انجام دهید و نتیجه، گلوگاه و مسیر پیشنهادی رشد را ببینید.</p>
    </div>
    <span class="dash-action-arrow">←</span>
  </a>
  <a class="dash-action-card tilt-card is-security reveal" href="{% url 'password_change' %}">
    <div class="dash-action-icon">
      <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
    </div>
    <div class="dash-action-body">
      <b>تغییر رمز عبور</b>
      <p>برای حفظ امنیت حساب، رمز عبور خود را به‌صورت دوره‌ای تغییر دهید.</p>
    </div>
    <span class="dash-action-arrow">←</span>
  </a>
</div>

<div class="assessment-dashboard-card reveal">
  <div class="assessment-dashboard-copy">
    <div class="dash-eyebrow"><i></i> ارزیابی تخصصی کسب‌وکار</div>
    <h2>وضعیت کسب‌وکارت را <span>دقیق بسنج.</span></h2>
    <p>با ارزیابی ۲۵ سؤالی، امتیاز، مرحله رشد، گلوگاه اصلی و مسیر پیشنهادی کسب‌وکارت را ببین.</p>
    <div class="assessment-dashboard-actions">
      <a class="btn btn-primary" href="{% url 'business_assessment' %}">{% if latest_assessment %}انجام دوباره ارزیابی{% else %}شروع ارزیابی{% endif %} ←</a>
      {% if latest_assessment %}<a class="btn btn-secondary" href="{% url 'business_assessment_result' latest_assessment.id %}">مشاهده آخرین نتیجه</a>{% endif %}
    </div>
  </div>
  <div class="assessment-dashboard-score">
    <small>آخرین امتیاز</small>
    {% if latest_assessment %}<strong data-count-target="{{ latest_assessment.score }}" data-count-duration="1200">0</strong><span>از ۱۰۰</span><b>{{ latest_assessment.stage }}</b>{% else %}<strong>۲۵</strong><span>سؤال تخصصی</span><b>شروع ارزیابی</b>{% endif %}
  </div>
</div>

<div class="dash-stats">
  <div class="dash-stat reveal tilt-card"><small>کل درخواست‌ها</small><strong data-count-target="{{ total_count }}">0</strong></div>
  <div class="dash-stat reveal tilt-card"><small>در حال بررسی</small><strong data-count-target="{{ reviewing_count }}">0</strong></div>
  <div class="dash-stat reveal tilt-card"><small>تماس گرفته‌شده</small><strong data-count-target="{{ contacted_count }}">0</strong></div>
  <div class="dash-stat reveal tilt-card"><small>تکمیل‌شده</small><strong data-count-target="{{ completed_count }}">0</strong></div>
</div>

<div class="dash-sub-card reveal">
  <div class="dash-panel-head">
    <div><h2>خدمت من</h2><p>وضعیت خدمتی که توسط تیم مدیریت برای حساب شما فعال شده است.</p></div>
    <a class="btn btn-secondary" href="{% url 'services' %}">مشاهده خدمات</a>
  </div>
  {% if active_subscription %}
  <div class="dash-sub-row">
    <div><div class="dash-sub-name">{{ active_subscription.service.name }}</div><div class="dash-sub-meta">پایان خدمت: {{ active_subscription.end_at|date:"Y/m/d H:i" }}</div></div>
    <div class="dash-sub-timer"><small>زمان باقی‌مانده</small><strong>{{ active_subscription.remaining_days }} روز</strong></div>
  </div>
  <div class="dash-sub-bar"><i data-bar-width="{{ subscription_progress }}" style="width:0%"></i></div>
  {% else %}
  <div class="dash-empty">در حال حاضر خدمت فعالی برای حساب شما ثبت نشده است.<br><a class="btn btn-secondary" style="margin-top:14px" href="{% url 'services' %}">مشاهده خدمات ما</a></div>
  {% endif %}
</div>

<div class="dash-panel reveal">
  <div class="dash-panel-head">
    <div><h2>درخواست‌های مشاوره من</h2><p>شماره تماس و زمان پیشنهادی شما در همین فهرست قابل مشاهده است.</p></div>
    <a class="btn btn-primary" href="{% url 'consultation_create' %}">ثبت درخواست جدید</a>
  </div>
  {% for c in consultations %}
  <a class="dash-row" href="{% url 'consultation_detail' c.id %}">
    <div class="dash-row-info"><b>{{ c.brand_name }}</b><small>{{ c.full_name }} · ثبت در {{ c.created_at|date:"Y/m/d H:i" }}</small><small>تماس: {{ c.phone }}</small></div>
    <div class="dash-row-meta"><strong>{{ c.preferred_contact_time }}</strong><small>زمان ترجیحی تماس</small><span class="badge {{ c.status }}">{{ c.get_status_display }}</span></div>
    <div><span class="btn btn-secondary">جزئیات ←</span></div>
  </a>
  {% empty %}
  <div class="dash-empty">هنوز درخواست مشاوره‌ای ثبت نکرده‌اید.<br><br><a class="btn btn-primary" href="{% url 'consultation_create' %}">اولین درخواست مشاوره را ثبت کنید</a></div>
  {% endfor %}
</div>

{% endblock %}
{% block dash_extra_js %}
<script>
(function(){
  var bars = document.querySelectorAll('[data-bar-width]');
  if (!bars.length) return;
  requestAnimationFrame(function(){
    setTimeout(function(){
      bars.forEach(function(bar){
        var w = parseFloat(bar.dataset.barWidth) || 0;
        bar.style.width = w + '%';
      });
    }, 150);
  });
})();
</script>
{% endblock %}