<!DOCTYPE html>
<html lang="ja-JP">

<head>
    <meta charset="utf-8">
    <title>報告|eXFrame</title>
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <meta name="description" content="eXFrame">
    <link rel="stylesheet" type="text/css" href="css/style_202104.css">
    <link rel="stylesheet" type="text/css" href="css/modal_202105.css">
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <link rel="stylesheet" type="text/css" href="css/fontawesome_relative_path.css">
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
</head>

<body>
    <?php include('common/header.html');?>

    <!-- 工程一覧 -->
    <?php if($_GET["ref"] == 1) {
      include('process_list_202105.html');
      }
    ?>

    <!-- 報告 -->
    <?php if($_GET["ref"] != 1) : ?>
    <div class="container-fluid mb-5">
        <div class="row mx-lg-2">
            <div class="col-12 col-lg-4 px-0">
                <aside>
                    <nav class="side-navi mt-3 mt-lg-5">
                        <ul>
                            <li class="active"><a href="">長いタイトルの報告長いタイトルの報告長いタイトルの報告長いタイトルの報告長いタイトルの報告長いタイトルの報告長いタイトルの報告</a></li>
                        </ul>
                    </nav>
                </aside>
            </div>

            <div class="col-12 col-lg-8">
                <main>
                    <div class="row">
                            <div class="col-12 bg-lightblue mb-1px tb-accordion">
                              <h4 class="accordion-title fs-12 py-2 m-0 collapsed" data-toggle="collapse" href="#group1" role="button" aria-expanded="false" aria-controls="group1">
                                  ページ1/3
                              </h4>
                              <div class="bg-white mb-3 collapse position-relative tb-accordion-content show" id="group1">
                                  <div class="p-3">
                                    <div class="form-group mb-4">
                                        <label for="department">
                                            承認グループ <span class="badge badge-danger">必須</span>
                                        </label>
                                        <select class="form-control" id="department">
                                            <option>グループを選択</option>
                                            <option>グループ1</option>
                                            <option>グループ2</option>
                                            <option>グループ3</option>
                                        </select>
                                    </div>

                                    <div class="form-group mb-4">
                                        <label for="datetimepicker1">申請日 <span class="badge badge-danger">必須</span> <i class="fas fa-question-circle text-secondary" data-toggle="tooltip" data-placement="top" title="日付はカレンダーアイコンをタップして、選択してください。"></i></label>
                                        <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                                            <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" aria-describedby="datetimepicker1Help" placeholder="日付を選択">
                                            <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="far fa-calendar"></i></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group mb-4">
                                        <label for="name">氏名 <span class="badge badge-danger">必須</span></label>
                                        <input type="name" class="form-control" id="name" aria-describedby="nameHelp">
                                    </div>

                                    <div class="form-group mb-4">
                                        <label for="workCode">本人受領印 <i class="fas fa-question-circle text-secondary" data-toggle="tooltip" data-placement="top" title="枠内に手書きで文字を入力できます。マウス操作や指などで書き込んでください。"></i></label>
                                        <div class="p-2 text-right mb-4">
                                            <button class="btn btn-outline-primary">書き直す</button>
                                        </div>
                                        <div class="text-center">
                                          <canvas class="bg-white border border-secondary"></canvas>
                                        </div>
                                    </div>

                                    <div class="mb-4">
                                      <label for="name">表1</label>
                                      <div class="tb-wrap">
                                        <div class="bg-white mb-3 position-relative tb-item">
                                            <div class="position-absolute ad-area">
                                              <a href="javascript:void(0)" class="del"><i class="fas fa-minus p-3"></i></a>
                                              <a href="javascript:void(0)" class="add"><i class="fas fa-plus p-3"></i></a>
                                            </div>
                                            <div class="p-3">
                                              <div class="form-group mb-4">
                                                  <label for="section">区間</label>
                                                  <input type="text" class="form-control" id="section" aria-describedby="section">
                                              </div>
                                              <div class="form-group mb-4">
                                                  <label for="ammount">税込み金額</label>
                                                  <input type="number" class="form-control" id="ammount" aria-describedby="ammount">
                                              </div>
                                              <div class="form-group mb-4">
                                                  <label for="destination">行先</label>
                                                  <input type="text" class="form-control" id="destination" aria-describedby="destination">
                                              </div>
                                              <div class="form-group mb-4">
                                                  <label for="reason">事由</label>
                                                  <input type="text" class="form-control" id="reason" aria-describedby="reason">
                                              </div>
                                            </div>
                                        </div>
                                      </div>
                                    </div>

                                    <div class="form-group mb-4">
                                        <label for="department">
                                            承認グループ <span class="badge badge-danger">必須</span>
                                        </label>
                                        <select class="form-control" id="department">
                                            <option>グループを選択</option>
                                            <option>グループ1</option>
                                            <option>グループ2</option>
                                            <option>グループ3</option>
                                        </select>
                                    </div>

                                    <div class="form-group mb-4">
                                        <label for="name">氏名 <span class="badge badge-danger">必須</span></label>
                                        <input type="name" class="form-control" id="name" aria-describedby="nameHelp">
                                    </div>

                                    <div class="mb-4">
                                      <label for="name">表2</label>
                                      <div class="tb-wrap">
                                        <div class="bg-white mb-3 position-relative tb-item">
                                            <div class="position-absolute ad-area">
                                              <a href="javascript:void(0)" class="del"><i class="fas fa-minus p-3"></i></a>
                                              <a href="javascript:void(0)" class="add"><i class="fas fa-plus p-3"></i></a>
                                            </div>
                                            <div class="p-3">
                                              <div class="form-group mb-4">
                                                  <label for="section">区間</label>
                                                  <input type="text" class="form-control" id="section" aria-describedby="section">
                                              </div>
                                              <div class="form-group mb-4">
                                                  <label for="ammount">税込み金額</label>
                                                  <input type="number" class="form-control" id="ammount" aria-describedby="ammount">
                                              </div>
                                              <div class="form-group mb-4">
                                                  <label for="destination">行先</label>
                                                  <input type="text" class="form-control" id="destination" aria-describedby="destination">
                                              </div>
                                              <div class="form-group mb-4">
                                                  <label for="reason">事由</label>
                                                  <input type="text" class="form-control" id="reason" aria-describedby="reason">
                                              </div>
                                            </div>
                                        </div>
                                      </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="col-12 bg-lightblue mb-1px tb-accordion">
                            <h4 class="accordion-title fs-12 py-2 m-0 collapsed" data-toggle="collapse" href="#group2" role="button" aria-expanded="false" aria-controls="group2">
                                ページ2/3
                            </h4>
                            <div class="bg-white mb-3 collapse position-relative tb-accordion-content" id="group2">
                              <div class="p-3">
                                <div class="form-group mb-4">
                                    <label for="department">
                                        承認グループ <span class="badge badge-danger">必須</span>
                                    </label>
                                    <select class="form-control" id="department">
                                        <option>グループを選択</option>
                                        <option>グループ1</option>
                                        <option>グループ2</option>
                                        <option>グループ3</option>
                                    </select>
                                </div>

                                <div class="form-group mb-4">
                                    <label for="name">氏名 <span class="badge badge-danger">必須</span></label>
                                    <input type="name" class="form-control" id="name" aria-describedby="nameHelp">
                                </div>

                                <div class="mb-4">
                                  <label for="name">表1</label>
                                  <div class="tb-wrap">
                                    <div class="bg-white mb-3 position-relative tb-item">
                                        <div class="position-absolute ad-area">
                                          <a href="javascript:void(0)" class="del"><i class="fas fa-minus p-3"></i></a>
                                          <a href="javascript:void(0)" class="add"><i class="fas fa-plus p-3"></i></a>
                                        </div>
                                        <div class="p-3">
                                          <div class="form-group mb-4">
                                              <label for="section">区間</label>
                                              <input type="text" class="form-control" id="section" aria-describedby="section">
                                          </div>
                                          <div class="form-group mb-4">
                                              <label for="ammount">税込み金額</label>
                                              <input type="number" class="form-control" id="ammount" aria-describedby="ammount">
                                          </div>
                                        </div>
                                    </div>
                                  </div>
                                </div>

                                <div class="form-group mb-4">
                                    <label for="name">氏名 <span class="badge badge-danger">必須</span></label>
                                    <input type="name" class="form-control" id="name" aria-describedby="nameHelp">
                                </div>

                              </div>
                            </div>
                        </div>

                        <div class="col-12 bg-lightblue mb-1px tb-accordion">
                            <h4 class="accordion-title fs-12 py-2 m-0 collapsed position-relative" data-toggle="collapse" href="#group3" role="button" aria-expanded="false" aria-controls="group3">
                                ページ3/3
                            </h4>

                            <div class="bg-white mb-3 collapse position-relative tb-accordion-content" id="group3">
                              <div class="p-3">
                                <div class="form-group mb-4">
                                    <label for="department">
                                        承認グループ <span class="badge badge-danger">必須</span>
                                    </label>
                                    <select class="form-control" id="department">
                                        <option>グループを選択</option>
                                        <option>グループ1</option>
                                        <option>グループ2</option>
                                        <option>グループ3</option>
                                    </select>
                                </div>

                                <div class="form-group mb-4">
                                    <label for="name">氏名 <span class="badge badge-danger">必須</span></label>
                                    <input type="name" class="form-control" id="name" aria-describedby="nameHelp">
                                </div>

                                <div class="mb-4">
                                  <label for="name">表1</label>
                                  <div class="tb-wrap">
                                    <div class="bg-white mb-3 position-relative tb-item">
                                        <div class="position-absolute ad-area">
                                          <a href="javascript:void(0)" class="del"><i class="fas fa-minus p-3"></i></a>
                                          <a href="javascript:void(0)" class="add"><i class="fas fa-plus p-3"></i></a>
                                        </div>
                                        <div class="p-3">
                                          <div class="form-group mb-4">
                                              <label for="section">区間</label>
                                              <input type="text" class="form-control" id="section" aria-describedby="section">
                                          </div>
                                          <div class="form-group mb-4">
                                              <label for="ammount">税込み金額</label>
                                              <input type="number" class="form-control" id="ammount" aria-describedby="ammount">
                                          </div>
                                        </div>
                                    </div>
                                  </div>
                                </div>

                                <div class="form-group mb-4">
                                    <label for="name">氏名 <span class="badge badge-danger">必須</span></label>
                                    <input type="name" class="form-control" id="name" aria-describedby="nameHelp">
                                </div>

                              </div>
                            </div>
                        </div>

                        <div class="col-12 d-flex">
                            <div class="p-2 flex-grow-1">
                              <button class="btn btn-outline-primary del-btn">削除</button>
                            </div>
                            <div class="p-2">
                                <button class="btn btn-outline-primary sv-btn">保存</button>
                            </div>
                            <div class="p-2">
                                <button class="btn bg-primary text-white sb-btn">送信</button>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    <?php endif; ?>
    <script type="text/javascript" src="js/app_202104.js"></script>
    <script type="text/javascript" src="js/app.js" defer></script>
</body>

</html>