<!-- Bootstrapモーダル -->
<div class="modal fade" id="parkDetailModal" tabindex="-1" aria-labelledby="parkDetailLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="parkDetailLabel">{{ $park->park_name }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Googleマップ埋め込み -->
                <div style="width:100%; height:350px;">
                    <iframe
                        width="100%"
                        height="350"
                        frameborder="0"
                        style="border:0"
                        src="https://www.google.com/maps?q={{ $park->park_latitude }},{{ $park->park_longitude }}&hl=ja&z=16&output=embed"
                        allowfullscreen>
                    </iframe>
                </div>
                <!-- 駐輪場情報 -->
                <div class="mt-3 small">
                    {{ $park->park_adrs }}
                    <span class="d-inline-block" style="margin-top:0.5em;"></span>
                    <span>
                        【標準収容台数】
                        @foreach($zoneStandardSum as $type => $count)
                        {{ $type }}：{{ $count }}台　
                        @endforeach
                    </span>
                </div>
                <div class="mt-3">
                    <span>{{ $park->price_memo }}</span>
                </div>
                <!-- 空き台数・契約情報 -->
                <div class="mt-3">
                    @foreach($zones as $zone)
                    @php
                    $vacant = $vacancyData[$zone->psection_id . '_' . $zone->ptype_subject] ?? 0;
                    $grace = $city_grace_periods[$park->city_id] ?? null;
                    $now = \Carbon\Carbon::now();

                    // 猶予期間判定
                    $isGracePeriod = false;
                    if ($grace && $grace->update_grace_period_start_date && $grace->update_grace_period_start_time && $grace->update_grace_period_end_date && $grace->update_grace_period_end_time) {
                    $now = \Carbon\Carbon::now();
                    $year = $now->year;
                    $month = $now->month;
                    $startDay = (int)$grace->update_grace_period_start_date;
                    $endDay = (int)$grace->update_grace_period_end_date;
                    $startTime = $grace->update_grace_period_start_time;
                    $endTime = $grace->update_grace_period_end_time;

                    if ($startDay > $endDay) {
                    // 月またぎ
                    $start = \Carbon\Carbon::createFromFormat('Y-m-d H:i', sprintf('%04d-%02d-%02d %s', $year, $month, $startDay, $startTime));
                    $nextMonth = $month == 12 ? 1 : $month + 1;
                    $nextYear = $month == 12 ? $year + 1 : $year;
                    $end = \Carbon\Carbon::createFromFormat('Y-m-d H:i', sprintf('%04d-%02d-%02d %s', $nextYear, $nextMonth, $endDay, $endTime));
                    } else {
                    // 同月
                    $start = \Carbon\Carbon::createFromFormat('Y-m-d H:i', sprintf('%04d-%02d-%02d %s', $year, $month, $startDay, $startTime));
                    $end = \Carbon\Carbon::createFromFormat('Y-m-d H:i', sprintf('%04d-%02d-%02d %s', $year, $month, $endDay, $endTime));
                    }
                    $isGracePeriod = $now->between($start, $end);
                    }
                    @endphp
                    <div class="mb-2">
                        <strong>{{ $zone->ptype_subject }}</strong><br>
                        {{ $zone->psection_subject }}：空き {{ $vacant }}台
                        @if($isGracePeriod)
                        @if($vacant > 0)
                            <button type="button" class="btn btn-success btn-sm btn-contract"
                                data-park-id="{{ $park->park_id }}"
                                data-psection-id="{{ $zone->psection_id }}"
                                data-ptype-id="{{ $zone->ptype_id }}">
                                定期契約
                            </button>
                        @else
                            <button type="button" class="btn btn-danger btn_103 btn-reserve"
                                data-park-id="{{ $park->park_id }}"
                                data-psection-id="{{ $zone->psection_id }}"
                                data-ptype-id="{{ $zone->ptype_id }}">
                                空き待ち申込
                            </button>
                        @endif
                        @else
                            <button type="button" class="btn btn-danger btn_103 btn-reserve"
                                data-park-id="{{ $park->park_id }}"
                                data-psection-id="{{ $zone->psection_id }}"
                                data-ptype-id="{{ $zone->ptype_id }}">
                                販売期間外
                            </button>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>
<!-- jQuery Confirm用CSS/JS（jQuery本体は既に読み込まれていれば不要） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>