@extends('layouts.general')
@section('content')
    <main role="main" id="" class="">
      <section id="" class="container mt20 mb20">
        <div class="row">
          <div class="col-12 col-lg-10 offset-0 offset-lg-1 mt20 mb20">
            <div class="card border-success">
              <div class="card-header border-success">
                <h5 class="card-title text-success">駐輪場をお選びください。</h5>
              </div>
              <div class="card-body">
                <form class="row form" method="post" action="{{ route('swo5_2') }}">
                  <div class="w-100 alert alert-success">
                    <h6><a class="text-success" data-toggle="collapse" href="#search-option" role="button" aria-expanded="false" aria-controls="search-option">絞込み条件を追加する</a></h6>
                    <div class="collapse row" id="search-option">
                      <div class="col-3">市町村名</div>
                      <div class="col-9 mb10">
                        <select class="form-control form-control-lg" name="conditions_city">
                          <option value="">市町村を選択してください</option>
                          @foreach($cities as $city)
                            @if(isset($conditions) && $conditions[0] == $city->city_name) {
                              <option value="{{ $city->city_name }}" selected>{{ $city->city_name }}</option>
                            @else
                              <option value="{{ $city->city_name }}">{{ $city->city_name }}</option>
                            @endif
                          @endforeach
                        </select>
                      </div>
                      <div class="col-3">駅名</div>
                      <div class="col-9 mb10">
                        <select class="form-control form-control-lg" name="conditions_station">
                          <option value="">駅名を選択してください</option>
                          @foreach($stations as $station)
                            @if(isset($conditions) && $conditions[1] == $station->station_neighbor_station) {
                              <option value="{{ $station->station_neighbor_station }}" selected>{{ $station->station_neighbor_station }}</option>
                            @else
                              <option value="{{ $station->station_neighbor_station }}">{{ $station->station_neighbor_station }}</option>
                            @endif
                          @endforeach
                        </select>
                      </div>
                      <div class="col-3">駐車場名</div>
                      <div class="col-9 mb10">
                        <select class="form-control form-control-lg" name="conditions_park">
                          @foreach($parks as $key => $value)
                            @if(isset($conditions) && $conditions[2] == $value) {
                              <option value="{{ $value }}" selected>{{ $key }}</option>
                            @else
                              <option value="{{ $value }}">{{ $key }}</option>
                            @endif
                          @endforeach
                        </select>
                      </div>
                    </div>
                  </div>
                  <script>
                  $(function() {
                    $('select[name="conditions_city"], select[name="conditions_station"], select[name="conditions_park"]').on('change', function() {
                      $(this).closest('form').submit();
                    });
                  });
                  </script>
                  @csrf
                </form>
                <table id="searchTable" class="tablesorter table table-striped">
                  <thead>
                    <tr>
                      <th>駐輪場名</th>
                      <th>市町村名</th>
                      <th>駅名</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    @php
                      $perPage = 10;
                      $page = request()->get('page', 1);
                      $total = count($form_data);
                      $start = ($page - 1) * $perPage;
                      $pagedData = array_slice($form_data, $start, $perPage);
                      $lastPage = ceil($total / $perPage);
                    @endphp
                    @foreach($pagedData as $data)
                    <tr>
                      <td><a href="#placeModal" data-toggle="modal" data-target="#placeModal">{{ $data['park_name'] }}</a></td>
                      <td>{{ $data['city_name'] }}</td>
                      <td>{{ $data['station_neighbor_station'] }}</td>
                      <td>
                      @if($data['status'] == 1)
                        <a href="{{route('user.info')}}" class="btn btn-block btn-sm btn-outline-success">定期契約</a>
                      @elseif($data['status'] == 2)
                        <a href="{{route('park_waitlist.index')}}" class="btn btn-block btn-sm btn-outline-primary">空き待ち予約</a>
                      @elseif($data['status'] == 3)
                        <a href="{{route('park_waitlist.index')}}" class="btn btn-block btn-sm btn-secondary">販売期間外</a>
                      @endif
                      </td>
                    </tr>
                    @endforeach
                  </tbody>
                </table>
                <nav aria-label="searchTable-pager">
                  <ul class="pagination justify-content-center">
                    @if($lastPage > 1)
                      {{-- 前へ --}}
                      <li class="page-item {{ $page == 1 ? 'disabled' : '' }}">
                        <a class="page-link text-success" href="?page={{ $page - 1 }}" aria-label="前">
                          <span aria-hidden="true">&laquo;</span><span class="sr-only">前</span>
                        </a>
                      </li>
                      {{-- ページ番号 --}}
                      @for($i = 1; $i <= $lastPage; $i++)
                        <li class="page-item {{ $page == $i ? 'active' : '' }}">
                          <a class="page-link text-success" href="?page={{ $i }}">{{ $i }}</a>
                        </li>
                      @endfor
                      {{-- 次へ --}}
                      <li class="page-item {{ $page == $lastPage ? 'disabled' : '' }}">
                        <a class="page-link text-success" href="?page={{ $page + 1 }}" aria-label="次">
                          <span aria-hidden="true">&raquo;</span><span class="sr-only">次</span>
                        </a>
                      </li>
                    @endif
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- Modal -->
    <div class="modal fade" id="placeModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="modalParkName">駐輪場名</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="閉じる"><span aria-hidden="true">&times;</span></button>
          </div>
          <script>
          $(function() {
            $('#placeModal').on('show.bs.modal', function (event) {
              var button = $(event.relatedTarget);
              var parkName = button.text();
              $('#modalParkName').text(parkName);
            });
          });
          </script>
          <div class="modal-body">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.722943699139!2d139.75162621525894!3d35.68382338019366!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1536695351221" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
            <p class="small">〒000-0000 東京都千代田区1-1 <br class="sp">標準収容台数：XXX台</p>
            <p class="text-danger">空き台数：XXX台</p>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success" onClick="location.href='./SWC-08-02.html'">定期契約</button>
          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">閉じる</button>
        </div>
      </div>
    </div>
@endsection