<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>会議室予約(滋賀PJ)【一括登録】</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="favicon.ico">
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">
        <link rel="stylesheet" href="multi_register.css" type="text/css">
    </head>
    <body class="w3-khaki" oncontextmenu="return false;">
        <div class="w3-row">
            <h2 id="title">会議室予約(滋賀PJ)【一括登録】</h2>
            <button id="backbtn" onclick="window.location.reload(true);">
                <i class="fa fa-reply"></i>
            </button>
        </div>
        <div class="w3-row">
            <div id="calendarCol" class="w3-col">
                <div id="calendarArea" class="w3-card w3-sand">
                    <div id="calendar"></div>
                </div>
            </div>
            <div class="w3-rest">
                <div id="eventArea" class="w3-card w3-sand">
                    <form id="form" method="dialog">
                        <div>
                            <h2>【予約一括登録】</h2>
                        </div>
                        <h3 id="room-name"></h3>
                        <div class="row">
                            <label for="start" class="roomlabel">Room:</label>
                            <select class="w3-select" id='roomid' name='room'>
<?php 
    echo $room_data;
?>
                            </select>
                        </div>
                        <h3 id="date"></h3>
                        <div class="row">
                            <label for="start">Start:</label>
                            <input type="time" id="start" name="start-time" step="300">
                        </div>
                        <div class="row">
                            <label for="end">End:</label>
                            <input type="time" id="end" name="end-time" step="300">
                        </div>
                        <div class="row">
                            <label for="color">Color:</label>
                            <input type="color" id="color" name="favcolor" value="#ff0000">
                        </div>
                        <div class="row">
                            <label for="comment">Comment:</label>
                            <textarea id="comment" name="comment"></textarea>
                        </div>
                        <div>
                            <div class="btnRight">
                                <button id="confirm" type="submit" class="w3-btn w3-blue w3-border w3-round-large">一括登録</button>
                            </div>
                        </div>
                    </form>
                    <hr>
                    <div>
                        <h4>【使い方】</h4>
                        <ul class="list-2">
                            <li>カレンダーをクリックし、登録する日を赤色に変更する。</li>
                            <li>会議室・開始時刻・終了時刻・色・コメント(名前)を入力。</li>
                            <li>一括登録ボタン押下</li>
                        </ul>
                    </div>
                    <hr>
                    <div>
                        <h4>【注意】</h4>
                        <ul class="list-1">
                            <li>一括削除はできません。</li>
                            <li>予約が既に登録されている時間帯はスキップされます。</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <script id="script" type="text/javascript" src="multi_register.js"></script>
    </body>
</html>
