{% 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="{{ 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 }}"
                                                                               value="{{ request.GET|get_value:filter.name|default:'' }}">
                                                                    </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">
                                                    {% render_button 'modify_records_button' %}
                                                    {% render_button 'add_button' %}
                                                    {% render_button 'report_excel_button' %}
{#                                                    {% render_button 'import_excel_button' %}#}
                                                    <button id="importExcelBtnTest" 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 class="text-center">操作</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="#"
                                                                   id="editBtn"
                                                                   class="edit-btn"
                                                                   data-id="{{ item|get_pk_value }}"
                                                                   data-bs-toggle="modal"
                                                                   data-bs-target="#addEditModal">编辑</a>
                                                                <a href="#"
                                                                   id="deleteBtn"
                                                                   class="edit-btn"
                                                                   style="color: red"
                                                                   data-id="{{ item|get_pk_value }}"
                                                                   data-bs-toggle="modal"
                                                                   data-bs-target="#deleteModal">删除</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>

    <div id="deleteModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">提示</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <p>此操作会删除当前数据，是否继续？</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">删除</button>
            </div>

            </div>
        </div>
    </div>

    <div id="uploadModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="upload-form" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="modal-header">
                        <h5 class="modal-title" id="uploadModalLabel">上传Excel文件</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input id="inputFile" type="file" name="excel_file" class="form-control" hidden accept=".xlsx">
                        <label class="btn btn-outline-primary" for="inputFile">选择文件</label>
                        <span id="file-chosen" style="font-size: 12px; margin-left: 10px;">未选择文件</span>
                    </div>
                    <div class="modal-footer">
                        <button id="downloadExcelBtn" type="button" class="btn btn-secondary" onclick="#!">下载填报模板</button>
                        <button id="uploadBtn" type="button" class="btn btn-primary">上传Excel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {% include 'modify_record_modal.html' with modify_records_url=modify_records_url %}

    {% block item_list_custom_content %}
    {% endblock %}

    <script>
        const add_url = "{{ add_url }}";
        const modify_url = "{{ modify_url }}";
        const deleteUrl = "{{ delete_url }}";
        let targetIdToDelete = null;
        var templateName = "{{ excel_upload_config.template_name }}";
        var modelConfig = "{{ model_config }}";
        var list_url = "{{ form_action_url }}"

        $(document).ready(function () {
            function getCookie(name) {
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }

            const csrftoken = getCookie('csrftoken');

            // 处理添加按钮点击事件
            $('#addItemBtn').click(function () {
                $.ajax({
                    url: add_url,
                    type: 'get',
                    success: function (response) {
                        // 将新的表单 HTML 插入到模态框中
                        $('#addEditModal .modal-body').html(response.form_html);
                        // 动态设置模态框标题
                        $('#formModalTitle').text('新增');
                        // 动态设置表单提交URL
                        $('#addEditForm').attr('action', add_url);
                        // 显示模态框
                        $('#addEditModal').modal('show');

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

            // 处理编辑按钮点击事件
            $('#editBtn').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);
                        $('#formModalTitle').text('编辑');
                        // 动态设置表单提交URL
                        $('#addEditForm').attr('action', modify_url);
                        // 显示模态框
                        $('#addEditModal').modal('show');

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

            // 保存
            function bindFormSubmit() {
                $('#addEditForm').submit(function (e) {
                    e.preventDefault();
                    $.ajax({
                        url: $(this).attr('action'),  // 动态获取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();
                        }
                    });
                });
            }

            // 删除和确认删除
            $(document).on('click', '#deleteBtn, #confirmDeleteBtn', function (event) {
                if (event.target.id === 'deleteBtn') {
                    // 打开删除模态框
                    targetIdToDelete = $(this).data('id');
                    $('#deleteModal').modal('show');
                } else if (event.target.id === 'confirmDeleteBtn') {
                    // 确认删除
                    if (targetIdToDelete !== null) {
                        $.ajax({
                            type: 'GET',
                            url: deleteUrl,
                            data: {
                                'id': targetIdToDelete
                            },
                            success: function (response) {
                                showAlert('success', "删除成功");
                                location.reload();
                            },
                            error: function (response) {
                                showAlert('danger', "删除失败");
                            }
                        });
                    }
                    $('#deleteModal').modal('hide');
                }
            });

            // 点击下载Excel模板按钮
            $('#downloadExcelBtn').on('click', function () {
                window.location.href = excel_upload_config.template_url;
            });

            // 当上传模态框显示时，清空文件输入框和文件名显示
            $('#uploadModal').on('show.bs.modal', function () {
                $('#inputFile').val('');
                $('#file-chosen').text('未选择文件');
            });

            // 当选择文件变化时，更新文件名显示
            $('#inputFile').on('change', function () {
                var fileName = $(this).val().split('\\').pop();
                $('#file-chosen').text(fileName || '未选择文件');
            });

            // 处理上传按钮的点击事件
            $('#uploadBtn').on('click', function () {
                var inputFile = $('#inputFile').get(0).files[0];
                if (!inputFile) {
                    showAlert('danger', '未选择文件');
                    $('#uploadModal').modal('show');
                    return;
                }

                var formData = new FormData();
                formData.append('file', inputFile);  // 将文件添加到 FormData 中
                formData.append('template_name', templateName);
                formData.append('excel_valid_model', modelConfig);
                formData.append('list_url', list_url)

                $.ajax({
                    url: '{{ excel_upload_config.parse_url }}',
                    type: 'POST',
                    data: formData,
                    headers: {'X-CSRFToken': csrftoken},
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        window.location.href = response.redirect_url;
                    },
                    error: function (xhr, status, error) {
                        var errorMsg = "解析Excel文件失败。";
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMsg = xhr.responseJSON.error;
                        }
                        showAlert('danger', errorMsg);
                    }
                });
            });
        });
    </script>

{% endblock %}