{% extends 'base.html' %}
{% load static tags %}

{% block content %}
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <div class="main-body">
                    <div class="page-wrapper">
                        {% include 'breadcrumb.html' %}
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <!-- 筛选表单 开始 -->
                                                <form action="{% url form_action_url %}" method="get">
                                                    {% csrf_token %}
                                                    <div class="row">
                                                        {% for filter in filters %}
                                                            {% if filter.type == 'text' %}
                                                                <div class="col">
                                                                    <label for="{{ filter.id }}" class="form-label">{{ filter.label }}</label>
                                                                    <input type="text" class="form-control" id="{{ filter.id }}" name="{{ filter.name }}" placeholder="{{ filter.placeholder }}">
                                                                </div>
                                                            {% elif filter.type == 'select' %}
                                                                <div class="col">
                                                                    <label class="form-label" for="{{ filter.id }}">{{ filter.label }}</label>
                                                                    <select class="form-control" id="{{ filter.id }}" name="{{ filter.name }}">
                                                                        <option value="">请选择</option>
                                                                        {% for option in filter.options %}
                                                                            <option value="{{ option.value }}"
                                                                                {% if request.GET|get_value:filter.name == option.value %}selected{% endif %}>{{ option.display }}
                                                                            </option>
                                                                        {% endfor %}
                                                                    </select>
                                                                </div>
                                                            {% elif filter.type == 'date' %}
                                                                <div class="col">
                                                                    <label for="{{ filter.id }}" class="form-label">{{ filter.label }}</label>
                                                                    <input type="date" class="form-control" id="{{ filter.id }}" name="{{ filter.name }}" value="{{ request.GET|get_value:filter.name }}">
                                                                </div>
                                                            {% elif filter.type == 'month' %}
                                                                <div class="col">
                                                                    <label for="{{ filter.id }}" class="form-label">{{ filter.label }}</label>
                                                                    <input type="month" class="form-control" id="{{ filter.id }}" name="{{ filter.name }}" value="{{ request.GET|get_value:filter.name }}">
                                                                </div>
                                                            {% endif %}
                                                        {% endfor %}
                                                        <div class="col mt-4 d-flex align-items-center">
                                                            <button type="submit" class="btn btn-primary">查询</button>
                                                        </div>
                                                    </div>
                                                </form>
                                                <!-- 筛选表单 结束 -->
                                            </div>
                                            <!-- 按钮组 开始 -->
                                            <div class="col-md-4 mt-4 text-end">
                                                {% show_modify_records_button model_config %}
                                                <button id="addItemBtn" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#addEditModal">添加</button>
                                                <button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#downloadModal">导出</button>
                                                <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">上传Excel</button>
                                            </div>
                                            <!-- 按钮组 结束 -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-body table-border-style">
                                        <div class="table-responsive">
                                            <!-- 表格 开始 -->
                                            <table class="table">
                                                {% get_verbose_field_names_from_model model_config table_exclude_field_name as columns %}
                                                <thead>
                                                <tr>
                                                    {% for column in columns %}
                                                        <th class="text-center">{{ column }}</th>
                                                    {% endfor %}
                                                    <th>操作</th>
                                                </tr>
                                                </thead>
                                                <tbody id="result" style="color: white;">
                                                {% for item in items %}
                                                    <tr>
                                                        {% for field in item|get_fields:table_exclude_field_name %}
                                                            <td class="text-center">{{ field.value }}</td>
                                                        {% endfor %}
                                                        <td class="text-center">
                                                            <a href="#" class="edit-btn" data-id="{{ item|get_pk_value }}" data-bs-toggle="modal" data-bs-target="#addEditModal">编辑</a>
                                                        </td>
                                                    </tr>
                                                {% empty %}
                                                    <tr>
                                                        <td class="text-center" colspan="{{ table_columns|length }}">暂无数据</td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                            <!-- 表格 结束 -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% include 'pagination_ps.html' with page_obj=items query_params=query_params %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<div id="addEditModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="formModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="formModalTitle">{{ form_title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

{% include 'modify_record_modal.html' with modify_records_url=modify_records_url %}
{% include 'delete_modal.html' with delete_url=delete_url %}
{% include 'upload_excel_modal_v2.html' with excel_upload_config=excel_upload_config %}

<script>
const add_url = "{{ add_url }}";
const modify_url = "{{ modify_url }}";

$(document).ready(function(){
    // 处理添加按钮点击事件
    $('#addItemBtn').click(function(){
        $.ajax({
            url: add_url,
            type: 'get',
            success: function(response){
                // 将新的表单 HTML 插入到模态框中
                $('#addEditModal .modal-body').html(response.form_html);
                // 显示模态框
                $('#addEditModal').modal('show');

                // 绑定表单提交事件
                bindFormSubmit();
            },
            error: function(){
                $('#addEditModal').modal('hide');
                showAlert('danger', '获取表单请求出错');
            }
        });
    });

    // 处理编辑按钮点击事件
    $('.edit-btn').click(function(){
        var itemId = $(this).data('id');
        $.ajax({
            url: modify_url,
            type: 'get',
            data: {id: itemId},
            success: function(response){
                // 将表单 HTML 插入到模态框中
                $('#addEditModal .modal-body').html(response.form_html);
                // 显示模态框
                $('#addEditModal').modal('show');

                // 绑定表单提交事件
                bindFormSubmit();
            },
            error: function(){
                $('#addEditModal').modal('hide');
                showAlert('danger', '获取表单请求出错');
            }
        });
    });

    // 保存
    function bindFormSubmit(){
        $('#addEditForm').submit(function(e){
            e.preventDefault();
            $.ajax({
                url: modify_url,  // 确保URL正确
                type: 'post',  // 使用 POST 请求来提交表单
                data: $(this).serialize(),
                success: function(response){
                    // 关闭模态框并显示成功消息
                    $('#addEditModal').modal('hide');
                    showAlert('success', response.message);
                    // 你可以在这里刷新表格或更新页面内容
                    location.reload();
                },
                error: function(xhr){
                    // 处理表单错误并显示错误消息
                    var response = xhr.responseJSON;
                    $('#addEditModal .modal-body').html(response.form_html);
                    bindFormSubmit();
                }
            });
        });
    }
});
</script>

{% endblock %}