<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人员信息管理</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='ico.png') }}">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            background-color: #f0f2f5;
        }
        .sidebar {
            width: 200px;
            background-color: #333;
            color: white;
            padding-top: 20px;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            overflow: auto;
        }
        .sidebar a {
            display: block;
            color: white;
            padding: 10px 15px;
            text-decoration: none;
        }
        .sidebar a:hover, .sidebar a.active {
            background-color: #007bff;
            color: white;
        }
        .content {
            margin-left: 200px;
            padding: 20px;
            width: calc(100% - 200px);
        }
        h1 {
            background-color: #007bff;
            color: white;
            padding: 20px;
            margin: 0;
            border-radius: 5px;
        }
        table {
            width: 100%;
            margin: 20px auto;
            border-collapse: collapse;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            overflow: hidden;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #007bff;
            color: white;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        img {
            max-width: 100px;
            height: auto;
            border-radius: 5px;
        }
        form {
            margin-bottom: 0;
        }
        .form-inline input[type="text"],
        .form-inline input[type="file"] {
            width: auto;
            padding: 5px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-inline button {
            background-color: #007bff;
            color: white;
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .form-inline button:hover {
            background-color: #0056b3;
        }
        .form-container {
            max-width: 600px;
            margin: 40px auto;
            padding: 20px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .form-container h2 {
            background-color: #007bff;
            color: white;
            padding: 15px;
            margin-top: 0;
            text-align: center;
            border-radius: 5px 5px 0 0;
        }
        .form-container .form-group {
            margin-bottom: 15px;
        }
        .form-container .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-container .form-group input[type="text"],
        .form-container .form-group input[type="file"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-container button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
            margin-top: 10px;
        }
        .form-container button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <a href="/">进入记录</a>
        <a href="/info_person" class="active">人员信息</a>
    </div>

    <div class="content">
        <h1>人员信息管理</h1>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>身份</th>
                    <th>照片</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for person in persons %}
                <tr>
                    <td>{{ person[1] }}</td>
                    <td>{{ person[2] }}</td>
                    <td><img src="../static/{{ person[3] }}" alt="Photo of {{ person[1] }}"></td>
                    <td>
                        <form method="POST" enctype="multipart/form-data" class="form-inline">
                            <input type="hidden" name="id" value="{{ person[0] }}">
                            <input type="text" name="name" value="{{ person[1] }}" required>
                            <input type="text" name="identity" value="{{ person[2] }}" required>
                            <input type="hidden" name="current_image_path" value="{{ person[3] }}">
                            <input type="file" name="image_path" onchange="previewImage(event, {{ person[0] }})">
                            <input type="text" name="encoding" value="{{ person[4] }}" required>
                            <button type="submit" name="update">更新</button>
                        </form>
                        <form method="POST" class="form-inline">
                            <input type="hidden" name="id" value="{{ person[0] }}">
                            <button type="submit" name="delete">删除</button>
                        </form>
                    </td>
                </tr>

                {% endfor %}
            </tbody>
        </table>

        <div class="form-container">
           <h2>添加新人员</h2>
            <form method="POST" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" name="name" id="name" placeholder="姓名" required>
                </div>
                <div class="form-group">
                    <label for="identity">身份</label>
                    <input type="text" name="identity" id="identity" placeholder="身份" required>
                </div>
                <div class="form-group">
                    <label for="image_path">照片</label>
                    <input type="file" name="image_path" id="image_path" onchange="previewNewImage(event)" required>
                    <img id="new-image-preview" src="#" alt="New Image Preview" style="max-width: 100px; height: auto; border-radius: 5px; display: none;">
                </div>
                <button type="submit" name="add">添加</button>
            </form>
        </div>
    </div>

    <script>
        // 预览现有记录的图像
        function previewImage(event, personId) {
            var reader = new FileReader();
            reader.onload = function(){
                var output = document.getElementById('image-preview-' + personId);
                output.src = reader.result;
            };
            reader.readAsDataURL(event.target.files[0]);
        }

        // 预览添加新人员时的图像
        function previewNewImage(event) {
            var reader = new FileReader();
            reader.onload = function(){
                var output = document.getElementById('new-image-preview');
                output.src = reader.result;
                output.style.display = 'block';
            };
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
</body>
</html>
