from jinja2 import Template

template_str = """
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        datalist {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            writing-mode: vertical-lr;
            width: 200px;
        }

        option {
            padding: 0;
        }

        input[type="range"] {
            width: 200px;
            margin: 0;
        }

        output {
            background: #f9f9f9;
            border: solid 1px #ccc;
            display: inline-block;
            padding: 0.2em 1em;
            margin: 0 0 0 10px;
        }

        .box {
            display: flex;
            flex-wrap: wrap; /* 追加：改行設定 */
            max-height: 300px;
            max-width: 1800px; /* 追加：最大高さ */
            overflow-y: auto; /* 追加：縦スクロール */
            margin-bottom: 20px; /* 追加：下部のマージン */
        }

        .box__card {
            margin-right: 30px;
            margin-bottom: 20px; /* 追加：下部のマージン */
            border: 1px solid #333; /* 追加：ボーダー */
            width: 220px;
            height:150px;
            padding: 10px; /* 追加：パディング */
            overflow-y: auto; /* 追加：縦スクロール */
        }

        .box__card:last-child {
            margin-right: 0;
        }

        table {
            border-collapse: collapse;
            text-align: left;
            width: 100%;
        }

        th,
        td {
            padding: 5px;
            border: 1px solid #333;
        }

        .text-center {
            text-align: center;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <a href="/logout">ログアウトする</a>

    <h1>{{ session['name'] }} さんの成績について入力してください</h1>

    <table>
        <form action="/submit" method="POST" enctype="multipart/form-data">
            {% for category, subjects in categories.items() %}
            <h2>{{ category }}</h2>
            <div class="box">
                {% for subject in subjects %}
                <div class="box__card">
                    <label for="{{ subject }}">{{ subject }}の成績</label><br />
                    <input type="range" id="{{ category|lower }}_{{ subject|lower }}" name="{{ category|lower }}_{{ subject|lower }}" list="tickmarks" min="-1"
                        max="4" step="1" value="-1">
                    <datalist id="tickmarks">
                        <option value="-1" label="未"></option>
                        <option value="0" label="落単"></option>
                        <option value="1" label="Ｃ"></option>
                        <option value="2" label="Ｂ"></option>
                        <option value="3" label="Ａ"></option>
                        <option value="4" label="Ｓ"></option>
                    </datalist>
                    <input type="checkbox" name="{{ category|lower }}_{{ subject|lower }}_checkbox">
                </div>
                {% endfor %}
            </div>
            <div class="box">
                <button type="button" onclick="setCategoryValues('{{ category }}', -1)">すべてできない</button>
                <button type="button" onclick="setCategoryValues('{{ category }}', 4)">全てできる</button>
            </div>
            {% endfor %}
            <button type="submit">更新します</button>
        </form>
    </table>

    <script>
        function setCategoryValues(category, value) {
            // 指定したカテゴリのすべての科目の値を一括で設定
            var subjects = document.querySelectorAll('input[type="range"]');
            subjects.forEach(function (subject) {
                var subjectCategory = subject.id.split('_')[0]; // カテゴリを取得
                if (subjectCategory === category && subject.name.includes(category)) {
                    subject.value = value;
                }
            });
        }
    </script>

</body>

</html>
"""
import pandas as pd


# テンプレートを作成
template = Template(template_str)



df_JE = pd.read_csv("JE.csv")
df_JE=df_JE["単元名"]
JE = df_JE.to_numpy()

df_ME = pd.read_csv("ME.csv")
df_ME=df_ME["単元名"]
ME = df_ME.to_numpy()

df_EE = pd.read_csv("EE.csv")
df_EE=df_EE["単元名"]
EE = df_EE.to_numpy()

df_SE = pd.read_csv("SE.csv")
df_SE=df_SE["単元名"]
SE = df_SE.to_numpy()

df_CE = pd.read_csv("CE.csv")
df_CE=df_CE["単元名"]
CE = df_CE.to_numpy()

df_JJ = pd.read_csv("JJ.csv")
df_JJ=df_JJ["単元名"]
JJ = df_JJ.to_numpy()

df_MJ = pd.read_csv("MJ.csv")
df_MJ=df_MJ["単元名"]
MJ = df_MJ.to_numpy()

df_EJ = pd.read_csv("EJ.csv")
df_EJ=df_EJ["単元名"]
EJ = df_EJ.to_numpy()

df_SJ = pd.read_csv("SJ.csv")
df_SJ=df_SJ["単元名"]
SJ = df_SJ.to_numpy()

df_CJ = pd.read_csv("CJ.csv")
df_CJ=df_CJ["単元名"]
CJ = df_CJ.to_numpy()








# テンプレートに渡すデータ
categories = {


    "小学校国語":JE,
    "小学校算数":ME,
    "小学校英語":EE,
    "小学校理科":SE,
    "小学校社会":CE,
    "中学国語":JJ,
    "中学数学":MJ,
    "中学英語":EJ,
    "中学理科":SJ,
    "中学社会":CJ
}

print(categories)
session = {"name": "ユーザー名"}

# テンプレートにデータを渡してHTML生成
result_html = template.render(categories=categories, session=session)

# 生成されたHTMLをファイルに保存
with open('rikai1.html', 'w', encoding='utf-8') as file:
    file.write(result_html)

print("HTMLファイルが生成されました: index.html")