{% extends "dashboard/_shell.html" %}
{% block title %}درخواست مشاوره | مرکز راهبری کسب‌وکار{% endblock %}
{% block dash_content %}

<div class="dash-page-head dash-fade">
  <div>
    <div class="dash-eyebrow"><i></i> مشاوره تخصصی</div>
    <h1>درخواست مشاوره کسب‌وکار</h1>
    <p>مرحله به مرحله جلو بروید؛ در هر قدم فقط بخش مربوط به همان مرحله را می‌بینید و در پایان یک‌جا ثبت می‌شود.</p>
  </div>
  <a class="btn btn-secondary" href="{% url 'dashboard' %}">بازگشت به پنل</a>
</div>

<form method="post" class="dash-form-card reveal" id="consultWizard" novalidate>{% csrf_token %}

<div class="wizard-head">
  <div class="wizard-steps">
    <div class="wizard-step" data-step="0"><span class="w-num">۱</span><span class="w-label">اطلاعات فردی</span></div>
    <div class="wizard-step" data-step="1"><span class="w-num">۲</span><span class="w-label">کسب‌وکار</span></div>
    <div class="wizard-step" data-step="2"><span class="w-num">۳</span><span class="w-label">اینستاگرام</span></div>
    <div class="wizard-step" data-step="3"><span class="w-num">۴</span><span class="w-label">بازاریابی</span></div>
    <div class="wizard-step" data-step="4"><span class="w-num">۵</span><span class="w-label">جلسه مشاوره</span></div>
  </div>
</div>

