{% extends "./baseStore.html" %}
{% load custom_tags %}
{% load static %}

{% block storeBody %}
  <div class="container is-fluid pt-3">
    
    {% if messages %}
      <div class="mb-4">
        {% for message in messages %}
          <div class="notification {% if message.tags == 'success' %}is-success{% elif message.tags == 'error' %}is-danger{% elif message.tags == 'warning' %}is-warning{% else %}is-info{% endif %} is-light">
            <button class="delete"></button>
            {{ message }}
          </div>
        {% endfor %}
      </div>
    {% endif %}

    <div class="box mb-5 border-top-primary">
      <h3 class="title is-5 has-text-primary mb-3">
        📥 بارهای ورودی در انتظار تایید شما
        <span class="tag is-primary is-rounded ml-2">{{ incoming_pending.count }}</span>
      </h3>
      
      {% if incoming_pending %}
      <div class="table-container">
        <table class="table is-bordered is-striped is-narrow is-fullwidth has-text-centered">
          <thead class="has-background-light">
            <tr>
              <th>کد درخواست</th>
              <th>کالا</th>
              <th>تعداد</th>
              <th>ارسال کننده (انبار مبدا)</th>
              <th>کاربر ثبت‌کننده</th>
              <th>زمان ارسال</th>
              <th style="min-width: 180px;">اقدام انباردار</th>
            </tr>
          </thead>
          <tbody>
            {% for item in incoming_pending %}
            <tr>
              <td class="has-text-weight-bold">#{{ item.id }}</td>
              <td class="has-text-weight-bold has-text-link">{{ item.product.product_name }}</td>
              <td class="is-size-5 has-text-weight-bold has-text-success">{{ item.quantity }}</td>
              <td>{{ item.source_store.store_name }}</td>
              <td>{{ item.requester.first_name }} {{ item.requester.last_name }}</td>
              <td dir="ltr">{{ item.created_at|toJalali }}</td>
              <td>
                <div class="buttons is-centered m-0">
                  <form action="{% url 'admin_panel:process_transfer_action' item.id %}" method="post" class="m-0" onsubmit="return confirm('آیا از تایید و ورود این کالا به انبار خود اطمینان دارید؟');">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="approve">
                    <button type="submit" class="button is-success is-small ml-1">✓ تایید و دریافت</button>
                  </form>

                  <button type="button" class="button is-danger is-small btn-reject" data-id="{{ item.id }}" data-name="{{ item.product.product_name }}" data-qty="{{ item.quantity }}">
                    ✕ رد بار
                  </button>
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
        <p class="has-text-grey has-text-centered py-4">هیچ بار ورودی جدیدی در انتظار تایید شما نیست.</p>
      {% endif %}
    </div>

    <div class="box mb-5">
      <h3 class="title is-5 has-text-info mb-3">
        📤 بارهای ارسالی شما (در انتظار تایید انبار مقصد)
        <span class="tag is-info is-rounded ml-2">{{ outgoing_pending.count }}</span>
      </h3>

      {% if outgoing_pending %}
      <div class="table-container">
        <table class="table is-bordered is-striped is-narrow is-fullwidth has-text-centered">
          <thead class="has-background-light">
            <tr>
              <th>کد درخواست</th>
              <th>کالا</th>
              <th>تعداد</th>
              <th>انبار مقصد</th>
              <th>زمان ارسال</th>
              <th>توضیحات شما</th>
              <th>وضعیت</th>
              <th>عملیات</th>
            </tr>
          </thead>
          <tbody>
            {% for item in outgoing_pending %}
            <tr>
              <td>#{{ item.id }}</td>
              <td class="has-text-weight-bold">{{ item.product.product_name }}</td>
              <td class="has-text-weight-bold">{{ item.quantity }}</td>
              <td class="has-text-info has-text-weight-bold">{{ item.target_store.store_name }}</td>
              <td dir="ltr">{{ item.created_at|toJalali }}</td>
              <td>{{ item.desc|default:"-" }}</td>
              <td><span class="tag is-warning">منتظر تحویل</span></td>
              <td>
                <form action="{% url 'admin_panel:process_transfer_action' item.id %}" method="post" class="m-0" onsubmit="return confirm('آیا قصد انصراف و بازگرداندن بار از مسیر انتقال را دارید؟');">
                  {% csrf_token %}
                  <input type="hidden" name="action" value="cancel">
                  <button type="submit" class="button is-warning is-small">↩ انصراف از ارسال</button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
        <p class="has-text-grey has-text-centered py-4">هیچ بار ارسالی معلقی ندارید.</p>
      {% endif %}
    </div>

    <div class="box">
      <h3 class="title is-6 has-text-grey-dark mb-3">🕒 تاریخچه ۵۰ انتقال اخیر انبار</h3>
      <div class="table-container">
        <table class="table is-bordered is-narrow is-fullwidth has-text-centered is-size-7">
          <thead>
            <tr>
              <th>کد</th>
              <th>کالا</th>
              <th>تعداد</th>
              <th>مبدا</th>
              <th>مقصد</th>
              <th>وضعیت</th>
              <th>تعیین‌تکلیف کننده</th>
              <th>زمان اقدام</th>
              <th>توضیحات / دلیل رد</th>
            </tr>
          </thead>
          <tbody>
            {% for item in history_list %}
            <tr>
              <td>#{{ item.id }}</td>
              <td class="has-text-weight-bold">{{ item.product.product_name }}</td>
              <td>{{ item.quantity }}</td>
              <td>{% if item.source_store_id == storeO.id %}<span class="tag is-light">انبار شما</span>{% else %}{{ item.source_store.store_name }}{% endif %}</td>
              <td>{% if item.target_store_id == storeO.id %}<span class="tag is-light">انبار شما</span>{% else %}{{ item.target_store.store_name }}{% endif %}</td>
              <td>
                {% if item.status == 'APPROVED' %}
                  <span class="tag is-success is-light">✓ تایید و تحویل شد</span>
                {% elif item.status == 'REJECTED' %}
                  <span class="tag is-danger is-light">✕ رد شد</span>
                {% elif item.status == 'CANCELED' %}
                  <span class="tag is-warning is-light">انصراف مبدا</span>
                {% endif %}
              </td>
              <td>{{ item.approver.first_name }} {{ item.approver.last_name }}</td>
              <td dir="ltr">{{ item.action_date|toJalali|default:"-" }}</td>
              <td class="has-text-right">{{ item.rejection_reason|default:item.desc|default:"-" }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="9" class="has-text-grey">هیچ تاریخچه‌ای یافت نشد.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

  </div>

  <div id="modal-reject" class="modal">
    <div class="modal-background close-modal"></div>
    <div class="modal-card">
      <header class="modal-card-head has-background-danger-light">
        <p class="modal-card-title has-text-danger-dark is-size-5">⚠️ اعلام دلیل رد دریافت بار</p>
        <button class="delete close-modal" aria-label="close"></button>
      </header>
      <form id="form-reject" action="" method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="reject">
        
        <section class="modal-card-body">
          <p class="mb-3">شما در حال رد کردن ورود <strong id="modal-qty"></strong> عدد <strong id="modal-prd-name"></strong> به انبار خود هستید.</p>
          <div class="field">
            <label class="label">علت رد بار (الزام جهت اطلاع انبار مبدا): <span class="has-text-danger">*</span></label>
            <div class="control">
              <textarea name="reason" class="textarea" required placeholder="مثال: مغایرت در تعداد ارسالی / خرابی فیزیکی کالا / ارسال اشتباهی به این انبار..." rows="3"></textarea>
            </div>
          </div>
        </section>
        
        <footer class="modal-card-foot">
          <button type="submit" class="button is-danger">تایید و رد بار</button>
          <button type="button" class="button close-modal">انصراف</button>
        </footer>
      </form>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      // بستن پیام‌های هشدار
      $('.notification .delete').click(function() {
        $(this).parent().fadeOut();
      });

      // باز کردن مودال رد بار و تنظیم اطلاعات
      $('.btn-reject').click(function() {
        var id = $(this).data('id');
        var name = $(this).data('name');
        var qty = $(this).data('qty');
        
        $('#modal-prd-name').text(name);
        $('#modal-qty').text(qty);
        // تنظیم اکشن فرم به آدرس مخصوص همین تراکنش
        $('#form-reject').attr('action', '/panel/transfer/' + id + '/action/');
        
        $('#modal-reject').addClass('is-active');
      });

      // بستن مودال
      $('.close-modal').click(function() {
        $('#modal-reject').removeClass('is-active');
        $('#form-reject').find('textarea').val('');
      });
    });
  </script>
{% endblock %}