{% extends 'base.html' %}{% load static %}
{% block title %}{{ page_title }}{% endblock %}
{% block content %}
<link rel="stylesheet" href="{% static 'css/ticket-composer.css' %}?v={{ static_asset_version }}">
<link rel="stylesheet" href="{% static 'css/ticket-composer-v2.css' %}?v={{ static_asset_version }}">
<div class="staff-create-page">
  <header class="create-page-head"><div><a class="create-back" href="{% url 'staff_tickets:list' %}">→ بازگشت به میز کار</a><p class="eyebrow">ایجاد پرونده از طرف {{ staff_unit.name|default:'واحد سازمانی' }}</p><h1>ثبت تیکت برای مشتری</h1><p>ابتدا مشتری را شناسایی کنید، سپس موضوع و پیام کامل را ثبت کنید. مشتری یک لینک امن برای مشاهده دریافت می‌کند.</p></div><a class="customer-directory-link" href="{% url 'staff_tickets:customers' %}"><span>♙</span><div><b>برنامه مشتریان</b><small>جست‌وجو و مشاهده سوابق</small></div></a></header>
  <ol class="create-progress" aria-label="مراحل ثبت تیکت"><li class="active"><span>۱</span><div><b>انتخاب مشتری</b><small>جست‌وجو یا ثبت شماره جدید</small></div></li><li><span>۲</span><div><b>تعریف درخواست</b><small>دسته‌بندی و موضوع</small></div></li><li><span>۳</span><div><b>پیام و ارسال</b><small>شرح کامل و پیوست‌ها</small></div></li></ol>
  <section class="customer-ticket-create" data-customer-picker data-search-url="{% url 'staff_tickets:customer_search' %}" data-location-picker data-locations-url="{% static 'data/iran-locations.json' %}">
    <form method="post" enctype="multipart/form-data" data-disable-on-submit data-ticket-composer class="assisted-ticket-form">{% csrf_token %}{{ form.customer_id }}
      {% if form.non_field_errors %}<div class="create-form-errors" role="alert">{{ form.non_field_errors }}</div>{% endif %}
      <div class="create-form-main">
        <section class="create-section customer-section"><header class="create-section-head"><span class="section-number">۱</span><div><h2>مشتری این تیکت کیست؟</h2><p>در بانک مشتریان جست‌وجو کنید یا شماره موبایل را مستقیماً وارد کنید.</p></div></header>
          <label class="customer-search-box"><span>جست‌وجوی نام یا موبایل</span><div class="search-input-shell"><span aria-hidden="true">⌕</span><input type="search" data-customer-search autocomplete="off" placeholder="مثلاً محمد رضایی یا 0912…"></div><small>نتایج پس از واردکردن حداقل دو حرف یا رقم نمایش داده می‌شوند.</small></label><div class="customer-search-results" data-customer-results hidden></div>
          <div class="selected-customer" data-selected-customer hidden aria-live="polite"><span class="selected-customer-icon">✓</span><div><b data-selected-name></b><span data-selected-mobile dir="ltr"></span></div><div><span data-selected-location></span><small data-selected-stats></small></div><button type="button" data-clear-customer>تغییر مشتری</button></div><div class="customer-lookup-status" data-customer-status role="status">شماره موبایل را وارد کنید تا عضویت مشتری بررسی شود.</div>
          <div class="field-grid customer-fields"><label class="field-control"><span>{{ form.customer_mobile.label }} <em>*</em></span>{{ form.customer_mobile }}{{ form.customer_mobile.errors }}<small>شماره به شکل 09xxxxxxxxx</small></label><label class="field-control"><span>{{ form.stakeholder_type.label }}</span>{{ form.stakeholder_type }}{{ form.stakeholder_type.errors }}</label><label class="field-control" data-new-customer-field><span>{{ form.first_name.label }} <em>*</em></span>{{ form.first_name }}{{ form.first_name.errors }}</label><label class="field-control" data-new-customer-field><span>{{ form.last_name.label }} <em>*</em></span>{{ form.last_name }}{{ form.last_name.errors }}</label><label class="field-control"><span>{{ form.organization_name.label }}</span>{{ form.organization_name }}{{ form.organization_name.errors }}</label><label class="field-control"><span>{{ form.groups.label }}</span>{{ form.groups }}{{ form.groups.errors }}<small>{{ form.groups.help_text }}</small></label><label class="field-control"><span>{{ form.province.label }} <i>اختیاری</i></span>{{ form.province }}{{ form.province.errors }}</label><label class="field-control"><span>{{ form.city.label }} <i>اختیاری</i></span>{{ form.city }}{{ form.city.errors }}</label></div><datalist id="ticket-province-options" data-province-options></datalist><datalist id="ticket-city-options" data-city-options></datalist><p class="location-hint" data-location-hint>استان و شهر اختیاری هستند.</p>
        </section>
        <section class="create-section"><header class="create-section-head"><span class="section-number">۲</span><div><h2>مالکیت و موضوع درخواست</h2><p>واحد ایجادکننده به‌صورت امن از عضویت اصلی شما تعیین می‌شود.</p></div></header>{{ form.unit }}{{ form.unit.errors }}<div class="field-grid"><div class="field-control"><span>{{ form.unit.label }}</span><strong data-staff-unit data-unit-id="{{ staff_unit.pk|default:'' }}">{{ staff_unit.name|default:'واحد فعالی برای کاربر تعریف نشده' }}</strong><small>این مقدار قابل تغییر نیست.</small></div><label class="field-control"><span>{{ form.category.label }} <em>*</em></span>{{ form.category }}{{ form.category.errors }}</label><label class="field-control"><span>{{ form.subject.label }} <em>*</em></span>{{ form.subject }}{{ form.subject.errors }}<small>نمونه: پیگیری پیش‌فاکتور لوله پنج‌لایه</small></label></div></section>
        <section class="create-section message-section"><header class="create-section-head"><span class="section-number">۳</span><div><h2>پیام کامل کارشناس</h2><p>موضوع، اقدام انجام‌شده و انتظار از مشتری را یک‌جا و کامل توضیح دهید.</p></div></header><label class="field-control message-field"><span>{{ form.body.label }} <em>*</em></span>{{ form.body }}{{ form.body.errors }}<small>این متن نخستین پیام رسمی پرونده است و برای مشتری نمایش داده می‌شود.</small></label><div class="upload-zone media-picker staff-attachment-picker"><div class="attachment-picker-copy"><span class="attachment-icon">＋</span><div><b>{{ form.files.label }}</b><small>چند عکس، فایل یا سند را انتخاب کنید؛ پیش از ثبت می‌توانید هر مورد را جداگانه حذف کنید.</small></div></div><div class="media-picker-actions"><label class="media-picker-button gallery-button" for="staff-ticket-gallery-input">▣ انتخاب عکس از گالری</label><label class="media-picker-button" for="staff-ticket-file-input">＋ انتخاب فایل</label></div><input id="staff-ticket-gallery-input" type="file" accept="image/*" multiple data-gallery-input><input id="staff-ticket-file-input" type="file" multiple data-document-input><span class="canonical-files">{{ form.files }}</span>{{ form.files.errors }}<small class="compression-note" data-compression-status>تصاویر بزرگ پیش از ارسال، روی دستگاه شما بهینه و کم‌حجم می‌شوند.</small><div class="file-preview" data-file-preview aria-live="polite"></div></div></section>
      </div>
      <aside class="create-summary"><div class="summary-sticky"><header><span>خلاصه پرونده</span><small>پیش از ارسال بررسی کنید</small></header><dl><div><dt>مشتری</dt><dd data-summary-customer>هنوز انتخاب نشده</dd></div><div><dt>موضوع</dt><dd data-summary-subject>هنوز وارد نشده</dd></div><div><dt>دسته‌بندی</dt><dd data-summary-category>انتخاب نشده</dd></div></dl><div class="secure-delivery"><span>⌁</span><p><b>ارسال امن به مشتری</b><small>پس از ثبت، لینک ورود امن از طریق پیامک در صف ارسال قرار می‌گیرد.</small></p></div><button type="submit" class="create-submit"><span>ثبت تیکت و ارسال لینک امن</span><small>این اقدام یک پرونده جدید ایجاد می‌کند</small></button><a href="{% url 'staff_tickets:list' %}" class="create-cancel">انصراف و بازگشت</a></div></aside>
    </form>
  </section>
</div>
<script defer src="{% static 'vendor/compressor.min.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/location-picker.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/staff-customer-picker.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/attachment-uploader.js' %}?v={{ static_asset_version }}"></script>
{% endblock %}