<!-- DEBUG SQL: SELECT f.id, f.name, f.type as facility_type FROM facilities f WHERE f.is_active = 1 AND f.id = :facility_id ORDER BY f.id -->
<!-- DEBUG WHERE: f.is_active = 1 AND f.id = :facility_id -->
<!-- DEBUG PARAMS: Array
(
    [facility_id] => 1
)
 -->
<!-- DEBUG FACILITIES COUNT: 1 -->
<!-- DEBUG FACILITIES: Array
(
    [0] => Array
        (
            [id] => 1
            [name] => 藤乃山別邸 本館
            [facility_type] => main_building
        )

)
 -->
<!-- DEBUG BOOKINGS SQL: 
        SELECT
            f.id as facility_id,
            f.name as facility_name,
            f.type as facility_type,
            DATE(b.check_in_date) as check_in_date,
            DATE(b.check_out_date) as check_out_date
        FROM facilities f
        INNER JOIN bookings b ON f.id = b.room_id
            AND b.status IN ('confirmed', 'approved', 'payment_pending')
            AND DATE(b.check_in_date) <= :last_day
            AND DATE(b.check_out_date) >= :first_day
        WHERE f.is_active = 1 AND f.id = :facility_id
        ORDER BY f.id, b.check_in_date
     -->
<!-- DEBUG BOOKINGS COUNT: 7 -->
<!-- DEBUG BOOKINGS (最初の10件): Array
(
    [0] => Array
        (
            [facility_id] => 1
            [facility_name] => 藤乃山別邸 本館
            [facility_type] => main_building
            [check_in_date] => 2025-11-23
            [check_out_date] => 2025-11-26
        )

    [1] => Array
        (
            [facility_id] => 1
            [facility_name] => 藤乃山別邸 本館
            [facility_type] => main_building
            [check_in_date] => 2025-11-23
            [check_out_date] => 2025-11-26
        )

    [2] => Array
        (
            [facility_id] => 1
            [facility_name] => 藤乃山別邸 本館
            [facility_type] => main_building
            [check_in_date] => 2025-11-23
            [check_out_date] => 2025-11-26
        )

    [3] => Array
        (
            [facility_id] => 1
            [facility_name] => 藤乃山別邸 本館
            [facility_type] => main_building
            [check_in_date] => 2025-11-24
            [check_out_date] => 2025-11-27
        )

    [4] => Array
        (
            [facility_id] => 1
            [facility_name] => 藤乃山別邸 本館
            [facility_type] => main_building
            [check_in_date] => 2025-11-24
            [check_out_date] => 2025-11-25
        )

    [5] => Array
        (
            [facility_id] => 1
            [facility_name] => 藤乃山別邸 本館
            [facility_type] => main_building
            [check_in_date] => 2025-11-27
            [check_out_date] => 2025-11-28
        )

    [6] => Array
        (
            [facility_id] => 1
            [facility_name] => 藤乃山別邸 本館
            [facility_type] => main_building
            [check_in_date] => 2025-11-28
            [check_out_date] => 2025-11-30
        )

)
 -->
<!-- DEBUG BLOCKED_DATES COUNT: 5 -->
<!-- DEBUG BLOCKED_DATES (最初の5日分): Array
(
    [2025-11-17] => Array
        (
            [0] => Array
                (
                    [facility_id] => 1
                    [reason] => 
                )

        )

    [2025-11-18] => Array
        (
            [0] => Array
                (
                    [facility_id] => 1
                    [reason] => 
                )

        )

    [2025-11-20] => Array
        (
            [0] => Array
                (
                    [facility_id] => 1
                    [reason] => メンテナンス
                )

        )

    [2025-11-21] => Array
        (
            [0] => Array
                (
                    [facility_id] => 1
                    [reason] => メンテナンス
                )

        )

    [2025-11-22] => Array
        (
            [0] => Array
                (
                    [facility_id] => 1
                    [reason] => メンテナンス
                )

        )

)
 -->
