飲食店検索のソースを表示

== 検索条件 ==
<!-- 検索ボックス -->
<html>
<form method="get" action="" id="searchForm">
    <div style="padding: 10px;">
    <!-- 予約可 -->
    <div class="form-row">
        <div class="clear-btn">クリア</div>
        <input type="submit" value="検索" class="search-btn" />
    </div>    <div class="form-row">
        <span>予約できる店だけ</span>
        <label class="toggle">
            <input type="checkbox" name="reservable" value="1">
            <span class="slider"></span>
        </label>
    </div>
    <!-- 店名 -->
    <input class="form-row inputbox" type="text" name="searchText" placeholder="店名" id="searchText"/>
    <!-- ジャンル -->
    <div class="form-row">
        <select name="genre" id="genre" class="inputbox">
            <option value="">すべてのジャンル</option>
            <option value="居酒屋">居酒屋</option>
            <option value="ダイニングバー・バル">ダイニングバー・バル</option>
            <option value="創作料理">創作料理</option>
            <option value="和食">和食</option>
            <option value="洋食">洋食</option>
            <option value="イタリアン・フレンチ">イタリアン・フレンチ</option>
            <option value="中華">中華</option>
            <option value="焼肉・ホルモン">焼肉・ホルモン</option>
            <option value="韓国料理">韓国料理</option>
            <option value="アジア・エスニック料理">アジア・エスニック料理</option>
            <option value="各国料理">各国料理</option>
            <option value="カラオケ・パーティ">カラオケ・パーティ</option>
            <option value="バー・カクテル">バー・カクテル</option>
            <option value="ラーメン">ラーメン</option>
            <option value=" お好み焼き・もんじゃ"> お好み焼き・もんじゃ</option>
            <option value="カフェ・スイーツ">カフェ・スイーツ</option>
            <option value="その他グルメ">その他グルメ</option>
        </select>
    </div>
    <!-- 最寄り -->
    <div class="form-row">
        <select name="station" class="inputbox" id="station">
            <option value="">最寄り駅：指定なし</option>
            <option value="川西能勢口駅">川西能勢口</option>
            <option value="雲雀丘花屋敷駅">雲雀丘花屋敷</option>
            <option value="川西池田駅">川西池田</option>
            <option value="北伊丹駅">北伊丹</option>
            <option value="絹延橋駅">絹延橋</option>
            <option value="滝山駅">滝山</option>
            <option value="鴬の森駅">鴬の森</option>
            <option value="鼓滝駅">鼓滝</option>
            <option value="多田駅">多田</option>
            <option value="平野駅">平野</option>
            <option value="一の鳥居駅">一の鳥居</option>
            <option value="畦野駅">畦野</option>
            <option value="山下駅">山下</option>
            <option value="笹部駅">笹部</option>
        </select>
    </div>
    <!-- 予算 -->
    <div class="budget-box">
        <label>予算</label>
        <div>
            <label><input type="radio" name="lanch-dinner" value="lanch">昼</label>
            <label><input type="radio" name="lanch-dinner" value="dinner">夜</label>
        </div>
        <div>
            <label>下限</label>
            <select name="budget_min" id="budget_min">
                <option value="">指定なし</option>
                <option value="1000">1,000円</option>
                <option value="2000">2,000円</option>
                <option value="3000">3,000円</option>
            </select>

            <span>〜</span>

            <label>上限</label>
            <select name="budget_max" id="budget_max">
                <option value="">指定なし</option>
                <option value="2000">2,000円</option>
                <option value="3000">3,000円</option>
                <option value="5000">5,000円</option>
            </select>
        </div>
    </div>
    </div>

    <!-- こだわり（アコーディオン） -->
    <details class="accordion">
        <summary>こだわり条件</summary>

        <!-- 支払い -->
        <fieldset>
            <legend>支払い方法</legend>
            <label><input type="checkbox" name="credit"> カード</label>
            <label><input type="checkbox" name="emoney"> 電子マネー</label>
            <label><input type="checkbox" name="qr"> QRコード決済</label>
        </fieldset>

        <!-- 禁煙 / 喫煙 -->
        <fieldset>
            <legend>禁煙 / 喫煙</legend>
            <label style="width: 33%;"><input type="radio" name="smoking" value="" > 指定なし</label>
            <label style="width: 33%;"><input type="radio" name="smoking" value="non"> 禁煙のみ</label>
            <label style="width: 33%;"><input type="radio" name="smoking" value="allow"> 喫煙可</label>
        </fieldset>

        <!-- メニュー -->
        <fieldset>
            <legend>メニュー</legend>
            <label><input type="checkbox" name="tabehodai"> 食べ放題</label>
            <label><input type="checkbox" name="nomihodai"> 飲み放題</label>
            <label><input type="checkbox" name="takeout"> テイクアウト</label>
        </fieldset>

        <!-- 設備 -->
        <fieldset>
            <legend>設備・サービス</legend>
            <label><input type="checkbox" name="parking"> 駐車場</label>
            <label><input type="checkbox" name="privateroom"> 個室</label>
            <label><input type="checkbox" name="wifi"> Wi-Fi</label>
            <label><input type="checkbox" name="barrierfree"> バリアフリー</label>
            <label><input type="checkbox" name="kids"> お子様連れOK</label>
            <label><input type="checkbox" name="reserve"> 貸切</label>
        </fieldset>
    </details>
