{% extends "base.html" %}

{% block title %}جزئیات کیس {{ case.patient_name }} - لابراتوار احسان{% endblock %}
{% block page_title %}<i class="bi bi-folder2-open ms-1"></i> جزئیات کیس{% endblock %}

{% block topbar_actions %}
  <a href="{{ url_for('invoice_view', case_id=case.id) }}" class="btn btn-outline-primary">
    <i class="bi bi-receipt ms-1"></i> فاکتور
  </a>
  <a href="{{ url_for('case_edit', case_id=case.id) }}" class="btn btn-primary">
    <i class="bi bi-pencil ms-1"></i> ویرایش
  </a>
  <button type="button" class="btn btn-outline-danger"
          onclick="confirmDelete('{{ url_for('case_delete', case_id=case.id) }}', 'آیا از حذف کیس بیمار «{{ case.patient_name }}» مطمئن هستید؟')">
    <i class="bi bi-trash ms-1"></i> حذف
  </button>
{% endblock %}

{% block content %}
<div class="row g-4">

  <!-- ستون چپ: اطلاعات + مراحل + هزینه‌ها -->
  <div class="col-lg-8">

    <!-- اطلاعات اصلی کیس -->
    <div class="eh-card mb-4" data-case-row>
      <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
        <div>
          <h4 class="fw-bold mb-1">{{ case.patient_name }}</h4>
          <div class="text-muted">دکتر:
            <a href="{{ url_for('doctor_detail', doctor_name=case.doctor_name) }}">{{ case.doctor_name }}</a>
          </div>
        </div>
        <div class="text-start">
          <div class="text-muted small mb-1">شماره سفارش</div>
          <div class="fw-bold fs-5">{{ case.order_number | fa_num }}</div>
        </div>
      </div>
      <div class="row g-3 mb-3">
        <div class="col-6 col-md-3">
          <div class="text-muted small">نوع کار</div>
          <div class="fw-semibold">{{ case.work_type }}</div>
        </div>
        <div class="col-6 col-md-3">
          <div class="text-muted small">تعداد واحد</div>
          <div class="fw-semibold">{{ case.units | fa_num }}</div>
        </div>
        <div class="col-6 col-md-3">
          <div class="text-muted small">رنگ دندان</div>
          <div class="fw-semibold">{{ case.tooth_color or '-' }}</div>
        </div>
        <div class="col-6 col-md-3">
          <div class="text-muted small">مبلغ فاکتور</div>
          <div class="fw-semibold">{{ case.amount | toman_fa }}</div>
        </div>
        <div class="col-6 col-md-3">
          <div class="text-muted small">تخفیف</div>
          <div class="fw-semibold text-danger">{{ case.discount | toman_fa }}</div>
        </div>
        <div class="col-6 col-md-3">
          <div class="text-muted small">مبلغ خالص</div>
          <div class="fw-semibold text-success">{{ net_amount | toman_fa }}</div>
        </div>
        <div class="col-6 col-md-3">
          <div class="text-muted small">تاریخ ثبت</div>
          <div class="fw-semibold">{{ case.register_date | jalali | fa_num }}</div>
        </div>
        <div class="col-6 col-md-3">
          <div class="text-muted small">تاریخ تحویل</div>
          <div class="fw-semibold">
            {% if case.delivery_date %}{{ case.delivery_date | jalali | fa_num }}{% else %}تعیین نشده{% endif %}
          </div>
        </div>
      </div>
      {% if case.description %}
      <div class="mt-3">
        <div class="text-muted small mb-1">توضیحات</div>
        <div class="p-3 bg-light rounded-3">{{ case.description }}</div>
      </div>
      {% endif %}
    </div>

    <!-- مراحل کاری -->
    <div class="eh-card mb-4">
      <h6 class="fw-bold mb-3"><i class="bi bi-signpost-split ms-1"></i> مراحل کاری</h6>
      <div class="d-flex flex-wrap gap-2">
        {% for stage in STAGES %}
          <span class="badge rounded-pill px-3 py-2 {% if stage.key == case.status %}text-white{% else %}text-muted bg-light{% endif %}"
                style="{% if stage.key == case.status %}background-color:{{ stage.color }};{% endif %} border:1px solid {% if stage.key == case.status %}{{ stage.color }}{% else %}#e2e2ea{% endif %};">
            <i class="bi {{ stage.icon }} ms-1"></i>{{ stage.label }}
          </span>
        {% endfor %}
      </div>
    </div>

    <!-- هزینه‌ها و محاسبه سود -->
    <div class="eh-card">
      <h6 class="fw-bold mb-3"><i class="bi bi-calculator ms-1"></i> هزینه‌ها و محاسبه سود</h6>

      <!-- فرم اضافه کردن هزینه -->
      <form method="post" action="{{ url_for('cost_add', case_id=case.id) }}" class="row g-2 mb-4">
        <div class="col-md-5">
          <input type="text" name="title" class="form-control form-control-sm" placeholder="عنوان هزینه (مثلاً: پیک، دنت...)" required>
        </div>
        <div class="col-md-4">
          <input type="text" inputmode="numeric" id="costAmountInput" name="amount" class="form-control form-control-sm" placeholder="مبلغ (تومان)" required>
        </div>
        <div class="col-md-3">
          <button type="submit" class="btn btn-sm btn-outline-primary w-100">
            <i class="bi bi-plus ms-1"></i> افزودن هزینه
          </button>
        </div>
      </form>

      {% if costs %}
      <table class="eh-table table table-sm mb-3">
        <thead><tr><th>عنوان هزینه</th><th>مبلغ</th><th></th></tr></thead>
        <tbody>
          {% for c in costs %}
          <tr>
            <td>{{ c.title }}</td>
            <td>{{ c.amount | toman_fa }}</td>
            <td>
              <form method="post" action="{{ url_for('cost_delete', case_id=case.id, cost_id=c.id) }}"
                    onsubmit="return confirm('حذف شود؟')">
                <button class="btn btn-xs btn-outline-danger py-0 px-2">✕</button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% endif %}

      <!-- خلاصه مالی -->
      <div class="rounded-3 p-3" style="background:#f4f5fb;">
        <div class="row g-2 text-center">
          <div class="col-4">
            <div class="text-muted small">درآمد خالص</div>
            <div class="fw-bold text-primary">{{ net_amount | toman_fa }}</div>
          </div>
          <div class="col-4">
            <div class="text-muted small">جمع هزینه‌ها</div>
            <div class="fw-bold text-danger">{{ total_costs | toman_fa }}</div>
          </div>
          <div class="col-4">
            <div class="text-muted small">سود / ضرر</div>
            <div class="fw-bold {% if profit >= 0 %}text-success{% else %}text-danger{% endif %} fs-5">
              {% if profit < 0 %}−{% endif %}{{ profit | abs | toman_fa }}
              <span class="small">{% if profit >= 0 %}✅{% else %}❌{% endif %}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- ستون راست: وضعیت + عملیات -->
  <div class="col-lg-4">
    <div class="eh-card mb-4">
      <h6 class="fw-bold mb-3">وضعیت کیس</h6>
      <select class="eh-status-select form-select mb-3" data-case-id="{{ case.id }}"
              style="background-color: {{ stage_color(case.status) }};">
        {% for stage in STAGES %}
          <option value="{{ stage.key }}" {% if case.status == stage.key %}selected{% endif %}>{{ stage.label }}</option>
        {% endfor %}
      </select>
      <div class="progress" style="height:10px;">
        <div class="progress-bar eh-progress-bar-fill" role="progressbar"
             style="width:{{ stage_progress_percent(case.status) }}%; background-color:{{ stage_color(case.status) }};"></div>
      </div>
      <div class="text-muted small mt-2">{{ stage_progress_percent(case.status) | fa_num }}٪ پیشرفت</div>
    </div>

    <div class="eh-card">
      <h6 class="fw-bold mb-3">عملیات سریع</h6>
      <div class="d-grid gap-2">
        <a href="{{ url_for('invoice_view', case_id=case.id) }}" class="btn btn-outline-primary">
          <i class="bi bi-receipt ms-1"></i> مشاهده فاکتور
        </a>
        <a href="{{ url_for('doctor_detail', doctor_name=case.doctor_name) }}" class="btn btn-outline-info">
          <i class="bi bi-person-lines-fill ms-1"></i> حساب دکتر
        </a>
        <a href="{{ url_for('case_edit', case_id=case.id) }}" class="btn btn-outline-secondary">
          <i class="bi bi-pencil ms-1"></i> ویرایش
        </a>
        <a href="{{ url_for('cases_list') }}" class="btn btn-light">
          <i class="bi bi-arrow-right ms-1"></i> بازگشت
        </a>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block extra_scripts %}
<script>
/* فرمت‌دهی مبلغ در فیلد هزینه */
const costInput = document.getElementById('costAmountInput');
if (costInput) {
  costInput.addEventListener('input', function() {
    const raw = this.value.replace(/,/g, '');
    if (!isNaN(raw) && raw !== '') this.value = parseInt(raw).toLocaleString('en');
  });
  costInput.closest('form').addEventListener('submit', function() {
    costInput.value = costInput.value.replace(/,/g, '');
  });
}
</script>
{% endblock %}