{% extends 'base.html' %}

{% block title %}添加图书 - 图书管理系统{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/book-form.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
{% endblock %}

{% block content %}
<div class="book-form-container animate__animated animate__fadeIn">
    <!-- 顶部导航和标题区域 -->
    <div class="page-header-wrapper">
        <div class="page-header">
            <div class="header-title-section">
                <h1 class="page-title">添加新图书</h1>
                <p class="subtitle">创建新书籍记录并添加到系统库存</p>
            </div>
            <div class="header-actions">
                <a href="{{ url_for('book.book_list') }}" class="btn-back">
                    <i class="fas fa-arrow-left"></i>
                    <span>返回列表</span>
                </a>
                <div class="form-progress">
                    <div class="progress-bar-container">
                        <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="formProgress"></div>
                    </div>
                    <span class="progress-text" id="progressText">完成 0%</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 主表单区域 -->
    <form method="POST" enctype="multipart/form-data" class="book-form" id="bookForm">
        <div class="form-grid">
            <!-- 左侧表单区域 -->
            <div class="form-main-content">
                <!-- 基本信息卡片 -->
                <div class="form-card">
                    <div class="card-header">
                        <span class="card-title">基本信息</span>
                    </div>
                    <div class="card-body">
                        <div class="form-section">
                            <div class="form-group">
                                <label for="title" class="form-label">书名 <span class="required">*</span></label>
                                <input type="text" class="form-control" id="title" name="title" required
                                       placeholder="请输入完整图书名称" value="{{ book.title if book else '' }}">
                                <div class="form-help">完整准确的书名有助于读者查找</div>
                            </div>

                            <div class="form-row">
                                <div class="form-group">
                                    <label for="author" class="form-label">作者 <span class="required">*</span></label>
                                    <input type="text" class="form-control" id="author" name="author" required
                                           placeholder="请输入作者姓名" value="{{ book.author if book else '' }}">
                                </div>
                                <div class="form-group">
                                    <label for="publisher" class="form-label">出版社</label>
                                    <input type="text" class="form-control" id="publisher" name="publisher"
                                           placeholder="请输入出版社名称" value="{{ book.publisher if book else '' }}">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group">
                                    <label for="isbn" class="form-label">ISBN</label>
                                    <div class="input-with-button">
                                        <input type="text" class="form-control" id="isbn" name="isbn"
                                               placeholder="例如: 978-7-XXXXX-XXX-X" value="{{ book.isbn if book else '' }}">
                                        <button type="button" class="btn-append" id="isbnLookup">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                    <div class="form-help">输入ISBN并点击查询按钮自动填充图书信息</div>
                                </div>
                                <div class="form-group">
                                    <label for="publish_year" class="form-label">出版年份</label>
                                    <input type="text" class="form-control" id="publish_year" name="publish_year"
                                           placeholder="例如: 2023" value="{{ book.publish_year if book else '' }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分类和标签卡片 -->
                <div class="form-card">
                    <div class="card-header">
                        <span class="card-title">分类与标签</span>
                    </div>
                    <div class="card-body">
                        <div class="form-section">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="category_id" class="form-label">图书分类</label>
                                    <select class="form-control select2" id="category_id" name="category_id">
                                        <option value="">选择分类...</option>
                                        {% for category in categories %}
                                        <option value="{{ category.id }}" {% if book and book.category_id|string == category.id|string %}selected{% endif %}>
                                            {{ category.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                    <div class="form-help">为图书选择合适的分类以便于管理和查找</div>
                                </div>
                                <div class="form-group">
                                    <label for="tagInput" class="form-label">标签</label>
                                    <div class="tag-input-wrapper">
                                        <input type="text" class="form-control" id="tagInput" placeholder="输入标签后按回车添加">
                                        <input type="hidden" id="tags" name="tags" value="{{ book.tags if book else '' }}">
                                        <button type="button" class="btn-tag-add" id="addTagBtn">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                    <div class="tags-container" id="tagsContainer"></div>
                                    <div class="form-help">添加多个标签以提高图书的检索率</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 图书简介卡片 -->
                <div class="form-card">
                    <div class="card-header">
                        <span class="card-title">图书简介</span>
                    </div>
                    <div class="card-body">
                        <div class="form-section">
                            <div class="form-group">
                                <label for="description" class="form-label">内容简介</label>
                                <textarea class="form-control" id="description" name="description" rows="8"
                                          placeholder="请输入图书的简要介绍...">{{ book.description if book else '' }}</textarea>
                                <div class="form-footer">
                                    <div class="form-help">简要描述图书的内容、特点和主要观点</div>
                                    <div class="char-counter"><span id="charCount">0</span>/2000</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧表单区域 -->
            <div class="form-sidebar">
                <!-- 封面图片卡片 -->
                <div class="form-card">
                    <div class="card-header">
                        <span class="card-title">封面图片</span>
                    </div>
                    <div class="card-body">
                        <div class="cover-preview-container">
                            <div class="cover-preview" id="coverPreview">
                                <div class="no-cover-placeholder">
                                    <i class="fas fa-book-open"></i>
                                    <span>暂无封面</span>
                                    <p class="placeholder-tip">点击上传或拖放图片至此处</p>
                                </div>
                            </div>
                            <div class="upload-options">
                                <div class="upload-btn-group">
                                    <label for="cover" class="btn-upload">
                                        <i class="fas fa-upload"></i> 上传图片
                                    </label>
                                    <button type="button" class="btn-remove" id="removeCover">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </div>
                                <input type="file" id="cover" name="cover" class="form-control-file" accept="image/*" style="display:none;">
                                <div class="upload-tips">
                                    <div>推荐尺寸: 500×700px (竖版封面)</div>
                                    <div>支持格式: JPG, PNG, WebP</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 库存和价格卡片 -->
                <div class="form-card">
                    <div class="card-header">
                        <span class="card-title">库存和价格</span>
                    </div>
                    <div class="card-body">
                        <div class="form-section">
                            <div class="form-group">
                                <label for="stock" class="form-label">库存数量</label>
                                <div class="number-control">
                                    <button type="button" class="number-btn decrement" id="stockDecrement">－</button>
                                    <input type="number" class="form-control text-center" id="stock" name="stock" min="0"
                                           value="{{ book.stock if book else 0 }}">
                                    <button type="button" class="number-btn increment" id="stockIncrement">＋</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="price" class="form-label">价格</label>
                                <div class="price-input">
                                    <span class="currency-symbol">¥</span>
                                    <input type="number" class="form-control" id="price" name="price" step="0.01" min="0"
                                           placeholder="0.00" value="{{ book.price if book else '' }}">
                                </div>
                                <div class="price-slider">
                                    <input type="range" class="range-slider" id="priceRange" min="0" max="500" step="0.5"
                                           value="{{ book.price if book and book.price else 0 }}">
                                    <div class="slider-marks">
                                        <span>¥0</span>
                                        <span>¥250</span>
                                        <span>¥500</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 提交按钮区域 -->
                <div class="form-actions">
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-save"></i> 保存图书
                    </button>
                    <div class="secondary-actions">
                        <button type="button" class="btn-secondary" id="previewBtn">
                            <i class="fas fa-eye"></i> 预览
                        </button>
                        <button type="reset" class="btn-secondary" id="resetBtn">
                            <i class="fas fa-undo"></i> 重置
                        </button>
                    </div>
                    <div class="form-tip">
                        <i class="fas fa-info-circle"></i>
                        <span>带 <span class="required">*</span> 的字段为必填项</span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- 图片裁剪模态框 -->
<div class="modal fade" id="cropperModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">调整封面图片</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="img-container">
                    <img id="cropperImage" src="" alt="图片预览">
                </div>
                <div class="cropper-controls">
                    <div class="control-group">
                        <button type="button" class="control-btn" id="rotateLeft" title="向左旋转">
                            <i class="fas fa-undo"></i>
                        </button>
                        <button type="button" class="control-btn" id="rotateRight" title="向右旋转">
                            <i class="fas fa-redo"></i>
                        </button>
                    </div>
                    <div class="control-group">
                        <button type="button" class="control-btn" id="zoomOut" title="缩小">
                            <i class="fas fa-search-minus"></i>
                        </button>
                        <button type="button" class="control-btn" id="zoomIn" title="放大">
                            <i class="fas fa-search-plus"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-secondary modal-btn" data-dismiss="modal">取消</button>
                <button type="button" class="btn-primary modal-btn" id="cropImage">应用裁剪</button>
            </div>
        </div>
    </div>
</div>

<!-- 图书预览模态框 -->
<div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header preview-header">
                <h5 class="modal-title">图书预览</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body preview-body">
                <div class="book-preview">
                    <div class="preview-cover-section">
                        <div class="book-preview-cover" id="previewCover">
                            <div class="no-cover-placeholder">
                                <i class="fas fa-book-open"></i>
                                <span>暂无封面</span>
                            </div>
                        </div>
                        <div class="book-meta">
                            <div class="book-price" id="previewPrice">¥0.00</div>
                            <div class="book-stock" id="previewStock">库存: 0</div>
                        </div>
                    </div>
                    <div class="preview-details-section">
                        <h2 class="book-title" id="previewTitle">书名加载中...</h2>
                        <div class="book-author" id="previewAuthor">作者加载中...</div>

                        <div class="book-info-grid">
                            <div class="info-item">
                                <div class="info-label">出版社</div>
                                <div class="info-value" id="previewPublisher">-</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">ISBN</div>
                                <div class="info-value" id="previewISBN">-</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">出版年份</div>
                                <div class="info-value" id="previewYear">-</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">分类</div>
                                <div class="info-value" id="previewCategory">-</div>
                            </div>
                        </div>

                        <div class="book-tags-preview" id="previewTags"></div>

                        <div class="book-description-preview">
                            <h3 class="section-title">图书简介</h3>
                            <div class="description-content" id="previewDescription">
                                <p class="placeholder-text">暂无简介内容</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer preview-footer">
                <button type="button" class="btn-secondary modal-btn" data-dismiss="modal">关闭</button>
                <button type="button" class="btn-primary modal-btn" data-dismiss="modal" id="continueEditBtn">继续编辑</button>
            </div>
        </div>
    </div>
</div>

<!-- 通知容器 -->
<div class="notification-container"></div>
{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<script src="{{ url_for('static', filename='js/book-add.js') }}"></script>
{% endblock %}