@extends('frontend.layouts.contentLayoutMaster')
{{-- title --}}
@section('title','超值活動')

@section('content')
<!-- Basic Navbar Starts -->
<section class="navbar-components-wrapper">
  <section id="basic-navbar">
    <div class="row">
      <div class="col-sm-12 text-center">
        <h4>結團時間尚有</h4>
        <div class="clock" style="display: flex;width: 100%;justify-content: space-evenly;"></div>
      </div>
    </div>
  </section>
  <section id="basic-navbar">
    <div class="row">
      <div class="col-sm-12" v-text="item.id">
        {{-- 活動放這 --}}
        <img src="https://www.mosz.com.tw/assets/uploads/ed/images/%E7%A3%A8%E7%9F%B3%E5%AD%90-%E6%BC%81%E5%A4%AB%E9%AE%AE%E6%92%88-%E9%8A%B7%E5%94%AE%E9%A0%81-%E5%9C%8B%E7%94%A2%E5%BF%85BUY_%E5%B7%A5%E4%BD%9C%E5%8D%80%E5%9F%9F%201%20%E8%A4%87%E6%9C%ACs.jpg" alt="" style="width:100%">
      </div>
    </div>
  </section>
  <!-- Basic Navbar Ends -->

  <!-- Navbar Themes Starts -->
  <section id="navbar-theme" class="navbar-theme">
    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-header">
            <div class="row">
              <div class="col-sm-6" v-for="item of ary_FilterTabBody">
                <div class="row">
                  <div class="col-sm-6">
                    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="https://www.mosz.com.tw/assets/uploads/530x530/20210726035349236555.jpg" class="img-fluid d-block w-100" alt="cf-img-1">
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <h4 v-text="item.id">
                      漁夫鮮撈【國產必Buy超值箱】
                    </h4>
                    <div class="row">
                      <div class="col-sm-12" v-text="item.id">
                        <div class="pro-info txt-box">
                          <!--<p class="color-r">活動期間05/09~05/12 滿1000，即100元回饋</p>-->
                          ※結團後將於8/23後陸續出貨<br>
                        <br>
                        梓官區漁會直營的海鮮購買平台-漁夫鮮撈<br>
                        給您最安心的品質保證<br>
                        <br>
                        超值箱內容：<br>
                        【生鮮極凍品】蚵仔寮野生急凍剝皮魚(250g/片)*1 <br>
                        【生鮮極凍品】蚵仔寮急凍白帶魚清肉捲(490g/份)*1 <br>
                        【生鮮極凍品】蚵仔寮急凍鮮甜小卷(250g/份)*2 <br>
                        【生鮮極凍品】嚴選活力大白蝦(300g/份)*1 <br>
                        【熟食，解凍加熱即可食用】極鮮一般花枝丸(300g/份)*2 <br>
                        【熟食，解凍即可食用】酒香花雕醉蝦(250g/盒)*1					<br>
                          <br>

                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-12">
                        $ 1,799
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-6">
                        <input type="number" class="form-control round" v-text="item.id">
                      </div>
                      <div class="col-6 pl-0 text-center">
                        <button type="button" class="btn btn-primary round shadow text-nowrap mb-0"><i class="bx bx-cart"></i><span class="align-middle ml-25">加入購物車</span></button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-sm-6" v-for="item of ary_FilterTabBody">
                        <div class="row">
                        <div class="col-sm-6">
                            <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="https://www.mosz.com.tw/assets/uploads/one_shop_demo/20200401062009416432.jpg" class="img-fluid d-block w-100" alt="cf-img-1">
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <h4 v-text="item.id">
                            原味鱸魚精 10入
                            </h4>
                            <div class="row">
                            <div class="col-sm-12" v-text="item.id">
                                <div class="pro-info txt-box">
                                嚴選海水養殖產銷履歷驗證優質鱸魚<br>
                                使用台灣獨家專利HPP低溫高壓萃取技術<br>
                                使整尾鱸魚由固體化成液體<br>
                                將蛋白質分解成最易於人體吸收的胺基酸<br>

                                全台唯一獲得『衛福部健康食品抗疲勞認證』的鱸魚精<br>
                                多位專家及營養師聯手推薦<br>
                                網紅部落客指定保養品牌<br><br>
                                </div>
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-sm-12">
                                $ 1,980
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-6">
                                <input type="number" class="form-control round" v-text="item.id">
                            </div>
                            <div class="col-6 pl-0 text-center">
                                <button type="button" class="btn btn-primary round shadow text-nowrap mb-0"><i class="bx bx-cart"></i><span class="align-middle ml-25">加入購物車</span></button>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-sm-6" v-for="item of ary_FilterTabBody">
                        <div class="row">
                        <div class="col-sm-6">
                            <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="https://www.mosz.com.tw/assets/uploads/one_shop_demo/messageImage_1629855171092.jpg" class="img-fluid d-block w-100" alt="cf-img-1">
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <h4 v-text="item.id">
                            古早味肉鬆*5包
                            </h4>
                            <div class="row">
                            <div class="col-sm-12" v-text="item.id">
                                <div class="pro-info txt-box">
                                古早味肉鬆100g x5包 <br>
                                家傳三代委託60年老店製作 <br>
                                嚴選溫體豬後腿肉 <br>
                                純手工剝絲古法製作 <br>
                                繁複工法造就脆口又香氣十足的口感 <br>
                                吃一次就讓人愛不釋手 <br>
                                <br>
                                </div>
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-sm-12">
                                $ 650
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-6">
                                <input type="number" class="form-control round" v-text="item.id">
                            </div>
                            <div class="col-6 pl-0 text-center">
                                <button type="button" class="btn btn-primary round shadow text-nowrap mb-0"><i class="bx bx-cart"></i><span class="align-middle ml-25">加入購物車</span></button>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

      </div>
    </div>
  </section>
  <!-- Navbar Themes Ends -->

  <!-- Navbar Collapsed Starts -->
  <section id="navbar-collapsed">
    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-header">
            <h4 class="card-title">
            購物車明細
            </h4>
          </div>
          <div class="card-content">
            <div class="table-responsive">
              <table class="table table-sm">
                <thead>
                  <tr>
                    <th class="text-center">商品</th>
                    <th class="text-center text-nowrap">單價</th>
                    <th class="text-center">數量</th>
                    <th class="text-center text-nowrap">小計</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item of ary_FilterTabBody">
                    <td class="text-center" style="width: 50%;" v-text="item.id"></td>
                    <td class="text-center" style="width: 10%;" v-text="item.id"></td>
                    <td class="text-center" style="width: 20%;"><input type="number" id="roundText" class="form-control round" v-text="item.id"></td>
                    <td class="text-center" style="width: 10%;" v-text="item.id"></td>
                    <td class="text-center" style="width: 0%;"><a href="#"><i
                          class="bx bx-trash"></i></a></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Navbar Collapse Ends -->

  <!-- Navbar Placement Starts -->
  <section id="navbar-placement">
    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-header">
            <h4 class="card-title"></h4>
          </div>
          <div class="card-content">
            <div class="card-body">
              <form class="form form-vertical">
                <div class="form-body">
                  <div class="row city-selector-set">
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label>姓名</label>
                        <div class="position-relative has-icon-left">
                          <input name='name' type='text' id='name' class='form-control' required>
                          <div class="form-control-position">
                            <i class="bx bx-user"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label>手機</label>
                        <div class="position-relative has-icon-left">
                          <input name='mobile' type='text' id='mobile' class='form-control' required>
                          <div class="form-control-position">
                            <i class="bx bx-mobile"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label>Email</label>
                        <div class="position-relative has-icon-left">
                          <input name='email' type='email' id='email' class='form-control' required>
                          <div class="form-control-position">
                            <i class="bx bx-mail-send"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="form-group">
                        <label></label>
                        <select class="form-control county" required></select>
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="form-group">
                        <label></label>
                        <select class="form-control district" required></select>
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="form-group">
                        <label></label>
                        <input class="form-control zipcode" type="text" size="3" readonly placeholder="郵遞區號">
                      </div>
                    </div>
                    <div class="col-sm-12">
                      <div class="form-group">
                        <label>地址</label>
                        <div class="position-relative has-icon-left">
                          <input name='address_info' type='text' id='address_info' class='form-control' required>
                          <div class="form-control-position">
                            <i class="bx bx-home"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label>付款方式</label>
                          <ul class="list-unstyled mb-0">
                            <li class="d-inline-block mr-2 mb-1">
                              <fieldset>
                                <div class="radio">
                                  <input type="radio" name="bsradio" id="payway_1" value="1" checked>
                                  <label for="payway_1">信用卡</label>
                                </div>
                              </fieldset>
                            </li>
                            <li class="d-inline-block mr-2 mb-1">
                              <fieldset>
                                <div class="radio">
                                  <input type="radio" name="bsradio" id="payway_2" value="2">
                                  <label for="payway_2">ATM 轉帳</label>
                                </div>
                              </fieldset>
                            </li>
                          </ul>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                      </div>
                    </div>
                    <div class="col-12 d-flex justify-content-end">
                      <button type="submit" class="btn btn-primary mr-1 mb-1">Submit</button>
                      <button type="reset" class="btn btn-light-secondary mr-1 mb-1">Reset</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Navbar Placement Ends -->
