<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>顧客情報編集</title>
    <style>
        :root {
            --bg-color: #f5f5f5;
            --container-bg: #fff;
            --text-color: #333;
            --border-color: #ccc;
            --button-cancel: #f1c40f;
            --button-save: #2ecc71;
            --input-bg: #fff;
            --input-focus: #3498db;
        }

        body.dark-mode {
            --bg-color: #2c3e50;
            --container-bg: #34495e;
            --text-color: #ecf0f1;
            --border-color: #7f8c8d;
            --button-cancel: #f39c12;
            --button-save: #27ae60;
            --input-bg: #2c3e50;
            --input-focus: #3498db;
        }

        body {
            font-family: 'Meiryo', 'Helvetica Neue', Arial, sans-serif;
            font-size: 12px;
            line-height: 1.4;
            color: var(--text-color);
            width: 600px;
            margin: 20px auto;
            background-color: var(--bg-color);
            transition: background-color 0.3s ease;
        }
        .container {
            background-color: var(--container-bg);
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            transition: background-color 0.3s ease, border-color 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        h1 {
            font-size: 18px;
            margin: 0 0 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        .form-group {
            margin-bottom: 15px;
        }
        .mini-title {
            font-weight: bold;
            display: inline-block;
            width: 80px;
            margin-right: 10px;
        }
        label {
            display: inline-block;
            width: 30px;
            margin-right: 5px;
        }
        input[type="text"],
        input[type="email"],
        input[type="date"] {
            width: 120px;
            padding: 8px 12px;
            margin-right: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background-color: var(--input-bg);
            color: var(--text-color);
            transition: all 0.3s ease;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="date"]:focus {
            outline: none;
            border-color: var(--input-focus);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
        }
        input[type="radio"] {
            margin-right: 3px;
        }
        .name-group input,
        .address-group input,
        .contact-group input {
            width: 100px;
        }
        .postcode input {
            width: 50px;
        }
        .button-group {
            text-align: right;
            margin-top: 20px;
        }
        button {
            padding: 8px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s ease;
            text-transform: uppercase;
            font-weight: bold;
            letter-spacing: 0.5px;
        }
        #cancelButton {
            background-color: var(--button-cancel);
            color: #000;
            margin-right: 10px;
        }
        #cancelButton:hover {
            background-color: #f39c12;
        }
        #saveButton {
            background-color: var(--button-save);
            color: white;
        }
        #saveButton:hover {
            background-color: #2ecc71;
        }
        #darkModeToggle {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 18px;
            padding: 5px;
            border-radius: 50%;
            transition: background-color 0.3s ease;
        }
        #darkModeToggle:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <button id="darkModeToggle">🌓</button>
    <div class="container">
        <h1>顧客情報編集</h1>
        <form id="customerForm">
            <div class="form-group name-group">
                <span class="mini-title">名前</span>
                <label for="seiKanji">姓</label>
                <input type="text" id="seiKanji" name="seiKanji" placeholder='姓'>
                <label for="meiKanji">名</label>
                <input type="text" id="meiKanji" name="meiKanji" placeholder='名'>
            </div>
            <div class="form-group name-group">
                <span class="mini-title"></span>
                <label for="seiKana">セイ</label>
                <input type="text" id="seiKana" name="seiKana" placeholder='セイ'>
                <label for="meiKana">メイ</label>
                <input type="text" id="meiKana" name="meiKana" placeholder='メイ'>
            </div>

            <div class="form-group address-group">
                <span class="mini-title">住所</span>
                <span class="postcode">
                    <input type="text" id="postCode1" name="postCode1" placeholder="000">
                    <span>-</span>
                    <input type="text" id="postCode2" name="postCode2" placeholder="0000">
                </span>
            </div>
            <div class="form-group address-group">
                <span class="mini-title"></span>
                <input type="text" id="addressMain" name="addressMain" style="width: 350px;" placeholder="住所メイン">
            </div>
            <div class="form-group address-group">
                <span class="mini-title"></span>
                <input type="text" id="addressSub" name="addressSub" style="width: 350px;" placeholder="住所サブ">
            </div>

            <div class="form-group contact-group">
                <span class="mini-title">TEL</span>
                <input type="text" id="telMain" name="telMain" placeholder="TELメイン">
                <input type="text" id="telSub" name="telSub" placeholder="TELサブ">
                <input type="text" id="telSub2" name="telSub2" placeholder="TELサブ2">
            </div>

            <div class="form-group contact-group">
                <span class="mini-title">メール</span>
                <input type="email" id="email" name="email" placeholder="メールメイン">
                <input type="email" id="emailSub" name="emailSub" placeholder="メールサブ">
            </div>

            <div class="form-group">
                <span class="mini-title">生年月日</span>
                <input type="date" id="birthday" name="birthday">
            </div>

            <div class="form-group">
                <span class="mini-title">性別</span>
                <input type="radio" id="man" name="sex" value="男性">
                <label for="man">男性</label>
                <input type="radio" id="woman" name="sex" value="女性">
                <label for="woman">女性</label>
            </div>

            <div class="button-group">
                <button type="button" id="cancelButton">キャンセル</button>
                <button type="button" id="saveButton">保存</button>
            </div>
        </form>
    </div>

    <script>
        /* ページの読み込みが完了したらFileMakerスクリプトを実行する */
        window.onload = function () {
            FileMaker.PerformScript('Webビューアロード完了', 'SettingInitialValues');
        };

        /* FileMakerの「webビューアでJavaScriptを実行」でこの関数を呼び出す。 */
        /* 受け取ったjsonをオブジェクトに変換し、初期値に設定する */
        function SettingInitialValues(json) {
            const customerObj = JSON.parse(json);
            Object.keys(customerObj).forEach(key => {
                const element = document.getElementById(key);
                if (element) {
                    if (element.type === 'radio') {
                        document.querySelector(`input[name="sex"][value="${customerObj[key]}"]`).checked = true;
                    } else {
                        element.value = customerObj[key];
                    }
                }
            });
        }

        /* キャンセルボタン押下時イベント */
        document.getElementById('cancelButton').addEventListener('click', () => {
            if (confirm('変更内容を破棄して元の画面に戻りますか？')) {
                FileMaker.PerformScript('ウインドウを閉じる');
            }
        });

        /* 保存ボタン押下時イベント */
        document.getElementById('saveButton').addEventListener('click', () => {
            const formData = new FormData(document.getElementById('customerForm'));
            const customerInfo = {};
            for (let [key, value] of formData.entries()) {
                customerInfo[key] = value;
            }
            customerInfo.sex = document.querySelector('input[name="sex"]:checked')?.value || '';
            
            /* 結果をFileMakerへ */
            FileMaker.PerformScript('顧客情報を反映', JSON.stringify(customerInfo));
        });

        const darkModeToggle = document.getElementById('darkModeToggle');
        darkModeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
        });
    </script>
</body>
</html>