magico.prototype/prototype/travelleader-mobile/index.php

<?php
$enablePrototypeComments = true;
$pageTitle = 'TravelLeader - Wycieczki i Zlecenia';
include 'header.php';
?>

<!-- Systemowa wstążka profilu (Edge-to-edge pod nagłówkiem, nie koliduje z wyszukiwarką) -->
<div class="system-ribbon-bar">
    <div class="d-flex align-items-center gap-2">
        <span class="ribbon-badge">45%</span>
        <div class="ribbon-text">
            <span class="fw-bold">Profil w bazie</span>
            <span class="ribbon-sub"> • Uzupełnij dane dla biur</span>
        </div>
    </div>
    <div class="d-flex align-items-center gap-2">
        <a href="profile.php" class="btn-ribbon-action">
            Dokończ &gt;
        </a>
        <button type="button" class="btn-ribbon-close" onclick="this.closest('.system-ribbon-bar').style.display='none';" title="Zamknij powiadomienie">
            <i class='bx bx-x'></i>
        </button>
    </div>
</div>

<div class="app-content">

    <!-- Wyszukiwarka i filtr zakresu dat (odtworzone ze zrzutu ekranu) -->
    <div class="search-filter-card">
        <div class="search-filter-icon">
            <i class='bx bx-search'></i>
        </div>
        <div class="search-filter-text flex-grow-1">
            <h6>Wycieczki</h6>
            <small>
                <i class='bx bx-calendar'></i> 18 wrz 2026 &rarr; 18 wrz 2027
            </small>
        </div>
        <i class='bx bx-chevron-down text-muted fs-4'></i>
    </div>

    <!-- Pasek zakładek i przełącznik widoku (Lista vs Kalendarz wycieczek) -->
    <div class="trips-tabs-bar">
        <div class="nav-pills-custom">
            <a href="#" class="nav-pill-item active">
                <i class='bx bx-home-alt-2'></i>
                <span>Bieżące</span>
                <span class="badge-count">1</span>
            </a>
            <a href="#" class="nav-pill-item">
                <i class='bx bx-history'></i>
                <span>Historia</span>
                <span class="badge-count">0</span>
            </a>
        </div>

        <!-- Przełącznik Lista / Kalendarz w obrębie wycieczek -->
        <div class="view-toggle-group">
            <button type="button" id="btnListView" class="view-toggle-btn active" title="Widok listy" onclick="switchTripsView('list');">
                <i class='bx bx-list-ul'></i>
            </button>
            <button type="button" id="btnCalendarView" class="view-toggle-btn" title="Widok kalendarza" onclick="switchTripsView('calendar');">
                <i class='bx bx-calendar'></i>
            </button>
        </div>
    </div>

    <!-- WIDOK 1: LISTA WYCIECZEK -->
    <div id="tripsListView">
        <div class="trip-card">
            <div class="trip-card-header">
                <div class="d-flex align-items-center flex-grow-1">
                    <div class="trip-id-badge">12</div>
                    <div class="trip-title-area">
                        <h5 class="trip-title">oskar prod</h5>
                    </div>
                </div>

                <div class="trip-status-pill">
                    <span class="badge-status">Planowana</span>
                    <div class="status-subtext">za 363 dni</div>
                </div>
            </div>

            <!-- Dane wycieczki -->
            <div class="trip-info-row">
                <i class='bx bx-calendar'></i>
                <span>16-24.09.2027</span>
            </div>

            <div class="trip-info-row">
                <i class='bx bx-group'></i>
                <span>24 / 0</span>
            </div>

            <div class="trip-info-row">
                <i class='bx bx-map'></i>
                <span class="text-muted">Brak danych</span>
            </div>

            <!-- Stopka karty -->
            <div class="trip-card-footer">
                <div class="trip-code">
                    <i class='bx bx-briefcase-alt'></i>
                    <span>123osk123</span>
                </div>

                <a href="#" class="btn-details" onclick="openTripBottomSheet('16 WRZEŚNIA 2027'); return false;">
                    Szczegóły &gt;
                </a>
            </div>
        </div>
    </div>

    <!-- WIDOK 2: KALENDARZ WYCIECZEK (Odtworzony 1:1 ze zrzutu ekranu) -->
    <div id="tripsCalendarView" class="d-none">
        <div class="trips-calendar-container">
            
            <!-- Nagłówek miesiąca -->
            <div class="d-flex justify-content-between align-items-center mb-3 px-1">
                <button type="button" class="btn btn-sm btn-light rounded-circle p-1" onclick="alert('Przejdź do Sierpnia 2027');"><i class='bx bx-chevron-left fs-5'></i></button>
                <div class="month-title-header mb-0">WRZESIEŃ 2027</div>
                <button type="button" class="btn btn-sm btn-light rounded-circle p-1" onclick="alert('Przejdź do Października 2027');"><i class='bx bx-chevron-right fs-5'></i></button>
            </div>

            <table class="calendar-table">
                <thead>
                    <tr>
                        <th>Pn</th>
                        <th>Wt</th>
                        <th>Śr</th>
                        <th>Cz</th>
                        <th>Pt</th>
                        <th>So</th>
                        <th>Nd</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Tydzień 1 -->
                    <tr>
                        <td class="other-month"><span class="day-number">30</span></td>
                        <td class="other-month"><span class="day-number">31</span></td>
                        <td><span class="day-number">1</span></td>
                        <td><span class="day-number">2</span></td>
                        <td><span class="day-number">3</span></td>
                        <td><span class="day-number">4</span></td>
                        <td><span class="day-number">5</span></td>
                    </tr>
                    <!-- Tydzień 2 -->
                    <tr>
                        <td><span class="day-number">6</span></td>
                        <td><span class="day-number">7</span></td>
                        <td><span class="day-number">8</span></td>
                        <td><span class="day-number">9</span></td>
                        <td><span class="day-number">10</span></td>
                        <td><span class="day-number">11</span></td>
                        <td><span class="day-number">12</span></td>
                    </tr>
                    <!-- Tydzień 3: Początek wycieczki 16-19 września -->
                    <tr>
                        <td><span class="day-number">13</span></td>
                        <td><span class="day-number">14</span></td>
                        <td><span class="day-number">15</span></td>
                        <td onclick="openTripBottomSheet('16 WRZEŚNIA 2027');">
                            <span class="day-number fw-bold text-primary">16</span>
                            <span class="trip-ribbon-bar trip-ribbon-start">oskar prod</span>
                        </td>
                        <td onclick="openTripBottomSheet('17 WRZEŚNIA 2027');">
                            <span class="day-number fw-bold text-primary">17</span>
                            <span class="trip-ribbon-bar">&nbsp;</span>
                        </td>
                        <td onclick="openTripBottomSheet('18 WRZEŚNIA 2027');">
                            <span class="day-number fw-bold text-primary">18</span>
                            <span class="trip-ribbon-bar">&nbsp;</span>
                        </td>
                        <td onclick="openTripBottomSheet('19 WRZEŚNIA 2027');">
                            <span class="day-number fw-bold text-primary">19</span>
                            <span class="trip-ribbon-bar">&nbsp;</span>
                        </td>
                    </tr>
                    <!-- Tydzień 4: Ciąg dalszy wycieczki 20-24 września -->
                    <tr>
                        <td onclick="openTripBottomSheet('20 WRZEŚNIA 2027');">
                            <span class="day-number fw-bold text-primary">20</span>
                            <span class="trip-ribbon-bar">oskar prod</span>
                        </td>
                        <td onclick="openTripBottomSheet('21 WRZEŚNIA 2027');">
                            <span class="day-number fw-bold text-primary">21</span>
                            <span class="trip-ribbon-bar">&nbsp;</span>
                        </td>
                        <td onclick="openTripBottomSheet('22 WRZEŚNIA 2027');">
                            <span class="day-number fw-bold text-primary">22</span>
                            <span class="trip-ribbon-bar">&nbsp;</span>
                        </td>
                        <td onclick="openTripBottomSheet('23 WRZEŚNIA 2027');">
                            <span class="day-number fw-bold text-primary">23</span>
                            <span class="trip-ribbon-bar">&nbsp;</span>
                        </td>
                        <td onclick="openTripBottomSheet('24 WRZEŚNIA 2027');">
                            <span class="day-number fw-bold text-primary">24</span>
                            <span class="trip-ribbon-bar trip-ribbon-end">&nbsp;</span>
                        </td>
                        <td><span class="day-number">25</span></td>
                        <td><span class="day-number">26</span></td>
                    </tr>
                    <!-- Tydzień 5 -->
                    <tr>
                        <td><span class="day-number">27</span></td>
                        <td><span class="day-number">28</span></td>
                        <td><span class="day-number">29</span></td>
                        <td><span class="day-number">30</span></td>
                        <td class="other-month"><span class="day-number">1</span></td>
                        <td class="other-month"><span class="day-number">2</span></td>
                        <td class="other-month"><span class="day-number">3</span></td>
                    </tr>
                </tbody>
            </table>

            <div class="mt-3 pt-2 border-top d-flex justify-content-between align-items-center">
                <small class="text-muted" style="font-size: 0.72rem;">
                    <i class='bx bxs-circle text-primary' style="font-size: 0.6rem;"></i> Zaznaczony termin wycieczki (16-24 Wrz)
                </small>
                <a href="availability.php" class="text-primary fw-bold text-decoration-none" style="font-size: 0.72rem;">
                    Kalendarz dostępności &rarr;
                </a>
            </div>

        </div>
    </div>