</form>

<style>
.clear-btn {
  margin-left: auto;
  padding: 8px 16px;
  background: #ccc;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: black;
}

.clear-btn:active {
  opacity: 0.7;
}

.search-btn {
    margin-left: 10px;
    display: block;
    width: 75px;
    padding: 14px 0;
    background: #0078ff;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}
#searchText,
#searchForm select{
    height: 35px;
    font-size: 1em;
    background-color: Canvas;
    color: CanvasText;
}
.inputbox {
    width: 100%;
    max-width: 450px;
}
#searchForm input[type="radio"],
#searchForm input[type="checkbox"] {
    transform: scale(1.5);
    transform-origin: left center;
    margin-right: 15px;
}
#searchForm fieldset label {
    display: flex;
    align-items: center;
    width: 50%;
    box-sizing: border-box;
    margin-bottom: 8px;
}
#searchForm fieldset {
    display: flex;
    flex-wrap: wrap;
}

.search-form {
    max-width: 700px;
    margin: 1em auto;
    font-size: 14px;
}

.form-row {
    display: flex;
    align-items: center;
    margin: 0.5em 0;
    gap: 1em;
}

/* トグルスイッチ */
.toggle {
    position: relative;
    width: 40px;
    height: 22px;
    display: inline-block;
}

.toggle input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 22px;
}

.slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    top: 2px;
    background: white;
    border-radius: 50%;
    transition: .3s;
}

.toggle input:checked+.slider {
    background: #4caf50;
}

.toggle input:checked+.slider::before {
    transform: translateX(18px);
}

/* アコーディオン */
.accordion {
    margin-top: 1em;
    border: 1px solid #ccc;
    padding: 1em;
    border-radius: 6px;
    background-color: #e5e9f0;
}

.accordion summary {
    cursor: pointer;
    font-weight: bold;
}

fieldset {
    border: none;
    margin: 1em 0;
}

legend {
    font-weight: bold;
}

