{% extends "./base.html" %}
{% load custom_tags %}

{% block bodyPage %}
<div class="container is-fluid mt-4">
    <div class="box">
        <h1 class="title is-4 has-text-centered mb-5">گزارش تفکیکی گردش و خروج کالا از انبار</h1>
        
        <form method="GET" class="columns is-multiline is-centered is-vcentered">
            
            <div class="column is-2-desktop is-12-mobile">
                <label class="label is-small">نام کالا (بخشی از نام)</label>
                <div class="control">
                    <input type="text" name="product_name" class="input is-small" placeholder="مثلاً: لوله، فیلتر..." value="{{ filters.product_name }}">
                </div>
            </div>

            <div class="column is-2-desktop is-12-mobile">
                <label class="label is-small">نوع تراکنش کالا</label>
                <div class="select is-fullwidth is-small">
                    <select name="movement_type">
                        <option value="">-- همه موارد --</option>
                        {% for code, label in movement_choices %}
                            <option value="{{ code }}" {% if filters.movement_type == code %}selected{% endif %}>
                                {{ label }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="column is-2-desktop is-12-mobile">
                <label class="label is-small">کاربر صادرکننده</label>
                <div class="select is-fullwidth is-small">
                    <select name="user_id">
                        <option value="">-- همه کاربران --</option>
                        {% for u in all_users %}
                            <option value="{{ u.id }}" {% if filters.user_id == u.id %}selected{% endif %}>
                                {{ u.first_name }} {{ u.last_name }} ({{ u.username }})
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="column is-2-desktop is-12-mobile">
                <label class="label is-small">انبار</label>
                <div class="select is-fullwidth is-small">
                    <select name="store_id">
                        <option value="">-- همه انبارها --</option>
                        {% for s in all_stores %}
                            <option value="{{ s.id }}" {% if filters.store_id == s.id %}selected{% endif %}>
                                {{ s.store_name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="column is-1-desktop is-6-mobile">
                <label class="label is-small">از تاریخ</label>
                <input type="text" class="input is-small date-picker-az pwt-datepicker-input-element" placeholder="انتخاب کنید">
                <input type="hidden" name="azTarikh" id="azTarikhAlt" value="{{ filters.azTarikh }}">
            </div>

            <div class="column is-1-desktop is-6-mobile">
                <label class="label is-small">تا تاریخ</label>
                <input type="text" class="input is-small date-picker-ta pwt-datepicker-input-element" placeholder="انتخاب کنید">
                <input type="hidden" name="taTarikh" id="taTarikhAlt" value="{{ filters.taTarikh }}">
            </div>

            <div class="column is-2-desktop is-12-mobile mt-4">
                <button type="submit" class="button is-danger is-small is-fullwidth">
                    <span>اعمال فیلتر</span>
                </button>
            </div>
        </form>
    </div>

    <div class="columns is-multiline mb-3">
        <div class="column is-6">
            <div class="notification is-light is-danger p-3 has-text-centered">
                <strong>جمع کل خروجی در این گزارش: </strong>
                <span class="is-size-5 tag is-danger is-light">{{ summary_stats.total_out_qty|default:0 }} عدد</span>
            </div>
        </div>
        <div class="column is-6">
            <div class="notification is-light is-success p-3 has-text-centered">
                <strong>جمع کل ورودی در این گزارش: </strong>
                <span class="is-size-5 tag is-success is-light">{{ summary_stats.total_in_qty|default:0 }} عدد</span>
            </div>
        </div>
    </div>

    <div class="table-container box p-0">
        <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth has-text-centered">
            <thead>
                <tr class="has-background-light">
                    <th>#</th>
                    <th>کد کالا</th>
                    <th>نام کالا</th>
                    <th>نوع تراکنش</th>
                    <th>خروج (-)</th>
                    <th>ورود (+)</th>
                    <th>موجودی لحظه‌ای</th>
                    <th>مشتری / گیرنده</th>
                    <th>کاربر ثبت‌کننده</th>
                    <th>انبار</th>
                    <th>تاریخ ثبت</th>
                    <th>توضیحات سند</th>
                </tr>
            </thead>
            <tbody>
                {% for item in page_obj %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ item.Product.id }}</td>
                    <td class="has-text-right"><strong>{{ item.Product.product_name }}</strong></td>
                    <td>
                        <span class="tag is-small 
                            {% if item.movement_type == 'WARRANTY' %}is-warning
                            {% elif item.movement_type == 'PROMOTION' %}is-info
                            {% elif item.movement_type == 'SALE' %}is-success
                            {% else %}is-light{% endif %}">
                            {{ item.get_movement_type_display }}
                        </span>
                    </td>
                    <td class="has-text-danger has-text-weight-bold">{{ item.s_out|default:"-" }}</td>
                    <td class="has-text-success has-text-weight-bold">{{ item.s_in|default:"-" }}</td>
                    <td style="direction: ltr;">{{ item.current_stock_at_time }}</td>
                    <td>
                        {% if item.factor and item.factor.customer %}
                            <a href="{% url 'admin_panel:customer' item.factor.customer.id %}" target="_blank">
                                {{ item.factor.customer.name_family }}
                            </a>
                        {% else %}
                            <span class="has-text-grey-light">ثبت دستی/داخلی</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if item.factor and item.factor.user %}
                            {{ item.factor.user.first_name }} {{ item.factor.user.last_name }}
                        {% else %}
                            سیستم / نامشخص
                        {% endif %}
                    </td>
                    <td>{{ item.StoreRoom.store_name }}</td>
                    <td><span class="is-size-7" style="direction: ltr; display: inline-block;">{{ item.createdDT|toJalali }}</span></td>
                    <td class="has-text-right is-size-7">{{ item.desc }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="12" class="py-5 has-text-grey">هیچ تراکنشی با این مشخصات یافت نشد.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if page_obj.has_other_pages %}
    <nav class="pagination is-centered is-small my-4" role="navigation" aria-label="pagination">
        {% if page_obj.has_previous %}
            <a class="pagination-previous" href="?page={{ page_obj.previous_page_number }}&product_name={{ filters.product_name }}&movement_type={{ filters.movement_type }}&user_id={{ filters.user_id }}&store_id={{ filters.store_id }}&azTarikh={{ filters.azTarikh }}&taTarikh={{ filters.taTarikh }}">صفحه قبل</a>
        {% endif %}
        
        {% if page_obj.has_next %}
            <a class="pagination-next" href="?page={{ page_obj.next_page_number }}&product_name={{ filters.product_name }}&movement_type={{ filters.movement_type }}&user_id={{ filters.user_id }}&store_id={{ filters.store_id }}&azTarikh={{ filters.azTarikh }}&taTarikh={{ filters.taTarikh }}">صفحه بعد</a>
        {% endif %}

        <ul class="pagination-list">
            <li><span class="pagination-link is-current">صفحه {{ page_obj.number }} از {{ page_obj.paginator.num_pages }}</span></li>
        </ul>
    </nav>
    {% endif %}

</div>
{% endblock %}

{% block jsEnd %}
<script>
    $(document).ready(function() {
        var pickerAz = $(".date-picker-az").pDatepicker({
            altField: '#azTarikhAlt',
            initialValue: false,
            autoClose: true,
            format: 'YYYY/MM/DD',
            calendar: { persian: { locale: 'fa' } }
        });

        var pickerTa = $(".date-picker-ta").pDatepicker({
            altField: '#taTarikhAlt',
            initialValue: false,
            autoClose: true,
            format: 'YYYY/MM/DD',
            calendar: { persian: { locale: 'fa' } }
        });

        {% if filters.azTarikh %}
            pickerAz.setDate({{ filters.azTarikh }});
        {% endif %}
        {% if filters.taTarikh %}
            pickerTa.setDate({{ filters.taTarikh }});
        {% endif %}
    });
</script>
{% endblock %}