</div><!-- /.app-content -->

<!-- BOTTOM SHEET MODAL (Odtworzony 1:1 ze zrzutu ekranu) -->
<div id="tripSheetBackdrop" class="bottom-sheet-backdrop" onclick="closeTripBottomSheet();"></div>
<div id="tripBottomSheet" class="bottom-sheet-content">
    <div class="sheet-drag-handle"></div>

    <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
            <div class="text-uppercase fw-bold text-muted" style="font-size: 0.68rem; letter-spacing: 0.5px;">WYBRANY DZIEŃ</div>
            <h5 class="fw-bold mb-0" id="sheetSelectedDate" style="color: var(--dark-navy); font-size: 1.15rem;">16 WRZEŚNIA 2027</h5>
        </div>
        <button type="button" class="btn-close" style="font-size: 0.75rem;" onclick="closeTripBottomSheet();" aria-label="Zamknij"></button>
    </div>

    <!-- Karta wycieczki wewnątrz Bottom Sheet -->
    <div class="trip-card mb-0 shadow-none border mt-3">
        <div class="trip-card-header">
            <div class="d-flex align-items-center flex-grow-1">
                <div class="trip-id-badge">12</div>
                <div class="trip-title-area">
                    <h5 class="trip-title">oskar prod</h5>
                </div>
            </div>

            <div class="trip-status-pill">
                <span class="badge-status">Planowana</span>
                <div class="status-subtext">za 363 dni</div>
            </div>
        </div>

        <div class="trip-info-row">
            <i class='bx bx-calendar'></i>
            <span>16-24.09.2027</span>
        </div>

        <div class="trip-info-row">
            <i class='bx bx-group'></i>
            <span>24 / 0</span>
        </div>

        <div class="trip-info-row">
            <i class='bx bx-map'></i>
            <span class="text-muted">Brak danych</span>
        </div>

        <div class="trip-card-footer">
            <div class="trip-code">
                <i class='bx bx-briefcase-alt'></i>
                <span>123osk123</span>
            </div>

            <button type="button" class="btn-details" onclick="alert('Otwieranie pełnych szczegółów wycieczki 12 oskar prod');">
                Szczegóły &gt;
            </button>
        </div>
    </div>
</div>

<script>
function switchTripsView(view) {
    const listView = document.getElementById('tripsListView');
    const calView = document.getElementById('tripsCalendarView');
    const btnList = document.getElementById('btnListView');
    const btnCal = document.getElementById('btnCalendarView');

    if (view === 'calendar') {
        listView.classList.add('d-none');
        calView.classList.remove('d-none');
        btnCal.classList.add('active');
        btnList.classList.remove('active');
    } else {
        listView.classList.remove('d-none');
        calView.classList.add('d-none');
        btnList.classList.add('active');
        btnCal.classList.remove('active');
    }
}

function openTripBottomSheet(dateTitle) {
    document.getElementById('sheetSelectedDate').innerText = dateTitle;
    document.getElementById('tripSheetBackdrop').classList.add('active');
    document.getElementById('tripBottomSheet').classList.add('active');
}

function closeTripBottomSheet() {
    document.getElementById('tripSheetBackdrop').classList.remove('active');
    document.getElementById('tripBottomSheet').classList.remove('active');
}
</script>

<?php include 'footer.php'; ?>