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_JH = pd.read_csv("JH.csv")
df_JH=df_JH["単元名"]
JH = df_JH.to_numpy()

df_MH = pd.read_csv("MH.csv")
df_MH=df_MH["単元名"]
MH = df_MH.to_numpy()

df_EH = pd.read_csv("EH.csv")
df_EH=df_EH["単元名"]
EH = df_EH.to_numpy()

df_BH = pd.read_csv("BH.csv")
df_BH=df_BH["単元名"]
BH = df_BH.to_numpy()

df_KH = pd.read_csv("KH.csv")
df_KH=df_KH["単元名"]
KH = df_KH.to_numpy()

df_SH = pd.read_csv("SH.csv")
df_SH=df_SH["単元名"]
SH = df_SH.to_numpy()

df_CH = pd.read_csv("CH.csv")
df_CH=df_CH["単元名"]
CH = df_CH.to_numpy()

df_GH = pd.read_csv("GH.csv")
df_GH=df_GH["単元名"]
GH = df_GH.to_numpy()

df_HH = pd.read_csv("HH.csv")
df_HH=df_HH["単元名"]
HH = df_HH.to_numpy()

df_PH = pd.read_csv("PH.csv")
df_PH=df_PH["単元名"]
PH = df_PH.to_numpy()






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


    "高校国語":JH,
    "高校数学":MH,
    "高校英語":EH,
    "高校物理":BH,
    "高校科学":KH,
    "高校生物":SH,
    "高校地学":CH,
    "高校地理":GH,
    "高校歴史":HH,
    "高校公共":PH


}

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

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

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

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