</section>
@endsection

@section('page-scripts')

<script src="{{ asset('plugins/tw-city-selector/tw-city-selector.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-countdown@2.2.0/dist/jquery.countdown.min.js" integrity="sha256-Ikk5myJowmDQaYVCUD0Wr+vIDkN8hGI58SGWdE671A8=" crossorigin="anonymous"></script>
<script>
  new TwCitySelector({
    el: '.city-selector-set',
    elCounty: '.county', // 在 el 裡查找 element
    elDistrict: '.district', // 在 el 裡查找 element
    elZipcode: '.zipcode' // 在 el 裡查找 element
  });

    $('.clock').countdown('2021-09-26 23:59:59').on('update.countdown', function(event) {
        var totalHours = event.offset.totalDays * 24 + event.offset.hours;
        var $this = $(this).html(event.strftime('' + '<div class="bg-primary px-1 "><span style="font-size:24px; color: white;">' + event.offset.totalDays + ' </span><span style="font-size:18px; color: white;">天</span></div>' + '<div class="bg-primary px-1 "><span style="font-size:24px; color: white;">' + event.offset.hours + ' </span><span style="font-size:18px; color: white;">時</span></div>' + '<div class="bg-primary px-1 "><span style="font-size:24px; color: white;">%M <span style="font-size:18px; color: white;">分</span></div>'));
    });
</script>

@endsection