@extends('layouts.app')
@section('content')
<main>
    <style>
        /* テーブルヘッダーの色を #d4edda に固定し、クリックやフォーカス時も変化しない */
        #searchTable th,
        #searchTable th:active,
        #searchTable th:focus {
            background-color: #d4edda !important;
            color: #212529 !important;
            outline: none !important;
        }

        #searchTable th {
            cursor: default !important;
        }
    </style>
    <header class="alert alert-success">
        <h4 class="container">空き待ち状況確認 > 予約状況</h4>
    </header>
    <section id="" class="container mt30 mb50">
        @if($waitlists->count())
        <div class="table-responsive">
            <table id="searchTable" class="tablesorter table table-striped">
                <thead>
                    <tr>
                        <th>予約日</th>
                        <th>駐輪場名</th>
                        <th>駅名</th>
                        <th>駐輪分類</th>
                        <th>車種区分</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($waitlists as $row)
                    <tr>
                        <td>{{ \Carbon\Carbon::parse($row->reserve_date)->format('Y/m/d') }}</td>
                        <td><a href="javascript:void(0);" class="btn-reserve-popup text-primary" data-reserve-id="{{ $row->reserve_id }}">
                                {{ $row->park_name }}
                            </a></td>
                        <td>{{ $row->station_neighbor_station }}</td>
                        <td>{{ $row->ptype_subject }}</td>
                        <td>{{ $row->psection_subject }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <div class="text-center mt-5">予約している駐輪場はありません。</div>
        @endif
    </section>
</main>
<div id="modalArea"></div>
@endsection