{% extends '_base.html' %}
{% load static %}
{% load processes_tags %}

{% block sidebar %}
    {% include 'sidebars/admin.html' %}
{% endblock sidebar %}

{% block navbar %}
    {% include 'navbars/admin.html' %}
{% endblock navbar %}

{% block title %}{{ step.name }} - درخواست {{ instance.code }}{% endblock %}

{% block style %}
<link rel="stylesheet" href="{% static 'assets/vendor/libs/bs-stepper/bs-stepper.css' %}">
{% endblock %}

{% block content %}
{% include '_toasts.html' %}
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="row">
    <div class="col-12 mb-4">
      <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
          <h4 class="mb-1">{{ step.name }}: {{ instance.process.name }}</h4>
          <small class="text-muted d-block">
            اشتراک آب: {{ instance.well.water_subscription_number|default:"-" }}
            | نماینده: {{ instance.representative.profile.national_code|default:"-" }}
          </small>
        </div>
        <a href="{% url 'processes:request_list' %}" class="btn btn-outline-secondary">بازگشت</a>
      </div>

      <div class="bs-stepper wizard-vertical vertical mt-2">
        {% stepper_header instance step %}
        
        <div class="bs-stepper-content">
          <div class="content active dstepper-block">
            <div class="content-header mb-3">
              <h6 class="mb-0">{{ step.name }}</h6>
              <small>{{ step.description|default:' ' }}</small>
            </div>
            
            <div class="row g-3">
              <div class="col-12">
                <div class="alert alert-info">
                  <h6>وضعیت مرحله: 
                    {% if step_instance %}
                      {{ step_instance.get_status_display_with_color|safe }}
                    {% else %}
                      <span class="badge bg-secondary">در انتظار</span>
                    {% endif %}
                  </h6>
                  <p class="mb-0">فرم این مرحله بعداً پیاده‌سازی می‌شود.</p>
                  
                  {% if step_instance and step_instance.notes %}
                    <hr>
                    <strong>یادداشت‌ها:</strong>
                    <p class="mb-0">{{ step_instance.notes }}</p>
                  {% endif %}
                </div>
              </div>
              
              <div class="col-12 d-flex justify-content-between">
                {% if previous_step %}
                  <a href="{% url 'processes:step_detail' instance.id previous_step.id %}" 
                     class="btn btn-label-secondary">
                    <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
                    <span class="align-middle d-sm-inline-block d-none">قبلی</span>
                  </a>
                {% else %}
                  <span></span>
                {% endif %}
                
                {% if next_step %}
                  <a href="{% url 'processes:step_detail' instance.id next_step.id %}" 
                     class="btn btn-primary">
                    <span class="align-middle d-sm-inline-block d-none me-sm-1">بعدی</span>
                    <i class="bx bx-chevron-right bx-sm me-sm-n2"></i>
                  </a>
                {% else %}
                  <button class="btn btn-success" type="button">اتمام</button>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block script %}
<script src="{% static 'assets/vendor/libs/bs-stepper/bs-stepper.js' %}"></script>
{% endblock %}
