<html>
  <div class="outerframe">
    <%- include("javascripts.ejs") %>
    <main role="main" class="container mt-3">
      <div class="align-self-center col-md-12">
        <form action="/search" method="GET" class="my-0">
          <div class="form-group row justify-content-center">
            <div class="input-group my-3 col-sm-8">
              <input type="text" class="form-control" id="keyword" name="keyword" autofocus="autofocus" />
              <div class="input-group-append">
                <button class="btn btn-secondary" type="submit"><i class="fa fa-fw fa-search"></i></button>
              </div>
            </div>
          </div>
        </form>

        <div class="switch-button-container">
          <button id="mapButton" class="switch-button active" onclick="showSection('map')">橋梁マップ</button>
          <button id="recentPostsButton" class="switch-button" onclick="showSection('recent-posts')">最新の投稿</button>
          <button id="topUsersButton" class="switch-button" onclick="showSection('top-users')">ME-TOP3</button>
          <button id="nearestBridgesButton" class="switch-button" onclick="showSection('nearest-bridges')">最寄りの橋梁</button>
          <% if (user && user.is_admin) { %>
          <button id="hashiyasumeButton" class="switch-button" onclick="showSection('hashiyasume')">橋休め</button>
          <% } %>
          <% if (user && user.is_admin) { %>
            <button id="pendingReviewsButton" class="switch-button" onclick="showSection('pending-reviews')">未対応及び対応中の投稿</button>
          <% } %>
        </div>

        <div id="map-container" class="content-section">
          <div class="filter-container">
            <div class="filter-buttons">
              <button class="filter-button" id="toggleSmallButton" onclick="togglePinVisibility('small')">0~30m²</button>
              <button class="filter-button" id="toggleMediumButton" onclick="togglePinVisibility('medium')">30~100m²</button>
              <button class="filter-button" id="toggleLargeButton" onclick="togglePinVisibility('large')">100~1000m²</button>
              <button class="filter-button" id="toggleVeryLargeButton" onclick="togglePinVisibility('verylarge')">1000m²~</button>
              <button class="filter-button" id="toggleHelth1" onclick="toggleHelth1('helth1')">健全度Ⅰ</button>
              <button class="filter-button" id="toggleHelth2" onclick="toggleHelth2('helth2')">健全度Ⅱ</button>
              <button class="filter-button" id="toggleHelth3" onclick="toggleHelth3('helth3')">健全度Ⅲ</button>
              <button class="filter-button" id="toggleEmergency" onclick="toggleEmergency()">緊急輸送道路</button>
              <button class="filter-button" id="toggleNonEmergency" onclick="toggleNonEmergency()">非緊急輸送道路</button>
            </div>
            <button class="filter-button reset-button" id="resetFiltersButton" onclick="resetFilters()">
              <i class="fas fa-redo-alt"></i>
            </button>
          </div>
          <div id="map"></div>
        </div>

        <div class="recent-posts-container content-section" style="display: none;">
          <div class="recent-posts-header">
            <img src="/public/favicon.ico" alt="favicon">
            <h2>最新の投稿</h2>
            <img src="/public/favicon.ico" alt="favicon">
          </div>
          <ul>
            <% recentPosts.forEach(function(post) { %>
              <li>
                <a href="/bridges/<%= post.shop_id %>" class="<%= post.score == 1 ? 'healthy-1' : post.score >= 2 && post.score <= 3 ? 'healthy-2-3' : post.score == 4 ? 'healthy-4' : '' %>">
                  <strong>橋梁名:</strong> <%= post.bridge_name %><br>
                  <strong>損傷程度:</strong> <%= post.score %><br>
                  <strong>投稿内容:</strong> <%= post.description %> <br><strong>投稿日時:</strong><br> <%= moment(post.post).format('YYYY-MM-DD HH:mm') %>
                </a>
              </li>
            <% }); %>
          </ul>
        </div>

        <div class="top-users-container content-section" style="display: none;">
          <h2 class="section-title mt-5">
            <img src="/public/favicon.ico" alt="Icon">
            ME-TOP3
            <img src="/public/favicon.ico" alt="Icon">
          </h2>
          <ul>
            <% topUsers.forEach(function(user, index) { %>
              <li class="<%= index === 0 ? 'gold' : index === 1 ? 'silver' : index === 2 ? 'bronze' : '' %> user-card">
                <strong><%= user.name %></strong>
                <span>いいね数 : <%= user.like_count %></span>
              </li>
            <% }); %>
          </ul>
        </div>

        <% if (user && user.is_admin) { %>
          <div class="pending-reviews-container content-section" style="display: none;">
            <div class="pending-reviews-header">
              <img src="/public/favicon.ico" alt="favicon">
              <h2>未対応及び対応中の投稿</h2>
              <img src="/public/favicon.ico" alt="favicon">
            </div>
          
          
            <div>
              <label for="damage-filter-select">損傷程度別表示:</label>
              <select id="damage-filter-select" onchange="filterByDamage()">
                <option value="all">全て</option>
                <option value="1">損傷程度1</option>
                <option value="2-3">損傷程度2-3</option>
                <option value="4">損傷程度4</option>
              </select>
            </div>
          
            <ul id="pending-reviews-list">
              <% pendingReviews.forEach(function(review) { %>
                <li class="review-item" data-score="<%= review.score %>">
                  <a href="/bridges/<%= review.shop_id %>" class="<%= review.score == 1 ? 'healthy-1' : review.score >= 2 && review.score <= 3 ? 'healthy-2-3' : review.score == 4 ? 'healthy-4' : '' %>">
                    <strong>橋梁名:</strong> <%= review.shop_id %><br>
                    <strong>損傷程度:</strong> <%= review.score %><br>
                    <strong>投稿内容:</strong> <%= review.description %> <br><strong>投稿日時:</strong><br> <%= moment(review.post).format('YYYY-MM-DD HH:mm') %>
                  </a>
               
                  <button class="reply-toggle-button" onclick="toggleReplyBox(<%= review.id %>)">返信する</button>
          
                 
                  <div>
                    <label for="status-select-<%= review.id %>">対応状況:</label>
                    <select id="status-select-<%= review.id %>" onchange="updateReviewStatus(<%= review.id %>)">
                      <option value="未対応" <%= review.status === '未対応' ? 'selected' : '' %>>未対応</option>
                      <option value="対応中" <%= review.status === '対応中' ? 'selected' : '' %>>対応中</option>
                      <option value="対応済み" <%= review.status === '対応済み' ? 'selected' : '' %>>対応済み</option>
                    </select>
                  </div>
          
                 
                  <div id="reply-box-<%= review.id %>" class="reply-box" style="display: none;">
                    <form action="/bridges/reply/<%= review.id %>" method="POST" class="mt-3">
                      <input type="hidden" name="bridge_id" value="<%= review.shop_id %>" />
                      <div class="form-group">
                        <textarea class="form-control" name="content" rows="2" placeholder="返信を入力"></textarea>
                      </div>
                      <button type="submit" class="btn btn-primary">送信</button>
                    </form>
                  </div>
                </li>
              <% }); %>
            </ul>
          </div>
        <% } %>

        <div class="hashiyasume-container content-section" style="display: none;">
          <div class="slot-banner">
            <img src="/public/hashiyasume.webp" alt="Hashiyasume Banner">
          </div>
          <div class="slot-machine">
            <div class="slot-column">
              <div class="slot-container">
                <div id="slot1" class="slot">
                  <div class="symbol">小橋</div>
                  <div class="symbol">B橋</div>
                  <div class="symbol">大橋</div>
                  <div class="symbol">ME</div>
                  <div class="symbol"><img src="/public/favicon.ico" alt="favicon"></div>
                  <div class="symbol">小橋</div>
                  <div class="symbol">B橋</div>
                  <div class="symbol">大橋</div>
                  <div class="symbol">ME</div>
                  <div class="symbol"><img src="/public/favicon.ico" alt="favicon"></div>
                </div>
              </div>
              <button class="stop-button" onclick="stopSlot('slot1')"></button>
            </div>
            <div class="slot-column">
              <div class="slot-container">
                <div id="slot2" class="slot">
                  <div class="symbol">小橋</div>
                  <div class="symbol">B橋</div>
                  <div class="symbol">大橋</div>
                  <div class="symbol">ME</div>
                  <div class="symbol"><img src="/public/favicon.ico" alt="favicon"></div>
                  <div class="symbol">小橋</div>
                  <div class="symbol">B橋</div>
                  <div class="symbol">大橋</div>
                  <div class="symbol">ME</div>
                  <div class="symbol"><img src="/public/favicon.ico" alt="favicon"></div>
                </div>
              </div>
              <button class="stop-button" onclick="stopSlot('slot2')"></button>
            </div>
            <div class="slot-column">
              <div class="slot-container">
                <div id="slot3" class="slot">
                  <div class="symbol">小橋</div>
                  <div class="symbol">B橋</div>
                  <div class="symbol">大橋</div>
                  <div class="symbol">ME</div>
                  <div class="symbol"><img src="/public/favicon.ico" alt="favicon"></div>
                  <div class="symbol">小橋</div>
                  <div class="symbol">B橋</div>
                  <div class="symbol">大橋</div>
                  <div class="symbol">ME</div>
                  <div class="symbol"><img src="/public/favicon.ico" alt="favicon"></div>
                </div>
              </div>
              <button class="stop-button" onclick="stopSlot('slot3')"></button>
            </div>
            <div class="lever-container">
              <div class="lever" onclick="spin()"></div>
            </div>
          </div>
          <div class="coin-display" id="coinDisplay">30</div> 
          <div class="slot-footer">
            <img src="/public/hashiyasume2.webp" alt="Hashiyasume Banner">
          </div>
        </div>

        <div class="nearest-bridges-container content-section" style="display: none;">
          <h2 class="section-title mt-5">
            <img src="/public/favicon.ico" alt="Icon">
            最寄りの橋梁
            <img src="/public/favicon.ico" alt="Icon">
          </h2>
          <ul id="nearest-bridges-list">
            
          </ul>
        </div>
      
      </div>
   
      <div id="loginModal" class="modal">
        <div class="modal-content">
          <div class="modal-header">
            <span class="close" onclick="closeModal()">&times;</span>
          </div>
          <h2 style="text-align:center">Voices of Bridges</h2>
          <div class="modal-body">
            <p>ログインすることで投稿機能を含むすべての機能をお使いいただけます。</p>
          </div>
          <div class="modal-footer">
            <button class="modal-button" onclick="redirectToLogin()">ログイン画面へ進む</button>
            <button class="modal-button" onclick="closeModal()">ログインせずに続ける</button>
          </div>
        </div>
      </div>
    </main>
  </div>
</html>