@extends('layouts.app')
@section('title', $isRegularContract ? '空き駐輪場を確認する-新規定期契約 | So-Manager' : '駐輪場選択-駐輪場検索 | So-Manager')
@section('content')
<main>
    <header class="title-header">
        @if($isRegularContract)
        新規定期契約 &gt; 空き駐輪場を確認する
        @else
        駐輪場検索 &gt; 駐輪場選択
        @endif
    </header>
    <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="GET" action="">
                            <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 show" id="search-option">
                                    <div class="col-3">市区町村名</div>
                                    <div class="col-9 mb10">
                                        <select id="city-select" name="city_id" class="form-control form-control-lg" onchange="this.form.submit()">
                                            <option value="">市区町村を選択してください</option>
                                            @foreach($cities as $city)
                                            <option value="{{ $city->city_id }}" @if(request('city_id')==$city->city_id) selected @endif>{{ $city->city_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-3">駅名</div>
                                    <div class="col-9 mb10">
                                        <select id="station-select" name="station_neighbor_station" class="form-control form-control-lg" onchange="this.form.submit()">
                                            <option value="">駅名を選択してください</option>
                                            @foreach($stations as $station)
                                            <option value="{{ $station->station_neighbor_station }}" @if(request('station_neighbor_station')==$station->station_neighbor_station) selected @endif>{{ $station->station_neighbor_station }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-3">駐輪場名</div>
                                    <div class="col-9 mb10">
                                        <select id="park-select" name="park_id" class="form-control form-control-lg" onchange="this.form.submit()">
                                            <option value="">全て</option>
                                            @foreach($parks as $park)
                                            <option value="{{ $park->park_id }}" @if(request('park_id')==$park->park_id) selected @endif>{{ $park->park_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div style="overflow-x: auto; width: 100%;">
                            <table id="searchTable" class="tablesorter table table-striped">
                                <thead>
                                    <tr>
                                        <th class="header" style="cursor:default; pointer-events: none; background-color: #d4edda !important;">駐輪場名</th>
                                        <th class="header" style="cursor:default; pointer-events: none;">市区町村名</th>
                                        <th class="header" style="cursor:default; pointer-events: none;">駅名</th>
                                        @foreach($available_vehicles as $vehicle)
                                        <th class="header" style="cursor:default; pointer-events: none;">{{ $vehicle }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($parks_table as $row)
                                    <tr>
                                        <td><a href="javascript:void(0);"
                                                class="btn-popup text-primary"
                                                data-park-id="{{ $row->park_id }}"
                                                data-url="{{ url(session('management')->management_code . '/api/park-detail/' . $row->park_id) }}">
                                                {{ $row->park_name }}
                                            </a></td>
                                        <td>{{ $row->city_name }}</td>
                                        <td>{{ $row->station_neighbor_station }}</td>
                                        @foreach($available_vehicles as $vehicle)
                                        <td>
                                            @php
                                            $status = $row->vehicle_status[$vehicle] ?? 'none';
                                            @endphp
                                            @if($status === 'available')
                                            <button class="btn btn-block btn-sm btn-outline-success btn_82-table btn-popup" data-park-id="{{ $row->park_id }}" data-url="{{ url(session('management')->management_code . '/api/park-detail/' . $row->park_id) }}">定期契約</button>
                                            @elseif($status === 'out_of_period')
                                            <button class="btn btn-block btn-sm btn-outline-danger btn_103-table btn-popup" data-park-id="{{ $row->park_id }}" data-url="{{ url(session('management')->management_code . '/api/park-detail/' . $row->park_id) }}">販売期間外（予約可）</button>
                                            @elseif($status === 'waiting')
                                            <button class="btn btn-block btn-sm btn-outline-danger btn_103-table btn-popup" data-park-id="{{ $row->park_id }}" data-url="{{ url(session('management')->management_code . '/api/park-detail/' . $row->park_id) }}">空き待ち予約</button>
                                            @else
                                            <span class="text-muted"></span>
                                            @endif
                                        </td>
                                        @endforeach
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="{{ 3 + count($available_vehicles) }}" class="text-center">該当する駐輪場はありません。</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        @php
                        $totalPages = ceil($parks_table_total / $parks_table_perPage);
                        $currentPage = $parks_table_page;
                        @endphp
                        <nav aria-label="searchTable-pager">
                            <ul class="pagination justify-content-center">
                                <li class="page-item {{ $currentPage <= 1 ? 'disabled' : '' }}">
                                    <a class="page-link text-success" href="{{ request()->fullUrlWithQuery(['page' => $currentPage - 1]) }}" aria-label="前">
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">前</span>
                                    </a>
                                </li>
                                @for($i = 1; $i <= $totalPages; $i++)
                                    <li class="page-item {{ $i == $currentPage ? 'active' : '' }}">
                                    <a class="page-link text-success" href="{{ request()->fullUrlWithQuery(['page' => $i]) }}">{{ $i }}</a>
                                    </li>
                                    @endfor
                                    <li class="page-item {{ $currentPage >= $totalPages ? 'disabled' : '' }}">
                                        <a class="page-link text-success" href="{{ request()->fullUrlWithQuery(['page' => $currentPage + 1]) }}" aria-label="次">
                                            <span aria-hidden="true">»</span>
                                            <span class="sr-only">次</span>
                                        </a>
                                    </li>
                            </ul>
                        </nav>

                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<div class="modal fade" id="popup-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" id="modalArea">
            <!-- Ajaxで取得したHTMLがここに挿入される -->
        </div>
    </div>
</div>
@endsection