.search-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  max-width: 600px;
  transition: box-shadow 0.2s;
  max-height: 332px;
}
.search-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.card-header {
  margin-bottom: 5px;
}
.card-title {
  margin: 0;
}
.card-genre {
  margin: 0;
  font-size: calc(1em - 3px);
}
.img-crop {
  height: 200px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.img-crop p,
.img-crop > div {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  width: max-content;
}
.crop-img img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  display: inline-block;
  margin-right: 2px;
}
.card-info {
  margin-top: 10px;
}
.card-cost, .card-address {
  margin: 0;
  font-size: calc(1em - 3px);
}
</style>
</html>
{{#vardefine:hitCount |
  {{#cargo_query:
      tables=飲食店情報
      |fields=COUNT(*)
      |where=(
          (飲食店情報.店名 LIKE CONCAT('%','{{#urlget:searchText}}','%') 
          OR 飲食店情報.住所 LIKE CONCAT('%','{{#urlget:searchText}}','%') 
          OR 飲食店情報.ジャンル LIKE CONCAT('%','{{#urlget:searchText}}','%'))
          {{#if: {{#urlget:genre}} | AND 飲食店情報.ジャンル = '{{#urlget:genre}}' }}
          {{#if: {{#urlget:station}} | AND 飲食店情報.最寄り = '{{#urlget:station}}' }}
          {{#if: {{#urlget:lanch-dinner}} |
                    {{#ifeq: {{#urlget:lanch-dinner}} | lanch | {{#if: {{#urlget:budget_min}} | AND 飲食店情報.予算昼上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 飲食店情報.予算昼下限 < {{#urlget:budget_max}} }}}}
                    {{#ifeq: {{#urlget:lanch-dinner}} | dinner | {{#if: {{#urlget:budget_min}} | AND 飲食店情報.予算夜上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 飲食店情報.予算夜下限 < {{#urlget:budget_max}} }} }} }}
          {{#ifeq: {{#urlget:smoking}} | non | AND 飲食店情報.禁煙喫煙 = '禁煙' }}
          {{#ifeq: {{#urlget:smoking}} | allow | AND 飲食店情報.禁煙喫煙 = '喫煙' }}
          {{#if: {{#urlget:tabehodai}} | AND 飲食店情報.食べ放題 = 1 }}
          {{#if: {{#urlget:nomihodai}} | AND 飲食店情報.飲み放題 = 1 }}
          {{#if: {{#urlget:takeout}} | AND 飲食店情報.テイクアウト = 1 }}
          {{#if: {{#urlget:parking}} | AND 飲食店情報.駐車場 = 1 }}
          {{#if: {{#urlget:privateroom}} | AND 飲食店情報.個室 = 1 }}
          {{#if: {{#urlget:wifi}} | AND 飲食店情報.WiFi = 'あり' }}
          {{#if: {{#urlget:barrierfree}} | AND 飲食店情報.バリアフリー = 1 }}
          {{#if: {{#urlget:kids}} | AND 飲食店情報.お子様連れ = 1 }}
          {{#if: {{#urlget:reserve}} | AND 飲食店情報.貸切 = 1 }}
      )
    }}
}}
<h1>
<strong>{{#urlget:station}}</strong>{{#if: {{#urlget:station}} | {{#if: {{#urlget:genre}} |の}}}}<strong>{{#urlget:genre}}</strong></h1><strong style="float: right;" id="count">{{#var:hitCount}}件</strong>
== 検索結果 ==
<!-- 検索実行 -->
  {{#cargo_query:
      tables=飲食店情報
      |fields=飲食店情報._pageName,飲食店情報.店名,飲食店情報.画像,飲食店情報.ジャンル,飲食店情報.郵便番号,飲食店情報.住所,飲食店情報.最寄り,飲食店情報.営業時間月,飲食店情報.定休日,飲食店情報.電話番号,飲食店情報.予算昼下限,飲食店情報.予算昼上限,飲食店情報.予算夜下限,飲食店情報.予算夜上限,飲食店情報.ストリートビューURL,飲食店情報.座標
      |where=(
          (飲食店情報.店名 LIKE CONCAT('%','{{#urlget:searchText}}','%') 
          OR 飲食店情報.住所 LIKE CONCAT('%','{{#urlget:searchText}}','%') 
          OR 飲食店情報.ジャンル LIKE CONCAT('%','{{#urlget:searchText}}','%'))
          {{#if: {{#urlget:genre}} | AND 飲食店情報.ジャンル = '{{#urlget:genre}}' }}
          {{#if: {{#urlget:station}} | AND 飲食店情報.最寄り = '{{#urlget:station}}' }}
          {{#if: {{#urlget:lanch-dinner}} |
                    {{#ifeq: {{#urlget:lanch-dinner}} | lanch | {{#if: {{#urlget:budget_min}} | AND 飲食店情報.予算昼上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 飲食店情報.予算昼下限 < {{#urlget:budget_max}} }}}}
                    {{#ifeq: {{#urlget:lanch-dinner}} | dinner | {{#if: {{#urlget:budget_min}} | AND 飲食店情報.予算夜上限 >= {{#urlget:budget_min}} }} {{#if: {{#urlget:budget_max}} | AND 飲食店情報.予算夜下限 < {{#urlget:budget_max}} }} }} }}
          {{#ifeq: {{#urlget:smoking}} | non | AND 飲食店情報.禁煙喫煙 = '禁煙' }}
          {{#ifeq: {{#urlget:smoking}} | allow | AND 飲食店情報.禁煙喫煙 = '喫煙' }}
          {{#if: {{#urlget:tabehodai}} | AND 飲食店情報.食べ放題 = 1 }}
          {{#if: {{#urlget:nomihodai}} | AND 飲食店情報.飲み放題 = 1 }}
          {{#if: {{#urlget:takeout}} | AND 飲食店情報.テイクアウト = 1 }}
          {{#if: {{#urlget:parking}} | AND 飲食店情報.駐車場 = 1 }}
          {{#if: {{#urlget:privateroom}} | AND 飲食店情報.個室 = 1 }}
          {{#if: {{#urlget:wifi}} | AND 飲食店情報.WiFi = 'あり' }}
          {{#if: {{#urlget:barrierfree}} | AND 飲食店情報.バリアフリー = 1 }}
          {{#if: {{#urlget:kids}} | AND 飲食店情報.お子様連れ = 1 }}
          {{#if: {{#urlget:reserve}} | AND 飲食店情報.貸切 = 1 }}
      )
      |format=template
      |template=検索結果カード
      |named args=yes
      |default=該当する店舗はありません。
    }}

__目次非表示__