  {% extends '_base.html' %}
  {% load static %}
  {% load processes_tags %}
  {% load humanize %}
  {% load accounts_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' %}">
  <!-- Persian Date Picker CSS -->
  <link rel="stylesheet" href="https://unpkg.com/persian-datepicker@latest/dist/css/persian-datepicker.min.css">
  <style>
  @media print {
    .no-print { display: none !important; }
  }
  </style>
  {% endblock %}
  
  {% block content %}
  {% include '_toasts.html' %}
  {% csrf_token %}
  <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 no-print">
          <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>
          <div class="d-flex gap-2">
            <a class="btn btn-outline-secondary" target="_blank" href="{% url 'certificates:certificate_print' instance.id %}"><i class="bx bx-printer"></i> پرینت</a>

            <a href="{% url 'processes:request_list' %}" class="btn btn-outline-secondary">بازگشت</a>
          </div>
        </div>
  
        <div class="bs-stepper wizard-vertical vertical mt-2 no-print">
          {% stepper_header instance step %}
          <div class="bs-stepper-content">

            <div class="card">
              <div class="card-body">
                <div class="text-center mb-3">
                  {% if template.company and template.company.logo %}
                    <img src="{{ template.company.logo.url }}" alt="logo" style="max-height:80px">
                  {% endif %}
                  <h5 class="mt-2">{{ cert.rendered_title }}</h5>
                  {% if template.company %}<div class="text-muted">{{ template.company.name }}</div>{% endif %}
                </div>
                <div class="mt-3" style="white-space:pre-line; line-height:1.9;">
                  {{ cert.rendered_body|safe }}
                </div>
                <div class="mt-4 d-flex justify-content-between align-items-end">
                  <div>
                    <div>تاریخ صدور: {{ cert.issued_at }}</div>
                  </div>
                  <div class="text-center">
                    {% if template.company and template.company.signature %}
                      <img src="{{ template.company.signature.url }}" alt="seal" style="max-height:100px">
                    {% endif %}
                    <div>مهر و امضای شرکت</div>
                  </div>
                </div>
              </div>
              <div class="card-footer d-flex justify-content-between">
                {% if previous_step %}
                  <a href="{% url 'processes:step_detail' instance.id previous_step.id %}" class="btn btn-label-secondary">قبلی</a>
                {% else %}<span></span>{% endif %}
                <form method="post">
                  {% csrf_token %}
                  {% if request.user|is_broker %}
                    <button class="btn btn-primary" type="submit">تایید و پایان</button>
                  {% else %}
                    <button class="btn btn-primary" type="button" disabled>تایید و پایان</button>
                  {% endif %}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}