<div class="wizard-panels">

  <div class="wizard-panel" data-panel="0">
    <div class="dash-section"><div class="dash-section-label"><span class="dash-section-num">01</span><h2>👤 اطلاعات فردی</h2></div>
    <div class="dash-form-grid">
    <div class="dash-field full"><label>{{ form.assessment_submission.label }} *</label>{{ form.assessment_submission }}{{ form.assessment_submission.errors }}<span class="dash-field-help">برای ثبت درخواست مشاوره باید ابتدا یک تست ارزیابی کسب‌وکار انجام داده باشید.</span><a class="assessment-required-link" href="{% url 'business_assessment' %}">اگر هنوز تست را انجام نداده‌اید، برای انجام تست کلیک کنید ←</a></div>
    <div class="dash-field"><label>{{ form.full_name.label }} *</label>{{ form.full_name }}{{ form.full_name.errors }}</div>
    <div class="dash-field"><label>{{ form.phone.label }} *</label>{{ form.phone }}{{ form.phone.errors }}</div>
    <div class="dash-field full"><label>{{ form.email.label }} *</label>{{ form.email }}{{ form.email.errors }}</div>
    </div></div>
    <div class="wizard-nav">
      <span class="wizard-count">مرحله ۱ از ۵</span>
      <button type="button" class="btn btn-primary btn-wizard-next">مرحله بعد ←</button>
    </div>
  </div>

  <div class="wizard-panel" data-panel="1">
    <div class="dash-section"><div class="dash-section-label"><span class="dash-section-num">02</span><h2>🏢 اطلاعات کسب‌وکار</h2></div>
    <div class="dash-form-grid">
    <div class="dash-field"><label>{{ form.brand_name.label }} *</label>{{ form.brand_name }}{{ form.brand_name.errors }}</div>
    <div class="dash-field"><label>{{ form.business_field.label }} *</label>{{ form.business_field }}{{ form.business_field.errors }}</div>
    <div class="dash-field"><label>{{ form.business_size.label }} *</label>{{ form.business_size }}{{ form.business_size.errors }}</div>
    <div class="dash-field"><label>{{ form.city_market.label }} *</label>{{ form.city_market }}{{ form.city_market.errors }}</div>
    </div></div>
    <div class="wizard-nav">
      <button type="button" class="btn btn-secondary btn-wizard-prev">→ مرحله قبل</button>
      <span class="wizard-count">مرحله ۲ از ۵</span>
      <button type="button" class="btn btn-primary btn-wizard-next">مرحله بعد ←</button>
    </div>
  </div>

  <div class="wizard-panel" data-panel="2">
    <div class="dash-section"><div class="dash-section-label"><span class="dash-section-num">03</span><h2>📱 اطلاعات اینستاگرام</h2></div>
    <div class="dash-form-grid">
    <div class="dash-field"><label>{{ form.instagram_id.label }}</label>{{ form.instagram_id }}{{ form.instagram_id.errors }}</div>
    <div class="dash-field"><label>{{ form.other_socials.label }}</label>{{ form.other_socials }}{{ form.other_socials.errors }}</div>
    <div class="dash-field full"><label>{{ form.products_services.label }} *</label>{{ form.products_services }}{{ form.products_services.errors }}</div>
    <div class="dash-field full"><label>{{ form.main_audience.label }} *</label>{{ form.main_audience }}{{ form.main_audience.errors }}</div>
    </div></div>
    <div class="wizard-nav">
      <button type="button" class="btn btn-secondary btn-wizard-prev">→ مرحله قبل</button>
      <span class="wizard-count">مرحله ۳ از ۵</span>
      <button type="button" class="btn btn-primary btn-wizard-next">مرحله بعد ←</button>
    </div>
  </div>

  <div class="wizard-panel" data-panel="3">
    <div class="dash-section"><div class="dash-section-label"><span class="dash-section-num">04</span><h2>📊 وضعیت پیج و بازاریابی</h2></div>
    <div class="dash-form-grid">
    <div class="dash-field full"><label>{{ form.current_instagram_marketing.label }} *</label>{{ form.current_instagram_marketing }}{{ form.current_instagram_marketing.errors }}</div>
    <div class="dash-field full"><label>{{ form.biggest_marketing_problem.label }} *</label>{{ form.biggest_marketing_problem }}{{ form.biggest_marketing_problem.errors }}</div>
    <div class="dash-field full"><label>{{ form.desired_result_3_6_months.label }} *</label>{{ form.desired_result_3_6_months }}{{ form.desired_result_3_6_months.errors }}</div>
    </div></div>
    <div class="wizard-nav">
      <button type="button" class="btn btn-secondary btn-wizard-prev">→ مرحله قبل</button>
      <span class="wizard-count">مرحله ۴ از ۵</span>
      <button type="button" class="btn btn-primary btn-wizard-next">مرحله بعد ←</button>
    </div>
  </div>

  <div class="wizard-panel" data-panel="4">
    <div class="dash-section"><div class="dash-section-label"><span class="dash-section-num">05</span><h2>🎯 خود جلسه مشاوره</h2></div>
    <div class="dash-form-grid">
    <div class="dash-field full"><label>{{ form.consultation_topic.label }} *</label>{{ form.consultation_topic }}{{ form.consultation_topic.errors }}</div>
    <div class="dash-field full"><label>{{ form.preferred_contact_time.label }} *</label>{{ form.preferred_contact_time }}<span class="dash-field-help">مثلاً: «شنبه تا چهارشنبه، ساعت ۱۶ تا ۱۹»</span>{{ form.preferred_contact_time.errors }}</div>
    </div></div>
    <div class="wizard-nav">
      <button type="button" class="btn btn-secondary btn-wizard-prev">→ مرحله قبل</button>
      <span class="dash-link-muted">موارد دارای * را کامل وارد کنید.</span>
      <button class="btn btn-primary" type="submit">ثبت درخواست مشاوره ✓</button>
    </div>
  </div>

</div>
</form>

{% endblock %}

{% block dash_extra_js %}
<script>
(function(){
  var form = document.getElementById('consultWizard');
  if(!form) return;
  var panels = Array.prototype.slice.call(form.querySelectorAll('.wizard-panel'));
  var steps = Array.prototype.slice.call(form.querySelectorAll('.wizard-step'));
  var current = 0;

  var errIndex = -1;
  panels.forEach(function(p, i){
    if(errIndex === -1 && p.querySelector('.errorlist')){ errIndex = i; }
  });
  if(errIndex > -1){ current = errIndex; }

  function render(){
    panels.forEach(function(p, i){ p.classList.toggle('active', i === current); });
    steps.forEach(function(s, i){
      s.classList.toggle('active', i === current);
      s.classList.toggle('done', i < current);
    });
    var card = form.closest('.dash-form-card') || form;
    var top = card.getBoundingClientRect().top + window.pageYOffset - 100;
    window.scrollTo({top: top, behavior:'smooth'});
  }

  form.querySelectorAll('.btn-wizard-next').forEach(function(btn){
    btn.addEventListener('click', function(){
      if(current < panels.length - 1){ current++; render(); }
    });
  });
  form.querySelectorAll('.btn-wizard-prev').forEach(function(btn){
    btn.addEventListener('click', function(){
      if(current > 0){ current--; render(); }
    });
  });
  steps.forEach(function(s, i){
    s.addEventListener('click', function(){ current = i; render(); });
  });

  render();
})();
</script>
{% endblock %}