{% extends 'base.html' %}

{% block title %}《{{ book.title }}》库存日志{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/inventory-book-logs.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
{% endblock %}

{% block content %}
<div class="frozen-background">
    <div class="snowflakes" aria-hidden="true">
        <div class="snowflake">❅</div>
        <div class="snowflake">❆</div>
        <div class="snowflake">❅</div>
        <div class="snowflake">❆</div>
        <div class="snowflake">❅</div>
        <div class="snowflake">❆</div>
        <div class="snowflake">❅</div>
        <div class="snowflake">❆</div>
        <div class="snowflake">❅</div>
        <div class="snowflake">❆</div>
    </div>

    <div class="container mt-5">
        <div class="frozen-card">
            <div class="castle-decoration"></div>

            <div class="card-header-frozen">
                <div class="ice-crystal left"></div>
                <h4><i class="fas fa-book-open"></i> 《{{ book.title }}》库存变动日志</h4>
                <div class="ice-crystal right"></div>
            </div>

            <div class="card-body-frozen">
                <div class="row mb-4 book-info-row">
                    <div class="col-md-3 book-cover-container">
                        <div class="book-frame">
                            {% if book.cover_url %}
                            <img src="{{ book.cover_url }}" alt="{{ book.title }}" class="img-fluid book-cover">
                            {% else %}
                            <img src="{{ url_for('static', filename='images/book-placeholder.jpg') }}" alt="默认封面" class="img-fluid book-cover">
                            {% endif %}
                            <div class="book-glow"></div>
                        </div>
                    </div>
                    <div class="col-md-9 book-details">
                        <h3 class="book-title">{{ book.title }}</h3>
                        <div class="book-info">
                            <p class="info-item"><i class="fas fa-feather-alt"></i> <strong>作者:</strong> {{ book.author }}</p>
                            <p class="info-item"><i class="fas fa-building"></i> <strong>出版社:</strong> {{ book.publisher }}</p>
                            <p class="info-item"><i class="fas fa-barcode"></i> <strong>ISBN:</strong> {{ book.isbn }}</p>
                            <p class="info-item">
                                <i class="fas fa-cubes"></i> <strong>当前库存:</strong>
                                <span class="frozen-badge {{ 'high-stock' if book.stock > 5 else 'low-stock' if book.stock > 0 else 'out-stock' }}">
                                    {{ book.stock }}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="history-section">
                    <h5 class="section-title">
                        <i class="fas fa-history"></i> 库存变动历史记录
                        <div class="magic-underline"></div>
                    </h5>

                    <div class="table-container">
                        <div class="table-frozen">
                            <div class="table-header-row">
                                <div class="th-frozen">ID</div>
                                <div class="th-frozen">操作类型</div>
                                <div class="th-frozen">变动数量</div>
                                <div class="th-frozen">变动后库存</div>
                                <div class="th-frozen">操作人</div>
                                <div class="th-frozen">备注</div>
                                <div class="th-frozen">操作时间</div>
                            </div>

                            <div class="table-body">
                                {% for log in logs %}
                                <div class="table-row log-entry" data-type="{{ log.change_type }}">
                                    <div class="td-frozen">{{ log.id }}</div>
                                    <div class="td-frozen">
                                        <span class="operation-badge {{ 'in-badge' if log.change_type == 'in' else 'out-badge' }}">
                                            {{ '入库' if log.change_type == 'in' else '出库' }}
                                            <i class="fas {{ 'fa-arrow-circle-down' if log.change_type == 'in' else 'fa-arrow-circle-up' }}"></i>
                                        </span>
                                    </div>
                                    <div class="td-frozen">{{ log.change_amount }}</div>
                                    <div class="td-frozen">{{ log.after_stock }}</div>
                                    <div class="td-frozen">{{ log.operator.username if log.operator else '系统' }}</div>
                                    <div class="td-frozen remark-cell">{{ log.remark or '-' }}</div>
                                    <div class="td-frozen">{{ log.changed_at.strftime('%Y-%m-%d %H:%M:%S') }}</div>
                                </div>
                                {% endfor %}

                                {% if not logs %}
                                <div class="table-row empty-log">
                                    <div class="td-frozen empty-message" colspan="7">
                                        <div class="olaf-empty">
                                            <div class="olaf-image"></div>
                                            <p>暂无库存变动记录，要不要堆个雪人？</p>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div class="pagination-container">
                        <nav aria-label="Page navigation">
                            <ul class="frozen-pagination">
                                {% if pagination.has_prev %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('inventory.book_inventory_logs', book_id=book.id, page=pagination.prev_num) }}">
                                        <i class="fas fa-chevron-left"></i> 上一页
                                    </a>
                                </li>
                                {% else %}
                                <li class="page-item disabled">
                                    <a class="page-link" href="#">
                                        <i class="fas fa-chevron-left"></i> 上一页
                                    </a>
                                </li>
                                {% endif %}

                                {% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
                                    {% if page_num %}
                                        {% if page_num == pagination.page %}
                                        <li class="page-item active">
                                            <a class="page-link" href="#">{{ page_num }}</a>
                                        </li>
                                        {% else %}
                                        <li class="page-item">
                                            <a class="page-link" href="{{ url_for('inventory.book_inventory_logs', book_id=book.id, page=page_num) }}">{{ page_num }}</a>
                                        </li>
                                        {% endif %}
                                    {% else %}
                                        <li class="page-item disabled">
                                            <a class="page-link" href="#">...</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}

                                {% if pagination.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('inventory.book_inventory_logs', book_id=book.id, page=pagination.next_num) }}">
                                        下一页 <i class="fas fa-chevron-right"></i>
                                    </a>
                                </li>
                                {% else %}
                                <li class="page-item disabled">
                                    <a class="page-link" href="#">
                                        下一页 <i class="fas fa-chevron-right"></i>
                                    </a>
                                </li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>

            <div class="card-footer-frozen">
                <div class="footer-actions">
                    <a href="{{ url_for('inventory.inventory_list') }}" class="btn frozen-btn return-btn">
                        <i class="fas fa-arrow-left"></i> 返回库存管理
                    </a>
                    <a href="{{ url_for('inventory.adjust_inventory', book_id=book.id) }}" class="btn frozen-btn adjust-btn">
                        <i class="fas fa-sliders-h"></i> 调整库存
                    </a>
                </div>
                <div class="footer-decoration"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/inventory-book-logs.js') }}"></script>
{% endblock %}