<!-- DEBUG BOOKED_DATES COUNT: 7 -->
<!-- DEBUG BOOKED_DATES (最初の10日分): Array
(
    [2025-11-23] => Array
        (
            [0] => 1
            [1] => 1
            [2] => 1
        )

    [2025-11-24] => Array
        (
            [0] => 1
            [1] => 1
            [2] => 1
            [3] => 1
            [4] => 1
        )

    [2025-11-25] => Array
        (
            [0] => 1
            [1] => 1
            [2] => 1
            [3] => 1
        )

    [2025-11-26] => Array
        (
            [0] => 1
        )

    [2025-11-27] => Array
        (
            [0] => 1
        )

    [2025-11-28] => Array
        (
            [0] => 1
        )

    [2025-11-29] => Array
        (
            [0] => 1
        )

)
 -->
<!-- FILE UPDATE TEST: 2025-12-06 14:03:20 -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空室カレンダー - 藤乃山別邸</title>
    <style>
        /* ========================================
           ベーススタイル（reserve.php カレンダーと統一）
           ======================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: #f5f7fa;
            padding: 20px;
            line-height: 1.6;
        }

        /* ========================================
           カレンダーコンテナ
           ======================================== */
        .calendar-container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        /* ========================================
           ヘッダー
           ======================================== */
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e9ecef;
        }

        .calendar-title {
            font-size: 26px;
            font-weight: 700;
            color: #2d3748;
            letter-spacing: -0.5px;
        }

        .calendar-nav {
            display: flex;
            gap: 12px;
        }

        .nav-btn {
            padding: 10px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            text-decoration: none;
            display: inline-block;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
        }

        .nav-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
        }

        .nav-btn:active {
            transform: translateY(0);
        }

        /* ========================================
           凡例
           ======================================== */
        .calendar-legend {
            display: flex;
            gap: 24px;
            margin-bottom: 20px;
            padding: 16px 20px;
            background: #f8f9fa;
            border-radius: 8px;
            font-size: 13px;
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
            color: #4a5568;
        }

        .legend-box {
            width: 22px;
            height: 22px;
            border-radius: 4px;
            border: 2px solid;
            flex-shrink: 0;
        }

        .legend-available {
            background: #d4edda;
            border-color: #28a745;
        }

        .legend-partial {
            background: #fff3cd;
            border-color: #ffc107;
        }

        .legend-full {
            background: #f8d7da;
            border-color: #dc3545;
        }

        /* ========================================
           カレンダーテーブル
           ======================================== */
        .calendar-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            user-select: none;
            -webkit-user-select: none;
        }

        .calendar-table th {
            background: #f8f9fa;
            color: #495057;
            padding: 12px 14px;
            font-weight: 600;
            text-align: center;
            font-size: 13px;
            border-bottom: 2px solid #dee2e6;
        }

        .calendar-table th:first-child {
            border-top-left-radius: 8px;
        }

        .calendar-table th:last-child {
            border-top-right-radius: 8px;
        }

        .calendar-table td {
            border: 1px solid #dee2e6;
            padding: 0;
            height: 90px;
            vertical-align: top;
            position: relative;
            transition: all 0.2s ease;
        }

        .calendar-table td.empty {
            background: #fafbfc;
            border-color: #f1f3f5;
        }

        .calendar-table td.past {
            background: #f8f9fa;
            color: #adb5bd;
            opacity: 0.6;
        }

        .calendar-table td[data-clickable="true"] {
            cursor: pointer;
        }

        /* ========================================
           日付セルの状態（reserve.phpと統一）
           ======================================== */
        .calendar-table td.available {
            background: #d4edda;
            border-color: #c3e6cb;
        }

        .calendar-table td.available:hover {
            background: #c3e6cb;
            box-shadow: inset 0 0 0 2px #28a745;
            transform: scale(1.02);
        }

        .calendar-table td.partial {
            background: #fff3cd;
            border-color: #ffeaa7;
        }

        .calendar-table td.partial:hover {
            background: #ffeaa7;
            box-shadow: inset 0 0 0 2px #ffc107;
            transform: scale(1.02);
        }

        .calendar-table td.full {
            background: #f8d7da;
            border-color: #f5c6cb;
        }

        .calendar-table td.full:hover {
            background: #f5c6cb;
        }

        /* ========================================
           日付表示
           ======================================== */
        .date-number {
            position: absolute;
            top: 6px;
            right: 10px;
            font-weight: 700;
            font-size: 18px;
            color: #2d3748;
        }

        .date-info {
            padding: 28px 10px 10px 10px;
            font-size: 11px;
            line-height: 1.5;
        }

        .facility-status {
            margin: 3px 0;
            padding: 2px 0;
        }

        .status-icon {
            display: inline-block;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            margin-right: 5px;
            flex-shrink: 0;
        }

        .status-available {
            background: #28a745;
            box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
        }

        .status-booked {
            background: #dc3545;
            box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
        }

        /* ========================================
           特殊状態
           ======================================== */
        .today {
            box-shadow: inset 0 0 0 3px #667eea !important;
            font-weight: 600;
        }

        .calendar-table td.selecting {
            background: #cfe2ff !important;
            box-shadow: inset 0 0 0 3px #0d6efd !important;
            transform: scale(1.02);
        }

        .calendar-table td.in-range {
            background: #d1e7dd !important;
            box-shadow: inset 0 0 0 2px #28a745 !important;
        }

        /* ========================================
           レスポンシブデザイン
           ======================================== */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }

            .calendar-container {
                padding: 20px 15px;
            }

            .calendar-title {
                font-size: 20px;
            }

            .calendar-legend {
                font-size: 12px;
                gap: 15px;
            }

            .legend-box {
                width: 18px;
                height: 18px;
            }

            .calendar-table td {
                height: 70px;
                font-size: 10px;
            }

            .date-number {
                font-size: 15px;
                top: 4px;
                right: 6px;
            }

            .date-info {
                padding: 24px 6px 6px 6px;
            }

            .nav-btn {
                padding: 8px 14px;
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <div class="calendar-container">
        <div class="calendar-header">
            <div class="calendar-title">
                2025年 11月
            </div>
            <div class="calendar-nav">
                <a href="?year=2025&month=10&facility_id=1" class="nav-btn">
                    ← 前月
                </a>
                <a href="?year=2025&month=12&facility_id=1" class="nav-btn">
                    翌月 →
                </a>
            </div>
        </div>

        <div class="calendar-legend">
            <div class="legend-item">
                <div class="legend-box legend-available"></div>
                <span>全施設空室</span>
            </div>
            <div class="legend-item">
                <div class="legend-box legend-partial"></div>
                <span>一部空室あり</span>
            </div>
            <div class="legend-item">
                <div class="legend-box legend-full"></div>
                <span>満室 / 受付不可</span>
            </div>
            <div class="legend-item" style="margin-left: auto;">
                <span>💡 1回目クリック: チェックイン日 | 2回目クリック: チェックアウト日 | ESC: キャンセル</span>
            </div>
        </div>

        <table class="calendar-table">
            <thead>
                <tr>
                    <th>日</th>
                    <th>月</th>
                    <th>火</th>
                    <th>水</th>
                    <th>木</th>
                    <th>金</th>
                    <th>土</th>
                </tr>
            </thead>
            <tbody>
                <tr><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="past " data-date="2025-11-01"><div class="date-number">1</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td></tr><tr><td class="past " data-date="2025-11-02"><div class="date-number">2</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-03"><div class="date-number">3</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-04"><div class="date-number">4</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-05"><div class="date-number">5</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-06"><div class="date-number">6</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-07"><div class="date-number">7</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-08"><div class="date-number">8</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td></tr><tr><td class="past " data-date="2025-11-09"><div class="date-number">9</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-10"><div class="date-number">10</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-11"><div class="date-number">11</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-12"><div class="date-number">12</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-13"><div class="date-number">13</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-14"><div class="date-number">14</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-15"><div class="date-number">15</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td></tr><tr><td class="past " data-date="2025-11-16"><div class="date-number">16</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-17"><div class="date-number">17</div><div class="date-info"><div class="facility-status"><span class="status-icon status-booked"></span>藤乃山別邸 本館 受付不可</div></div></td><td class="past " data-date="2025-11-18"><div class="date-number">18</div><div class="date-info"><div class="facility-status"><span class="status-icon status-booked"></span>藤乃山別邸 本館 受付不可</div></div></td><td class="past " data-date="2025-11-19"><div class="date-number">19</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="past " data-date="2025-11-20"><div class="date-number">20</div><div class="date-info"><div class="facility-status"><span class="status-icon status-booked"></span>藤乃山別邸 本館 受付不可</div></div></td><td class="past " data-date="2025-11-21"><div class="date-number">21</div><div class="date-info"><div class="facility-status"><span class="status-icon status-booked"></span>藤乃山別邸 本館 受付不可</div></div></td><td class="past " data-date="2025-11-22"><div class="date-number">22</div><div class="date-info"><div class="facility-status"><span class="status-icon status-booked"></span>藤乃山別邸 本館 受付不可</div></div></td></tr><tr><td class="past " data-date="2025-11-23"><div class="date-number">23</div><div class="date-info"><div class="facility-status"><span class="status-icon status-booked"></span>藤乃山別邸 本館 ×</div></div></td><td class="past " data-date="2025-11-24"><div class="date-number">24</div><div class="date-info"><div class="facility-status"><span class="status-icon status-booked"></span>藤乃山別邸 本館 ×</div></div></td><td class="past " data-date="2025-11-25"><div class="date-number">25</div><div class="date-info"><div class="facility-status"><span class="status-icon status-booked"></span>藤乃山別邸 本館 ×</div></div></td><td class="past " data-date="2025-11-26"><div class="date-number">26</div><div class="date-info"><div class="facility-status"><span class="status-icon status-booked"></span>藤乃山別邸 本館 ×</div></div></td><td class="past " data-date="2025-11-27"><div class="date-number">27</div><div class="date-info"><div class="facility-status"><span class="status-icon status-booked"></span>藤乃山別邸 本館 ×</div></div></td><td class="past " data-date="2025-11-28"><div class="date-number">28</div><div class="date-info"><div class="facility-status"><span class="status-icon status-booked"></span>藤乃山別邸 本館 ×</div></div></td><td class="past " data-date="2025-11-29"><div class="date-number">29</div><div class="date-info"><div class="facility-status"><span class="status-icon status-booked"></span>藤乃山別邸 本館 ×</div></div></td></tr><tr><td class="past " data-date="2025-11-30"><div class="date-number">30</div><div class="date-info"><div class="facility-status"><span class="status-icon status-available"></span>藤乃山別邸 本館 ○</div></div></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td></tr>            </tbody>
        </table>
    </div>

    <!-- デバッグ情報 -->
    <!--
        今日の日付: 2025-12-06        表示月: 2025年11月
        クリック可能なセル数: 0        総施設数: 1
        表示範囲: 2025-11-01 〜 2025-11-30
        施設一覧:
        
        - ID:1 名前:藤乃山別邸 本館 タイプ:main_building
        予約済み日付の例（最初の5件）:
        
        - 2025-11-23: 施設ID 1
        - 2025-11-24: 施設ID 1
        - 2025-11-25: 施設ID 1
        - 2025-11-26: 施設ID 1
        - 2025-11-27: 施設ID 1    -->

    <script>
        // 選択状態の管理
        let selectedCheckIn = null;
        let selectedCheckOut = null;

        // ベースURLを取得
        const baseUrl = 'https://system.fruitelier.jp';

        // URLパラメータを取得
        const urlParams = new URLSearchParams(window.location.search);
        const facilityId = urlParams.get('facility_id');
        const facilityType = urlParams.get('facility_type');

        // 予約ページへ遷移する関数
        function goToReservation(checkInDate, checkOutDate = null) {
            let reserveUrl = baseUrl + '/reserve.php?check_in=' + checkInDate;
            if (checkOutDate) {
                reserveUrl += '&check_out=' + checkOutDate;
            }

            // 施設フィルタがある場合はパラメータとして渡す
            if (facilityId) {
                reserveUrl += '&facility_id=' + facilityId;
            } else if (facilityType) {
                reserveUrl += '&facility_type=' + facilityType;
            }

            console.log('遷移URL:', reserveUrl); // デバッグ用

            // iframeで埋め込まれているかチェック
            if (window.parent !== window) {
                // iframeの場合は親ウィンドウで開く
                console.log('iframe内からの遷移');
                window.parent.location.href = reserveUrl;
            } else {
                // 直接アクセスの場合は同じウィンドウで開く
                console.log('直接アクセスからの遷移');
                window.location.href = reserveUrl;
            }
        }

        // 日付セルを取得
        function getDateCells() {
            return document.querySelectorAll('td[data-clickable="true"]');
        }

        // 日付範囲内のセルをハイライト
        function highlightRange(startDate, endDate) {
            clearHighlights();

            if (!startDate) return;

            const cells = getDateCells();
            cells.forEach(cell => {
                const cellDate = cell.getAttribute('data-date');

                if (cellDate === startDate) {
                    cell.classList.add('selecting');
                }

                if (endDate && cellDate >= startDate && cellDate <= endDate) {
                    cell.classList.add('in-range');
                }
            });
        }

        // ハイライトをクリア
        function clearHighlights() {
            const cells = getDateCells();
            cells.forEach(cell => {
                cell.classList.remove('in-range', 'selecting');
            });
        }

        // イベントリスナーの設定
        document.addEventListener('DOMContentLoaded', function() {
            console.log('=== カレンダー初期化開始 ===');
            console.log('今日の日付:', new Date().toISOString().split('T')[0]);
            console.log('ベースURL:', baseUrl);
            console.log('施設ID:', facilityId || '(なし)');
            console.log('施設タイプ:', facilityType || '(なし)');

            // 全てのtd要素を確認
            const allCells = document.querySelectorAll('.calendar-table td');
            console.log('全セル数:', allCells.length);

            // data-date属性を持つセルを確認
            const dateCells = document.querySelectorAll('.calendar-table td[data-date]');
            console.log('日付セル数:', dateCells.length);

            // クリック可能なセルを確認
            const cells = getDateCells();
            console.log('クリック可能なセル数:', cells.length);

            // 最初の5つのクリック可能なセルの情報を出力
            cells.forEach((cell, index) => {
                if (index < 5) {
                    console.log(`セル${index + 1}:`, {
                        date: cell.getAttribute('data-date'),
                        clickable: cell.getAttribute('data-clickable'),
                        classes: cell.className
                    });
                }
            });

            cells.forEach(cell => {
                // クリックイベント
                cell.addEventListener('click', function(e) {
                    e.preventDefault();
                    const clickedDate = this.getAttribute('data-date');
                    console.log('クリック:', clickedDate);

                    if (!selectedCheckIn) {
                        // 1回目のクリック: チェックイン日を選択
                        selectedCheckIn = clickedDate;
                        highlightRange(selectedCheckIn, null);
                        console.log('チェックイン日を選択:', selectedCheckIn);
                    } else {
                        // 2回目のクリック: チェックアウト日を選択
                        selectedCheckOut = clickedDate;

                        // 日付の順序を確認
                        const [checkIn, checkOut] = selectedCheckIn <= selectedCheckOut
                            ? [selectedCheckIn, selectedCheckOut]
                            : [selectedCheckOut, selectedCheckIn];

                        console.log('チェックアウト日を選択:', checkOut);
                        highlightRange(checkIn, checkOut);

                        // 少し待ってから遷移（視覚的フィードバック）
                        setTimeout(() => {
                            if (checkIn === checkOut) {
                                // 同じ日付の場合はチェックイン日のみ
                                console.log('同じ日付: チェックイン日のみで遷移');
                                goToReservation(checkIn);
                            } else {
                                // チェックアウト日は翌日にする
                                const checkOutDate = new Date(checkOut);
                                checkOutDate.setDate(checkOutDate.getDate() + 1);
                                const checkOutStr = checkOutDate.toISOString().split('T')[0];
                                console.log('範囲選択: チェックイン', checkIn, 'チェックアウト', checkOutStr);
                                goToReservation(checkIn, checkOutStr);
                            }
                        }, 300);
                    }
                });
            });

            // 選択をキャンセルする（ESCキー）
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && selectedCheckIn) {
                    console.log('選択をキャンセル');
                    selectedCheckIn = null;
                    selectedCheckOut = null;
                    clearHighlights();
                }
            });
        });
    </script>
</body>
</html>