Merge pull request 'poprawki dla bazy pilotów web, modul zaproszen w apce mobile' (#2) from baza-pilotow into main

Reviewed-on: #2

.vscode/sftp.json

@@ -1,17 +0,0 @@
-{
-    "name": "My Server",
-    "host": "prototype.s6.magicosoft.pl",
-    "protocol": "ftp",
-    "port": 21,
-    "username": "bartek@prototype.s6.magicosoft.pl",
-    "remotePath": "/public_html/",
-    "password": "dZURD2M9RyMTh63cEGQ5",
-    "uploadOnSave": true,
-    "useTempFile": false,
-    "openSsh": false,
-    "watcher": {
-        "files": "prototype/**/*",
-        "autoUpload": true,
-        "autoDelete": false
-    }
-}

prototype/baza-pilotow/assets/js/superpilot.js

@@ -0,0 +1,420 @@
+/**
+ * Superpilot Web — Logika Wyszukiwarki i Filtrów w Stylu Pracuj.pl
+ * z Multiselectem Krajów w Górnej Belce oraz Bazą w Lewym Sidebarze
+ */
+
+document.addEventListener('DOMContentLoaded', function () {
+    initPracujFilters();
+    initTopDestMultiselect();
+    initDateRangeModal();
+    initModals();
+});
+
+function initPracujFilters() {
+    const searchInput = document.getElementById('mainSearchInput');
+    const executeBtn = document.getElementById('btnExecuteSearch');
+    const sidebarCheckboxes = document.querySelectorAll('.filter-checkbox');
+    const clearBtn = document.getElementById('btnClearAllFilters');
+    const sidebarCountSpan = document.getElementById('sidebarCountSpan');
+    const offersCountText = document.getElementById('offersCountText');
+    const noOffersAlert = document.getElementById('noOffersAlert');
+    const pilotCards = document.querySelectorAll('.pilot-grid-item');
+
+    window.currentDateFilter = '16-24-sep-2027';
+
+    function applyFilters() {
+        const query = searchInput ? searchInput.value.toLowerCase().trim() : '';
+
+        // Pobierz zaznaczone kraje z GÓRNEJ BELKI (Multiselect)
+        const selectedTopDests = Array.from(document.querySelectorAll('.top-dest-checkbox:checked')).map(cb => cb.value.toLowerCase());
+
+        // Pobierz zaznaczone checkboxy z SIDEBARA (w tym nowa Baza!)
+        const selectedBases = Array.from(document.querySelectorAll('.filter-checkbox[data-type="base"]:checked')).map(cb => cb.value.toLowerCase());
+        const selectedSpecs = Array.from(document.querySelectorAll('.filter-checkbox[data-type="spec"]:checked')).map(cb => cb.value.toLowerCase());
+        const selectedLangs = Array.from(document.querySelectorAll('.filter-checkbox[data-type="lang"]:checked')).map(cb => cb.value.toLowerCase());
+        const selectedCerts = Array.from(document.querySelectorAll('.filter-checkbox[data-type="cert"]:checked')).map(cb => cb.value.toLowerCase());
+
+        let visibleCount = 0;
+
+        pilotCards.forEach(card => {
+            const name = (card.getAttribute('data-name') || '').toLowerCase();
+            const base = (card.getAttribute('data-base') || '').toLowerCase();
+            const dests = (card.getAttribute('data-destinations') || '').toLowerCase();
+            const langs = (card.getAttribute('data-languages') || '').toLowerCase();
+            const tags = (card.getAttribute('data-tags') || '').toLowerCase();
+            const rating = parseFloat(card.getAttribute('data-rating') || '0');
+            const verified = card.getAttribute('data-verified') === '1';
+            const kpp = card.getAttribute('data-kpp') === '1';
+            const datesFree = (card.getAttribute('data-dates-free') || '');
+
+            let match = true;
+
+            // 1. Wyszukiwanie tekstowe
+            if (query && !name.includes(query) && !dests.includes(query) && !tags.includes(query) && !langs.includes(query) && !base.includes(query)) {
+                match = false;
+            }
+
+            // 2. Destynacje z Multiselecta u góry
+            if (selectedTopDests.length > 0) {
+                const hasAnyDest = selectedTopDests.some(d => dests.includes(d));
+                if (!hasAnyDest) match = false;
+            }
+
+            // 3. Baza wypadowa z sidebara
+            if (selectedBases.length > 0) {
+                const hasAnyBase = selectedBases.some(b => base.includes(b));
+                if (!hasAnyBase) match = false;
+            }
+
+            // 4. Specjalizacje z sidebara
+            if (selectedSpecs.length > 0) {
+                const hasAnySpec = selectedSpecs.some(s => tags.includes(s));
+                if (!hasAnySpec) match = false;
+            }
+
+            // 5. Języki z sidebara
+            if (selectedLangs.length > 0) {
+                const hasAnyLang = selectedLangs.some(l => langs.includes(l));
+                if (!hasAnyLang) match = false;
+            }
+
+            // 6. Certyfikaty z sidebara
+            if (selectedCerts.includes('verified') && !verified) match = false;
+            if (selectedCerts.includes('kpp') && !kpp) match = false;
+            if (selectedCerts.includes('rating-48') && rating < 4.8) match = false;
+
+            // 7. Kalendarz
+            if (window.currentDateFilter === '16-24-sep-2027') {
+                if (!datesFree.includes('16-24-sep') && name !== 'oskar kaczmarek') {
+                    match = false;
+                }
+            } else if (window.currentDateFilter === '05-15-sep-2027') {
+                if (!datesFree.includes('05-15-sep')) {
+                    match = false;
+                }
+            } else if (window.currentDateFilter === 'październik-2027') {
+                if (!datesFree.includes('październik-2027')) {
+                    match = false;
+                }
+            }
+
+            if (match) {
+                card.style.display = 'flex';
+                visibleCount++;
+            } else {
+                card.style.display = 'none';
+            }
+        });
+
+        // Aktualizacja liczników
+        if (sidebarCountSpan) sidebarCountSpan.innerText = visibleCount;
+        if (offersCountText) offersCountText.innerText = visibleCount + (visibleCount === 1 ? ' oferta' : (visibleCount >= 2 && visibleCount <= 4 ? ' oferty' : ' ofert'));
+        if (noOffersAlert) noOffersAlert.style.display = (visibleCount === 0) ? 'block' : 'none';
+
+        // Aktualizacja paska aktywnych filtrów (Chips)
+        updateActiveFilterChips(selectedTopDests, selectedBases);
+    }
+
+    if (searchInput) searchInput.addEventListener('input', applyFilters);
+    if (executeBtn) executeBtn.addEventListener('click', applyFilters);
+
+    sidebarCheckboxes.forEach(cb => {
+        cb.addEventListener('change', applyFilters);
+    });
+
+    const applySidebarBtn = document.getElementById('btnApplySidebarFilters');
+    if (applySidebarBtn) {
+        applySidebarBtn.addEventListener('click', function () {
+            applyFilters();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+    }
+
+    if (clearBtn) {
+        clearBtn.addEventListener('click', function () {
+            if (searchInput) searchInput.value = '';
+            sidebarCheckboxes.forEach(cb => cb.checked = false);
+            document.querySelectorAll('.top-dest-checkbox').forEach(cb => cb.checked = false);
+            updateDestTriggerLabel();
+            window.currentDateFilter = 'all';
+            const display = document.getElementById('selectedDateDisplay');
+            if (display) display.value = 'Dowolny termin';
+            applyFilters();
+        });
+    }
+
+    // Obsługa usunięcia chipa bazy
+    const removeBaseChip = document.getElementById('removeBaseChip');
+    if (removeBaseChip) {
+        removeBaseChip.addEventListener('click', function () {
+            document.querySelectorAll('.filter-checkbox[data-type="base"]').forEach(cb => cb.checked = false);
+            applyFilters();
+        });
+    }
+
+    window.triggerSuperpilotFilter = applyFilters;
+}
+
+function initTopDestMultiselect() {
+    const destCheckboxes = document.querySelectorAll('.top-dest-checkbox');
+    const triggerText = document.getElementById('destTriggerText');
+    const resetBtn = document.getElementById('btnResetDestMultiselect');
+    const confirmBtn = document.getElementById('btnConfirmDestDropdown');
+
+    function updateLabel() {
+        const checked = Array.from(document.querySelectorAll('.top-dest-checkbox:checked')).map(cb => cb.value);
+        if (!triggerText) return;
+
+        if (checked.length === 0) {
+            triggerText.innerText = 'Wszystkie kraje';
+            triggerText.style.color = '#94a3b8';
+        } else if (checked.length === 1) {
+            const flag = getCountryFlag(checked[0]);
+            triggerText.innerText = flag + ' ' + checked[0];
+            triggerText.style.color = 'var(--dark-navy)';
+        } else if (checked.length === 2) {
+            triggerText.innerText = checked.map(c => getCountryFlag(c) + ' ' + c).join(', ');
+            triggerText.style.color = 'var(--dark-navy)';
+        } else {
+            triggerText.innerText = getCountryFlag(checked[0]) + ' ' + checked[0] + ' (+' + (checked.length - 1) + ' inne)';
+            triggerText.style.color = 'var(--dark-navy)';
+        }
+
+        if (window.triggerSuperpilotFilter) window.triggerSuperpilotFilter();
+    }
+
+    window.updateDestTriggerLabel = updateLabel;
+
+    destCheckboxes.forEach(cb => {
+        cb.addEventListener('change', updateLabel);
+    });
+
+    if (resetBtn) {
+        resetBtn.addEventListener('click', function () {
+            destCheckboxes.forEach(cb => cb.checked = false);
+            updateLabel();
+        });
+    }
+
+    if (confirmBtn) {
+        confirmBtn.addEventListener('click', function () {
+            const dropdownEl = document.getElementById('destDropdownTrigger');
+            const dropdown = bootstrap.Dropdown.getInstance(dropdownEl);
+            if (dropdown) dropdown.hide();
+        });
+    }
+
+    const removeDestChip = document.getElementById('removeDestChip');
+    if (removeDestChip) {
+        removeDestChip.addEventListener('click', function () {
+            destCheckboxes.forEach(cb => cb.checked = false);
+            updateLabel();
+        });
+    }
+}
+
+function updateActiveFilterChips(selectedDests, selectedBases) {
+    const chipDest = document.getElementById('chipDestFilter');
+    const chipDestText = document.getElementById('chipDestText');
+    const chipDate = document.getElementById('chipDateFilter');
+    const chipDateText = document.getElementById('chipDateText');
+    const chipBase = document.getElementById('chipBaseFilter');
+    const chipBaseText = document.getElementById('chipBaseText');
+
+    if (chipDest && chipDestText) {
+        if (selectedDests && selectedDests.length > 0) {
+            chipDest.style.display = 'inline-flex';
+            chipDestText.innerText = selectedDests.map(d => capitalize(d)).join(', ');
+        } else {
+            chipDest.style.display = 'none';
+        }
+    }
+
+    if (chipDate && chipDateText) {
+        if (window.currentDateFilter && window.currentDateFilter !== 'all') {
+            chipDate.style.display = 'inline-flex';
+            if (window.currentDateFilter === '16-24-sep-2027') chipDateText.innerText = '16–24.09.2027';
+            else if (window.currentDateFilter === '05-15-sep-2027') chipDateText.innerText = '05–15.09.2027';
+            else if (window.currentDateFilter === 'październik-2027') chipDateText.innerText = 'Październik 2027';
+        } else {
+            chipDate.style.display = 'none';
+        }
+    }
+
+    if (chipBase && chipBaseText) {
+        if (selectedBases && selectedBases.length > 0) {
+            chipBase.style.display = 'inline-flex';
+            chipBaseText.innerText = 'Baza: ' + selectedBases.map(b => capitalize(b)).join(', ');
+        } else {
+            chipBase.style.display = 'none';
+        }
+    }
+}
+
+function initDateRangeModal() {
+    const presets = document.querySelectorAll('.preset-chip');
+    const selectedText = document.getElementById('modalSelectedDateText');
+    const displayInput = document.getElementById('selectedDateDisplay');
+    const resetDateBtn = document.getElementById('btnResetDateDialog');
+    const applyDateBtn = document.getElementById('btnApplyDateDialog');
+    const removeDateChip = document.getElementById('removeDateChip');
+
+    presets.forEach(p => {
+        p.addEventListener('click', function () {
+            presets.forEach(item => item.classList.remove('active'));
+            this.classList.add('active');
+
+            const presetVal = this.getAttribute('data-preset');
+            window.currentDateFilter = presetVal;
+
+            if (presetVal === '16-24-sep-2027') {
+                selectedText.innerText = '16.09.2027 – 24.09.2027 (Wycieczka #12)';
+                displayInput.value = '16.09.2027 – 24.09.2027';
+            } else if (presetVal === '05-15-sep-2027') {
+                selectedText.innerText = '05.09.2027 – 15.09.2027 (Wolne okienko)';
+                displayInput.value = '05.09.2027 – 15.09.2027';
+            } else if (presetVal === 'październik-2027') {
+                selectedText.innerText = '01.10.2027 – 31.10.2027 (Październik)';
+                displayInput.value = 'Październik 2027';
+            } else {
+                selectedText.innerText = 'Dowolny termin';
+                displayInput.value = 'Dowolny termin';
+            }
+        });
+    });
+
+    if (resetDateBtn) {
+        resetDateBtn.addEventListener('click', function () {
+            presets.forEach(item => item.classList.remove('active'));
+            const allPreset = document.querySelector('.preset-chip[data-preset="all"]');
+            if (allPreset) allPreset.classList.add('active');
+            window.currentDateFilter = 'all';
+            selectedText.innerText = 'Dowolny termin';
+            displayInput.value = 'Dowolny termin';
+            if (window.triggerSuperpilotFilter) window.triggerSuperpilotFilter();
+            const modalEl = document.getElementById('dateRangeModal');
+            const modalInstance = bootstrap.Modal.getInstance(modalEl);
+            if (modalInstance) modalInstance.hide();
+        });
+    }
+
+    if (applyDateBtn) {
+        applyDateBtn.addEventListener('click', function () {
+            if (window.triggerSuperpilotFilter) window.triggerSuperpilotFilter();
+        });
+    }
+
+    if (removeDateChip) {
+        removeDateChip.addEventListener('click', function () {
+            window.currentDateFilter = 'all';
+            displayInput.value = 'Dowolny termin';
+            if (window.triggerSuperpilotFilter) window.triggerSuperpilotFilter();
+        });
+    }
+}
+
+function initModals() {
+    window.openBookingModal = function (pilotId, pilotName, dates) {
+        const modal = new bootstrap.Modal(document.getElementById('bookingModal'));
+        const nameInput = document.getElementById('bookingPilotName');
+        const nameDisplay = document.getElementById('bookingPilotNameDisplay');
+        const idInput = document.getElementById('bookingPilotId');
+        const datesInput = document.getElementById('bookingDates');
+
+        const name = pilotName || 'Oskar Kaczmarek';
+        if (nameInput) nameInput.value = name;
+        if (nameDisplay) nameDisplay.innerText = name;
+        if (idInput) idInput.value = pilotId || '1';
+        if (datesInput && dates) datesInput.value = dates;
+
+        modal.show();
+    };
+
+    window.openSosModal = function (defaultCountry) {
+        const modal = new bootstrap.Modal(document.getElementById('sosModal'));
+        if (defaultCountry && document.getElementById('sosCountrySelect')) {
+            document.getElementById('sosCountrySelect').value = defaultCountry;
+        }
+        modal.show();
+    };
+
+    const bookingForm = document.getElementById('pilotBookingForm');
+    if (bookingForm) {
+        bookingForm.addEventListener('submit', function (e) {
+            e.preventDefault();
+            const submitBtn = bookingForm.querySelector('button[type="submit"]');
+            const pilotName = document.getElementById('bookingPilotName').value;
+            const originalText = submitBtn.innerHTML;
+
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = "<span class=\"spinner-border spinner-border-sm me-1\"></span> Wysyłanie powiadomienia PUSH...";
+
+            setTimeout(() => {
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalText;
+                const modalEl = document.getElementById('bookingModal');
+                const modalInstance = bootstrap.Modal.getInstance(modalEl);
+                if (modalInstance) modalInstance.hide();
+
+                showToastNotification(
+                    'Pomyślnie wysłano zapytanie!',
+                    'Powiadomienie PUSH trafiło do aplikacji mobilnej pilota (' + pilotName + '). Pilot ma 24h na akceptację w aplikacji.'
+                );
+            }, 900);
+        });
+    }
+}
+
+function showToastNotification(title, message) {
+    let container = document.getElementById('toastContainer');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'toastContainer';
+        container.style.position = 'fixed';
+        container.style.top = '24px';
+        container.style.right = '24px';
+        container.style.zIndex = '99999';
+        document.body.appendChild(container);
+    }
+
+    const toast = document.createElement('div');
+    toast.className = 'toast show align-items-center text-white bg-dark border-0 mb-2 shadow-lg';
+    toast.style.minWidth = '340px';
+    toast.style.borderRadius = '12px';
+    toast.style.overflow = 'hidden';
+    toast.innerHTML = `
+        <div class="d-flex p-3" style="background: linear-gradient(135deg, #1f2244 0%, #312e81 100%);">
+            <div class="me-3 fs-3 text-warning">
+                <i class='bx bxs-bell-ring'></i>
+            </div>
+            <div class="flex-grow-1">
+                <h6 class="fw-bold mb-1 text-white" style="font-size: 0.92rem;">${title}</h6>
+                <div style="font-size: 0.8rem; line-height: 1.4; color: #cbd5e1;">${message}</div>
+            </div>
+            <button type="button" class="btn-close btn-close-white me-1 m-auto" onclick="this.closest('.toast').remove()"></button>
+        </div>
+    `;
+
+    container.appendChild(toast);
+
+    setTimeout(() => {
+        toast.remove();
+    }, 6000);
+}
+
+function getCountryFlag(country) {
+    const map = {
+        'Włochy': '🇮🇹',
+        'Grecja': '🇬🇷',
+        'Hiszpania': '🇪🇸',
+        'Chorwacja': '🇭🇷',
+        'Norwegia': '🇳🇴',
+        'Austria': '🇦🇹',
+        'Japonia': '🇯🇵'
+    };
+    return map[country] || '🌍';
+}
+
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}

prototype/baza-pilotow/booking-modal.php

@@ -0,0 +1,163 @@
+<!-- Modal Rezerwacji / Zapytania Ofertowego (Clean & Streamlined UX 2026) -->
+<div class="modal fade" id="bookingModal" tabindex="-1" aria-labelledby="bookingModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-md" style="max-width: 580px;">
+        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--radius-md); overflow: hidden;">
+            
+            <!-- Czysty, nowoczesny nagłówek modala -->
+            <div class="modal-header bg-white border-bottom py-3 px-4 d-flex align-items-center justify-content-between">
+                <div class="d-flex align-items-center gap-2">
+                    <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; background: var(--primary-light); color: var(--primary); font-size: 1.1rem;">
+                        <i class='bx bx-calendar-check'></i>
+                    </div>
+                    <h5 class="modal-title fw-bold text-navy mb-0" id="bookingModalLabel" style="font-size: 1rem;">
+                        Zapytanie o termin
+                    </h5>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+
+            <form id="pilotBookingForm">
+                <div class="modal-body p-4">
+                    
+                    <!-- Podsumowanie wybranego pilota (Dyskretny pasek) -->
+                    <div class="d-flex align-items-center justify-content-between p-2 px-3 rounded-2 mb-3" style="background: #f8fafd; border: 1px solid var(--border-color);">
+                        <div class="d-flex align-items-center gap-2">
+                            <img src="<?= $basePath ?>/assets/img/pilots/oskar-avatar.jpg" alt="Pilot" class="rounded-circle border" style="width: 32px; height: 32px; object-fit: cover;">
+                            <div>
+                                <span class="fw-bold text-dark" id="bookingPilotNameDisplay" style="font-size: 0.88rem;">Oskar Kaczmarek</span>
+                                <span class="text-muted small ms-1" style="font-size: 0.75rem;">• Pilot Wycieczek</span>
+                            </div>
+                        </div>
+                        <span class="badge bg-success-subtle text-success border border-success-subtle py-1 px-2" style="font-size: 0.72rem;">
+                            <i class='bx bx-check-circle me-1'></i>Dostępny dla biura
+                        </span>
+                    </div>
+
+                    <input type="hidden" id="bookingPilotId" value="1">
+                    <input type="hidden" id="bookingPilotName" value="Oskar Kaczmarek">
+
+                    <!-- Sekcja 1: Wybór imprezy z Travel Managera -->
+                    <div class="mb-3">
+                        <label class="form-label fw-bold text-dark small mb-1" for="bookingTourSelect">
+                            Impreza z Travel Managera:
+                        </label>
+                        <select class="form-select form-select-sm fw-semibold" id="bookingTourSelect" style="font-size: 0.84rem; padding: 0.45rem 0.75rem;">
+                            <option value="12" data-days="9" data-dates="16.09.2027 - 24.09.2027" data-dest="🇮🇹 Włochy (Wenecja - Florencja - Rzym)" selected>Wycieczka #12: Klasyczne Włochy (16.09 – 24.09.2027) • 44 os.</option>
+                            <option value="15" data-days="8" data-dates="05.10.2027 - 12.10.2027" data-dest="🇮🇹 Toskania i Rzym">Wycieczka #15: Magia Toskanii i Rzym (05.10 – 12.10.2027) • 38 os.</option>
+                            <option value="21" data-days="8" data-dates="12.11.2027 - 19.11.2027" data-dest="🇪🇸 Andaluzja i Gibraltar">Wycieczka #21: Andaluzja i Gibraltar (12.11 – 19.11.2027) • 40 os.</option>
+                            <option value="custom" data-days="7" data-dates="" data-dest="">Wpisz termin niestandardowy / inną trasę...</option>
+                        </select>
+                    </div>
+
+                    <!-- Sekcja 2: Termin i Trasa (2 kolumny) -->
+                    <div class="row g-2 mb-3">
+                        <div class="col-6">
+                            <label class="form-label fw-bold text-dark small mb-1" for="bookingDates">Termin zlecenia:</label>
+                            <div class="input-group input-group-sm">
+                                <span class="input-group-text bg-light text-muted"><i class='bx bx-calendar'></i></span>
+                                <input type="text" class="form-control fw-semibold" id="bookingDates" value="16.09.2027 - 24.09.2027" required style="font-size: 0.8rem;">
+                            </div>
+                        </div>
+
+                        <div class="col-6">
+                            <label class="form-label fw-bold text-dark small mb-1" for="bookingDestination">Destynacja / Trasa:</label>
+                            <div class="input-group input-group-sm">
+                                <span class="input-group-text bg-light text-muted"><i class='bx bx-map-pin'></i></span>
+                                <input type="text" class="form-control fw-semibold" id="bookingDestination" value="🇮🇹 Włochy (Wenecja - Florencja - Rzym)" required style="font-size: 0.8rem;">
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Sekcja 3: Finanse i Świadczenia (2 kolumny) -->
+                    <div class="row g-2 mb-3">
+                        <div class="col-6">
+                            <label class="form-label fw-bold text-dark small mb-1" for="bookingRate">Stawka dzienna netto:</label>
+                            <div class="input-group input-group-sm mb-1">
+                                <input type="number" class="form-control fw-bold text-dark" id="bookingRate" value="550" step="50" min="200" style="font-size: 0.85rem;">
+                                <span class="input-group-text bg-light text-muted" style="font-size: 0.74rem;">PLN/dzień</span>
+                            </div>
+                            <div class="text-muted" style="font-size: 0.73rem;">
+                                Szacunkowo: <strong class="text-dark" id="bookingTotalEstimate">4 950 PLN netto</strong> <span id="bookingDaysBadge">(9 dni)</span>
+                            </div>
+                        </div>
+
+                        <div class="col-6">
+                            <label class="form-label fw-bold text-dark small mb-1">Zapewniane świadczenia:</label>
+                            <div class="d-flex flex-column gap-1 pt-1" style="font-size: 0.76rem;">
+                                <label class="form-check-label d-inline-flex align-items-center gap-2 text-dark">
+                                    <input class="form-check-input mt-0" type="checkbox" id="benefitHotel" checked> Pokój 1-osobowy w hotelach
+                                </label>
+                                <label class="form-check-label d-inline-flex align-items-center gap-2 text-dark">
+                                    <input class="form-check-input mt-0" type="checkbox" id="benefitMeals" checked> Wyżywienie pilota
+                                </label>
+                                <label class="form-check-label d-inline-flex align-items-center gap-2 text-dark">
+                                    <input class="form-check-input mt-0" type="checkbox" id="benefitInsurance" checked> Ubezpieczenie KL/NNW
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Sekcja 4: Wiadomość / Uwagi -->
+                    <div class="mb-1">
+                        <label class="form-label fw-bold text-dark small mb-1" for="bookingMessage">Wiadomość do pilota (opcjonalnie):</label>
+                        <textarea class="form-control" id="bookingMessage" rows="2" style="font-size: 0.8rem; line-height: 1.4;" placeholder="np. godzina zbiórki na lotnisku, specyfika grupy, preferowany język przewodnictwa..."></textarea>
+                    </div>
+
+                </div>
+
+                <div class="modal-footer bg-light px-4 py-2 border-top d-flex justify-content-between align-items-center">
+                    <span class="text-muted d-inline-flex align-items-center gap-1" style="font-size: 0.75rem;">
+                        <i class='bx bx-mobile-alt text-primary'></i> Pilot ma 24h na akceptację w aplikacji
+                    </span>
+                    <div class="d-flex align-items-center gap-2">
+                        <button type="button" class="btn btn-outline-secondary btn-sm px-3" data-bs-dismiss="modal" style="font-size: 0.8rem;">
+                            Anuluj
+                        </button>
+                        <button type="submit" class="btn btn-primary btn-sm px-4 fw-semibold" style="font-size: 0.8rem; border-radius: var(--radius-sm);">
+                            <i class='bx bx-paper-plane me-1'></i> Wyślij zapytanie
+                        </button>
+                    </div>
+                </div>
+            </form>
+
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const tourSelect = document.getElementById('bookingTourSelect');
+    const datesInput = document.getElementById('bookingDates');
+    const destInput = document.getElementById('bookingDestination');
+    const rateInput = document.getElementById('bookingRate');
+    const totalEstimate = document.getElementById('bookingTotalEstimate');
+    const daysBadge = document.getElementById('bookingDaysBadge');
+
+    let currentDays = 9;
+
+    function recalculateTotal() {
+        const rate = parseFloat(rateInput ? rateInput.value : 550) || 550;
+        const total = rate * currentDays;
+        if (totalEstimate) totalEstimate.innerText = total.toLocaleString('pl-PL') + ' PLN netto';
+        if (daysBadge) daysBadge.innerText = '(' + currentDays + ' ' + (currentDays === 1 ? 'dzień' : (currentDays < 5 ? 'dni' : 'dni')) + ')';
+    }
+
+    if (tourSelect) {
+        tourSelect.addEventListener('change', function() {
+            const selectedOpt = this.options[this.selectedIndex];
+            const dates = selectedOpt.getAttribute('data-dates');
+            const dest = selectedOpt.getAttribute('data-dest');
+            const days = parseInt(selectedOpt.getAttribute('data-days'), 10) || 7;
+
+            if (dates && datesInput) datesInput.value = dates;
+            if (dest && destInput) destInput.value = dest;
+            currentDays = days;
+            recalculateTotal();
+        });
+    }
+
+    if (rateInput) {
+        rateInput.addEventListener('input', recalculateTotal);
+    }
+});
+</script>

prototype/baza-pilotow/courses.php

@@ -0,0 +1,239 @@
+<?php
+$pageTitle = 'Superpilot - Superpilot Academy & Certyfikaty dla Biur';
+$enablePrototypeComments = true;
+include __DIR__ . '/header.php';
+?>
+
+<div class="container-xxl flex-grow-1 container-p-y" style="padding-top: 1.5rem !important;">
+
+    <!-- Breadcrumb -->
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb mb-0" style="font-size: 0.8rem;">
+                <li class="breadcrumb-item"><a href="index.php" class="text-muted">Superpilot</a></li>
+                <li class="breadcrumb-item active text-primary fw-bold" aria-current="page">Superpilot Academy & Certyfikaty</li>
+            </ol>
+        </nav>
+        <span class="badge bg-label-primary px-3 py-1 rounded-pill" style="font-size: 0.76rem;">
+            Oficjalny Program Akredytacji Pilotów
+        </span>
+    </div>
+
+    <!-- Hero Card Superpilot Academy -->
+    <div class="search-hero-card mb-4" style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);">
+        <div class="row align-items-center">
+            <div class="col-lg-8">
+                <span class="badge bg-warning text-dark fw-bold mb-2 px-3 py-1 rounded-pill" style="font-size: 0.72rem;">
+                    SZKOLENIA & AKREDYTACJE DLA BRANŻY TURYSTYCZNEJ
+                </span>
+                <h3 class="fw-bold text-white mb-2">Superpilot Academy & Program Certyfikacji</h3>
+                <p class="text-white-50 mb-3" style="font-size: 0.92rem; max-width: 650px;">
+                    Podnoś jakość kadr wyjazdowych. Piloci z certyfikatami Superpilot Academy otrzymują <strong>odznakę zaufania</strong>, wyższą pozycję w wyszukiwarce biur oraz ubezpieczenie OC pilotażu.
+                </p>
+                <div class="d-flex align-items-center gap-3 flex-wrap">
+                    <span class="text-white small d-flex align-items-center gap-1">
+                        <i class='bx bx-check-circle text-success'></i> Dofinansowanie z TravelPay
+                    </span>
+                    <span class="text-white small d-flex align-items-center gap-1">
+                        <i class='bx bx-check-circle text-success'></i> Egzaminy praktyczne w trasie
+                    </span>
+                    <span class="text-white small d-flex align-items-center gap-1">
+                        <i class='bx bx-check-circle text-success'></i> Weryfikacja cyfrowa blockchain
+                    </span>
+                </div>
+            </div>
+            <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
+                <a href="../travelleader-mobile/courses.php" target="_blank" class="btn btn-outline-light btn-sm" style="font-size: 0.78rem;">
+                    <i class='bx bx-mobile-alt'></i> Zobacz widok szkoleń pilota (Mobile) &rarr;
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Narzędzie: Weryfikator certyfikatu online -->
+    <div class="card border-0 shadow-sm mb-4" style="border-radius: var(--sp-radius-md); background: #f8fafc; border: 1px solid var(--sp-border-color);">
+        <div class="card-body p-4">
+            <div class="row align-items-center">
+                <div class="col-lg-4">
+                    <h6 class="fw-bold text-navy mb-1"><i class='bx bx-search-alt text-primary me-1'></i> Weryfikator Certyfikatu Online</h6>
+                    <small class="text-muted">Sprawdź autentyczność certyfikatu kandydata na pilota po numerze</small>
+                </div>
+                <div class="col-lg-5 col-md-8 mt-2 mt-lg-0">
+                    <div class="input-group">
+                        <span class="input-group-text bg-white"><i class='bx bx-barcode'></i></span>
+                        <input type="text" id="certNumberInput" class="form-control" value="SPA-2026-OK92" placeholder="Wpisz numer, np. SPA-2026-OK92">
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-4 mt-2 mt-lg-0">
+                    <button type="button" class="btn btn-primary w-100 fw-bold" onclick="verifyCert()">
+                        Zweryfikuj w rejestrze
+                    </button>
+                </div>
+            </div>
+
+            <!-- Wynik weryfikacji -->
+            <div id="certResultBox" class="mt-3 p-3 rounded-3 bg-white border d-flex justify-content-between align-items-center flex-wrap gap-2" style="display: flex;">
+                <div class="d-flex align-items-center gap-3">
+                    <div class="rounded-circle bg-success-subtle text-success d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 1.3rem;">
+                        <i class='bx bx-check-double'></i>
+                    </div>
+                    <div>
+                        <div class="fw-bold text-navy" style="font-size: 0.92rem;">
+                            Certyfikat Autentyczny: Oskar Kaczmarek (ID #1)
+                        </div>
+                        <small class="text-muted">Superpilot Academy 2026 • Akredytacja Pilotażu Europy Południowej (Włochy, Grecja, Hiszpania) • Status: <strong>Aktywny i ważny</strong></small>
+                    </div>
+                </div>
+                <a href="pilot-profile.php" class="btn btn-sm btn-outline-primary fw-semibold">
+                    Zobacz zweryfikowany profil &rarr;
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Katalog Szkoleń Dostępnych dla Branży -->
+    <h5 class="fw-bold text-navy mb-3">Programy Szkoleniowe i Certyfikaty Partnerskie</h5>
+
+    <div class="row g-4">
+        
+        <!-- Kurs 1: Superpilot Academy 2027 -->
+        <div class="col-lg-4 col-md-6">
+            <div class="academy-card h-100 d-flex flex-column">
+                <div class="p-4 flex-grow-1">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <span class="academy-card-badge">
+                            <i class='bx bx-star'></i> Flagowy Program
+                        </span>
+                        <span class="fw-bold text-navy">1 290 PLN</span>
+                    </div>
+
+                    <h5 class="fw-bold text-navy mb-2">Superpilot Academy 2027: Europa Południowa</h5>
+                    <p class="text-secondary small mb-3">
+                        Praktyczny certyfikat pilotażu tras autokarowych i lotniczych we Włoszech, Grecji i Hiszpanii. Standardy Magico i TravelManager.
+                    </p>
+
+                    <div class="d-flex flex-column gap-1 small text-muted mb-3">
+                        <div><i class='bx bx-time text-primary me-1'></i> Czas trwania: <strong>32h (Online + Warsztat Rzym)</strong></div>
+                        <div><i class='bx bx-trending-up text-success me-1'></i> Wzrost pozycji w bazie biur: <strong>+350%</strong></div>
+                        <div><i class='bx bx-wallet text-warning me-1'></i> Dofinansowanie biura przez TravelPay: <strong>do 50%</strong></div>
+                    </div>
+                </div>
+
+                <div class="p-3 bg-light border-top d-flex justify-content-between align-items-center">
+                    <small class="text-muted">Absolwenci: <strong>64 pilotów</strong></small>
+                    <button type="button" class="btn btn-sm btn-superpilot" onclick="alert('Otwarto formularz dofinansowania szkolenia dla pilota przez TravelPay.');">
+                        Dofinansuj pilotowi
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Kurs 2: KPP w Turystyce -->
+        <div class="col-lg-4 col-md-6">
+            <div class="academy-card h-100 d-flex flex-column">
+                <div class="p-4 flex-grow-1">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <span class="badge bg-danger-subtle text-danger rounded-pill fw-bold">
+                            <i class='bx bx-plus-medical'></i> Ratownictwo Medyczne
+                        </span>
+                        <span class="fw-bold text-navy">890 PLN</span>
+                    </div>
+
+                    <h5 class="fw-bold text-navy mb-2">Kwalifikowana Pierwsza Pomoc (KPP) w Trasie</h5>
+                    <p class="text-secondary small mb-3">
+                        Państwowy kurs pierwszej pomocy dla pilotów wycieczek szkolnych, trekkingowych i autokarowych. Egzamin państwowy z tytułem Ratownika.
+                    </p>
+
+                    <div class="d-flex flex-column gap-1 small text-muted mb-3">
+                        <div><i class='bx bx-time text-primary me-1'></i> Czas trwania: <strong>66 godzin (Weekendowo)</strong></div>
+                        <div><i class='bx bx-shield-check text-success me-1'></i> Ważność uprawnień: <strong>3 lata</strong></div>
+                        <div><i class='bx bx-badge text-info me-1'></i> Wymóg na trasy szkolne i młodzieżowe</div>
+                    </div>
+                </div>
+
+                <div class="p-3 bg-light border-top d-flex justify-content-between align-items-center">
+                    <small class="text-muted">Certyfikat państwowy</small>
+                    <button type="button" class="btn btn-sm btn-superpilot-outline" onclick="alert('Szczegóły kursu KPP przesłano na e-mail koordynatora.');">
+                        Szczegóły programu
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Kurs 3: Standardy VIP i Incentive -->
+        <div class="col-lg-4 col-md-6">
+            <div class="academy-card h-100 d-flex flex-column">
+                <div class="p-4 flex-grow-1">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <span class="badge bg-info-subtle text-info rounded-pill fw-bold">
+                            <i class='bx bx-diamond'></i> Korporacje & VIP
+                        </span>
+                        <span class="fw-bold text-navy">1 450 PLN</span>
+                    </div>
+
+                    <h5 class="fw-bold text-navy mb-2">Pilotaż Wyjazdów VIP & Incentive 2027</h5>
+                    <p class="text-secondary small mb-3">
+                        Etykieta biznesowa, dyplomacja w hotelach 5*, obsługa zarządów korporacji i eventów zagranicznych. Najwyższe stawki dzienne w branży.
+                    </p>
+
+                    <div class="d-flex flex-column gap-1 small text-muted mb-3">
+                        <div><i class='bx bx-time text-primary me-1'></i> Czas trwania: <strong>20h Masterclass</strong></div>
+                        <div><i class='bx bx-award text-success me-1'></i> Dedykowana odznaka: <strong>VIP Guide Pro</strong></div>
+                        <div><i class='bx bx-user-voice text-primary me-1'></i> Prowadzący: Doświadczeni dyrektorzy operacyjni biur</div>
+                    </div>
+                </div>
+
+                <div class="p-3 bg-light border-top d-flex justify-content-between align-items-center">
+                    <small class="text-muted">Dla doświadczonych pilotów</small>
+                    <button type="button" class="btn btn-sm btn-superpilot-outline" onclick="alert('Zgłoszono zapotrzebowanie na szkolenie VIP.');">
+                        Szczegóły programu
+                    </button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+</div><!-- /.container-xxl -->
+
+<script>
+function verifyCert() {
+    const num = document.getElementById('certNumberInput').value.trim();
+    const res = document.getElementById('certResultBox');
+    if (num === 'SPA-2026-OK92') {
+        res.innerHTML = `
+            <div class="d-flex align-items-center gap-3">
+                <div class="rounded-circle bg-success-subtle text-success d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 1.3rem;">
+                    <i class='bx bx-check-double'></i>
+                </div>
+                <div>
+                    <div class="fw-bold text-navy" style="font-size: 0.92rem;">
+                        Certyfikat Autentyczny: Oskar Kaczmarek (ID #1)
+                    </div>
+                    <small class="text-muted">Superpilot Academy 2026 • Akredytacja Pilotażu Europy Południowej (Włochy, Grecja, Hiszpania) • Status: <strong>Aktywny i ważny</strong></small>
+                </div>
+            </div>
+            <a href="pilot-profile.php" class="btn btn-sm btn-outline-primary fw-semibold">
+                Zobacz zweryfikowany profil &rarr;
+            </a>
+        `;
+    } else {
+        res.innerHTML = `
+            <div class="d-flex align-items-center gap-3">
+                <div class="rounded-circle bg-info-subtle text-info d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 1.3rem;">
+                    <i class='bx bx-info-circle'></i>
+                </div>
+                <div>
+                    <div class="fw-bold text-navy" style="font-size: 0.92rem;">
+                        Certyfikat w Rejestrze: ${num}
+                    </div>
+                    <small class="text-muted">Superpilot Academy Standard • Certyfikat w trakcie corocznej resertyfikacji.</small>
+                </div>
+            </div>
+            <span class="badge bg-label-info">Zweryfikowano</span>
+        `;
+    }
+}
+</script>
+
+<?php include __DIR__ . '/footer.php'; ?>

prototype/baza-pilotow/footer.php

@@ -0,0 +1,176 @@
+<!-- Reusable Modals -->
+<?php include __DIR__ . '/booking-modal.php'; ?>
+<?php include __DIR__ . '/sos-modal.php'; ?>
+
+<!-- Modal Wideo-Wizytówki Pilota (Autoprezentacja) -->
+<div class="modal fade" id="videoPitchModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--sp-radius-md); overflow: hidden; background: #0f172a; color: white;">
+            
+            <div class="modal-header border-0 pb-0">
+                <div class="d-flex align-items-center gap-2">
+                    <span class="badge bg-danger rounded-pill" style="font-size: 0.7rem;">WIDEO AUTOPREZENTACJA</span>
+                    <h6 class="modal-title fw-bold text-white mb-0" id="videoModalPilotName">Oskar Kaczmarek</h6>
+                    <span class="text-white-50 small" id="videoModalLength">(1:15 min)</span>
+                </div>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+
+            <div class="modal-body p-4 text-center">
+                
+                <!-- Ekran symulowanego wideo playera -->
+                <div class="position-relative rounded-3 overflow-hidden d-flex flex-column align-items-center justify-content-center p-5 mb-3" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); min-height: 320px; border: 1px solid rgba(255,255,255,0.1);">
+                    
+                    <!-- Próbka audio/video avatara -->
+                    <div class="rounded-circle d-flex align-items-center justify-content-center mb-3 shadow-lg" style="width: 84px; height: 84px; background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-violet) 100%); font-size: 2.2rem; font-weight: 800;">
+                        OK
+                    </div>
+
+                    <h5 class="fw-bold text-white mb-1">„Buongiorno! Nazywam się Oskar Kaczmarek...”</h5>
+                    <p class="text-white-50 small mb-3" style="max-width: 520px;">
+                        Posłuchaj próbki autoprezentacji: dykcja, prezencja, płynne przejście na język włoski i angielski, opanowanie i entuzjazm do pracy z grupami wycieczkowymi.
+                    </p>
+
+                    <!-- Pasek postępu odtwarzacza -->
+                    <div class="w-100 progress bg-dark" style="height: 6px; max-width: 480px;">
+                        <div id="videoMockProgress" class="progress-bar bg-primary" style="width: 45%;"></div>
+                    </div>
+                    <div class="d-flex justify-content-between text-white-50 small mt-1 w-100" style="max-width: 480px; font-size: 0.72rem;">
+                        <span>0:34</span>
+                        <span>1:15</span>
+                    </div>
+
+                    <!-- Fale dźwiękowe w tle -->
+                    <div class="d-flex align-items-center gap-1 mt-3">
+                        <span class="badge bg-label-primary px-3 py-1 rounded-pill"><i class='bx bx-volume-full'></i> Dźwięk HD</span>
+                        <span class="badge bg-label-success px-3 py-1 rounded-pill"><i class='bx bx-check-shield'></i> Zweryfikowany przez Superpilot</span>
+                    </div>
+
+                </div>
+
+                <!-- Podsumowanie kompetencji zweryfikowanych w wideo -->
+                <div class="row g-2 text-start">
+                    <div class="col-md-4">
+                        <div class="p-2 rounded bg-white bg-opacity-10">
+                            <div class="text-success small fw-bold"><i class='bx bx-check'></i> Język Włoski</div>
+                            <small class="text-white-50" style="font-size: 0.74rem;">Płynna wymowa i słownictwo branżowe</small>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="p-2 rounded bg-white bg-opacity-10">
+                            <div class="text-success small fw-bold"><i class='bx bx-check'></i> Dyplomacja & Grupa</div>
+                            <small class="text-white-50" style="font-size: 0.74rem;">Naturalne podejście do trudnych sytuacji</small>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="p-2 rounded bg-white bg-opacity-10">
+                            <div class="text-success small fw-bold"><i class='bx bx-check'></i> Prezencja Osobista</div>
+                            <small class="text-white-50" style="font-size: 0.74rem;">Wysoka kultura osobista, schludność</small>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="modal-footer border-0 pt-0 pb-4 px-4 justify-content-between">
+                <button type="button" class="btn btn-outline-light btn-sm" data-bs-dismiss="modal">Zamknij</button>
+                <button type="button" class="btn btn-superpilot" onclick="bootstrap.Modal.getInstance(document.getElementById('videoPitchModal')).hide(); openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 - 24.09.2027');">
+                    <i class='bx bx-calendar-check'></i> Zarezerwuj pilota po obejrzeniu
+                </button>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<!-- Modal Galerii (Lightbox Pro - Czysty & Nowoczesny UX) -->
+<div class="modal fade" id="photoLightboxModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-xl">
+        <div class="modal-content gallery-modal-content text-white">
+            <!-- Górny minimalistyczny pasek: Filtry po lewej, licznik i zamknięcie po prawej -->
+            <div class="modal-header border-0 py-3 px-3 px-md-4 d-flex align-items-center justify-content-between">
+                <div class="modal-gallery-filters" id="modalGalleryFilters">
+                    <button type="button" class="modal-filter-btn active" data-filter="all">Wszystkie <span class="count">6</span></button>
+                    <button type="button" class="modal-filter-btn" data-filter="wlochy">🇮🇹 Włochy <span class="count">3</span></button>
+                    <button type="button" class="modal-filter-btn" data-filter="hiszpania">🇪🇸 Hiszpania <span class="count">2</span></button>
+                    <button type="button" class="modal-filter-btn" data-filter="grecja">🇬🇷 Grecja <span class="count">1</span></button>
+                </div>
+
+                <div class="d-flex align-items-center gap-3">
+                    <span class="text-white-50 small fw-semibold" id="galleryModalCounter" style="font-size: 0.82rem; letter-spacing: 0.04em;">1 / 6</span>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+                </div>
+            </div>
+
+            <!-- Główna scena ze zdjęciem -->
+            <div class="modal-body p-0 px-3 px-md-4 pb-3">
+                <div class="gallery-stage mb-2">
+                    <button type="button" class="gallery-nav-btn prev" id="galleryBtnPrev" title="Poprzednie (strzałka w lewo)">
+                        <i class='bx bx-chevron-left'></i>
+                    </button>
+                    <img id="galleryModalImg" src="" alt="Zdjęcie z trasy" class="img-fluid">
+                    <button type="button" class="gallery-nav-btn next" id="galleryBtnNext" title="Następne (strzałka w prawo)">
+                        <i class='bx bx-chevron-right'></i>
+                    </button>
+                </div>
+
+                <!-- Zwięzły, jednoliniowy podpis kadru -->
+                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 py-2 px-1">
+                    <div class="d-flex align-items-center gap-2">
+                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1" id="galleryModalCountryBadge" style="font-size: 0.72rem;">🇮🇹 Włochy</span>
+                        <span class="fw-semibold text-white" id="galleryModalTitle" style="font-size: 0.92rem;">Tytuł zdjęcia</span>
+                    </div>
+                    <span class="text-white-50 small" id="galleryModalSub" style="font-size: 0.78rem;">Wrzesień 2026</span>
+                </div>
+
+                <!-- Dolna taśma miniaturek (Filmstrip) -->
+                <div class="modal-gallery-thumbs" id="modalGalleryThumbs">
+                    <!-- Generowane dynamicznie przez JS w zależności od aktywnego filtra -->
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Stopka desktopowa -->
+<footer class="content-footer footer bg-white border-top py-3 mt-5">
+    <div class="container-xxl d-flex flex-wrap justify-content-between align-items-center py-2 flex-md-row flex-column">
+        <div class="mb-2 mb-md-0 small text-muted">
+            © <?= date('Y') ?> <strong>Superpilot</strong> — Ekosystem TravelManager & PrzezMorze dla Biur Podróży.
+        </div>
+        <div class="d-flex align-items-center gap-3 small">
+            <span class="text-success fw-semibold"><i class='bx bx-shield-quarter'></i> Certyfikacja Superpilot Academy</span>
+            <a href="courses.php" class="text-secondary text-decoration-none">Programy Szkoleń</a>
+            <a href="../travelleader-mobile/profile.php" target="_blank" class="text-primary text-decoration-none">Aplikacja Mobilna Pilota</a>
+        </div>
+    </div>
+</footer>
+
+<div class="content-backdrop fade"></div>
+</div><!-- /.content-wrapper -->
+</div><!-- /.layout-page -->
+</div><!-- /.layout-container -->
+</div><!-- /.layout-wrapper -->
+
+<!-- Sneat Core JS -->
+<script src="<?= $basePath ?>/assets/vendor/libs/jquery/jquery.js"></script>
+<script src="<?= $basePath ?>/assets/vendor/libs/popper/popper.js"></script>
+<script src="<?= $basePath ?>/assets/vendor/js/bootstrap.js"></script>
+<script src="<?= $basePath ?>/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
+<script src="<?= $basePath ?>/assets/vendor/libs/hammer/hammer.js"></script>
+<script src="<?= $basePath ?>/assets/vendor/js/menu.js"></script>
+<script src="<?= $basePath ?>/assets/js/main.js"></script>
+
+<!-- Superpilot Custom JS -->
+<script src="assets/js/superpilot.js"></script>
+
+<!-- Magico Prototype Comments -->
+<?php if (!empty($enablePrototypeComments)): ?>
+    <script>
+        const MAGICO_BASE_URL = <?= json_encode($basePath); ?>;
+    </script>
+    <script src="<?= $basePath ?>/assets/js/comments.js"></script>
+<?php endif; ?>
+
+</body>
+</html>

prototype/baza-pilotow/header.php

@@ -0,0 +1,115 @@
+<?php
+$basePath = '';
+if (isset($_SERVER['HTTP_HOST']) && ($_SERVER['HTTP_HOST'] === 'localhost' || $_SERVER['HTTP_HOST'] === '127.0.0.1')) {
+    $basePath = '/magico-prototype';
+}
+
+if (!isset($pageTitle)) {
+    $pageTitle = 'Superpilot — Baza Pilotów dla Biur Podróży';
+}
+if (!isset($enablePrototypeComments)) {
+    $enablePrototypeComments = true;
+}
+?>
+<!DOCTYPE html>
+<html lang="pl" class="light-style layout-menu-fixed" dir="ltr" data-theme="theme-default" data-assets-path="<?= $basePath ?>/assets/">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
+    <title><?= htmlspecialchars($pageTitle) ?></title>
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="<?= $basePath ?>/assets/img/favicon/favicon.ico" />
+
+    <!-- Google Fonts: Public Sans -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet" />
+
+    <!-- Icons & Core Sneat CSS -->
+    <link rel="stylesheet" href="<?= $basePath ?>/assets/vendor/fonts/boxicons.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+    <link rel="stylesheet" href="<?= $basePath ?>/assets/vendor/css/core.css" />
+    <link rel="stylesheet" href="<?= $basePath ?>/assets/vendor/css/theme-default.css" />
+    <link rel="stylesheet" href="<?= $basePath ?>/assets/css/demo.css" />
+
+    <!-- Superpilot Dedicated Modern Stylesheet (Clean 2026 Design) -->
+    <link rel="stylesheet" href="assets/css/superpilot.css" />
+
+    <!-- Prototype Comments -->
+    <?php if (!empty($enablePrototypeComments)): ?>
+        <link rel="stylesheet" href="<?= $basePath ?>/assets/css/comments.css">
+    <?php endif; ?>
+
+    <!-- Helpers -->
+    <script src="<?= $basePath ?>/assets/vendor/js/helpers.js"></script>
+    <script src="<?= $basePath ?>/assets/js/config.js"></script>
+</head>
+<body>
+    <!-- Layout wrapper -->
+    <div class="layout-wrapper layout-navbar-full layout-horizontal layout-without-menu">
+        <div class="layout-container">
+
+            <!-- Navbar główny (Spokojny, lekki, profesjonalny) -->
+            <nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-white" id="layout-navbar" style="position: sticky; top: 0; z-index: 1020; border-bottom: 1px solid var(--border-color);">
+                <div class="container-xxl d-flex align-items-center justify-content-between py-2">
+                    
+                    <!-- Brand & Subtitle -->
+                    <div class="d-flex align-items-center gap-3">
+                        <a href="index.php" class="brand-superpilot">
+                            <div class="logo-icon">
+                                <i class='bx bx-compass'></i>
+                            </div>
+                            <div class="d-flex flex-column">
+                                <span class="lh-1">Super<span style="color: var(--primary);">pilot</span></span>
+                                <small class="text-muted" style="font-size: 0.68rem; font-weight: 500;">Baza Pilotów dla Biur Podróży</small>
+                            </div>
+                        </a>
+                    </div>
+
+                    <!-- Prawa strona paska nawigacji: Zastępstwo SOS, Aplikacja Pilota, Biuro -->
+                    <div class="d-flex align-items-center gap-2 gap-md-3">
+                        
+                        <!-- Spokojny przycisk SOS -->
+                        <button type="button" class="btn-sos" onclick="openSosModal('Włochy')" title="Szybkie znalezienie pilota na cito">
+                            <span class="sos-dot"></span>
+                            <span>Dyżur SOS</span>
+                        </button>
+
+                        <!-- Przejście do aplikacji mobilnej pilota -->
+                        <a href="../travelleader-mobile/profile.php" target="_blank" class="btn btn-sm btn-light text-muted d-none d-md-inline-flex align-items-center gap-1 border" style="font-size: 0.78rem;" title="Podgląd z perspektywy pilota">
+                            <i class='bx bx-mobile-alt'></i>
+                            <span>Aplikacja Pilota</span>
+                            <i class='bx bx-link-external' style="font-size: 0.65rem;"></i>
+                        </a>
+
+                        <!-- Powrót do Travel Managera -->
+                        <a href="../travel/index.php" class="btn btn-sm btn-link text-muted d-none d-lg-inline-block text-decoration-none p-0" style="font-size: 0.78rem;">
+                            Travel Manager
+                        </a>
+
+                        <!-- Profil zalogowanego biura (Przejście do zapytań i zleceń) -->
+                        <a href="inquiries.php" class="d-flex align-items-center gap-2 ps-2 border-start text-decoration-none" title="Moje zlecenia i wysłane zapytania">
+                            <div class="position-relative">
+                                <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width: 36px; height: 36px; background: var(--primary-light); color: var(--primary); font-size: 0.85rem; border: 1px solid var(--primary-border); transition: all 0.15s ease;">
+                                    AL
+                                </div>
+                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark border border-white" style="font-size: 0.6rem; padding: 2px 5px;" title="1 oczekujące zapytanie">
+                                    1
+                                </span>
+                            </div>
+                            <div class="d-none d-xl-block text-start lh-sm">
+                                <div class="fw-bold" style="font-size: 0.82rem; color: var(--dark-navy);">Biuro Almatur</div>
+                                <small class="text-muted" style="font-size: 0.7rem;">Zlecenia & zapytania &rarr;</small>
+                            </div>
+                        </a>
+
+                    </div>
+                </div>
+            </nav>
+            <!-- / Navbar -->
+
+            <!-- Layout container -->
+            <div class="layout-page" style="padding-top: 0px !important;">
+                <div class="content-wrapper">
+

prototype/baza-pilotow/index.php

@@ -0,0 +1,920 @@
+<?php
+$pageTitle = 'Superpilot — Baza Pilotów Wycieczek (Katalog i Wyszukiwarka)';
+$enablePrototypeComments = true;
+include __DIR__ . '/header.php';
+?>
+
+<div class="container-xxl flex-grow-1 container-p-y" style="padding-top: 1.5rem !important;">
+
+    <!-- ================= GŁÓWNA BELKA WYSZUKIWARKI W STYLU PRACUJ.PL Z MULTISELECTEM KRAJÓW ================= -->
+    <div class="search-bar-pracuj">
+        
+        <!-- 1. Słowa kluczowe / Nazwisko -->
+        <div class="search-field-item">
+            <i class='bx bx-search field-icon'></i>
+            <div class="field-content">
+                <div class="field-label">Pilot / Specjalizacja / Słowo kluczowe</div>
+                <input type="text" id="mainSearchInput" placeholder="Np. Oskar Kaczmarek, Rzym, Trekking...">
+            </div>
+        </div>
+
+        <!-- 2. Kraj / Destynacje — MULTISELECT POPUP -->
+        <div class="search-field-item">
+            <i class='bx bx-globe field-icon'></i>
+            <div class="field-content dropdown">
+                <div class="field-label">Destynacje (Multiselect)</div>
+                <button type="button" class="multiselect-dest-trigger dropdown-toggle" id="destDropdownTrigger" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+                    <span class="trigger-text" id="destTriggerText">🇮🇹 Włochy</span>
+                    <i class='bx bx-chevron-down text-muted ms-1'></i>
+                </button>
+                
+                <div class="dropdown-menu multiselect-dropdown-menu shadow-lg" aria-labelledby="destDropdownTrigger">
+                    <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
+                        <span class="small fw-bold text-navy">Wybierz obsługiwane kraje:</span>
+                        <button type="button" class="btn btn-sm btn-link p-0 text-muted text-decoration-none small" id="btnResetDestMultiselect" style="font-size: 0.72rem;">Wyczyść</button>
+                    </div>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Włochy" checked>
+                            <span>🇮🇹 Włochy</span>
+                        </div>
+                        <span class="text-muted small">(24)</span>
+                    </label>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Grecja">
+                            <span>🇬🇷 Grecja</span>
+                        </div>
+                        <span class="text-muted small">(18)</span>
+                    </label>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Hiszpania">
+                            <span>🇪🇸 Hiszpania</span>
+                        </div>
+                        <span class="text-muted small">(16)</span>
+                    </label>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Chorwacja">
+                            <span>🇭🇷 Chorwacja</span>
+                        </div>
+                        <span class="text-muted small">(12)</span>
+                    </label>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Norwegia">
+                            <span>🇳🇴 Norwegia</span>
+                        </div>
+                        <span class="text-muted small">(9)</span>
+                    </label>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Austria">
+                            <span>🇦🇹 Austria</span>
+                        </div>
+                        <span class="text-muted small">(7)</span>
+                    </label>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Japonia">
+                            <span>🇯🇵 Japonia & Azja</span>
+                        </div>
+                        <span class="text-muted small">(5)</span>
+                    </label>
+
+                    <div class="pt-2 mt-2 border-top">
+                        <button type="button" class="btn btn-sm btn-primary w-100 fw-semibold" id="btnConfirmDestDropdown">
+                            Zastosuj wybrane kraje
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 3. Termin wycieczki (Dialog kalendarza) -->
+        <div class="search-field-item" data-bs-toggle="modal" data-bs-target="#dateRangeModal" style="cursor: pointer;">
+            <i class='bx bx-calendar field-icon text-primary'></i>
+            <div class="field-content">
+                <div class="field-label">Termin wycieczki (Kalendarz)</div>
+                <input type="text" id="selectedDateDisplay" value="16.09.2027 – 24.09.2027" readonly style="cursor: pointer;">
+            </div>
+            <i class='bx bx-chevron-down text-muted'></i>
+        </div>
+
+        <!-- 4. Przycisk Szukaj -->
+        <button type="button" class="btn-search-pracuj" id="btnExecuteSearch">
+            <i class='bx bx-search'></i> Szukaj
+        </button>
+
+    </div>
+
+    <!-- ================= GŁÓWNY UKŁAD 2-KOLUMNOWY ================= -->
+    <div class="row g-4">
+        
+        <!-- ================= LEWA KOLUMNA: SIDEBAR FILTRÓW ================= -->
+        <div class="col-lg-4 col-xl-3">
+            <div class="filters-sidebar">
+                
+                <div class="filter-sidebar-header">
+                    <h6 class="filter-sidebar-title">
+                        <i class='bx bx-filter-alt text-primary'></i> Filtry
+                    </h6>
+                    <button type="button" id="btnClearAllFilters" class="btn btn-sm btn-link text-muted p-0 text-decoration-none" style="font-size: 0.76rem;">
+                        Wyczyść filtry
+                    </button>
+                </div>
+
+                <!-- NOWY AKORDEON: Baza wypadowa pilota -->
+                <div class="filter-accordion-item">
+                    <div class="filter-accordion-header" data-bs-toggle="collapse" data-bs-target="#filterBaseCollapse">
+                        <span class="filter-accordion-title">
+                            <i class='bx bx-building-house'></i> Baza pilota
+                        </span>
+                        <i class='bx bx-chevron-down text-muted'></i>
+                    </div>
+                    <div class="collapse show filter-accordion-body" id="filterBaseCollapse">
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="base" value="warszawa">
+                                <span>Warszawa</span>
+                            </div>
+                            <span class="filter-count-badge">(48)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="base" value="kraków">
+                                <span>Kraków</span>
+                            </div>
+                            <span class="filter-count-badge">(26)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="base" value="katowice">
+                                <span>Katowice / Śląsk</span>
+                            </div>
+                            <span class="filter-count-badge">(22)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="base" value="poznań">
+                                <span>Poznań</span>
+                            </div>
+                            <span class="filter-count-badge">(15)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="base" value="wrocław">
+                                <span>Wrocław</span>
+                            </div>
+                            <span class="filter-count-badge">(14)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="base" value="gdańsk">
+                                <span>Gdańsk / Trójmiasto</span>
+                            </div>
+                            <span class="filter-count-badge">(12)</span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Akordeon 2: Specjalizacje -->
+                <div class="filter-accordion-item">
+                    <div class="filter-accordion-header" data-bs-toggle="collapse" data-bs-target="#filterSpecCollapse">
+                        <span class="filter-accordion-title">
+                            <i class='bx bx-category'></i> Specjalizacje
+                        </span>
+                        <i class='bx bx-chevron-down text-muted'></i>
+                    </div>
+                    <div class="collapse show filter-accordion-body" id="filterSpecCollapse">
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="spec" value="objazdówki">
+                                <span>Wycieczki objazdowe</span>
+                            </div>
+                            <span class="filter-count-badge">(38)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="spec" value="trekking">
+                                <span>Trekking & góry</span>
+                            </div>
+                            <span class="filter-count-badge">(14)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="spec" value="miejski">
+                                <span>Przewodnik miejski</span>
+                            </div>
+                            <span class="filter-count-badge">(21)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="spec" value="młodzież">
+                                <span>Grupy szkolne</span>
+                            </div>
+                            <span class="filter-count-badge">(19)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="spec" value="vip">
+                                <span>VIP & Incentive</span>
+                            </div>
+                            <span class="filter-count-badge">(11)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="spec" value="kulinaria">
+                                <span>Enoturystyka & kulinaria</span>
+                            </div>
+                            <span class="filter-count-badge">(8)</span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Akordeon 3: Języki obce -->
+                <div class="filter-accordion-item">
+                    <div class="filter-accordion-header" data-bs-toggle="collapse" data-bs-target="#filterLangCollapse">
+                        <span class="filter-accordion-title">
+                            <i class='bx bx-message-dots'></i> Języki obce
+                        </span>
+                        <i class='bx bx-chevron-down text-muted'></i>
+                    </div>
+                    <div class="collapse show filter-accordion-body" id="filterLangCollapse">
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="lang" value="Angielski">
+                                <span>Angielski (B2 / C1 / C2)</span>
+                            </div>
+                            <span class="filter-count-badge">(45)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="lang" value="Włoski">
+                                <span>Włoski (min. B2)</span>
+                            </div>
+                            <span class="filter-count-badge">(18)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="lang" value="Hiszpański">
+                                <span>Hiszpański (min. B2)</span>
+                            </div>
+                            <span class="filter-count-badge">(14)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="lang" value="Norweski">
+                                <span>Norweski (C1)</span>
+                            </div>
+                            <span class="filter-count-badge">(4)</span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Akordeon 4: Certyfikaty i Ranga -->
+                <div class="filter-accordion-item">
+                    <div class="filter-accordion-header" data-bs-toggle="collapse" data-bs-target="#filterCertCollapse">
+                        <span class="filter-accordion-title">
+                            <i class='bx bx-award'></i> Certyfikaty & Ranga
+                        </span>
+                        <i class='bx bx-chevron-down text-muted'></i>
+                    </div>
+                    <div class="collapse show filter-accordion-body" id="filterCertCollapse">
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="cert" value="verified">
+                                <span>Superpilot Academy</span>
+                            </div>
+                            <span class="filter-count-badge">(32)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="cert" value="kpp">
+                                <span>Ratownik KPP</span>
+                            </div>
+                            <span class="filter-count-badge">(16)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="cert" value="rating-48">
+                                <span>Ocena min. 4.8 ★</span>
+                            </div>
+                            <span class="filter-count-badge">(27)</span>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="filter-sidebar-footer">
+                    <button type="button" class="btn-apply-filters" id="btnApplySidebarFilters">
+                        <i class='bx bx-check'></i> Pokaż pilotów (<span id="sidebarCountSpan">5</span>)
+                    </button>
+                </div>
+
+            </div>
+        </div>
+
+        <!-- ================= PRAWA KOLUMNA: KATALOG OFERT PILOTÓW ================= -->
+        <div class="col-lg-8 col-xl-9">
+            
+            <!-- Pasek aktywnych filtrów (Chips) -->
+            <div class="active-filters-bar" id="activeFiltersBar">
+                <span class="text-muted small me-1">Aktywne filtry:</span>
+                <span class="active-filter-chip" id="chipDestFilter">
+                    <i class='bx bx-globe text-primary'></i>
+                    <span id="chipDestText">Włochy</span>
+                    <i class='bx bx-x chip-remove' id="removeDestChip" title="Usuń filtr"></i>
+                </span>
+                <span class="active-filter-chip" id="chipDateFilter">
+                    <i class='bx bx-calendar text-primary'></i>
+                    <span id="chipDateText">16–24.09.2027</span>
+                    <i class='bx bx-x chip-remove' id="removeDateChip" title="Usuń filtr"></i>
+                </span>
+                <span class="active-filter-chip" id="chipBaseFilter" style="display: none;">
+                    <i class='bx bx-building-house text-primary'></i>
+                    <span id="chipBaseText">Warszawa</span>
+                    <i class='bx bx-x chip-remove' id="removeBaseChip" title="Usuń filtr"></i>
+                </span>
+            </div>
+
+            <!-- Belka podsumowania nad listą -->
+            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
+                <div>
+                    <span class="fw-bold text-navy" style="font-size: 1.05rem;">Dostępni piloci wycieczek</span>
+                    <span class="text-muted small ms-1">— <span id="offersCountText">5 ofert</span></span>
+                </div>
+
+                <div class="d-flex align-items-center gap-2">
+                    <span class="text-muted small">Sortuj:</span>
+                    <select class="form-select form-select-sm border" style="width: auto; font-size: 0.8rem; font-weight: 600;">
+                        <option selected>Dla Ciebie (Rekomendowani)</option>
+                        <option>Najwyższa ocena biur</option>
+                        <option>Staż pilotażu</option>
+                    </select>
+                </div>
+            </div>
+
+            <!-- Komunikat o braku ofert -->
+            <div id="noOffersAlert" class="alert alert-light border text-center p-4 my-4" style="display: none; border-radius: var(--radius-md);">
+                <i class='bx bx-search-alt fs-1 text-muted mb-2'></i>
+                <h6 class="fw-bold text-navy mb-1">Brak pilotów spełniających podane kryteria</h6>
+                <p class="text-muted small mb-3">Zmień wybrane destynacje, specjalizacje w lewym panelu lub zresetuj filtry.</p>
+                <button type="button" class="btn btn-sm btn-primary-calm" onclick="document.getElementById('btnClearAllFilters').click();">
+                    Wyczyść wszystkie filtry
+                </button>
+            </div>
+
+            <!-- LISTA POZIOMYCH KART PILOTÓW (UPORZĄDKOWANA, CZYSTA) -->
+            <div id="pilotOffersList">
+
+                <!-- ================= OFERTA 1: OSKAR KACZMAREK ================= -->
+                <div class="pilot-offer-card pilot-grid-item"
+                     data-name="Oskar Kaczmarek"
+                     data-base="warszawa"
+                     data-destinations="Włochy Grecja Hiszpania Chorwacja Norwegia Austria"
+                     data-languages="Polski Angielski Włoski"
+                     data-tags="objazdówki miejski rzym florencja młodzież vip kulinaria"
+                     data-rating="4.9"
+                     data-verified="1"
+                     data-kpp="1"
+                     data-dates-free="05-15-sep 25-30-sep październik-2027">
+                    
+                    <div class="pilot-offer-avatar">
+                        <img src="<?= $basePath ?>/assets/img/pilots/oskar-avatar.jpg" alt="Oskar Kaczmarek" class="pilot-avatar-img">
+                        <div class="verified-badge-mini" title="Zweryfikowany przez Superpilot Academy">
+                            <i class='bx bx-check'></i>
+                        </div>
+                    </div>
+
+                    <div class="pilot-offer-content">
+                        
+                        <!-- Rząd 1: Imię + Rola + Gwiazdka i Ocena -->
+                        <div class="pilot-offer-header-row">
+                            <div>
+                                <h5 class="pilot-offer-name">
+                                    <a href="pilot-profile.php">Oskar Kaczmarek</a>
+                                </h5>
+                                <div class="pilot-offer-headline">
+                                    Licencjonowany Pilot Wycieczek & Przewodnik Miejski
+                                </div>
+                            </div>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="pilot-rating-badge">
+                                    <i class='bx bxs-star'></i> 4.9 <span class="text-muted fw-normal">(18 opinii)</span>
+                                </div>
+                                <button type="button" class="btn-save-pilot" title="Zapisz do ulubionych" onclick="this.classList.toggle('saved');">
+                                    <i class='bx bx-star'></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Rząd 2: Metadane logistyczne (Baza, Staż, Języki) -->
+                        <div class="pilot-offer-meta-row">
+                            <div class="meta-item">
+                                <i class='bx bx-map-pin text-muted'></i> Baza: <strong>Warszawa</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-time-five text-muted'></i> Staż: <strong>7 lat</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-conversation text-muted'></i> Języki: <strong>Włoski (B2), Angielski (C1)</strong>
+                            </div>
+                        </div>
+
+                        <!-- Rząd 3: Uporządkowane tagi -->
+                        <div class="pilot-tags-row">
+                            <span class="tech-tag primary-dest">🇮🇹 Włochy (Ekspert)</span>
+                            <span class="tech-tag primary-dest">🇬🇷 Grecja</span>
+                            <span class="tech-tag primary-dest">🇪🇸 Hiszpania</span>
+                            <span class="tech-tag">Objazdówki autokarowe</span>
+                            <span class="tech-tag">VIP Incentive</span>
+                        </div>
+
+                        <!-- Rząd 4: Zwięzłe Bio -->
+                        <div class="pilot-offer-bio">
+                            Pasjonat kultury śródziemnomorskiej z wykształceniem historycznym (UW). Od 2019 r. z sukcesami prowadzi wycieczki objazdowe autokarowe i lotnicze we Włoszech, Hiszpanii i Grecji. Wyróżnia go wysokie opanowanie w sytuacjach kryzysowych.
+                        </div>
+
+                        <!-- Miniaturki zdjęć z tras -->
+                        <div class="pilot-card-gallery-preview">
+                            <img src="<?= $basePath ?>/assets/img/pilots/tuscany.jpg" alt="Toskania" title="Toskania & Florencja">
+                            <img src="<?= $basePath ?>/assets/img/pilots/rome.jpg" alt="Rzym" title="Rzym & Koloseum">
+                            <img src="<?= $basePath ?>/assets/img/pilots/greece.jpg" alt="Grecja" title="Grecja & Cyklady">
+                            <span class="gallery-more-badge">+2 zdjęcia z tras</span>
+                        </div>
+
+                        <!-- Rząd 5: Stopka karty -->
+                        <div class="pilot-offer-footer">
+                            <div class="d-flex align-items-center gap-2">
+                                <span class="pilot-academy-badge">
+                                    <i class='bx bx-award'></i> Superpilot Academy 2026
+                                </span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-2">
+                                <a href="pilot-profile.php" class="btn-offer-details">
+                                    Szczegóły profilu
+                                </a>
+                                <button type="button" class="btn-offer-book" onclick="openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 – 24.09.2027')">
+                                    <i class='bx bx-calendar-plus'></i> Zarezerwuj termin
+                                </button>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+                <!-- ================= OFERTA 2: ANNA LEWANDOWSKA ================= -->
+                <div class="pilot-offer-card pilot-grid-item"
+                     data-name="Anna Lewandowska"
+                     data-base="kraków"
+                     data-destinations="Norwegia Islandia Szwecja"
+                     data-languages="Polski Angielski Norweski"
+                     data-tags="trekking góry zorza polarna kameralne"
+                     data-rating="5.0"
+                     data-verified="1"
+                     data-kpp="1"
+                     data-dates-free="05-15-sep 16-24-sep październik-2027">
+                    
+                    <div class="pilot-offer-avatar">
+                        <img src="<?= $basePath ?>/assets/img/pilots/anna-avatar.jpg" alt="Anna Lewandowska" class="pilot-avatar-img">
+                        <div class="verified-badge-mini" title="Zweryfikowany przez Superpilot Academy">
+                            <i class='bx bx-check'></i>
+                        </div>
+                    </div>
+
+                    <div class="pilot-offer-content">
+                        <div class="pilot-offer-header-row">
+                            <div>
+                                <h5 class="pilot-offer-name">
+                                    <a href="pilot-profile.php?id=2">Anna Lewandowska</a>
+                                </h5>
+                                <div class="pilot-offer-headline">
+                                    Przewodnik Wysokogórski UIMLA & Pilot Północy
+                                </div>
+                            </div>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="pilot-rating-badge">
+                                    <i class='bx bxs-star'></i> 5.0 <span class="text-muted fw-normal">(24 opinie)</span>
+                                </div>
+                                <button type="button" class="btn-save-pilot" title="Zapisz do ulubionych" onclick="this.classList.toggle('saved');">
+                                    <i class='bx bx-star'></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="pilot-offer-meta-row">
+                            <div class="meta-item">
+                                <i class='bx bx-map-pin text-muted'></i> Baza: <strong>Kraków</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-time-five text-muted'></i> Staż: <strong>9 lat</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-conversation text-muted'></i> Języki: <strong>Norweski (C1), Angielski (C2)</strong>
+                            </div>
+                        </div>
+
+                        <div class="pilot-tags-row">
+                            <span class="tech-tag primary-dest">🇳🇴 Norwegia (Fiordy)</span>
+                            <span class="tech-tag primary-dest">🇮🇸 Islandia</span>
+                            <span class="tech-tag primary-dest">🇸🇪 Szwecja</span>
+                            <span class="tech-tag">Trekking & góry</span>
+                            <span class="tech-tag">Zorza polarna</span>
+                        </div>
+
+                        <div class="pilot-offer-bio">
+                            Specjalistka tras po Norwegii, Lofotach i lodowcach Islandii. Certyfikowana przewodniczka międzynarodowa UIMLA. Znakomita orientacja w logistyce promowej i trudnych warunkach pogodowych.
+                        </div>
+
+                        <!-- Miniaturki zdjęć z tras -->
+                        <div class="pilot-card-gallery-preview">
+                            <img src="<?= $basePath ?>/assets/img/pilots/norway.jpg" alt="Norwegia" title="Norwegia & Fiordy">
+                            <img src="<?= $basePath ?>/assets/img/pilots/iceland.jpg" alt="Islandia" title="Islandia & Zorza">
+                            <img src="<?= $basePath ?>/assets/img/pilots/trekking.jpg" alt="Trekking" title="Trekking wysokogórski">
+                            <span class="gallery-more-badge">+4 zdjęcia z wypraw</span>
+                        </div>
+
+                        <div class="pilot-offer-footer">
+                            <div class="d-flex align-items-center gap-2">
+                                <span class="pilot-academy-badge">
+                                    <i class='bx bx-award'></i> Superpilot Academy 2026
+                                </span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-2">
+                                <a href="pilot-profile.php?id=2" class="btn-offer-details">
+                                    Szczegóły profilu
+                                </a>
+                                <button type="button" class="btn-offer-book" onclick="openBookingModal('2', 'Anna Lewandowska', '16.09.2027 – 24.09.2027')">
+                                    <i class='bx bx-calendar-plus'></i> Zarezerwuj termin
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- ================= OFERTA 3: MICHAŁ WIŚNIEWSKI ================= -->
+                <div class="pilot-offer-card pilot-grid-item"
+                     data-name="Michał Wiśniewski"
+                     data-base="katowice"
+                     data-destinations="Hiszpania Portugalia Austria"
+                     data-languages="Polski Hiszpański Angielski"
+                     data-tags="objazdówki narty młodzież autokar"
+                     data-rating="4.7"
+                     data-verified="0"
+                     data-kpp="0"
+                     data-dates-free="październik-2027">
+                    
+                    <div class="pilot-offer-avatar" style="background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);">
+                        MW
+                    </div>
+
+                    <div class="pilot-offer-content">
+                        <div class="pilot-offer-header-row">
+                            <div>
+                                <h5 class="pilot-offer-name">
+                                    <a href="pilot-profile.php?id=3">Michał Wiśniewski</a>
+                                </h5>
+                                <div class="pilot-offer-headline">
+                                    Pilot Wycieczek Autokarowych & Instruktor Narciarstwa
+                                </div>
+                            </div>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="pilot-rating-badge">
+                                    <i class='bx bxs-star'></i> 4.7 <span class="text-muted fw-normal">(11 opinii)</span>
+                                </div>
+                                <button type="button" class="btn-save-pilot" title="Zapisz do ulubionych" onclick="this.classList.toggle('saved');">
+                                    <i class='bx bx-star'></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="pilot-offer-meta-row">
+                            <div class="meta-item">
+                                <i class='bx bx-map-pin text-muted'></i> Baza: <strong>Katowice</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-time-five text-muted'></i> Staż: <strong>5 lat</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-conversation text-muted'></i> Języki: <strong>Hiszpański (B2), Angielski (B2)</strong>
+                            </div>
+                        </div>
+
+                        <div class="pilot-tags-row">
+                            <span class="tech-tag primary-dest">🇪🇸 Hiszpania & Andaluzja</span>
+                            <span class="tech-tag primary-dest">🇵🇹 Portugalia</span>
+                            <span class="tech-tag primary-dest">🇦🇹 Austria</span>
+                            <span class="tech-tag">Objazdówki autokarowe</span>
+                            <span class="tech-tag">Narty & Alpy</span>
+                        </div>
+
+                        <div class="pilot-offer-bio">
+                            Dynamiczny pilot specjalizujący się w długich trasach autokarowych na Półwysep Iberyjski oraz zimowych wyjazdach narciarskich do Austrii i Włoch. Bardzo dobry kontakt z młodzieżą i grupami dorosłymi.
+                        </div>
+
+                        <div class="pilot-offer-footer">
+                            <div class="d-flex align-items-center gap-2">
+                                <span class="badge bg-light text-muted border small">
+                                    Instruktor SITN-PZN
+                                </span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-2">
+                                <a href="pilot-profile.php?id=3" class="btn-offer-details">
+                                    Szczegóły profilu
+                                </a>
+                                <button type="button" class="btn-offer-book" onclick="openBookingModal('3', 'Michał Wiśniewski', '05.10.2027 – 12.10.2027')">
+                                    <i class='bx bx-calendar-plus'></i> Zarezerwuj termin
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- ================= OFERTA 4: KATARZYNA ZIELIŃSKA ================= -->
+                <div class="pilot-offer-card pilot-grid-item"
+                     data-name="Katarzyna Zielińska"
+                     data-base="poznań wrocław"
+                     data-destinations="Chorwacja Włochy Grecja"
+                     data-languages="Polski Angielski Chorwacki Włoski"
+                     data-tags="młodzież grupy szkolne kpp pierwsza pomoc bałkany"
+                     data-rating="4.8"
+                     data-verified="1"
+                     data-kpp="1"
+                     data-dates-free="05-15-sep 16-24-sep październik-2027">
+                    
+                    <div class="pilot-offer-avatar" style="background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);">
+                        KZ
+                        <div class="verified-badge-mini">
+                            <i class='bx bx-check'></i>
+                        </div>
+                    </div>
+
+                    <div class="pilot-offer-content">
+                        <div class="pilot-offer-header-row">
+                            <div>
+                                <h5 class="pilot-offer-name">
+                                    <a href="pilot-profile.php?id=4">Katarzyna Zielińska</a>
+                                </h5>
+                                <div class="pilot-offer-headline">
+                                    Pilot Grup Szkolnych & Młodzieżowych • Ratownik KPP
+                                </div>
+                            </div>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="pilot-rating-badge">
+                                    <i class='bx bxs-star'></i> 4.8 <span class="text-muted fw-normal">(15 opinii)</span>
+                                </div>
+                                <button type="button" class="btn-save-pilot" title="Zapisz do ulubionych" onclick="this.classList.toggle('saved');">
+                                    <i class='bx bx-star'></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="pilot-offer-meta-row">
+                            <div class="meta-item">
+                                <i class='bx bx-map-pin text-muted'></i> Baza: <strong>Poznań / Wrocław</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-time-five text-muted'></i> Staż: <strong>6 lat</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-conversation text-muted'></i> Języki: <strong>Chorwacki (B2), Angielski (C1)</strong>
+                            </div>
+                        </div>
+
+                        <div class="pilot-tags-row">
+                            <span class="tech-tag primary-dest">🇭🇷 Chorwacja</span>
+                            <span class="tech-tag primary-dest">🇮🇹 Włochy Północne</span>
+                            <span class="tech-tag primary-dest">🇬🇷 Grecja</span>
+                            <span class="tech-tag">Grupy szkolne</span>
+                            <span class="tech-tag">Kwalifikowana Pierwsza Pomoc</span>
+                        </div>
+
+                        <div class="pilot-offer-bio">
+                            Pedagog z wieloletnim doświadczeniem w pilotowaniu wycieczek szkolnych i kolonii zagranicznych. Uprawnienia Kwalifikowanej Pierwszej Pomocy. Doskonała komunikacja z kierowcami autokarów i nauczycielami.
+                        </div>
+
+                        <div class="pilot-offer-footer">
+                            <div class="d-flex align-items-center gap-2">
+                                <span class="pilot-academy-badge">
+                                    <i class='bx bx-award'></i> Superpilot Academy 2026
+                                </span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-2">
+                                <a href="pilot-profile.php?id=4" class="btn-offer-details">
+                                    Szczegóły profilu
+                                </a>
+                                <button type="button" class="btn-offer-book" onclick="openBookingModal('4', 'Katarzyna Zielińska', '16.09.2027 – 24.09.2027')">
+                                    <i class='bx bx-calendar-plus'></i> Zarezerwuj termin
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- ================= OFERTA 5: PAWEŁ DĄBROWSKI ================= -->
+                <div class="pilot-offer-card pilot-grid-item"
+                     data-name="Paweł Dąbrowski"
+                     data-base="warszawa"
+                     data-destinations="Japonia Azja"
+                     data-languages="Polski Angielski Japoński"
+                     data-tags="vip incentive egzotyka korporacje kulinaria"
+                     data-rating="4.9"
+                     data-verified="1"
+                     data-kpp="0"
+                     data-dates-free="październik-2027">
+                    
+                    <div class="pilot-offer-avatar" style="background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);">
+                        PD
+                        <div class="verified-badge-mini">
+                            <i class='bx bx-check'></i>
+                        </div>
+                    </div>
+
+                    <div class="pilot-offer-content">
+                        <div class="pilot-offer-header-row">
+                            <div>
+                                <h5 class="pilot-offer-name">
+                                    <a href="pilot-profile.php?id=5">Paweł Dąbrowski</a>
+                                </h5>
+                                <div class="pilot-offer-headline">
+                                    Ekspert Wyjazdów Dalekobieżnych & VIP Incentive (Japonia)
+                                </div>
+                            </div>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="pilot-rating-badge">
+                                    <i class='bx bxs-star'></i> 4.9 <span class="text-muted fw-normal">(30 opinii)</span>
+                                </div>
+                                <button type="button" class="btn-save-pilot" title="Zapisz do ulubionych" onclick="this.classList.toggle('saved');">
+                                    <i class='bx bx-star'></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="pilot-offer-meta-row">
+                            <div class="meta-item">
+                                <i class='bx bx-map-pin text-muted'></i> Baza: <strong>Warszawa</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-time-five text-muted'></i> Staż: <strong>11 lat</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-conversation text-muted'></i> Języki: <strong>Japoński (B2), Angielski (C2)</strong>
+                            </div>
+                        </div>
+
+                        <div class="pilot-tags-row">
+                            <span class="tech-tag primary-dest">🇯🇵 Japonia</span>
+                            <span class="tech-tag primary-dest">🇹🇭 Tajlandia</span>
+                            <span class="tech-tag primary-dest">🇺🇸 USA</span>
+                            <span class="tech-tag">VIP Incentive</span>
+                            <span class="tech-tag">Wyjazdy firmowe</span>
+                        </div>
+
+                        <div class="pilot-offer-bio">
+                            Dyrektor operacyjny i pilot z 11-letnim doświadczeniem w wyjazdach incentive dla zarządów firm i grup VIP. Biegle posługuje się językiem japońskim i angielskim. Pełna znajomość protokołu biznesowego.
+                        </div>
+
+                        <div class="pilot-offer-footer">
+                            <div class="d-flex align-items-center gap-2">
+                                <span class="pilot-academy-badge">
+                                    <i class='bx bx-award'></i> Superpilot Academy 2026
+                                </span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-2">
+                                <a href="pilot-profile.php?id=5" class="btn-offer-details">
+                                    Szczegóły profilu
+                                </a>
+                                <button type="button" class="btn-offer-book" onclick="openBookingModal('5', 'Paweł Dąbrowski', '10.10.2027 – 24.10.2027')">
+                                    <i class='bx bx-calendar-plus'></i> Zarezerwuj termin
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div><!-- /#pilotOffersList -->
+
+        </div><!-- /.col-lg-8 -->
+
+    </div><!-- /.row -->
+
+</div><!-- /.container-xxl -->
+
+<!-- ================= MODAL KALENDARZA: WYBÓR ZAKRESU DAT WYCIECZKI ================= -->
+<div class="modal fade date-picker-modal" id="dateRangeModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" style="max-width: 480px;">
+        <div class="modal-content">
+            
+            <div class="modal-header border-bottom py-3">
+                <div class="d-flex align-items-center gap-2">
+                    <div class="rounded-circle d-flex align-items-center justify-content-center bg-primary-subtle text-primary" style="width: 36px; height: 36px;">
+                        <i class='bx bx-calendar fs-5'></i>
+                    </div>
+                    <div>
+                        <h6 class="modal-title fw-bold text-navy mb-0">Wybierz termin wycieczki</h6>
+                        <small class="text-muted" style="font-size: 0.74rem;">Sprawdź wolne okienka w grafikach pilotów</small>
+                    </div>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+
+            <div class="modal-body p-3">
+                
+                <div class="date-quick-presets">
+                    <span class="preset-chip active" data-preset="16-24-sep-2027">16 – 24 września 2027 (Wycieczka #12)</span>
+                    <span class="preset-chip" data-preset="05-15-sep-2027">05 – 15 września 2027 (Wolne okienko)</span>
+                    <span class="preset-chip" data-preset="październik-2027">Październik 2027</span>
+                    <span class="preset-chip" data-preset="all">Dowolny termin</span>
+                </div>
+
+                <div class="p-2 border rounded-3 bg-light">
+                    <div class="d-flex justify-content-between align-items-center mb-2 px-1">
+                        <button class="btn btn-sm btn-white p-1 rounded-circle border"><i class='bx bx-chevron-left'></i></button>
+                        <strong class="text-navy" style="font-size: 0.88rem;">Wrzesień 2027</strong>
+                        <button class="btn btn-sm btn-white p-1 rounded-circle border"><i class='bx bx-chevron-right'></i></button>
+                    </div>
+
+                    <div class="date-picker-grid">
+                        <div class="date-picker-day-head">Pn</div>
+                        <div class="date-picker-day-head">Wt</div>
+                        <div class="date-picker-day-head">Śr</div>
+                        <div class="date-picker-day-head">Cz</div>
+                        <div class="date-picker-day-head">Pt</div>
+                        <div class="date-picker-day-head">Sb</div>
+                        <div class="date-picker-day-head">Nd</div>
+
+                        <div class="date-picker-cell other-month">30</div>
+                        <div class="date-picker-cell other-month">31</div>
+                        <div class="date-picker-cell">1</div>
+                        <div class="date-picker-cell">2</div>
+                        <div class="date-picker-cell">3</div>
+                        <div class="date-picker-cell">4</div>
+                        <div class="date-picker-cell">5</div>
+
+                        <div class="date-picker-cell">6</div>
+                        <div class="date-picker-cell">7</div>
+                        <div class="date-picker-cell">8</div>
+                        <div class="date-picker-cell">9</div>
+                        <div class="date-picker-cell">10</div>
+                        <div class="date-picker-cell">11</div>
+                        <div class="date-picker-cell">12</div>
+
+                        <div class="date-picker-cell">13</div>
+                        <div class="date-picker-cell">14</div>
+                        <div class="date-picker-cell">15</div>
+                        <div class="date-picker-cell range-start" data-day="16">16</div>
+                        <div class="date-picker-cell selected-range" data-day="17">17</div>
+                        <div class="date-picker-cell selected-range" data-day="18">18</div>
+                        <div class="date-picker-cell selected-range" data-day="19">19</div>
+
+                        <div class="date-picker-cell selected-range" data-day="20">20</div>
+                        <div class="date-picker-cell selected-range" data-day="21">21</div>
+                        <div class="date-picker-cell selected-range" data-day="22">22</div>
+                        <div class="date-picker-cell selected-range" data-day="23">23</div>
+                        <div class="date-picker-cell range-end" data-day="24">24</div>
+                        <div class="date-picker-cell">25</div>
+                        <div class="date-picker-cell">26</div>
+
+                        <div class="date-picker-cell">27</div>
+                        <div class="date-picker-cell">28</div>
+                        <div class="date-picker-cell">29</div>
+                        <div class="date-picker-cell">30</div>
+                        <div class="date-picker-cell other-month">1</div>
+                        <div class="date-picker-cell other-month">2</div>
+                        <div class="date-picker-cell other-month">3</div>
+                    </div>
+                </div>
+
+                <div class="mt-3 p-2 rounded-2 bg-white border text-center small text-muted">
+                    Wybrany termin: <strong id="modalSelectedDateText" class="text-primary">16.09.2027 – 24.09.2027 (9 dni)</strong>
+                </div>
+
+            </div>
+
+            <div class="modal-footer border-top py-2 px-3 justify-content-between">
+                <button type="button" class="btn btn-sm btn-link text-muted text-decoration-none" id="btnResetDateDialog">
+                    Wyczyść termin
+                </button>
+                <button type="button" class="btn btn-sm btn-primary-calm" id="btnApplyDateDialog" data-bs-dismiss="modal">
+                    Zastosuj termin wycieczki
+                </button>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<?php include __DIR__ . '/footer.php'; ?>

prototype/baza-pilotow/inquiries.php

@@ -0,0 +1,325 @@
+<?php
+$pageTitle = 'Superpilot — Moje Zlecenia i Zapytania Ofertowe';
+$enablePrototypeComments = true;
+include __DIR__ . '/header.php';
+?>
+
+<div class="container-xxl flex-grow-1 container-p-y" style="padding-top: 1.25rem !important;">
+
+    <!-- Dyskretny powrót do katalogu -->
+    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+        <a href="index.php" class="text-muted text-decoration-none small d-inline-flex align-items-center gap-1">
+            <i class='bx bx-arrow-back'></i> Wróć do katalogu pilotów
+        </a>
+
+        <div class="d-flex align-items-center gap-2">
+            <button type="button" class="btn-sos" onclick="openSosModal('Włochy')" title="Pilne zastępstwo SOS">
+                <span class="sos-dot"></span>
+                <span>Dyżur SOS</span>
+            </button>
+            <button type="button" class="btn btn-primary btn-sm px-3 fw-semibold d-inline-flex align-items-center gap-1" style="font-size: 0.8rem; border-radius: var(--radius-sm);" onclick="openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 - 24.09.2027')">
+                <i class='bx bx-plus'></i> Nowe zapytanie o termin
+            </button>
+        </div>
+    </div>
+
+    <!-- Nagłówek widoku -->
+    <div class="mb-4">
+        <h3 class="fw-bold text-navy mb-1" style="font-size: 1.45rem;">Moje Zlecenia & Wysłane Zapytania</h3>
+        <p class="text-muted small mb-0">
+            Monitoring statusu obsady tras biura Almatur w aplikacji mobilnej pilotów (<code>TravelLeader Mobile</code>) oraz umowy.
+        </p>
+    </div>
+
+    <!-- Pasek 4 podsumowań (Spójny z profile-stat-box) -->
+    <div class="row g-3 mb-4">
+        <div class="col-lg-3 col-sm-6">
+            <div class="profile-stat-box">
+                <div class="stat-val">4</div>
+                <div class="stat-lbl">Wszystkie zlecenia w historii</div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-6">
+            <div class="profile-stat-box">
+                <div class="stat-val text-warning">1</div>
+                <div class="stat-lbl">Oczekuje na akceptację w mobile</div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-6">
+            <div class="profile-stat-box">
+                <div class="stat-val text-success">2</div>
+                <div class="stat-lbl">Zaakceptowane & obsadzone</div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-6">
+            <div class="profile-stat-box">
+                <div class="stat-val" style="color: var(--primary);">1</div>
+                <div class="stat-lbl">Zrealizowana i oceniona</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Główna karta tabeli zleceń -->
+    <div class="profile-section-card">
+        
+        <!-- Nagłówek tabeli z filtrami -->
+        <div class="profile-section-header flex-wrap gap-2">
+            <div class="d-flex align-items-center gap-2">
+                <i class='bx bx-list-check fs-5 text-primary'></i>
+                <h5 class="profile-section-title mb-0">Lista Zapytań Ofertowych Biura Podróży</h5>
+            </div>
+
+            <!-- Filtry statusów (Pastylki) -->
+            <div class="d-flex gap-1 flex-wrap" id="inquiryStatusFilters">
+                <button type="button" class="btn btn-sm btn-primary filter-tab active" data-filter="all" style="font-size: 0.76rem;">
+                    Wszystkie (4)
+                </button>
+                <button type="button" class="btn btn-sm btn-light border filter-tab" data-filter="pending" style="font-size: 0.76rem;">
+                    Oczekujące (1)
+                </button>
+                <button type="button" class="btn btn-sm btn-light border filter-tab" data-filter="confirmed" style="font-size: 0.76rem;">
+                    Zaakceptowane (2)
+                </button>
+                <button type="button" class="btn btn-sm btn-light border filter-tab" data-filter="completed" style="font-size: 0.76rem;">
+                    Zrealizowane (1)
+                </button>
+            </div>
+        </div>
+
+        <div class="table-responsive">
+            <table class="table table-hover align-middle mb-0" style="width: 100%;">
+                <thead class="bg-light text-muted" style="font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em;">
+                    <tr>
+                        <th style="padding: 12px 16px; width: 28%; min-width: 190px;">Wycieczka & Termin</th>
+                        <th style="padding: 12px 14px; width: 20%; min-width: 160px;">Pilot</th>
+                        <th style="padding: 12px 14px; width: 14%; min-width: 110px;">Stawka</th>
+                        <th style="padding: 12px 14px; width: 20%; min-width: 160px;">Status</th>
+                        <th style="padding: 12px 14px; width: 9%; min-width: 80px;">Wysłano</th>
+                        <th class="text-end" style="padding: 12px 16px; width: 9%; min-width: 110px;">Akcje</th>
+                    </tr>
+                </thead>
+                <tbody style="font-size: 0.85rem;" id="inquiriesTableBody">
+                    
+                    <!-- Pozycja 1: Wycieczka #15 (Oskar Kaczmarek - oczekuje) -->
+                    <tr class="inquiry-row" data-status="pending">
+                        <td style="padding: 12px 16px;">
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="rounded-2 d-flex align-items-center justify-content-center bg-warning-subtle text-warning fw-bold" style="width: 32px; height: 32px; font-size: 0.78rem; flex-shrink: 0;">
+                                    #15
+                                </div>
+                                <div>
+                                    <div class="fw-bold text-navy" style="font-size: 0.86rem;">Wycieczka #15: Magia Toskanii i Rzym</div>
+                                    <small class="text-muted" style="font-size: 0.74rem;"><i class='bx bx-calendar'></i> 05.10 – 12.10.2027 (8 dni)</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <div class="d-flex align-items-center gap-2">
+                                <img src="<?= $basePath ?>/assets/img/pilots/oskar-avatar.jpg" alt="Oskar Kaczmarek" class="rounded-circle border" style="width: 32px; height: 32px; object-fit: cover; flex-shrink: 0;">
+                                <div>
+                                    <a href="pilot-profile.php" class="fw-bold text-navy text-decoration-none" style="font-size: 0.85rem;">Oskar Kaczmarek</a>
+                                    <small class="text-muted d-block" style="font-size: 0.72rem;">★ 4.9 • Warszawa</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <strong class="text-navy">550 PLN</strong> <small class="text-muted">/ dzień</small>
+                            <div class="text-muted small" style="font-size: 0.7rem;">Suma: 4 400 PLN</div>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <span class="badge bg-warning-subtle text-warning fw-semibold px-2 py-1 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.73rem;">
+                                <i class='bx bx-time-five'></i> Oczekuje na akceptację
+                            </span>
+                            <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">18h na odpowiedź w mobile</small>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <span class="text-muted small">Dziś, 09:15</span>
+                        </td>
+                        <td class="text-end" style="padding: 12px 16px;">
+                            <div class="d-flex align-items-center justify-content-end gap-1 text-nowrap">
+                                <button type="button" class="btn btn-sm btn-outline-primary" style="font-size: 0.75rem; padding: 2px 8px;" onclick="showToastNotification('Przypomnienie PUSH wysłane!', 'Wysłano ponowny alert na telefon pilota Oskara Kaczmarka.');">
+                                    <i class='bx bx-bell'></i> Przypomnij
+                                </button>
+                                <a href="pilot-profile.php" class="btn btn-sm btn-light border text-muted" style="font-size: 0.75rem; padding: 2px 8px;" title="Profil pilota">
+                                    Profil
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+
+                    <!-- Pozycja 2: Wycieczka #12 (Oskar Kaczmarek - potwierdzona) -->
+                    <tr class="inquiry-row" data-status="confirmed">
+                        <td style="padding: 12px 16px;">
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="rounded-2 d-flex align-items-center justify-content-center bg-primary-subtle text-primary fw-bold" style="width: 32px; height: 32px; font-size: 0.78rem; flex-shrink: 0;">
+                                    #12
+                                </div>
+                                <div>
+                                    <div class="fw-bold text-navy" style="font-size: 0.86rem;">Wycieczka #12: Klasyczne Włochy</div>
+                                    <small class="text-muted" style="font-size: 0.74rem;"><i class='bx bx-calendar'></i> 16.09 – 24.09.2027 (9 dni)</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <div class="d-flex align-items-center gap-2">
+                                <img src="<?= $basePath ?>/assets/img/pilots/oskar-avatar.jpg" alt="Oskar Kaczmarek" class="rounded-circle border" style="width: 32px; height: 32px; object-fit: cover; flex-shrink: 0;">
+                                <div>
+                                    <a href="pilot-profile.php" class="fw-bold text-navy text-decoration-none" style="font-size: 0.85rem;">Oskar Kaczmarek</a>
+                                    <small class="text-muted d-block" style="font-size: 0.72rem;">★ 4.9 • Warszawa</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <strong class="text-navy">550 PLN</strong> <small class="text-muted">/ dzień</small>
+                            <div class="text-muted small" style="font-size: 0.7rem;">Suma: 4 950 PLN</div>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <span class="badge bg-success-subtle text-success fw-semibold px-2 py-1 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.73rem;">
+                                <i class='bx bx-check-circle'></i> Zaakceptowane przez pilota
+                            </span>
+                            <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Potwierdzone w mobile</small>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <span class="text-muted small">Wczoraj, 14:22</span>
+                        </td>
+                        <td class="text-end" style="padding: 12px 16px;">
+                            <div class="d-flex align-items-center justify-content-end gap-1 text-nowrap">
+                                <button type="button" class="btn btn-sm btn-light border text-muted" style="font-size: 0.75rem; padding: 2px 8px;" onclick="alert('Generowanie umowy zlecenia dla pilota Oskara Kaczmarka (Klasyczne Włochy)...');">
+                                    <i class='bx bx-file'></i> Umowa
+                                </button>
+                                <a href="pilot-profile.php" class="btn btn-sm btn-light border text-muted" style="font-size: 0.75rem; padding: 2px 8px;">
+                                    Profil
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+
+                    <!-- Pozycja 3: Norwegia (Anna Lewandowska - potwierdzona) -->
+                    <tr class="inquiry-row" data-status="confirmed">
+                        <td style="padding: 12px 16px;">
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="rounded-2 d-flex align-items-center justify-content-center bg-info-subtle text-info fw-bold" style="width: 32px; height: 32px; font-size: 0.78rem; flex-shrink: 0;">
+                                    #18
+                                </div>
+                                <div>
+                                    <div class="fw-bold text-navy" style="font-size: 0.86rem;">Wycieczka #18: Fiordy Norwegii & Bergen</div>
+                                    <small class="text-muted" style="font-size: 0.74rem;"><i class='bx bx-calendar'></i> 12.08 – 19.08.2027 (8 dni)</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <div class="d-flex align-items-center gap-2">
+                                <img src="<?= $basePath ?>/assets/img/pilots/anna-avatar.jpg" alt="Anna Lewandowska" class="rounded-circle border" style="width: 32px; height: 32px; object-fit: cover; flex-shrink: 0;">
+                                <div>
+                                    <span class="fw-bold text-navy" style="font-size: 0.85rem;">Anna Lewandowska</span>
+                                    <small class="text-muted d-block" style="font-size: 0.72rem;">★ 5.0 • Kraków</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <strong class="text-navy">650 PLN</strong> <small class="text-muted">/ dzień</small>
+                            <div class="text-muted small" style="font-size: 0.7rem;">Suma: 5 200 PLN</div>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <span class="badge bg-success-subtle text-success fw-semibold px-2 py-1 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.73rem;">
+                                <i class='bx bx-check-circle'></i> Zaakceptowane przez pilota
+                            </span>
+                            <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Grafik obsadzony w 100%</small>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <span class="text-muted small">3 dni temu</span>
+                        </td>
+                        <td class="text-end" style="padding: 12px 16px;">
+                            <div class="d-flex align-items-center justify-content-end gap-1 text-nowrap">
+                                <button type="button" class="btn btn-sm btn-light border text-muted" style="font-size: 0.75rem; padding: 2px 8px;" onclick="alert('Generowanie umowy zlecenia dla pilotki Anny Lewandowskiej...');">
+                                    <i class='bx bx-file'></i> Umowa
+                                </button>
+                                <a href="pilot-profile.php?id=2" class="btn btn-sm btn-light border text-muted" style="font-size: 0.75rem; padding: 2px 8px;">
+                                    Profil
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+
+                    <!-- Pozycja 4: Wycieczka zrealizowana (Do oceny / Zrecenzowana) -->
+                    <tr class="inquiry-row" data-status="completed">
+                        <td style="padding: 12px 16px;">
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="rounded-2 d-flex align-items-center justify-content-center bg-secondary-subtle text-secondary fw-bold" style="width: 32px; height: 32px; font-size: 0.78rem; flex-shrink: 0;">
+                                    #8
+                                </div>
+                                <div>
+                                    <div class="fw-bold text-navy" style="font-size: 0.86rem;">Wycieczka #8: Klasyczne Włochy (Maj 2026)</div>
+                                    <small class="text-muted" style="font-size: 0.74rem;"><i class='bx bx-calendar'></i> Zrealizowana pomyślnie</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <div class="d-flex align-items-center gap-2">
+                                <img src="<?= $basePath ?>/assets/img/pilots/oskar-avatar.jpg" alt="Oskar Kaczmarek" class="rounded-circle border" style="width: 32px; height: 32px; object-fit: cover; flex-shrink: 0;">
+                                <div>
+                                    <a href="pilot-profile.php" class="fw-bold text-navy text-decoration-none" style="font-size: 0.85rem;">Oskar Kaczmarek</a>
+                                    <small class="text-muted d-block" style="font-size: 0.72rem;">★ 4.9 • Warszawa</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <strong class="text-navy">500 PLN</strong> <small class="text-muted">/ dzień</small>
+                            <div class="text-success small" style="font-size: 0.7rem;">Rozliczona i opłacona</div>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <span class="badge bg-primary-subtle text-primary fw-semibold px-2 py-1 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.73rem;">
+                                <i class='bx bxs-star text-warning'></i> Wystawiono referencję (5.0 ★)
+                            </span>
+                            <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Pilot dodał oficjalną odpowiedź</small>
+                        </td>
+                        <td style="padding: 12px 14px;">
+                            <span class="text-muted small">Maj 2026</span>
+                        </td>
+                        <td class="text-end" style="padding: 12px 16px;">
+                            <div class="d-flex align-items-center justify-content-end text-nowrap">
+                                <a href="pilot-profile.php#opinie" class="btn btn-sm btn-outline-primary" style="font-size: 0.75rem; padding: 2px 10px;">
+                                    Zobacz opinię &rarr;
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+
+                </tbody>
+            </table>
+        </div>
+
+    </div>
+
+</div><!-- /.container-xxl -->
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const filterButtons = document.querySelectorAll('#inquiryStatusFilters .filter-tab');
+    const rows = document.querySelectorAll('.inquiry-row');
+
+    filterButtons.forEach(btn => {
+        btn.addEventListener('click', function() {
+            filterButtons.forEach(b => {
+                b.classList.remove('btn-primary', 'active');
+                b.classList.add('btn-light', 'border');
+            });
+            this.classList.remove('btn-light', 'border');
+            this.classList.add('btn-primary', 'active');
+
+            const filter = this.getAttribute('data-filter');
+
+            rows.forEach(row => {
+                const status = row.getAttribute('data-status');
+                if (filter === 'all' || status === filter) {
+                    row.style.display = '';
+                } else {
+                    row.style.display = 'none';
+                }
+            });
+        });
+    });
+});
+</script>
+
+<?php include __DIR__ . '/footer.php'; ?>

prototype/baza-pilotow/menu.php

@@ -0,0 +1,43 @@
+<?php
+$currentPage = basename($_SERVER['PHP_SELF']);
+?>
+<aside id="layout-menu" class="layout-menu-horizontal menu-horizontal menu bg-white flex-grow-0 border-bottom" style="position: relative; top: 0; padding-top: 0; z-index: 1010; border-color: var(--border-color) !important;">
+    <div class="container-xxl d-flex h-100">
+        <ul class="menu-inner py-1">
+            
+            <!-- Główny katalog -->
+            <li class="menu-item <?= ($currentPage === 'index.php') ? 'active' : '' ?>">
+                <a href="index.php" class="menu-link">
+                    <i class="menu-icon tf-icons bx bx-search"></i>
+                    <div data-i18n="Baza Pilotów">Katalog Pilotów</div>
+                </a>
+            </li>
+
+            <!-- Profil pilota -->
+            <li class="menu-item <?= ($currentPage === 'pilot-profile.php' || $currentPage === 'pilot-reviews.php') ? 'active' : '' ?>">
+                <a href="pilot-profile.php" class="menu-link">
+                    <i class="menu-icon tf-icons bx bx-user"></i>
+                    <div data-i18n="Profil Pilota">Profil: Oskar Kaczmarek</div>
+                </a>
+            </li>
+
+            <!-- Moje Zapytania i Rezerwacje -->
+            <li class="menu-item <?= ($currentPage === 'inquiries.php') ? 'active' : '' ?>">
+                <a href="inquiries.php" class="menu-link">
+                    <i class="menu-icon tf-icons bx bx-paper-plane"></i>
+                    <div data-i18n="Zapytania">Zapytania & Rezerwacje</div>
+                    <span class="badge rounded-pill bg-light text-primary border ms-2" style="font-size: 0.68rem;">3 aktywne</span>
+                </a>
+            </li>
+
+            <!-- Szkolenia i certyfikaty Superpilot Academy -->
+            <li class="menu-item <?= ($currentPage === 'courses.php') ? 'active' : '' ?>">
+                <a href="courses.php" class="menu-link">
+                    <i class="menu-icon tf-icons bx bx-award"></i>
+                    <div data-i18n="Szkolenia">Szkolenia & Certyfikaty</div>
+                </a>
+            </li>
+
+        </ul>
+    </div>
+</aside>

prototype/baza-pilotow/pilot-profile.php

@@ -0,0 +1,896 @@
+<?php
+$pageTitle = 'Superpilot - Profil Pilota: Oskar Kaczmarek';
+$enablePrototypeComments = true;
+include __DIR__ . '/header.php';
+
+// Dane Oskara Kaczmarka w 100% spójne z aplikacją mobilną travelleader-mobile
+$startYear = 2019;
+$currentYear = (int)date('Y');
+$experienceYears = max(1, $currentYear - $startYear);
+?>
+
+<div class="container-xxl flex-grow-1 container-p-y" style="padding-top: 1.25rem !important;">
+
+    <!-- Dyskretny powrót do listy -->
+    <div class="mb-3">
+        <a href="index.php" class="text-muted text-decoration-none small d-inline-flex align-items-center gap-1">
+            <i class='bx bx-arrow-back'></i> Wróć do listy pilotów
+        </a>
+    </div>
+
+    <!-- Główny Hero Profilu (Spokojny, uporządkowany design 2026) -->
+    <div class="profile-desktop-hero">
+        <div class="profile-hero-top">
+            
+            <!-- Lewa strona Hero: Awatar, dane, ranga -->
+            <div class="d-flex align-items-start gap-4">
+                <div class="profile-avatar-large">
+                    <img src="<?= $basePath ?>/assets/img/pilots/oskar-avatar.jpg" alt="Oskar Kaczmarek" class="profile-avatar-img">
+                    <div class="large-verified-badge" title="Zweryfikowany profil w Superpilot Academy">
+                        <i class='bx bx-check'></i>
+                    </div>
+                </div>
+
+                <div>
+                    <div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
+                        <h2 class="profile-name mb-0">Oskar Kaczmarek</h2>
+                    </div>
+
+                    <div class="text-muted mb-2" style="font-size: 0.88rem;">
+                        <i class='bx bx-compass text-primary'></i> Pilot Wycieczek & Przewodnik
+                    </div>
+
+                    <!-- Pasek kluczowych metadanych (Spójny z kartami index.php) -->
+                    <div class="profile-meta-row">
+                        <a href="#opinie" class="profile-meta-rating">
+                            <i class='bx bxs-star text-warning'></i>
+                            <span>4.9</span>
+                            <span class="text-muted fw-normal">(18 opinii)</span>
+                        </a>
+
+                        <div class="profile-meta-item">
+                            <i class='bx bx-map-pin text-muted'></i>
+                            <span>Baza: <strong>Warszawa</strong> (Dojazd w całej Polsce)</span>
+                        </div>
+
+                        <div class="profile-meta-item">
+                            <i class='bx bx-briefcase-alt text-muted'></i>
+                            <span>Staż: <strong><?= $experienceYears ?> lat</strong> (od <?= $startYear ?> r.)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Prawa strona Hero: Zbalansowany pasek akcji (spójna wysokość i hierarchia) -->
+            <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
+                <button type="button" class="btn btn-outline-secondary d-inline-flex align-items-center justify-content-center" style="height: 38px; width: 38px; border-radius: var(--radius-sm); padding: 0;" title="Zapisz do ulubionych" onclick="this.classList.toggle('text-warning'); this.innerHTML = (this.classList.contains('text-warning') ? '<i class=\'bx bxs-bookmark fs-5\'></i>' : '<i class=\'bx bx-bookmark fs-5\'></i>');">
+                    <i class='bx bx-bookmark fs-5'></i>
+                </button>
+                
+                <a href="tel:+48600123456" class="btn btn-outline-secondary d-inline-flex align-items-center gap-2 fw-medium" style="height: 38px; font-size: 0.84rem; border-radius: var(--radius-sm); padding: 0 14px;">
+                    <i class='bx bx-phone'></i> +48 600 123 456
+                </a>
+
+                <button type="button" class="btn btn-primary d-inline-flex align-items-center gap-2 fw-semibold" style="height: 38px; font-size: 0.86rem; border-radius: var(--radius-sm); padding: 0 18px;" onclick="openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 - 24.09.2027')">
+                    <i class='bx bx-calendar-plus'></i> Zarezerwuj termin
+                </button>
+            </div>
+
+        </div>
+    </div>
+
+    <!-- Główny układ 2-kolumnowy (2/3 Zawartość merytoryczna + 1/3 Sticky Panel Rezerwacji i Kalendarza) -->
+    <div class="row">
+        
+        <!-- ================= LEWA KOLUMNA (2/3) ================= -->
+        <div class="col-lg-8">
+            
+            <!-- Karta 1: O mnie & profil zawodowy -->
+            <div class="profile-section-card">
+                <div class="profile-section-header">
+                    <h5 class="profile-section-title">
+                        <i class='bx bx-user'></i> O mnie i profil zawodowy
+                    </h5>
+                    <span class="badge bg-light text-muted border">Profil pilota</span>
+                </div>
+                <div class="profile-section-body">
+                    <p class="text-secondary mb-3" style="font-size: 0.9rem; line-height: 1.65;">
+                        Pasjonat kultury śródziemnomorskiej z wykształceniem historycznym (Uniwersytet Warszawski). Od <strong><?= $startYear ?> roku</strong> z sukcesami pilotuję wycieczki objazdowe po Włoszech, Hiszpanii i Bałkanach. Wyróżnia mnie wysokie opanowanie w sytuacjach kryzysowych (nagłe zmiany rozkładów, sytuacje medyczne, awarie autokarów), doskonały kontakt z grupą oraz płynna znajomość języka włoskiego i angielskiego.
+                    </p>
+                    <p class="text-secondary mb-0" style="font-size: 0.9rem; line-height: 1.65;">
+                        Jako absolwent <strong>Superpilot Academy 2026</strong> pracuję według rygorystycznych standardów logistycznych: bieżący kontakt z dyspozytornią biura, codzienne raportowanie statusu trasy, skrupulatne rozliczanie zaliczek dewizowych oraz dbałość o najwyższe oceny satysfakcji klientów końcowych.
+                    </p>
+                </div>
+            </div>
+
+            <!-- Karta 2: Destynacje, Języki i Specjalizacje -->
+            <div class="profile-section-card">
+                <div class="profile-section-header">
+                    <h5 class="profile-section-title">
+                        <i class='bx bx-globe'></i> Destynacje, Języki & Specjalizacje
+                    </h5>
+                </div>
+                <div class="profile-section-body">
+                    
+                    <!-- Destynacje (Spójne z tagami na liście ofert) -->
+                    <div class="mb-4">
+                        <div class="small fw-bold text-muted text-uppercase mb-2" style="letter-spacing: 0.03em;">Obsługiwane kraje i regiony:</div>
+                        <div class="d-flex flex-wrap gap-2">
+                            <span class="tech-tag primary-dest">🇮🇹 Włochy (Ekspert — Toskania, Rzym, Wenecja, Sycylia)</span>
+                            <span class="tech-tag primary-dest">🇬🇷 Grecja & Cyklady</span>
+                            <span class="tech-tag primary-dest">🇪🇸 Hiszpania & Andaluzja</span>
+                            <span class="tech-tag">🇭🇷 Chorwacja</span>
+                            <span class="tech-tag">🇳🇴 Norwegia (Fiordy)</span>
+                            <span class="tech-tag">🇦🇹 Austria</span>
+                        </div>
+                    </div>
+
+                    <!-- Języki obce (Kompaktowe, proporcjonalne znaczniki) -->
+                    <div class="mb-4">
+                        <div class="small fw-bold text-muted text-uppercase mb-2" style="letter-spacing: 0.03em;">Znajomość języków obcych:</div>
+                        <div class="d-flex flex-wrap gap-2">
+                            <span class="tech-tag d-inline-flex align-items-center gap-2 py-1 px-3" style="font-size: 0.82rem;">
+                                <span>🇵🇱</span> <strong>Polski</strong> <span class="text-muted small">(ojczysty)</span>
+                            </span>
+                            <span class="tech-tag d-inline-flex align-items-center gap-2 py-1 px-3" style="font-size: 0.82rem;">
+                                <span>🇬🇧</span> <strong>Angielski</strong> <span class="badge bg-primary text-white" style="font-size: 0.65rem; padding: 2px 6px;">C1</span>
+                            </span>
+                            <span class="tech-tag d-inline-flex align-items-center gap-2 py-1 px-3" style="font-size: 0.82rem;">
+                                <span>🇮🇹</span> <strong>Włoski</strong> <span class="badge bg-primary text-white" style="font-size: 0.65rem; padding: 2px 6px;">B2</span>
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Specjalizacje imprez -->
+                    <div class="mb-4">
+                        <div class="small fw-bold text-muted text-uppercase mb-2" style="letter-spacing: 0.03em;">Specjalizacje wycieczek:</div>
+                        <div class="d-flex flex-wrap gap-2">
+                            <span class="tech-tag"><i class='bx bx-bus me-1'></i> Wycieczki objazdowe</span>
+                            <span class="tech-tag"><i class='bx bx-walk me-1'></i> Trekking & góry</span>
+                            <span class="tech-tag"><i class='bx bx-buildings me-1'></i> Przewodnik miejski (Rzym, Florencja)</span>
+                            <span class="tech-tag"><i class='bx bx-book-open me-1'></i> Grupy młodzieżowe / szkolne</span>
+                            <span class="tech-tag"><i class='bx bx-diamond me-1'></i> Wyjazdy VIP / Incentive</span>
+                            <span class="tech-tag"><i class='bx bx-wine me-1'></i> Enoturystyka & kulinaria</span>
+                        </div>
+                    </div>
+
+                    <!-- Certyfikaty i Uprawnienia -->
+                    <div>
+                        <div class="small fw-bold text-muted text-uppercase mb-2" style="letter-spacing: 0.03em;">Oficjalne certyfikaty i uprawnienia:</div>
+                        <div class="d-flex flex-column gap-2">
+                            <div class="p-3 rounded-3 border d-flex align-items-center justify-content-between" style="background: #f0fdf4;">
+                                <div class="d-flex align-items-center gap-3">
+                                    <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center" style="width: 38px; height: 38px; font-size: 1.2rem; flex-shrink: 0;">
+                                        <i class='bx bx-badge-check'></i>
+                                    </div>
+                                    <div>
+                                        <div class="fw-bold text-dark" style="font-size: 0.88rem;">Superpilot Academy 2026 — Akredytacja Pilotażu Europy Południowej</div>
+                                        <div class="text-muted" style="font-size: 0.74rem;">Certyfikat nr: <strong>SPA-2026-OK92</strong> • Standard obsługi grup autokarowych i lotniczych</div>
+                                    </div>
+                                </div>
+                                <span class="badge bg-success" style="font-size: 0.7rem;">Zweryfikowany</span>
+                            </div>
+
+                            <div class="p-3 rounded-3 border d-flex align-items-center justify-content-between" style="background: #f8fafc;">
+                                <div class="d-flex align-items-center gap-3">
+                                    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width: 38px; height: 38px; font-size: 1.15rem; flex-shrink: 0;">
+                                        <i class='bx bx-plus-medical'></i>
+                                    </div>
+                                    <div>
+                                        <div class="fw-bold text-dark" style="font-size: 0.88rem;">Kwalifikowana Pierwsza Pomoc (KPP)</div>
+                                        <div class="text-muted" style="font-size: 0.74rem;">Uprawnienia ratownicze ważne do: <strong>04.2028 r.</strong></div>
+                                    </div>
+                                </div>
+                                <span class="badge bg-light text-dark border" style="font-size: 0.7rem;">Ważny</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+            <!-- Karta 3: Autoprezentacja Wideo & Fotorelacje z Tras -->
+            <div class="profile-section-card">
+                <div class="profile-section-header flex-wrap gap-2">
+                    <div class="d-flex align-items-center gap-2">
+                        <i class='bx bx-camera text-primary fs-5'></i>
+                        <h5 class="profile-section-title mb-0">Zdjęcia i Materiały z Tras</h5>
+                    </div>
+
+                    <!-- Przycisk otwarcia pełnej galerii z filtrami w oknie -->
+                    <button type="button" class="btn btn-sm btn-outline-primary fw-semibold d-inline-flex align-items-center gap-1" onclick="openGalleryModal(0, 'all')">
+                        <i class='bx bx-images'></i> Otwórz galerię w oknie (6 zdjęć)
+                    </button>
+                </div>
+                <div class="profile-section-body">
+                    <div class="row g-3">
+                        <!-- Wideo-wizytówka (lewa strona) -->
+                        <div class="col-md-5">
+                            <div class="profile-video-box h-100" style="min-height: 198px; background: linear-gradient(rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.75)), url('<?= $basePath ?>/assets/img/pilots/oskar-video-cover.jpg') center/cover no-repeat;" onclick="openVideoModal('Oskar Kaczmarek', '1:15 min')">
+                                <div class="d-flex flex-column align-items-center text-center p-3">
+                                    <div class="profile-video-play-btn mb-2">
+                                        <i class='bx bx-play' style="margin-left: 3px;"></i>
+                                    </div>
+                                    <div class="fw-bold text-white mb-1" style="font-size: 0.9rem;">Autoprezentacja warsztatu pilota</div>
+                                    <div class="text-white-50 small" style="font-size: 0.75rem;">Florencja / Rzym • Włoski & Angielski • 1:15 min</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Siatka zdjęć z tras (kliknięcie otwiera pełną galerię z filtrami w modal) -->
+                        <div class="col-md-7">
+                            <div class="row g-2" id="profileGalleryGrid">
+                                <!-- 1. Włochy - Toskania -->
+                                <div class="col-6 col-sm-4 gallery-photo-item" data-country="wlochy">
+                                    <div class="profile-photo-thumb" style="background: linear-gradient(to top, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.1) 60%, transparent 100%), url('<?= $basePath ?>/assets/img/pilots/tuscany.jpg') center/cover no-repeat;" onclick="openGalleryModal(0, 'all')">
+                                        <div class="photo-zoom-hint"><i class='bx bx-expand-alt'></i></div>
+                                        <div class="photo-tag-title">🇮🇹 Toskania</div>
+                                        <div class="photo-tag-sub">Praca z grupą</div>
+                                    </div>
+                                </div>
+
+                                <!-- 2. Włochy - Rzym -->
+                                <div class="col-6 col-sm-4 gallery-photo-item" data-country="wlochy">
+                                    <div class="profile-photo-thumb" style="background: linear-gradient(to top, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.1) 60%, transparent 100%), url('<?= $basePath ?>/assets/img/pilots/rome.jpg') center/cover no-repeat;" onclick="openGalleryModal(1, 'all')">
+                                        <div class="photo-zoom-hint"><i class='bx bx-expand-alt'></i></div>
+                                        <div class="photo-tag-title">🇮🇹 Rzym</div>
+                                        <div class="photo-tag-sub">Zbiórka grupy</div>
+                                    </div>
+                                </div>
+
+                                <!-- 3. Włochy - Liguria -->
+                                <div class="col-6 col-sm-4 gallery-photo-item" data-country="wlochy">
+                                    <div class="profile-photo-thumb" style="background: linear-gradient(to top, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.1) 60%, transparent 100%), url('<?= $basePath ?>/assets/img/pilots/chianti.jpg') center/cover no-repeat;" onclick="openGalleryModal(2, 'all')">
+                                        <div class="photo-zoom-hint"><i class='bx bx-expand-alt'></i></div>
+                                        <div class="photo-tag-title">🇮🇹 Liguria</div>
+                                        <div class="photo-tag-sub">Trasa objazdowa</div>
+                                    </div>
+                                </div>
+
+                                <!-- 4. Grecja - Cyklady -->
+                                <div class="col-6 col-sm-4 gallery-photo-item" data-country="grecja">
+                                    <div class="profile-photo-thumb" style="background: linear-gradient(to top, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.1) 60%, transparent 100%), url('<?= $basePath ?>/assets/img/pilots/greece.jpg') center/cover no-repeat;" onclick="openGalleryModal(3, 'all')">
+                                        <div class="photo-zoom-hint"><i class='bx bx-expand-alt'></i></div>
+                                        <div class="photo-tag-title">🇬🇷 Grecja</div>
+                                        <div class="photo-tag-sub">Odprawa promowa</div>
+                                    </div>
+                                </div>
+
+                                <!-- 5. Hiszpania - Andaluzja -->
+                                <div class="col-6 col-sm-4 gallery-photo-item" data-country="hiszpania">
+                                    <div class="profile-photo-thumb" style="background: linear-gradient(to top, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.1) 60%, transparent 100%), url('<?= $basePath ?>/assets/img/pilots/spain.jpg') center/cover no-repeat;" onclick="openGalleryModal(4, 'all')">
+                                        <div class="photo-zoom-hint"><i class='bx bx-expand-alt'></i></div>
+                                        <div class="photo-tag-title">🇪🇸 Andaluzja</div>
+                                        <div class="photo-tag-sub">Objazdówka</div>
+                                    </div>
+                                </div>
+
+                                <!-- 6. Hiszpania - Granada -->
+                                <div class="col-6 col-sm-4 gallery-photo-item" data-country="hiszpania">
+                                    <div class="profile-photo-thumb" style="background: linear-gradient(to top, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.1) 60%, transparent 100%), url('<?= $basePath ?>/assets/img/pilots/granada.jpg') center/cover no-repeat;" onclick="openGalleryModal(5, 'all')">
+                                        <div class="photo-zoom-hint"><i class='bx bx-expand-alt'></i></div>
+                                        <div class="photo-tag-title">🇪🇸 Granada</div>
+                                        <div class="photo-tag-sub">Przewodnictwo</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Karta 4: Opinie i Referencje od Biur Podróży -->
+            <div class="profile-section-card" id="opinie">
+                <div class="profile-section-header flex-wrap gap-2">
+                    <div class="d-flex align-items-center gap-2">
+                        <i class='bx bxs-star text-warning fs-5'></i>
+                        <h5 class="profile-section-title mb-0">Opinie i Referencje od Biur Podróży</h5>
+                    </div>
+                    <div class="d-flex align-items-center gap-2">
+                        <a href="pilot-reviews.php" class="btn btn-sm btn-outline-secondary" style="font-size: 0.78rem;">
+                            Wszystkie 18 opinii &rarr;
+                        </a>
+                        <button type="button" class="btn btn-sm btn-primary" style="font-size: 0.78rem;" data-bs-toggle="modal" data-bs-target="#newReviewModal">
+                            <i class='bx bx-edit-alt me-1'></i> Wystaw opinię po wycieczce
+                        </button>
+                    </div>
+                </div>
+
+                <div class="profile-section-body">
+                    
+                    <!-- Rozbicie ocen -->
+                    <!-- Rozbicie ocen (Przejrzyste, nowoczesne zestawienie) -->
+                    <div class="rating-breakdown-card mb-4">
+                        <div class="row align-items-center g-3">
+                            <!-- Główna ocena -->
+                            <div class="col-md-3 text-center border-end pe-md-3">
+                                <div class="fw-bold text-navy mb-0" style="font-size: 2.6rem; line-height: 1;">4.9</div>
+                                <div class="text-warning my-1" style="font-size: 1.15rem;">
+                                    <i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star-half'></i>
+                                </div>
+                                <div class="text-muted small" style="font-size: 0.76rem;">18 opinii od 6 biur</div>
+                            </div>
+
+                            <!-- Wykres gwiazdek -->
+                            <div class="col-md-5 px-md-4 border-end">
+                                <div class="d-flex flex-column gap-2" style="font-size: 0.78rem;">
+                                    <div class="d-flex align-items-center gap-2">
+                                        <span style="width: 24px;" class="fw-semibold text-muted">5★</span>
+                                        <div class="progress flex-grow-1" style="height: 6px; background-color: #edf0f8;">
+                                            <div class="progress-bar" style="width: 89%; background-color: #f59e0b;"></div>
+                                        </div>
+                                        <span class="text-muted small" style="width: 52px; text-align: right;">16 (89%)</span>
+                                    </div>
+
+                                    <div class="d-flex align-items-center gap-2">
+                                        <span style="width: 24px;" class="fw-semibold text-muted">4★</span>
+                                        <div class="progress flex-grow-1" style="height: 6px; background-color: #edf0f8;">
+                                            <div class="progress-bar" style="width: 11%; background-color: #f59e0b;"></div>
+                                        </div>
+                                        <span class="text-muted small" style="width: 52px; text-align: right;">2 (11%)</span>
+                                    </div>
+
+                                    <div class="d-flex align-items-center gap-2">
+                                        <span style="width: 24px;" class="fw-semibold text-muted">3★</span>
+                                        <div class="progress flex-grow-1" style="height: 6px; background-color: #edf0f8;">
+                                            <div class="progress-bar" style="width: 0%; background-color: #f59e0b;"></div>
+                                        </div>
+                                        <span class="text-muted small" style="width: 52px; text-align: right;">0</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Oceny cząstkowe z perspektywy biura podróży -->
+                            <div class="col-md-4 ps-md-3">
+                                <div class="d-flex flex-column gap-2" style="font-size: 0.78rem;">
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <span class="text-muted">Współpraca z biurem:</span>
+                                        <strong class="text-navy">5.0 / 5.0</strong>
+                                    </div>
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <span class="text-muted">Rozliczenie imprezy:</span>
+                                        <strong class="text-navy">4.9 / 5.0</strong>
+                                    </div>
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <span class="text-muted">Realizacja programu:</span>
+                                        <strong class="text-navy">5.0 / 5.0</strong>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Lista recenzji biur (spójna w 100% z aplikacją mobilną) -->
+                    <div id="agencyReviewsList">
+                        
+                        <!-- Opinia 1: Almatur (Z oficjalną odpowiedzią pilota) -->
+                        <div class="review-card-item">
+                            <div class="d-flex justify-content-between align-items-start mb-2">
+                                <div class="d-flex align-items-center gap-2">
+                                    <div class="review-agency-avatar">
+                                        AL
+                                    </div>
+                                    <div>
+                                        <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.88rem;">Biuro Podróży Almatur</h6>
+                                        <small class="text-muted" style="font-size: 0.72rem;">Wycieczka: Klasyczne Włochy • Maj 2026</small>
+                                    </div>
+                                </div>
+                                <span class="profile-meta-rating" style="font-size: 0.75rem;">
+                                    <i class='bx bxs-star text-warning'></i> 5.0 / 5.0
+                                </span>
+                            </div>
+
+                            <p class="mb-2 text-secondary" style="font-size: 0.85rem; line-height: 1.5;">
+                                "Pan Oskar prowadził 8-dniowy objazd po Włoszech. Klienci byli zachwyceni jego wiedzą i empatią. Brak jakichkolwiek problemów organizacyjnych. Bardzo chętnie zarezerwujemy kolejne terminy na jesień."
+                            </p>
+
+                            <!-- Oficjalna odpowiedź pilota (Z aplikacji mobilnej!) -->
+                            <div class="pilot-reply-box">
+                                <div class="d-flex justify-content-between align-items-center mb-1">
+                                    <div class="d-flex align-items-center gap-1 text-primary fw-bold" style="font-size: 0.76rem;">
+                                        <i class='bx bx-reply'></i> Oficjalna odpowiedź pilota (Oskar Kaczmarek)
+                                    </div>
+                                    <small class="text-muted" style="font-size: 0.7rem;">3 dni temu</small>
+                                </div>
+                                <p class="mb-0 text-secondary" style="font-size: 0.8rem; line-height: 1.45;">
+                                    Dziękuję serdecznie za zaufanie! Współpraca z koordynatorem trasy i grupą układała się wzorowo. Do zobaczenia na kolejnych wyjazdach!
+                                </p>
+                            </div>
+                        </div>
+
+                        <!-- Opinia 2: Logos Tour Warszawa -->
+                        <div class="review-card-item">
+                            <div class="d-flex justify-content-between align-items-start mb-2">
+                                <div class="d-flex align-items-center gap-2">
+                                    <div class="review-agency-avatar" style="background: #e0f2fe; color: #0284c7;">
+                                        LT
+                                    </div>
+                                    <div>
+                                        <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.88rem;">Logos Tour Warszawa</h6>
+                                        <small class="text-muted" style="font-size: 0.72rem;">Wycieczka: Andaluzja Express • Kwiecień 2026</small>
+                                    </div>
+                                </div>
+                                <span class="profile-meta-rating" style="font-size: 0.75rem;">
+                                    <i class='bx bxs-star text-warning'></i> 5.0 / 5.0
+                                </span>
+                            </div>
+
+                            <p class="mb-0 text-secondary" style="font-size: 0.85rem; line-height: 1.5;">
+                                "Znakomite przygotowanie merytoryczne. Świetny kontakt z hiszpańskimi przewodnikami lokalnymi. Rekomendujemy bez wahania."
+                            </p>
+                        </div>
+
+                        <!-- Opinia 3: Rainbow Tours -->
+                        <div class="review-card-item">
+                            <div class="d-flex justify-content-between align-items-start mb-2">
+                                <div class="d-flex align-items-center gap-2">
+                                    <div class="review-agency-avatar" style="background: #fef3c7; color: #b45309;">
+                                        RT
+                                    </div>
+                                    <div>
+                                        <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.88rem;">Rainbow Tours</h6>
+                                        <small class="text-muted" style="font-size: 0.72rem;">Wycieczka: Magia Toskanii • Wrzesień 2025</small>
+                                    </div>
+                                </div>
+                                <span class="profile-meta-rating" style="font-size: 0.75rem;">
+                                    <i class='bx bxs-star text-warning'></i> 4.8 / 5.0
+                                </span>
+                            </div>
+
+                            <p class="mb-0 text-secondary" style="font-size: 0.85rem; line-height: 1.5;">
+                                "Wszystkie punkty programu zrealizowane punktualnie, świetna reakcja na deszczowy dzień we Florencji i szybka rearanżacja czasu wolnego."
+                            </p>
+                        </div>
+
+                    </div>
+
+                </div>
+            </div>
+
+        </div><!-- /.col-lg-8 -->
+
+        <!-- ================= PRAWA KOLUMNA: STICKY PANEL KALENDARZA & REZERWACJI (1/3) ================= -->
+        <div class="col-lg-4">
+            <div class="booking-sticky-panel">
+                
+                <!-- Karta kalendarza dostępności (Spójna w 100% z availability.php pilota) -->
+                <div class="calendar-widget-card">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.92rem;">Kalendarz Dostępności</h6>
+                        <span class="text-muted small">Wrzesień 2027</span>
+                    </div>
+
+                    <!-- Nagłówek miesiąca -->
+                    <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
+                        <button class="btn btn-sm btn-light p-1 rounded-circle" type="button"><i class='bx bx-chevron-left'></i></button>
+                        <strong class="text-navy" style="font-size: 0.88rem;">Wrzesień 2027</strong>
+                        <button class="btn btn-sm btn-light p-1 rounded-circle" type="button"><i class='bx bx-chevron-right'></i></button>
+                    </div>
+
+                    <!-- Siatka kalendarza -->
+                    <div class="sp-calendar-grid mb-3">
+                        <div class="sp-cal-header">Pn</div>
+                        <div class="sp-cal-header">Wt</div>
+                        <div class="sp-cal-header">Śr</div>
+                        <div class="sp-cal-header">Cz</div>
+                        <div class="sp-cal-header">Pt</div>
+                        <div class="sp-cal-header">Sb</div>
+                        <div class="sp-cal-header">Nd</div>
+
+                        <!-- Dni sierpnia -->
+                        <div class="sp-cal-day other-month">30</div>
+                        <div class="sp-cal-day other-month">31</div>
+
+                        <!-- 1-4.09: Urlop prywatny (zablokowany) -->
+                        <div class="sp-cal-day blocked" title="Urlop prywatny pilota">1</div>
+                        <div class="sp-cal-day blocked" title="Urlop prywatny pilota">2</div>
+                        <div class="sp-cal-day blocked" title="Urlop prywatny pilota">3</div>
+                        <div class="sp-cal-day blocked" title="Urlop prywatny pilota">4</div>
+                        
+                        <!-- 5-15.09: Wolne terminy dla biur -->
+                        <div class="sp-cal-day free" data-day="5" title="Wolny termin (5.09)">5 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="6" title="Wolny termin (6.09)">6 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="7" title="Wolny termin (7.09)">7 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="8" title="Wolny termin (8.09)">8 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="9" title="Wolny termin (9.09)">9 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="10" title="Wolny termin (10.09)">10 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="11" title="Wolny termin (11.09)">11 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="12" title="Wolny termin (12.09)">12 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="13" title="Wolny termin (13.09)">13 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="14" title="Wolny termin (14.09)">14 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="15" title="Wolny termin (15.09)">15 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+
+                        <!-- 16-24.09: Wycieczka potwierdzona (#12 oskar prod) -->
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">16 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">17 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">18 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">19 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">20 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">21 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">22 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">23 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">24 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+
+                        <!-- 25-30.09: Wolne -->
+                        <div class="sp-cal-day free" data-day="25" title="Wolny termin (25.09)">25 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="26" title="Wolny termin (26.09)">26 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="27" title="Wolny termin (27.09)">27 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="28" title="Wolny termin (28.09)">28 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="29" title="Wolny termin (29.09)">29 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="30" title="Wolny termin (30.09)">30 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                    </div>
+
+                    <!-- Legenda -->
+                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 pt-2 border-top small" style="font-size: 0.72rem;">
+                        <span class="d-flex align-items-center gap-1">
+                            <span style="width:7px; height:7px; background:#10b981; border-radius:50%;"></span> Wolny
+                        </span>
+                        <span class="d-flex align-items-center gap-1">
+                            <span style="width:7px; height:7px; background:#5c60f5; border-radius:50%;"></span> Zajęty
+                        </span>
+                        <span class="d-flex align-items-center gap-1 text-muted">
+                            <span style="width:7px; height:7px; background:#cbd5e1; border-radius:50%;"></span> Urlop
+                        </span>
+                    </div>
+
+                    <div id="calSelectedContainer" class="mt-2 text-center text-muted" style="font-size: 0.76rem; min-height: 18px;">
+                        <span id="calSelectedRange"></span>
+                    </div>
+
+                    <!-- Główny przycisk rezerwacji pod kalendarzem -->
+                    <button type="button" id="btnBookFromCalendar" class="btn btn-primary w-100 py-2 mt-2 fw-semibold d-flex align-items-center justify-content-center gap-2" style="font-size: 0.88rem; border-radius: var(--radius-sm);" onclick="openBookingModal('1', 'Oskar Kaczmarek', window.selectedProfileDates || '16.09.2027 - 24.09.2027')">
+                        <i class='bx bx-calendar-plus'></i> Zarezerwuj termin
+                    </button>
+                </div>
+
+            </div>
+        </div><!-- /.col-lg-4 -->
+
+    </div><!-- /.row -->
+
+</div><!-- /.container-xxl -->
+
+<!-- Modal Wystawienia Nowej Opinii po Wycieczce (Zgodny ze stonowanym designem) -->
+<div class="modal fade" id="newReviewModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--radius-md);">
+            <div class="modal-header bg-white border-bottom py-3">
+                <div class="d-flex align-items-center gap-2">
+                    <i class='bx bxs-star text-warning fs-4'></i>
+                    <div>
+                        <h5 class="modal-title fw-bold mb-0 text-navy" style="font-size: 1.05rem;">Wystaw Opinię i Referencję dla Pilota</h5>
+                        <small class="text-muted" style="font-size: 0.76rem;">Ocena trafi do profilu pilota i aplikacji mobilnej</small>
+                    </div>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+
+            <form id="addReviewForm">
+                <div class="modal-body p-4">
+                    
+                    <div class="row g-3">
+                        <div class="col-md-6">
+                            <label class="form-label fw-bold small text-muted">Wycieczka z bazy biura:</label>
+                            <select class="form-select" required>
+                                <option value="">Wybierz zakończoną wycieczkę...</option>
+                                <option value="12" selected>Wycieczka #12: Klasyczne Włochy (Almatur)</option>
+                                <option value="8">Wycieczka #8: Toskania & Rzym (Maj 2026)</option>
+                            </select>
+                        </div>
+
+                        <div class="col-md-6">
+                            <label class="form-label fw-bold small text-muted">Ocena ogólna:</label>
+                            <select class="form-select fw-bold text-warning" required>
+                                <option value="5" selected>★★★★★ 5.0 — Rewelacyjny (Pełna rekomendacja)</option>
+                                <option value="4">★★★★☆ 4.0 — Bardzo dobry</option>
+                                <option value="3">★★★☆☆ 3.0 — Przeciętny</option>
+                            </select>
+                        </div>
+
+                        <!-- Oceny cząstkowe z perspektywy biura -->
+                        <div class="col-12">
+                            <label class="form-label fw-bold small text-muted">Kryteria oceny przez biuro podróży:</label>
+                            <div class="row g-2">
+                                <div class="col-md-4">
+                                    <div class="p-2 border rounded bg-light text-center">
+                                        <div class="small fw-semibold text-dark">Współpraca z biurem</div>
+                                        <div class="text-muted" style="font-size: 0.68rem;">Kontakt & dyspozytornia</div>
+                                        <div class="text-warning fs-5 mt-1">★★★★★</div>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="p-2 border rounded bg-light text-center">
+                                        <div class="small fw-semibold text-dark">Rozliczenie imprezy</div>
+                                        <div class="text-muted" style="font-size: 0.68rem;">Zaliczki & faktury</div>
+                                        <div class="text-warning fs-5 mt-1">★★★★★</div>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="p-2 border rounded bg-light text-center">
+                                        <div class="small fw-semibold text-dark">Realizacja programu</div>
+                                        <div class="text-muted" style="font-size: 0.68rem;">Brak reklamacji & logistyka</div>
+                                        <div class="text-warning fs-5 mt-1">★★★★★</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="col-12">
+                            <label class="form-label fw-bold small text-muted">Treść referencji / recenzji:</label>
+                            <textarea class="form-control" rows="4" placeholder="Opisz jak pilot poradził sobie z trasą, grupą i programem..." required>Pan Oskar doskonale poprowadził trasę po Włoszech. Bardzo wysoka kultura osobista i biegły język włoski rozwiązały problem z opóźnieniem autokaru. Turyści zachwyceni.</textarea>
+                        </div>
+
+                        <div class="col-12">
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="recommendCheck" checked>
+                                <label class="form-check-label fw-bold small text-dark" for="recommendCheck">
+                                    Polecam tego pilota innym koordynatorom biur podróży
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div class="modal-footer bg-light px-4 py-3 border-top">
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Anuluj</button>
+                    <button type="submit" class="btn btn-primary fw-semibold px-4">
+                        <i class='bx bx-check me-1'></i> Opublikuj oficjalną referencję
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+function openVideoModal(pilotName, duration) {
+    const modalEl = document.getElementById('videoPitchModal');
+    if (modalEl) {
+        if (pilotName && document.getElementById('videoModalPilotName')) {
+            document.getElementById('videoModalPilotName').innerText = pilotName;
+        }
+        if (duration && document.getElementById('videoModalLength')) {
+            document.getElementById('videoModalLength').innerText = '(' + duration + ')';
+        }
+        const modal = new bootstrap.Modal(modalEl);
+        modal.show();
+    }
+}
+
+// Baza danych kadrów z tras pilota z podziałem na kraje
+const pilotGalleryData = [
+    {
+        country: 'wlochy',
+        countryName: 'Włochy',
+        flag: '🇮🇹',
+        title: 'Toskania — Florencja & Chianti',
+        subtitle: 'Wrzesień 2026 • Grupa objazdowa Almatur',
+        img: '<?= $basePath ?>/assets/img/pilots/tuscany.jpg'
+    },
+    {
+        country: 'wlochy',
+        countryName: 'Włochy',
+        flag: '🇮🇹',
+        title: 'Rzym — Koloseum & Forum Romanum',
+        subtitle: 'Październik 2026 • Koordynacja biletowa Tour Guide',
+        img: '<?= $basePath ?>/assets/img/pilots/rome.jpg'
+    },
+    {
+        country: 'wlochy',
+        countryName: 'Włochy',
+        flag: '🇮🇹',
+        title: 'Liguria — Wybrzeże & Cinque Terre',
+        subtitle: 'Maj 2026 • Trasa autokarowo-kolejowa',
+        img: '<?= $basePath ?>/assets/img/pilots/chianti.jpg'
+    },
+    {
+        country: 'grecja',
+        countryName: 'Grecja',
+        flag: '🇬🇷',
+        title: 'Cyklady & Ateny — Odprawa promowa',
+        subtitle: 'Czerwiec 2026 • Port Pireus & Akropol',
+        img: '<?= $basePath ?>/assets/img/pilots/greece.jpg'
+    },
+    {
+        country: 'hiszpania',
+        countryName: 'Hiszpania',
+        flag: '🇪🇸',
+        title: 'Andaluzja — Sewilla & Kordoba',
+        subtitle: 'Kwiecień 2026 • Trasa objazdowa Mezquita',
+        img: '<?= $basePath ?>/assets/img/pilots/spain.jpg'
+    },
+    {
+        country: 'hiszpania',
+        countryName: 'Hiszpania',
+        flag: '🇪🇸',
+        title: 'Granada — Alhambra & Generalife',
+        subtitle: 'Maj 2026 • Wejścia imienne & logistyka',
+        img: '<?= $basePath ?>/assets/img/pilots/granada.jpg'
+    }
+];
+
+let activeGalleryFilter = 'all';
+let filteredPhotoIndices = [0, 1, 2, 3, 4, 5];
+let activeFilteredIndex = 0;
+
+function renderGalleryCurrentPhoto() {
+    if (filteredPhotoIndices.length === 0) return;
+    const globalIdx = filteredPhotoIndices[activeFilteredIndex];
+    const photo = pilotGalleryData[globalIdx];
+
+    const imgEl = document.getElementById('galleryModalImg');
+    const titleEl = document.getElementById('galleryModalTitle');
+    const subEl = document.getElementById('galleryModalSub');
+    const badgeEl = document.getElementById('galleryModalCountryBadge');
+    const counterEl = document.getElementById('galleryModalCounter');
+
+    if (imgEl) {
+        imgEl.style.opacity = '0.35';
+        imgEl.src = photo.img;
+        setTimeout(() => { imgEl.style.opacity = '1'; }, 60);
+    }
+    if (titleEl) titleEl.innerText = photo.title;
+    if (subEl) subEl.innerText = photo.subtitle;
+    if (badgeEl) badgeEl.innerText = photo.flag + ' ' + photo.countryName;
+    if (counterEl) {
+        counterEl.innerText = (activeFilteredIndex + 1) + ' / ' + filteredPhotoIndices.length;
+    }
+
+    // Podświetlenie aktywnej miniaturki w dolnym pasku
+    const thumbs = document.querySelectorAll('.modal-gallery-thumb-item');
+    thumbs.forEach((thumb, idx) => {
+        if (idx === activeFilteredIndex) {
+            thumb.classList.add('active');
+            thumb.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+        } else {
+            thumb.classList.remove('active');
+        }
+    });
+}
+
+function renderGalleryThumbnails() {
+    const thumbsContainer = document.getElementById('modalGalleryThumbs');
+    if (!thumbsContainer) return;
+    thumbsContainer.innerHTML = '';
+
+    filteredPhotoIndices.forEach((globalIdx, filterIdx) => {
+        const photo = pilotGalleryData[globalIdx];
+        const thumb = document.createElement('div');
+        thumb.className = 'modal-gallery-thumb-item' + (filterIdx === activeFilteredIndex ? ' active' : '');
+        thumb.style.backgroundImage = 'url(' + photo.img + ')';
+        thumb.title = photo.title;
+        thumb.addEventListener('click', function() {
+            activeFilteredIndex = filterIdx;
+            renderGalleryCurrentPhoto();
+        });
+        thumbsContainer.appendChild(thumb);
+    });
+}
+
+function setGalleryFilter(filterKey, preferredGlobalIdx) {
+    activeGalleryFilter = filterKey;
+
+    // Aktualizacja przycisków filtrów wewnątrz modala
+    const filterButtons = document.querySelectorAll('#modalGalleryFilters .modal-filter-btn');
+    filterButtons.forEach(btn => {
+        if (btn.getAttribute('data-filter') === filterKey) {
+            btn.classList.add('active');
+        } else {
+            btn.classList.remove('active');
+        }
+    });
+
+    // Filtrowanie indeksów
+    filteredPhotoIndices = [];
+    pilotGalleryData.forEach((p, idx) => {
+        if (filterKey === 'all' || p.country === filterKey) {
+            filteredPhotoIndices.push(idx);
+        }
+    });
+
+    if (filteredPhotoIndices.length === 0) return;
+
+    if (preferredGlobalIdx !== undefined && filteredPhotoIndices.includes(preferredGlobalIdx)) {
+        activeFilteredIndex = filteredPhotoIndices.indexOf(preferredGlobalIdx);
+    } else {
+        activeFilteredIndex = 0;
+    }
+
+    renderGalleryThumbnails();
+    renderGalleryCurrentPhoto();
+}
+
+function galleryPrev() {
+    if (filteredPhotoIndices.length <= 1) return;
+    activeFilteredIndex = (activeFilteredIndex - 1 + filteredPhotoIndices.length) % filteredPhotoIndices.length;
+    renderGalleryCurrentPhoto();
+}
+
+function galleryNext() {
+    if (filteredPhotoIndices.length <= 1) return;
+    activeFilteredIndex = (activeFilteredIndex + 1) % filteredPhotoIndices.length;
+    renderGalleryCurrentPhoto();
+}
+
+function openGalleryModal(globalIndex, initialFilter) {
+    const modalEl = document.getElementById('photoLightboxModal');
+    if (modalEl) {
+        const targetFilter = initialFilter || 'all';
+        setGalleryFilter(targetFilter, globalIndex !== undefined ? globalIndex : 0);
+        const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
+        modal.show();
+    }
+}
+
+function openPhotoLightbox(caption, imgSrc) {
+    openGalleryModal(0, 'all');
+}
+
+// Skróty klawiszowe dla modala galerii
+document.addEventListener('keydown', function(e) {
+    const modalEl = document.getElementById('photoLightboxModal');
+    if (modalEl && modalEl.classList.contains('show')) {
+        if (e.key === 'ArrowLeft') {
+            galleryPrev();
+        } else if (e.key === 'ArrowRight') {
+            galleryNext();
+        }
+    }
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+    window.selectedProfileDates = '16.09.2027 - 24.09.2027';
+
+    // Przełączniki filtrów wewnątrz modala galerii
+    const modalFilterBtns = document.querySelectorAll('#modalGalleryFilters .modal-filter-btn');
+    modalFilterBtns.forEach(btn => {
+        btn.addEventListener('click', function() {
+            const filter = this.getAttribute('data-filter');
+            setGalleryFilter(filter);
+        });
+    });
+
+    // Strzałki nawigacji w modalu galerii
+    const btnPrev = document.getElementById('galleryBtnPrev');
+    const btnNext = document.getElementById('galleryBtnNext');
+    if (btnPrev) btnPrev.addEventListener('click', galleryPrev);
+    if (btnNext) btnNext.addEventListener('click', galleryNext);
+
+    // Interakcja z dniami kalendarza
+    const calDays = document.querySelectorAll('.sp-cal-day.free');
+    const selectedRangeSpan = document.getElementById('calSelectedRange');
+
+    calDays.forEach(day => {
+        day.addEventListener('click', function() {
+            calDays.forEach(d => d.classList.remove('selected'));
+            this.classList.add('selected');
+            const dayNum = parseInt(this.getAttribute('data-day'), 10);
+            const dayFormatted = (dayNum < 10 ? '0' + dayNum : dayNum) + '.09.2027';
+            window.selectedProfileDates = dayFormatted;
+            if (selectedRangeSpan) {
+                selectedRangeSpan.innerHTML = '<span class="badge bg-success-subtle text-success border border-success-subtle py-1 px-2">Wybrany termin: <strong>' + dayFormatted + '</strong></span>';
+            }
+        });
+    });
+
+    // Obsługa formularza wystawienia opinii
+    const reviewForm = document.getElementById('addReviewForm');
+    if (reviewForm) {
+        reviewForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const modalEl = document.getElementById('newReviewModal');
+            const modal = bootstrap.Modal.getInstance(modalEl);
+            if (modal) modal.hide();
+
+            if (typeof showToastNotification === 'function') {
+                showToastNotification('Referencja opublikowana!', 'Dziękujemy. Twoja opinia została dodana do profilu pilota i rankingu Superpilot.');
+            } else {
+                alert('Dziękujemy! Twoja opinia została opublikowana.');
+            }
+        });
+    }
+});
+</script>
+
+<?php include __DIR__ . '/footer.php'; ?>

prototype/baza-pilotow/pilot-reviews.php

@@ -0,0 +1,313 @@
+<?php
+$pageTitle = 'Superpilot - Opinie i Referencje Biur Podróży: Oskar Kaczmarek';
+$enablePrototypeComments = true;
+include __DIR__ . '/header.php';
+?>
+
+<div class="container-xxl flex-grow-1 container-p-y" style="padding-top: 1.5rem !important;">
+
+    <!-- Pasek powrotu i akcje -->
+    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb mb-0" style="font-size: 0.8rem;">
+                <li class="breadcrumb-item"><a href="index.php" class="text-muted"><i class='bx bx-arrow-back'></i> Katalog Pilotów</a></li>
+                <li class="breadcrumb-item"><a href="pilot-profile.php" class="text-muted">Oskar Kaczmarek</a></li>
+                <li class="breadcrumb-item active text-primary fw-bold" aria-current="page">Opinie i Referencje Biur</li>
+            </ol>
+        </nav>
+
+        <div class="d-flex align-items-center gap-2">
+            <a href="../travelleader-mobile/profile-reviews.php" target="_blank" class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center gap-1" style="font-size: 0.78rem;">
+                <i class='bx bx-mobile'></i> Zobacz w aplikacji mobilnej pilota <i class='bx bx-link-external' style="font-size: 0.7rem;"></i>
+            </a>
+            <button type="button" class="btn btn-sm btn-superpilot" onclick="openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 - 24.09.2027')">
+                <i class='bx bx-calendar-plus'></i> Zarezerwuj pilota
+            </button>
+        </div>
+    </div>
+
+    <!-- Nagłówek i Karta Pilota -->
+    <div class="card border-0 shadow-sm mb-4" style="border-radius: var(--sp-radius-md);">
+        <div class="card-body p-4">
+            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
+                <div class="d-flex align-items-center gap-3">
+                    <div class="rounded-3 d-flex align-items-center justify-content-center text-white fw-bold shadow-sm" style="width: 58px; height: 58px; background: linear-gradient(135deg, #4f46e5, #7c3aed); font-size: 1.5rem;">
+                        OK
+                    </div>
+                    <div>
+                        <div class="d-flex align-items-center gap-2">
+                            <h4 class="fw-bold mb-0 text-navy">Oskar Kaczmarek — Opinie Biur Podróży</h4>
+                            <span class="badge bg-success-subtle text-success fw-bold">Superpilot Verified</span>
+                        </div>
+                        <small class="text-muted">Wszystkie referencje wystawione przez zweryfikowanych koordynatorów w ekosystemie TravelManager i PrzezMorze</small>
+                    </div>
+                </div>
+
+                <div class="d-flex align-items-center gap-2">
+                    <button type="button" class="btn btn-warning fw-bold text-dark px-3 py-2" data-bs-toggle="modal" data-bs-target="#newReviewModal">
+                        <i class='bx bx-edit-alt'></i> + Wystaw nową opinię
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Rating Summary Hero & Rozbicie gwiazdek -->
+    <div class="row g-4 mb-4">
+        
+        <div class="col-lg-4">
+            <div class="card border-0 shadow-sm h-100 text-center p-4" style="border-radius: var(--sp-radius-md);">
+                <div class="display-3 fw-bold text-navy mb-1" style="font-size: 3.5rem; line-height: 1;">4.9</div>
+                <div class="text-warning fs-3 mb-2">
+                    <i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star-half'></i>
+                </div>
+                <div class="text-muted small mb-3">Średnia z 18 referencji od 6 biur podróży</div>
+                
+                <div class="badge bg-success-subtle text-success p-2 rounded-pill fw-bold mb-3" style="font-size: 0.8rem;">
+                    <i class='bx bx-check-shield'></i> 100% biur poleca pilota na kolejne wycieczki
+                </div>
+
+                <div class="pt-3 border-top text-start text-muted small">
+                    <div class="d-flex justify-content-between mb-1">
+                        <span>Almatur:</span> <strong class="text-dark">5.0 ★ (8 wycieczek)</strong>
+                    </div>
+                    <div class="d-flex justify-content-between mb-1">
+                        <span>Logos Tour:</span> <strong class="text-dark">5.0 ★ (4 wycieczki)</strong>
+                    </div>
+                    <div class="d-flex justify-content-between">
+                        <span>Rainbow:</span> <strong class="text-dark">4.8 ★ (6 wycieczek)</strong>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-lg-8">
+            <div class="card border-0 shadow-sm h-100 p-4" style="border-radius: var(--sp-radius-md);">
+                <h6 class="fw-bold text-navy mb-3">Szczegółowy rozkład ocen i kategorii:</h6>
+
+                <!-- Słupki gwiazdek -->
+                <div class="d-flex flex-column gap-2 mb-4" style="font-size: 0.84rem;">
+                    <div class="d-flex align-items-center gap-2">
+                        <span style="width: 35px;" class="fw-semibold">5 ★</span>
+                        <div class="progress flex-grow-1" style="height: 10px;">
+                            <div class="progress-bar bg-warning" style="width: 89%;"></div>
+                        </div>
+                        <span class="text-muted" style="width: 70px;">16 opinii (89%)</span>
+                    </div>
+
+                    <div class="d-flex align-items-center gap-2">
+                        <span style="width: 35px;" class="fw-semibold">4 ★</span>
+                        <div class="progress flex-grow-1" style="height: 10px;">
+                            <div class="progress-bar bg-warning" style="width: 11%;"></div>
+                        </div>
+                        <span class="text-muted" style="width: 70px;">2 opinie (11%)</span>
+                    </div>
+
+                    <div class="d-flex align-items-center gap-2">
+                        <span style="width: 35px;" class="fw-semibold">3 ★</span>
+                        <div class="progress flex-grow-1" style="height: 10px;">
+                            <div class="progress-bar bg-warning" style="width: 0%;"></div>
+                        </div>
+                        <span class="text-muted" style="width: 70px;">0 opinii</span>
+                    </div>
+                </div>
+
+                <!-- Kluczowe wymiary oceny biura podróży -->
+                <div class="row g-3 pt-3 border-top">
+                    <div class="col-md-4 col-12">
+                        <div class="p-3 rounded-3 bg-light text-center">
+                            <div class="text-warning fs-5 fw-bold">5.0 ★</div>
+                            <strong class="text-dark d-block mt-1" style="font-size: 0.85rem;">Współpraca z biurem</strong>
+                            <small class="text-muted d-block" style="font-size: 0.72rem;">Bieżący kontakt i dyspozycyjność</small>
+                        </div>
+                    </div>
+                    <div class="col-md-4 col-6">
+                        <div class="p-3 rounded-3 bg-light text-center">
+                            <div class="text-warning fs-5 fw-bold">4.9 ★</div>
+                            <strong class="text-dark d-block mt-1" style="font-size: 0.85rem;">Rozliczenie imprezy</strong>
+                            <small class="text-muted d-block" style="font-size: 0.72rem;">Zaliczki, faktury i dokumenty</small>
+                        </div>
+                    </div>
+                    <div class="col-md-4 col-6">
+                        <div class="p-3 rounded-3 bg-light text-center">
+                            <div class="text-warning fs-5 fw-bold">5.0 ★</div>
+                            <strong class="text-dark d-block mt-1" style="font-size: 0.85rem;">Realizacja programu</strong>
+                            <small class="text-muted d-block" style="font-size: 0.72rem;">Logistyka i brak reklamacji</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- Filtry destynacji opinii -->
+    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+        <div class="d-flex gap-2">
+            <button type="button" class="btn btn-sm btn-primary">Wszystkie opinie (18)</button>
+            <button type="button" class="btn btn-sm btn-outline-secondary">🇮🇹 Włochy (12)</button>
+            <button type="button" class="btn btn-sm btn-outline-secondary">🇪🇸 Hiszpania (4)</button>
+            <button type="button" class="btn btn-sm btn-outline-secondary">🇬🇷 Grecja (2)</button>
+        </div>
+        <small class="text-muted">Sortowanie: Najnowsze opinie</small>
+    </div>
+
+    <!-- Lista opinii biur podróży -->
+    <div id="agencyReviewsList">
+        
+        <!-- Recenzja 1: Almatur -->
+        <div class="review-card-item">
+            <div class="d-flex justify-content-between align-items-start mb-2">
+                <div class="d-flex align-items-center gap-3">
+                    <div class="review-agency-avatar">
+                        AL
+                    </div>
+                    <div>
+                        <div class="d-flex align-items-center gap-2">
+                            <h6 class="fw-bold mb-0 text-navy">Biuro Podróży Almatur</h6>
+                            <span class="badge bg-label-primary small">Zweryfikowane zlecenie #12</span>
+                        </div>
+                        <small class="text-muted">Wycieczka: Klasyczne Włochy (8 dni) • Realizacja: Maj 2026 • Koordynator: Tomasz W.</small>
+                    </div>
+                </div>
+                <span class="badge bg-warning-subtle text-warning fw-bold px-3 py-2 rounded-pill fs-6">
+                    <i class='bx bxs-star'></i> 5.0 / 5.0
+                </span>
+            </div>
+
+            <p class="mb-3 text-secondary" style="font-size: 0.92rem; line-height: 1.55;">
+                "Pan Oskar prowadził 8-dniowy objazd po Włoszech. Klienci byli zachwyceni jego wiedzą i empatią. Brak jakichkolwiek problemów organizacyjnych. Doskonała reakcja w trakcie korka na autostradzie pod Bolonią — natychmiast skontaktował się z restauracją i przesunął kolację bez utraty komfortu turystów. Bardzo chętnie zarezerwujemy kolejne terminy na jesień."
+            </p>
+
+            <!-- Oficjalna odpowiedź pilota -->
+            <div class="pilot-reply-box">
+                <div class="d-flex justify-content-between align-items-center mb-1">
+                    <div class="d-flex align-items-center gap-1 text-primary fw-bold" style="font-size: 0.8rem;">
+                        <i class='bx bx-reply fs-5'></i> Oficjalna odpowiedź pilota (Oskar Kaczmarek)
+                    </div>
+                    <small class="text-muted">3 dni temu z aplikacji mobilnej</small>
+                </div>
+                <p class="mb-0 text-secondary" style="font-size: 0.84rem; line-height: 1.45;">
+                    Dziękuję serdecznie za zaufanie! Współpraca z koordynatorem trasy i grupą układała się wzorowo. Do zobaczenia na kolejnych wyjazdach!
+                </p>
+            </div>
+        </div>
+
+        <!-- Recenzja 2: Logos Tour -->
+        <div class="review-card-item">
+            <div class="d-flex justify-content-between align-items-start mb-2">
+                <div class="d-flex align-items-center gap-3">
+                    <div class="review-agency-avatar" style="background: #e0f2fe; color: #0284c7;">
+                        LT
+                    </div>
+                    <div>
+                        <div class="d-flex align-items-center gap-2">
+                            <h6 class="fw-bold mb-0 text-navy">Logos Tour Warszawa</h6>
+                            <span class="badge bg-label-info small">Zweryfikowane zlecenie</span>
+                        </div>
+                        <small class="text-muted">Wycieczka: Andaluzja Express • Realizacja: Kwiecień 2026</small>
+                    </div>
+                </div>
+                <span class="badge bg-warning-subtle text-warning fw-bold px-3 py-2 rounded-pill fs-6">
+                    <i class='bx bxs-star'></i> 5.0 / 5.0
+                </span>
+            </div>
+
+            <p class="mb-0 text-secondary" style="font-size: 0.92rem; line-height: 1.55;">
+                "Znakomite przygotowanie merytoryczne. Świetny kontakt z hiszpańskimi przewodnikami lokalnymi. Oskar potrafi utrzymać dyscyplinę czasową w grupie 45 osób w sposób całkowicie bezstresowy. Rekomendujemy bez wahania."
+            </p>
+        </div>
+
+        <!-- Recenzja 3: Rainbow Tours -->
+        <div class="review-card-item">
+            <div class="d-flex justify-content-between align-items-start mb-2">
+                <div class="d-flex align-items-center gap-3">
+                    <div class="review-agency-avatar" style="background: #fef3c7; color: #b45309;">
+                        RT
+                    </div>
+                    <div>
+                        <div class="d-flex align-items-center gap-2">
+                            <h6 class="fw-bold mb-0 text-navy">Rainbow Tours</h6>
+                            <span class="badge bg-label-warning small">Zweryfikowane zlecenie</span>
+                        </div>
+                        <small class="text-muted">Wycieczka: Magia Toskanii • Realizacja: Wrzesień 2025</small>
+                    </div>
+                </div>
+                <span class="badge bg-warning-subtle text-warning fw-bold px-3 py-2 rounded-pill fs-6">
+                    <i class='bx bxs-star'></i> 4.8 / 5.0
+                </span>
+            </div>
+
+            <p class="mb-0 text-secondary" style="font-size: 0.92rem; line-height: 1.55;">
+                "Wszystkie punkty programu zrealizowane punktualnie, świetna reakcja na deszczowy dzień we Florencji i szybka rearanżacja czasu wolnego. Jeden z najbardziej profesjonalnych pilotów w naszej bazie."
+            </p>
+        </div>
+
+    </div>
+
+</div><!-- /.container-xxl -->
+
+<!-- Modal dodania opinii -->
+<div class="modal fade" id="newReviewModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--sp-radius-md);">
+            <div class="modal-header bg-warning text-dark">
+                <div class="d-flex align-items-center gap-2">
+                    <i class='bx bxs-star fs-3'></i>
+                    <div>
+                        <h5 class="modal-title fw-bold mb-0">Wystaw Opinię i Referencję dla Pilota</h5>
+                        <small class="text-dark-50" style="font-size: 0.76rem;">Ocena zostanie uwzględniona w rankingu Superpilot i trafi do aplikacji pilota</small>
+                    </div>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+
+            <form id="addReviewForm">
+                <div class="modal-body p-4">
+                    <div class="row g-3">
+                        <div class="col-md-6">
+                            <label class="form-label fw-bold small text-muted">Wycieczka z bazy biura:</label>
+                            <select class="form-select" required>
+                                <option value="">Wybierz zakończoną wycieczkę...</option>
+                                <option value="12" selected>Wycieczka #12: Klasyczne Włochy (Almatur)</option>
+                                <option value="8">Wycieczka #8: Toskania & Rzym (Maj 2026)</option>
+                            </select>
+                        </div>
+
+                        <div class="col-md-6">
+                            <label class="form-label fw-bold small text-muted">Ocena ogólna:</label>
+                            <select class="form-select fw-bold text-warning" required>
+                                <option value="5" selected>★★★★★ 5.0 — Rewelacyjny (Pełna rekomendacja)</option>
+                                <option value="4">★★★★☆ 4.0 — Bardzo dobry</option>
+                                <option value="3">★★★☆☆ 3.0 — Przeciętny</option>
+                            </select>
+                        </div>
+
+                        <div class="col-12">
+                            <label class="form-label fw-bold small text-muted">Treść referencji / recenzji:</label>
+                            <textarea class="form-control" rows="4" placeholder="Opisz jak pilot poradził sobie z trasą, grupą i programem..." required>Wzorowa realizacja wyjazdu. Pilot doskonale poradził sobie ze zmianą harmonogramu z powodu pogody. Grupa była zachwycona. Zdecydowanie polecamy!</textarea>
+                        </div>
+
+                        <div class="col-12">
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="recommendCheck" checked>
+                                <label class="form-check-label fw-bold small" for="recommendCheck">
+                                    Polecam tego pilota innym koordynatorom biur podróży
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="modal-footer bg-light px-4 py-3 border-top">
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Anuluj</button>
+                    <button type="submit" class="btn btn-warning fw-bold px-4">
+                        <i class='bx bx-check'></i> Opublikuj oficjalną referencję
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<?php include __DIR__ . '/footer.php'; ?>

prototype/baza-pilotow/sos-modal.php

@@ -0,0 +1,138 @@
+<!-- Modal Pilnego Zastępstwa SOS -->
+<div class="modal fade" id="sosModal" tabindex="-1" aria-labelledby="sosModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--sp-radius-md); overflow: hidden;">
+            
+            <div class="modal-header text-white" style="background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);">
+                <div class="d-flex align-items-center gap-2">
+                    <div class="rounded-circle bg-white text-danger d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 1.4rem;">
+                        <i class='bx bxs-alarm-exclamation'></i>
+                    </div>
+                    <div>
+                        <h5 class="modal-title fw-bold text-white mb-0" id="sosModalLabel">🚨 Tryb Awaryjny: Pilne Zastępstwo SOS</h5>
+                        <small class="text-white-50" style="font-size: 0.76rem;">Pilot zrezygnował w ostatniej chwili? Znajdź natychmiastowe zastępstwo w 15 minut</small>
+                    </div>
+                </div>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+
+            <div class="modal-body p-4">
+                
+                <!-- Kryteria nagłego wyjazdu -->
+                <form id="sosRequestForm">
+                    <div class="row g-3 mb-4">
+                        <div class="col-md-5">
+                            <label class="form-label fw-bold small text-muted">Kierunek wycieczki</label>
+                            <select class="form-select fw-semibold" id="sosCountrySelect">
+                                <option value="Włochy" selected>🇮🇹 Włochy (Objazdówka / Rzym)</option>
+                                <option value="Grecja">🇬🇷 Grecja (Cyklady / Peloponez)</option>
+                                <option value="Hiszpania">🇪🇸 Hiszpania (Andaluzja / Barcelona)</option>
+                                <option value="Chorwacja">🇭🇷 Chorwacja (Istria / Dalmacja)</option>
+                                <option value="Norwegia">🇳🇴 Norwegia (Fiordy)</option>
+                            </select>
+                        </div>
+
+                        <div class="col-md-4">
+                            <label class="form-label fw-bold small text-muted">Kiedy rusza autokar / lot?</label>
+                            <select class="form-select fw-semibold" id="sosTimeUrgency">
+                                <option value="24h" selected>⚡ W ciągu 24h (Dziś w nocy / Jutro rano)</option>
+                                <option value="48h">⏱️ W ciągu 48h</option>
+                                <option value="72h">📅 W ciągu 3 dni</option>
+                            </select>
+                        </div>
+
+                        <div class="col-md-3">
+                            <label class="form-label fw-bold small text-muted">Miejsce zbiórki</label>
+                            <input type="text" class="form-control fw-semibold" value="Warszawa / Katowice">
+                        </div>
+                    </div>
+
+                    <!-- Lista pilotów w trybie gotowości od zaraz (Standby Ready) -->
+                    <div class="mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.9rem;">Piloci dyżurujący z natychmiastową dyspozycyjnością (4 dostępnych):</h6>
+                            <span class="badge bg-success-subtle text-success" style="font-size: 0.72rem;">🟢 Gotowi do spakowania w 2h</span>
+                        </div>
+
+                        <!-- Pilot 1: Oskar Kaczmarek (Spójny) -->
+                        <div class="card border mb-2 p-3 shadow-none hover-border-primary" style="background: #ffffff; border-radius: 10px;">
+                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
+                                <div class="d-flex align-items-center gap-3">
+                                    <div class="rounded-3 d-flex align-items-center justify-content-center text-white fw-bold" style="width: 44px; height: 44px; background: linear-gradient(135deg, #4f46e5, #7c3aed); font-size: 1.1rem;">
+                                        OK
+                                    </div>
+                                    <div>
+                                        <div class="d-flex align-items-center gap-2">
+                                            <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.9rem;">Oskar Kaczmarek</h6>
+                                            <span class="badge bg-success" style="font-size: 0.65rem;">Superpilot Verified</span>
+                                            <span class="text-warning small fw-bold"><i class='bx bxs-star'></i> 4.9 (18 opinii)</span>
+                                        </div>
+                                        <small class="text-muted" style="font-size: 0.75rem;">Specjalizacja: Włochy (Ekspert) • Języki: Włoski (B2), Angielski (C1) • Paszport i uprawnienia aktualne</small>
+                                    </div>
+                                </div>
+                                <div class="d-flex align-items-center gap-2">
+                                    <a href="tel:+48600123456" class="btn btn-sm btn-outline-success fw-bold d-flex align-items-center gap-1" style="font-size: 0.78rem;">
+                                        <i class='bx bx-phone-call'></i> Zadzwoń: 600 123 456
+                                    </a>
+                                    <button type="button" class="btn btn-sm btn-danger fw-bold" onclick="openBookingModal('1', 'Oskar Kaczmarek', 'Pilne zastępstwo SOS: Jutro rano')">
+                                        <i class='bx bx-zap'></i> Wyślij SOS
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Pilot 2: Katarzyna Zielińska -->
+                        <div class="card border mb-2 p-3 shadow-none" style="background: #ffffff; border-radius: 10px;">
+                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
+                                <div class="d-flex align-items-center gap-3">
+                                    <div class="rounded-3 d-flex align-items-center justify-content-center text-white fw-bold" style="width: 44px; height: 44px; background: linear-gradient(135deg, #0ea5e9, #0284c7); font-size: 1.1rem;">
+                                        KZ
+                                    </div>
+                                    <div>
+                                        <div class="d-flex align-items-center gap-2">
+                                            <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.9rem;">Katarzyna Zielińska</h6>
+                                            <span class="badge bg-info-subtle text-info" style="font-size: 0.65rem;">Kwalifikowana Pierwsza Pomoc</span>
+                                            <span class="text-warning small fw-bold"><i class='bx bxs-star'></i> 4.8 (15 opinii)</span>
+                                        </div>
+                                        <small class="text-muted" style="font-size: 0.75rem;">Specjalizacja: Bałkany, Włochy Północne • Języki: Angielski (C1), Włoski (B1) • Dyspozycyjna od zaraz</small>
+                                    </div>
+                                </div>
+                                <div class="d-flex align-items-center gap-2">
+                                    <a href="tel:+48601987654" class="btn btn-sm btn-outline-success fw-bold d-flex align-items-center gap-1" style="font-size: 0.78rem;">
+                                        <i class='bx bx-phone-call'></i> Zadzwoń: 601 987 654
+                                    </a>
+                                    <button type="button" class="btn btn-sm btn-danger fw-bold" onclick="openBookingModal('4', 'Katarzyna Zielińska', 'Pilne zastępstwo SOS: Jutro rano')">
+                                        <i class='bx bx-zap'></i> Wyślij SOS
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <!-- Masowy broadcast SOS -->
+                    <div class="p-3 rounded-3 mt-3 text-white" style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);">
+                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
+                            <div>
+                                <div class="fw-bold" style="font-size: 0.9rem;">
+                                    <i class='bx bx-broadcast text-warning me-1'></i> Masowy Broadcast SOS do wszystkich wolnych pilotów na kierunek Włochy
+                                </div>
+                                <small class="text-white-50" style="font-size: 0.74rem;">Wyśle równoległy alert Push & SMS do 12 pilotów spełniających wymagania. Pierwszy, który zaakceptuje, przejmuje zlecenie.</small>
+                            </div>
+                            <button type="submit" class="btn btn-warning fw-bold px-4 py-2" style="font-size: 0.85rem;">
+                                <i class='bx bx-send'></i> Roześlij masowy alert SOS
+                            </button>
+                        </div>
+                    </div>
+
+                </form>
+
+            </div>
+
+            <div class="modal-footer bg-light px-4 py-2 border-top">
+                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Zamknij</button>
+            </div>
+
+        </div>
+    </div>
+</div>

prototype/invoice/app-purchase-add.php

@@ -99,6 +99,26 @@ include '../../header-invoice.php';
                             <span class="text-muted fw-bold">Przeciągnij fakturę tutaj lub kliknij</span>
                             <span class="small text-muted">(PDF, JPG, PNG)</span>
                         </div>
+
+                        <!-- Wgrany plik / Podgląd (Początkowo ukryty, pokazywany w symulacji OCR) -->
+                        <div class="d-flex align-items-center p-3 mb-3 border rounded bg-lighter d-none" id="ocr-preview-container">
+                            <div class="me-3 cursor-pointer" data-bs-toggle="modal" data-bs-target="#invoicePreviewModal" title="Kliknij, aby powiększyć">
+                                <img src="https://via.placeholder.com/150x200.png?text=Faktura+OCR" alt="Faktura" class="rounded border shadow-sm" style="width: 50px; height: 70px; object-fit: cover; opacity: 0.9; transition: 0.3s;" onmouseover="this.style.opacity='1'; this.style.transform='scale(1.05)';" onmouseout="this.style.opacity='0.9'; this.style.transform='scale(1)';">
+                            </div>
+                            <div class="flex-grow-1">
+                                <h6 class="mb-1 text-truncate" style="max-width: 180px;">skan_faktury_02_2026.png</h6>
+                                <small class="text-muted">Odczytano dane z pliku</small>
+                            </div>
+                            <div>
+                                <button type="button" class="btn btn-sm btn-icon btn-outline-primary me-1" data-bs-toggle="modal" data-bs-target="#invoicePreviewModal" title="Pełny podgląd">
+                                    <i class="bx bx-fullscreen"></i>
+                                </button>
+                                <button type="button" class="btn btn-sm btn-icon btn-outline-danger" title="Usuń plik" onclick="document.getElementById('ocr-preview-container').classList.add('d-none');">
+                                    <i class="bx bx-trash"></i>
+                                </button>
+                            </div>
+                        </div>
+
                         <button type="button" class="btn btn-label-primary w-100 mb-4" id="btn-ocr-read-page">
                             <i class="bx bx-scan me-1"></i> Odczytaj dane z pliku (OCR)
                         </button>
@@ -316,6 +336,20 @@ include '../../header-invoice.php';
                         <textarea class="form-control bg-lighter" rows="3"
                             placeholder="Wpisz uwagi widoczne tylko dla nas..."></textarea>
 
+                        <div class="mt-3 mb-2">
+                            <label class="form-label d-flex align-items-center fw-bold">
+                                Numer konta bankowego (IBAN)
+                                <i class="bx bx-info-circle ms-1 fs-6 text-muted" data-bs-toggle="tooltip"
+                                    data-bs-placement="top"
+                                    title="Numer konta sprzedawcy, na który zostanie wykonany przelew.">
+                                </i>
+                            </label>
+                            <div class="input-group input-group-merge">
+                                <span class="input-group-text"><i class="bx bx-credit-card"></i></span>
+                                <input type="text" class="form-control" placeholder="PL 00 0000 0000 0000 0000 0000 0000">
+                            </div>
+                        </div>
+
                         <div class="row g-2 mb-3 mt-3">
                             <div class="col-md-4">
                                 <label class="form-label d-flex align-items-center">
@@ -536,6 +570,12 @@ include '../../header-invoice.php';
                     const totalEl = document.getElementById('finalTotal');
                     if (totalEl) totalEl.innerText = '553,50 zł';
 
+                    // Pokazanie podglądu pliku z OCR
+                    const previewContainer = document.getElementById('ocr-preview-container');
+                    if (previewContainer) {
+                        previewContainer.classList.remove('d-none');
+                    }
+
                     // 4. Restore Button
                     btn.disabled = false;
                     btn.innerHTML = '<i class="bx bx-check me-1"></i> Dane odczytane poprawnie';
@@ -562,6 +602,27 @@ include '../../header-invoice.php';
     });
 </script>
 
+<!-- Modal: Podgląd Faktury -->
+<div class="modal fade" id="invoicePreviewModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header border-bottom">
+                <h5 class="modal-title d-flex align-items-center">
+                    <i class="bx bx-image me-2"></i> Podgląd dokumentu: skan_faktury_02_2026.png
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+            <div class="modal-body p-0 bg-lighter d-flex justify-content-center align-items-center" style="min-height: 70vh;">
+                <!-- Placeholder obrazka, docelowo pełen skan lub PDF w iframe -->
+                <img src="https://via.placeholder.com/800x1131.png?text=Faktura+Powi%C4%99kszona" alt="Podgląd Faktury" class="img-fluid" style="max-height: 80vh; object-fit: contain; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
+            </div>
+            <div class="modal-footer border-top">
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Zamknij</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 </body>
 
 </html>

prototype/travel-leader-pilot/availability.php

@@ -0,0 +1,188 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Kalendarz Dostępności';
+include 'header.php';
+?>
+
+<div class="app-content">
+
+    <!-- Nagłówek widoku dostępności -->
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            <h5 class="fw-bold mb-0" style="color: var(--dark-navy);">Dostępność Pilota</h5>
+            <small class="text-muted" style="font-size: 0.78rem;">Zarządzaj terminami dla biur podróży</small>
+        </div>
+        <button type="button" class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.8rem;" data-bs-toggle="modal" data-bs-target="#addUnavailableModal">
+            <i class='bx bx-plus'></i> Dodaj blokadę
+        </button>
+    </div>
+
+    <!-- Główna karta kalendarza -->
+    <div class="section-card">
+        <div class="calendar-month-header">
+            <button class="btn btn-sm btn-light rounded-circle p-2 d-flex align-items-center"><i class='bx bx-chevron-left fs-5'></i></button>
+            <h6 class="fw-bold mb-0" style="color: var(--dark-navy); font-size: 1rem;">Wrzesień 2027</h6>
+            <button class="btn btn-sm btn-light rounded-circle p-2 d-flex align-items-center"><i class='bx bx-chevron-right fs-5'></i></button>
+        </div>
+
+        <!-- Siatka kalendarza -->
+        <div class="calendar-grid mb-2">
+            <div class="calendar-day-header">Pn</div>
+            <div class="calendar-day-header">Wt</div>
+            <div class="calendar-day-header">Śr</div>
+            <div class="calendar-day-header">Cz</div>
+            <div class="calendar-day-header">Pt</div>
+            <div class="calendar-day-header">Sb</div>
+            <div class="calendar-day-header">Nd</div>
+
+            <!-- Dni poprzedniego miesiąca -->
+            <div class="calendar-day-cell other-month">30</div>
+            <div class="calendar-day-cell other-month">31</div>
+
+            <!-- Dni września -->
+            <div class="calendar-day-cell blocked-day" title="Urlop prywatny">1</div>
+            <div class="calendar-day-cell blocked-day" title="Urlop prywatny">2</div>
+            <div class="calendar-day-cell blocked-day" title="Urlop prywatny">3</div>
+            <div class="calendar-day-cell blocked-day" title="Urlop prywatny">4</div>
+            <div class="calendar-day-cell free-day">5 <span class="calendar-day-dot bg-success"></span></div>
+
+            <div class="calendar-day-cell free-day">6 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">7 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">8 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">9 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">10 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">11 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">12 <span class="calendar-day-dot bg-success"></span></div>
+
+            <div class="calendar-day-cell free-day">13 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">14 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">15 <span class="calendar-day-dot bg-success"></span></div>
+
+            <!-- Wycieczka z systemu: 16-24.09.2027 -->
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">16 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">17 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">18 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">19 <span class="calendar-day-dot bg-primary"></span></div>
+
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">20 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">21 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">22 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">23 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">24 <span class="calendar-day-dot bg-primary"></span></div>
+
+            <div class="calendar-day-cell free-day">25 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">26 <span class="calendar-day-dot bg-success"></span></div>
+
+            <div class="calendar-day-cell free-day">27 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">28 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">29 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">30 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell other-month">1</div>
+            <div class="calendar-day-cell other-month">2</div>
+            <div class="calendar-day-cell other-month">3</div>
+        </div>
+
+        <!-- Legenda -->
+        <div class="calendar-legend">
+            <div class="legend-item">
+                <div class="legend-color-box" style="background-color: var(--primary);"></div>
+                <span>Wycieczka potwierdzona</span>
+            </div>
+            <div class="legend-item">
+                <div class="legend-color-box" style="background-color: #ef4444;"></div>
+                <span>Niedostępny / Urlop</span>
+            </div>
+            <div class="legend-item">
+                <div class="legend-color-box" style="background-color: #22c55e;"></div>
+                <span>Dostępny dla biur</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Lista wpisów w wybranym miesiącu -->
+    <h6 class="fw-bold mb-2 mt-3" style="color: var(--dark-navy); font-size: 0.9rem;">Wydarzenia we Wrześniu 2027</h6>
+
+    <!-- Wycieczka potwierdzona -->
+    <div class="card border-0 rounded-4 p-3 mb-2 shadow-sm" style="background: #ffffff; border-left: 4px solid var(--primary) !important;">
+        <div class="d-flex justify-content-between align-items-start">
+            <div>
+                <span class="badge mb-1" style="background: #eff0fe; color: var(--primary); font-size: 0.72rem;">Wycieczka przypisana</span>
+                <h6 class="fw-bold mb-1" style="font-size: 0.92rem; color: var(--dark-navy);">12 oskar prod (Włochy)</h6>
+                <small class="text-muted d-block" style="font-size: 0.76rem;"><i class='bx bx-time-five'></i> 16 - 24 Września 2027 (9 dni)</small>
+            </div>
+            <a href="index.php" class="btn btn-sm btn-outline-primary py-1 px-2" style="font-size: 0.75rem;">Wycieczka &gt;</a>
+        </div>
+    </div>
+
+    <!-- Prywatna niedostępność -->
+    <div class="card border-0 rounded-4 p-3 mb-3 shadow-sm" style="background: #ffffff; border-left: 4px solid #ef4444 !important;">
+        <div class="d-flex justify-content-between align-items-start">
+            <div>
+                <span class="badge mb-1" style="background: #fee2e2; color: #ef4444; font-size: 0.72rem;">Niedostępność pilota</span>
+                <h6 class="fw-bold mb-1" style="font-size: 0.92rem; color: var(--dark-navy);">Urlop prywatny / sprawy rodzinne</h6>
+                <small class="text-muted d-block" style="font-size: 0.76rem;"><i class='bx bx-time-five'></i> 01 - 04 Września 2027 (4 dni)</small>
+            </div>
+            <button class="btn btn-sm btn-outline-danger py-1 px-2" style="font-size: 0.75rem;" onclick="confirm('Czy chcesz usunąć tę blokadę terminu?')"><i class='bx bx-trash'></i></button>
+        </div>
+    </div>
+
+    <!-- Informacja o integracji z bazą biur -->
+    <div class="p-3 rounded-4" style="background-color: #f1f3fa;">
+        <div class="d-flex align-items-center gap-2 mb-1">
+            <i class='bx bx-info-circle text-primary fs-5'></i>
+            <span class="fw-bold" style="font-size: 0.82rem; color: var(--dark-navy);">Jak działa to dla biur podróży?</span>
+        </div>
+        <p class="text-muted mb-0" style="font-size: 0.75rem; line-height: 1.4;">
+            Wyszukiwarka w aplikacji webowej pozwala pracownikowi biura wybrać np. „Termin: 05-15 Wrz 2027 + Kraj: Włochy”. Twój profil pojawi się na szczycie wyników, ponieważ zaznaczyłeś te dni jako wolne!
+        </p>
+    </div>
+
+</div><!-- /.app-content -->
+
+<!-- Modal dodawania niedostępności -->
+<div class="modal fade" id="addUnavailableModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content rounded-4 border-0">
+            <div class="modal-header border-bottom">
+                <h6 class="modal-title fw-bold" style="color: var(--dark-navy);">Zgłoś niedostępność / Urlop</h6>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+            <div class="modal-body p-3">
+                <div class="mb-3">
+                    <label class="form-label-custom">Powód niedostępności</label>
+                    <select class="form-select form-control-custom">
+                        <option selected>Urlop prywatny</option>
+                        <option>Zlecenie poza systemem</option>
+                        <option>Szkolenie / Egzamin</option>
+                        <option>Sprawy zdrowotne</option>
+                        <option>Inny powód</option>
+                    </select>
+                </div>
+
+                <div class="row g-2 mb-3">
+                    <div class="col-6">
+                        <label class="form-label-custom">Data od</label>
+                        <input type="date" class="form-control-custom" value="2027-10-01">
+                    </div>
+                    <div class="col-6">
+                        <label class="form-label-custom">Data do</label>
+                        <input type="date" class="form-control-custom" value="2027-10-08">
+                    </div>
+                </div>
+
+                <div class="mb-2">
+                    <label class="form-label-custom">Notatka prywatna (opcjonalnie)</label>
+                    <textarea class="form-control-custom" rows="2" placeholder="Widoczna tylko dla Ciebie..."></textarea>
+                </div>
+            </div>
+            <div class="modal-footer border-top p-2">
+                <button type="button" class="btn btn-secondary-custom py-2 flex-grow-1" data-bs-dismiss="modal">Anuluj</button>
+                <button type="button" class="btn-primary-custom py-2 flex-grow-1" data-bs-dismiss="modal" onclick="alert('Pomyślnie zablokowano termin w kalendarzu. Biura nie będą wysyłać zapytań na ten okres.');">
+                    Zapisz termin
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<?php include 'footer.php'; ?>

prototype/travel-leader-pilot/courses.php

@@ -0,0 +1,174 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Szkolenia i Certyfikaty';
+include 'header.php';
+?>
+
+<div class="app-content">
+
+    <!-- Nagłówek szkoleń (Czysty, minimalistyczny, bez zbędnych odznak) -->
+    <div class="mb-3">
+        <h5 class="fw-bold mb-0" style="color: var(--dark-navy);">Szkolenia & Certyfikaty</h5>
+        <small class="text-muted" style="font-size: 0.76rem;">Kursy podnoszące rangę profilu w bazie biur podróży</small>
+    </div>
+
+    <!-- Przełącznik zakładek (Segmented control) -->
+    <div class="d-flex p-1 rounded-3 mb-3" style="background: #eef1f8;">
+        <button type="button" id="tabCoursesBtn" class="btn btn-sm flex-fill fw-bold rounded-2 py-1" style="font-size: 0.78rem; background: white; color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,0.06);" onclick="switchCourseTab('courses');">
+            Dostępne kursy (3)
+        </button>
+        <button type="button" id="tabCertsBtn" class="btn btn-sm flex-fill fw-bold rounded-2 py-1 text-muted" style="font-size: 0.78rem;" onclick="switchCourseTab('certs');">
+            Moje certyfikaty (2)
+        </button>
+    </div>
+
+    <!-- SEKCJA 1: Dostępne kursy (Czyste karty, bez wielopoziomowych pięter) -->
+    <div id="sectionCourses">
+        
+        <!-- Kurs 1 -->
+        <div class="section-card mb-2 p-3">
+            <div class="d-flex justify-content-between align-items-center mb-1">
+                <span class="badge" style="background: #eff0fe; color: var(--primary); font-size: 0.68rem; font-weight: 700;">
+                    WŁOCHY
+                </span>
+                <span class="fw-bold text-dark" style="font-size: 0.82rem;">199 PLN</span>
+            </div>
+
+            <h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: var(--dark-navy);">
+                Włochy Północne & Dolomity 2027
+            </h6>
+            <p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.35;">
+                Prowadzący: Janek. Warsztaty z logistyki autokarowej, stref ZTL i nowych szlaków.
+            </p>
+
+            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
+                <small class="text-muted" style="font-size: 0.72rem;">
+                    <i class='bx bx-calendar'></i> 24.10 • 4h online
+                </small>
+                <button class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.74rem;" onclick="alert('Zapis na szkolenie przez TravelPay.');">
+                    Zapisz się &gt;
+                </button>
+            </div>
+        </div>
+
+        <!-- Kurs 2 -->
+        <div class="section-card mb-2 p-3">
+            <div class="d-flex justify-content-between align-items-center mb-1">
+                <span class="badge bg-warning-subtle text-warning-emphasis" style="font-size: 0.68rem; font-weight: 700;">
+                    RAINBOW TOURS
+                </span>
+                <span class="badge bg-success-subtle text-success fw-bold" style="font-size: 0.68rem;">BEZPŁATNE</span>
+            </div>
+
+            <h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: var(--dark-navy);">
+                Standardy obsługi imprez objazdowych
+            </h6>
+            <p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.35;">
+                Szkolenie produktowe biura podróży dla pilotów szukających kontraktów na sezon.
+            </p>
+
+            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
+                <small class="text-muted" style="font-size: 0.72rem;">
+                    <i class='bx bx-video'></i> VOD • 2h
+                </small>
+                <button class="btn btn-sm btn-secondary-custom py-1 px-3" style="width: auto; font-size: 0.74rem;" onclick="alert('Dostęp do materiałów VOD został odblokowany.');">
+                    Dołącz &gt;
+                </button>
+            </div>
+        </div>
+
+        <!-- Kurs 3 -->
+        <div class="section-card mb-3 p-3">
+            <div class="d-flex justify-content-between align-items-center mb-1">
+                <span class="badge bg-light text-muted" style="font-size: 0.68rem; font-weight: 700;">
+                    PRAWO & PROCEDURY
+                </span>
+                <span class="fw-bold text-dark" style="font-size: 0.82rem;">149 PLN</span>
+            </div>
+
+            <h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: var(--dark-navy);">
+                Prawo w turystyce & reklamacje
+            </h6>
+            <p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.35;">
+                Procedury awaryjne, ubezpieczenia i rozwiązywanie trudnych sytuacji z turystami.
+            </p>
+
+            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
+                <small class="text-muted" style="font-size: 0.72rem;">
+                    <i class='bx bx-calendar'></i> 12.11 • Webinar
+                </small>
+                <button class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.74rem;" onclick="alert('Zapis na webinar.');">
+                    Zapisz się &gt;
+                </button>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- SEKCJA 2: Moje certyfikaty (Ukryta domyślnie, przełączana zakładką) -->
+    <div id="sectionCerts" class="d-none">
+
+        <div class="section-card mb-2 p-3">
+            <div class="d-flex align-items-center gap-3">
+                <div class="d-flex align-items-center justify-content-center rounded-circle bg-success-subtle text-success" style="width: 38px; height: 38px; flex-shrink: 0;">
+                    <i class='bx bx-badge-check fs-4'></i>
+                </div>
+                <div class="flex-grow-1">
+                    <h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Superpilot: Europa Południowa</h6>
+                    <small class="text-muted" style="font-size: 0.72rem;">Weryfikacja TravelLeader • Dodano do profilu</small>
+                </div>
+            </div>
+        </div>
+
+        <div class="section-card mb-3 p-3">
+            <div class="d-flex align-items-center gap-3">
+                <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary" style="width: 38px; height: 38px; flex-shrink: 0;">
+                    <i class='bx bx-plus-medical fs-5'></i>
+                </div>
+                <div class="flex-grow-1">
+                    <h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Pierwsza Pomoc (KPP)</h6>
+                    <small class="text-muted" style="font-size: 0.72rem;">Certyfikat ważny do: Kwiecień 2028</small>
+                </div>
+            </div>
+        </div>
+
+        <div class="p-3 rounded-3 text-center" style="background: #f8f9fd;">
+            <small class="text-muted" style="font-size: 0.74rem;">
+                Wszystkie zdobyte certyfikaty są automatycznie widoczne dla biur podróży w Twojej wizytówce.
+            </small>
+        </div>
+
+    </div>
+
+</div><!-- /.app-content -->
+
+<script>
+function switchCourseTab(tab) {
+    const coursesSection = document.getElementById('sectionCourses');
+    const certsSection = document.getElementById('sectionCerts');
+    const coursesBtn = document.getElementById('tabCoursesBtn');
+    const certsBtn = document.getElementById('tabCertsBtn');
+
+    if (tab === 'courses') {
+        coursesSection.classList.remove('d-none');
+        certsSection.classList.add('d-none');
+        coursesBtn.style.background = 'white';
+        coursesBtn.style.color = 'var(--primary)';
+        coursesBtn.style.boxShadow = '0 1px 4px rgba(0,0,0,0.06)';
+        certsBtn.style.background = 'transparent';
+        certsBtn.style.color = 'var(--text-muted)';
+        certsBtn.style.boxShadow = 'none';
+    } else {
+        coursesSection.classList.add('d-none');
+        certsSection.classList.remove('d-none');
+        certsBtn.style.background = 'white';
+        certsBtn.style.color = 'var(--primary)';
+        certsBtn.style.boxShadow = '0 1px 4px rgba(0,0,0,0.06)';
+        coursesBtn.style.background = 'transparent';
+        coursesBtn.style.color = 'var(--text-muted)';
+        coursesBtn.style.boxShadow = 'none';
+    }
+}
+</script>
+
+<?php include 'footer.php'; ?>

prototype/travel-leader-pilot/footer.php

@@ -0,0 +1,40 @@
+<?php
+$currentPage = basename($_SERVER['PHP_SELF'], '.php');
+?>
+        <!-- Dolna belka nawigacyjna (Bottom Navigation Bar - zawsze widoczna na dole) -->
+        <nav class="bottom-nav-bar">
+            <a href="index.php" class="bottom-nav-item <?= in_array($currentPage, ['index', 'trip-details']) ? 'active' : '' ?>">
+                <i class='bx <?= in_array($currentPage, ['index', 'trip-details']) ? 'bxs-compass' : 'bx-compass' ?>'></i>
+                <span>Wycieczki</span>
+            </a>
+
+            <a href="availability.php" class="bottom-nav-item <?= $currentPage === 'availability' ? 'active' : '' ?>">
+                <i class='bx <?= $currentPage === 'availability' ? 'bxs-calendar' : 'bx-calendar' ?>'></i>
+                <span>Dostępność</span>
+            </a>
+
+            <a href="courses.php" class="bottom-nav-item <?= $currentPage === 'courses' ? 'active' : '' ?>">
+                <i class='bx <?= $currentPage === 'courses' ? 'bxs-book-open' : 'bx-book-open' ?>'></i>
+                <span>Szkolenia</span>
+            </a>
+
+            <a href="profile.php" class="bottom-nav-item <?= in_array($currentPage, ['profile', 'profile-edit']) ? 'active' : '' ?>">
+                <i class='bx <?= in_array($currentPage, ['profile', 'profile-edit']) ? 'bxs-user-pin' : 'bx-user' ?>'></i>
+                <span>Mój Profil</span>
+                <span class="nav-indicator" title="Profil wymaga uzupełnienia"></span>
+            </a>
+        </nav>
+
+    </div><!-- /.phone-screen -->
+</div><!-- /.phone-viewport-wrapper -->
+
+<!-- Lokalne skrypty Bootstrap (z projektu Magico, bez jsdelivr) -->
+<script src="../../assets/vendor/js/bootstrap.js"></script>
+
+<!-- Magico Feedback JS -->
+<?php if (!empty($enablePrototypeComments)): ?>
+    <script src="../../assets/js/comments.js"></script>
+<?php endif; ?>
+
+</body>
+</html>

prototype/travel-leader-pilot/header.php

@@ -0,0 +1,80 @@
+<?php
+$currentPage = basename($_SERVER['PHP_SELF'], '.php');
+if (!isset($pageTitle)) {
+    $pageTitle = 'TravelLeader - Aplikacja Pilota';
+}
+$isAcceptedState = isset($_GET['accepted']) && $_GET['accepted'] == '15';
+$isRejectedState = isset($_GET['rejected']) && $_GET['rejected'] == '15';
+$headerNotifCount = ($isAcceptedState || $isRejectedState) ? 0 : 1;
+?>
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <title><?= htmlspecialchars($pageTitle) ?></title>
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+
+    <!-- Lokalne assety (Boxicons + Core CSS z projektu Magico, bez jsdelivr) -->
+    <link rel="stylesheet" href="../../assets/vendor/fonts/boxicons.css">
+    <link rel="stylesheet" href="../../assets/vendor/css/core.css">
+
+    <!-- Stylistyka aplikacji mobilnej TravelLeader -->
+    <link rel="stylesheet" href="assets/css/style.css">
+
+    <!-- Magico Comments -->
+    <?php if (!empty($enablePrototypeComments)): ?>
+        <link rel="stylesheet" href="../../assets/css/comments.css">
+    <?php endif; ?>
+</head>
+<body>
+
+<div class="phone-viewport-wrapper">
+    <div class="phone-screen">
+        
+        <!-- Pasek stanu telefonu (Widoczny w ramce na desktopie, ukryty na mobile) -->
+        <div class="phone-status-bar">
+            <span>9:05</span>
+            <div class="icons">
+                <span class="badge bg-secondary" style="font-size: 0.6rem; padding: 1px 4px;">VPN</span>
+                <i class='bx bx-wifi'></i>
+                <i class='bx bx-signal-5'></i>
+                <span style="font-size: 0.72rem; display: inline-flex; align-items: center; gap: 2px;">
+                    46 <i class='bx bxs-battery-charging' style="font-size: 1rem;"></i>
+                </span>
+            </div>
+        </div>
+
+        <!-- Nagłówek aplikacji TravelLeader -->
+        <header class="app-header">
+            <a href="index.php" class="brand-logo-area">
+                <div class="brand-icon-box">
+                    <i class='bx bx-compass'></i>
+                </div>
+                <div class="brand-name">Travel<span style="color: #2b304f;">Leader</span></div>
+            </a>
+
+            <div class="d-flex align-items-center gap-2">
+                <!-- Dzwonek powiadomień o zaproszeniach -->
+                <a href="index.php?tab=invitations" class="header-notif-btn" id="headerNotifBtn" title="Nowe zaproszenie na wycieczkę (<?= $headerNotifCount ?>)">
+                    <i class='bx bx-bell'></i>
+                    <?php if ($headerNotifCount > 0): ?>
+                        <span class="header-notif-badge" id="headerNotifBadge"><?= $headerNotifCount ?></span>
+                    <?php endif; ?>
+                </a>
+
+                <a href="profile.php" class="header-user-profile" title="Przejdź do profilu">
+                    <div class="header-user-info">
+                        <div class="header-user-email">oskar@magico.pl</div>
+                        <div class="header-user-role">Pilot Wycieczek</div>
+                    </div>
+                    <div class="header-avatar" style="overflow: hidden; padding: 0;">
+                        <img src="../../assets/img/pilots/oskar-avatar.jpg" alt="Oskar" style="width: 100%; height: 100%; object-fit: cover;">
+                    </div>
+                </a>
+            </div>
+        </header>

prototype/travel-leader-pilot/index.php

@@ -0,0 +1,588 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Wycieczki i Zlecenia';
+
+$isAccepted = isset($_GET['accepted']) && $_GET['accepted'] == '15';
+$isRejected = isset($_GET['rejected']) && $_GET['rejected'] == '15';
+$activeTab = $_GET['tab'] ?? ($isAccepted ? 'current' : 'current');
+
+$currentCount = $isAccepted ? 2 : 1;
+$invitationsCount = ($isAccepted || $isRejected) ? 0 : 1;
+
+include 'header.php';
+?>
+
+<!-- SYSTEMOWY STACK WSTĄŻEK (Pasy pod nagłówkiem na pełną szerokość - oddzielone kolorami i subtelnym borderem) -->
+<div class="system-ribbons-stack">
+    
+    <!-- 1. WSTĄŻKA ZAPROSZENIA (Ciepły koral/bursztyn, 24h timer, priorytet biznesowy) -->
+    <?php if (!$isAccepted && !$isRejected): ?>
+    <div class="system-ribbon-bar ribbon-invitation" id="ribbonInvitationBar">
+        <div class="d-flex align-items-center gap-2" style="min-width: 0;">
+            <span class="ribbon-badge ribbon-badge-urgent">⏳ 18h</span>
+            <div class="ribbon-text">
+                <span class="fw-bold">Zaproszenie</span>
+                <span class="ribbon-sub"> • Włochy (05–12.10) • 4 400 zł</span>
+            </div>
+        </div>
+        <div class="d-flex align-items-center gap-2 flex-shrink-0">
+            <a href="invitation-details.php?id=15" class="btn-ribbon-action btn-ribbon-invitation">
+                Sprawdź &gt;
+            </a>
+            <button type="button" class="btn-ribbon-close" onclick="this.closest('.ribbon-invitation').style.display='none';" title="Zamknij powiadomienie">
+                <i class='bx bx-x'></i>
+            </button>
+        </div>
+    </div>
+    <?php endif; ?>
+
+    <!-- 2. WSTĄŻKA PROFILU (Chabrowa, uzupełnienie danych) -->
+    <div class="system-ribbon-bar ribbon-profile" id="ribbonProfileBar">
+        <div class="d-flex align-items-center gap-2" style="min-width: 0;">
+            <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 flex-shrink-0">
+            <a href="profile.php" class="btn-ribbon-action">
+                Dokończ &gt;
+            </a>
+            <button type="button" class="btn-ribbon-close" onclick="this.closest('.ribbon-profile').style.display='none';" title="Zamknij powiadomienie">
+                <i class='bx bx-x'></i>
+            </button>
+        </div>
+    </div>
+
+</div>
+
+<div class="app-content">
+
+    <?php if ($isAccepted): ?>
+        <!-- Zwięzły alert sukcesu po akceptacji wycieczki -->
+        <div class="p-2 px-3 rounded-2 mb-2 d-flex align-items-center justify-content-between" style="background: #ecfdf5; border: 1px solid #a7f3d0; font-size: 0.78rem;">
+            <div class="d-flex align-items-center gap-2">
+                <i class='bx bx-check-circle fs-5 text-success'></i>
+                <span class="text-success fw-semibold">Wycieczka #15 została zaakceptowana i dodana do Twojego grafiku!</span>
+            </div>
+            <a href="index.php" class="btn-close" style="font-size: 0.65rem;" aria-label="Zamknij"></a>
+        </div>
+    <?php elseif ($isRejected): ?>
+        <!-- Zwięzły alert informacyjny po odrzuceniu -->
+        <div class="p-2 px-3 rounded-2 mb-2 d-flex align-items-center justify-content-between" style="background: #f8fafc; border: 1px solid #e2e8f0; font-size: 0.78rem;">
+            <div class="d-flex align-items-center gap-2">
+                <i class='bx bx-info-circle fs-5 text-muted'></i>
+                <span class="text-muted">Zaproszenie #15 zostało odrzucone. Biuro podróży otrzymało powiadomienie.</span>
+            </div>
+            <a href="index.php" class="btn-close" style="font-size: 0.65rem;" aria-label="Zamknij"></a>
+        </div>
+    <?php endif; ?>
+
+    <!-- Wyszukiwarka i filtr zakresu dat -->
+    <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 (Bieżące vs Zaproszenia vs Historia) -->
+    <div class="trips-tabs-bar">
+        <div class="nav-pills-custom">
+            <a href="javascript:void(0);" class="nav-pill-item <?= $activeTab === 'current' ? 'active' : '' ?>" id="tabBtnCurrent" onclick="switchTripsTab('current');">
+                <i class='bx bx-home-alt-2'></i>
+                <span>Bieżące</span>
+                <span class="badge-count" id="badgeCurrentCount"><?= $currentCount ?></span>
+            </a>
+            <a href="javascript:void(0);" class="nav-pill-item <?= $activeTab === 'invitations' ? 'active' : '' ?>" id="tabBtnInvitations" onclick="switchTripsTab('invitations');">
+                <i class='bx bx-envelope'></i>
+                <span>Zaproszenia</span>
+                <span class="badge-count <?= $invitationsCount > 0 ? 'badge-alert' : '' ?>" id="badgeInvitationsCount"><?= $invitationsCount ?></span>
+            </a>
+            <a href="javascript:void(0);" class="nav-pill-item <?= $activeTab === 'history' ? 'active' : '' ?>" id="tabBtnHistory" onclick="switchTripsTab('history');">
+                <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" id="tripsViewToggleGroup" style="<?= $activeTab === 'invitations' ? 'display: none !important;' : '' ?>">
+            <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: BIEŻĄCE WYCIECZKI (LISTA) ==================== -->
+    <div id="tripsListView" class="<?= $activeTab !== 'current' ? 'd-none' : '' ?>">
+        
+        <?php if ($isAccepted): ?>
+        <!-- Nowo zaakceptowana wycieczka #15 -->
+        <div class="trip-card border-success" style="border-left: 4px solid #10b981 !important;">
+            <div class="trip-card-header">
+                <div class="d-flex align-items-center flex-grow-1">
+                    <div class="trip-id-badge" style="background: linear-gradient(135deg, #10b981, #059669); color: white;">15</div>
+                    <div class="trip-title-area">
+                        <div class="d-flex align-items-center gap-1">
+                            <span class="badge bg-success-subtle text-success py-0 px-1" style="font-size: 0.65rem;">Nowo przyjęta</span>
+                            <span class="text-muted small" style="font-size: 0.72rem;">Almatur</span>
+                        </div>
+                        <h5 class="trip-title mb-0">Magia Toskanii i Rzym</h5>
+                    </div>
+                </div>
+
+                <div class="trip-status-pill">
+                    <span class="badge-status bg-success-subtle text-success">Zaakceptowana</span>
+                    <div class="status-subtext">za 382 dni</div>
+                </div>
+            </div>
+
+            <!-- Dane wycieczki -->
+            <div class="trip-info-row">
+                <i class='bx bx-calendar text-primary'></i>
+                <span>05-12.10.2027 (8 dni)</span>
+            </div>
+
+            <div class="trip-info-row">
+                <i class='bx bx-group text-primary'></i>
+                <span>38 osób • Autokar</span>
+            </div>
+
+            <div class="trip-info-row">
+                <i class='bx bx-map text-primary'></i>
+                <span>🇮🇹 Włochy (Florencja, Rzym)</span>
+            </div>
+
+            <!-- Stopka karty -->
+            <div class="trip-card-footer">
+                <div class="trip-code">
+                    <i class='bx bx-wallet'></i>
+                    <strong class="text-success">4 400 PLN netto</strong>
+                </div>
+
+                <a href="invitation-details.php?id=15" class="btn-details">
+                    Szczegóły &gt;
+                </a>
+            </div>
+        </div>
+        <?php endif; ?>
+
+        <!-- Istniejąca wycieczka #12 -->
+        <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 ==================== -->
+    <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>
+
+    <!-- ==================== WIDOK 3: ZAPROSZENIA I OFERTY BIUR (MINIMALISTYCZNA LISTA) ==================== -->
+    <div id="tripsInvitationsView" class="<?= $activeTab !== 'invitations' ? 'd-none' : '' ?>">
+        
+        <div class="d-flex justify-content-between align-items-center mb-3">
+            <h6 class="fw-bold mb-0 text-dark" style="font-size: 0.92rem;">Otrzymane zaproszenia na wycieczki</h6>
+            <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1" style="font-size: 0.72rem;">
+                <?= $invitationsCount ?> aktywne
+            </span>
+        </div>
+
+        <?php if (!$isAccepted && !$isRejected): ?>
+        <!-- Minimalistyczny wiersz zaproszenia #15 (Single-tap) -->
+        <a href="invitation-details.php?id=15" class="invitation-compact-item is-pending" title="Kliknij, aby przejść do szczegółów i decyzji">
+            <div class="inv-item-icon">
+                <i class='bx bx-envelope'></i>
+                <span class="inv-item-status-dot"></span>
+            </div>
+            <div class="inv-item-content">
+                <div class="inv-item-top">
+                    <span class="inv-item-agency fw-bold" style="color: #ea580c;">Nowe zaproszenie</span>
+                    <span class="inv-item-timer">⏳ 18h na decyzję</span>
+                </div>
+                <div class="inv-item-title">#15: Magia Toskanii i Rzym</div>
+                <div class="inv-item-meta">
+                    <span>05–12.10.2027 (8 dni)</span>
+                    <span>•</span>
+                    <span class="text-success fw-bold">4 400 PLN netto</span>
+                    <span>•</span>
+                    <span>Almatur</span>
+                </div>
+            </div>
+            <div class="inv-item-arrow">
+                <i class='bx bx-chevron-right fs-4 text-muted'></i>
+            </div>
+        </a>
+        <?php endif; ?>
+
+        <?php if ($isAccepted): ?>
+        <!-- Kompaktowy kafelek zaakceptowanego zlecenia -->
+        <a href="invitation-details.php?id=15" class="invitation-compact-item is-accepted">
+            <div class="inv-item-icon" style="background: #ecfdf5; color: #10b981;">
+                <i class='bx bx-check'></i>
+            </div>
+            <div class="inv-item-content">
+                <div class="inv-item-top">
+                    <span class="inv-item-agency">Almatur Warszawa</span>
+                    <span class="badge bg-success-subtle text-success py-0 px-1" style="font-size: 0.68rem;">Zaakceptowane</span>
+                </div>
+                <div class="inv-item-title">Wycieczka #15: Magia Toskanii i Rzym</div>
+                <div class="inv-item-meta">
+                    <span>05–12.10.2027</span>
+                    <span>•</span>
+                    <span class="text-success fw-semibold">4 400 PLN</span>
+                </div>
+            </div>
+            <div class="inv-item-arrow">
+                <i class='bx bx-chevron-right fs-4 text-muted'></i>
+            </div>
+        </a>
+        <?php endif; ?>
+
+        <?php if ($isRejected): ?>
+        <!-- Kompaktowy kafelek odrzuconego zlecenia -->
+        <div class="invitation-compact-item is-rejected">
+            <div class="inv-item-icon" style="background: #fef2f2; color: #ef4444;">
+                <i class='bx bx-x'></i>
+            </div>
+            <div class="inv-item-content">
+                <div class="inv-item-top">
+                    <span class="inv-item-agency">Almatur Warszawa</span>
+                    <span class="badge bg-danger-subtle text-danger py-0 px-1" style="font-size: 0.68rem;">Odrzucone</span>
+                </div>
+                <div class="inv-item-title">Wycieczka #15: Magia Toskanii i Rzym</div>
+                <div class="inv-item-meta">
+                    <span>05–12.10.2027</span>
+                    <span>•</span>
+                    <span>Kolizja terminów</span>
+                </div>
+            </div>
+        </div>
+        <?php endif; ?>
+
+        <!-- Zaproszenie zrealizowane z przeszłości -->
+        <div class="invitation-compact-item opacity-75">
+            <div class="inv-item-icon" style="background: #f1f5f9; color: #64748b;">
+                <span>R</span>
+            </div>
+            <div class="inv-item-content">
+                <div class="inv-item-top">
+                    <span class="inv-item-agency">Rainbow Tours</span>
+                    <span class="badge bg-light text-muted border py-0 px-1" style="font-size: 0.68rem;">Zrealizowana</span>
+                </div>
+                <div class="inv-item-title">Wycieczka #9: Klasyczna Grecja</div>
+                <div class="inv-item-meta">
+                    <span>Czerwiec 2026</span>
+                    <span>•</span>
+                    <span>Ocena: ★ 5.0</span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- ==================== WIDOK 4: HISTORIA WYCIECZEK ==================== -->
+    <div id="tripsHistoryView" class="d-none">
+        <div class="text-center py-5">
+            <i class='bx bx-history text-muted' style="font-size: 3rem;"></i>
+            <h6 class="fw-bold mt-2 text-dark">Brak zrealizowanych wycieczek w tym sezonie</h6>
+            <p class="text-muted small">Wycieczki z poprzednich lat są archiwizowane w bazie zleceń.</p>
+        </div>
+    </div>
+
+</div><!-- /.app-content -->
+
+<!-- BOTTOM SHEET DLA WYCIECZKI Z KALENDARZA -->
+<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 switchTripsTab(tab) {
+    const tabCurrent = document.getElementById('tabBtnCurrent');
+    const tabInvitations = document.getElementById('tabBtnInvitations');
+    const tabHistory = document.getElementById('tabBtnHistory');
+
+    const listView = document.getElementById('tripsListView');
+    const calView = document.getElementById('tripsCalendarView');
+    const invView = document.getElementById('tripsInvitationsView');
+    const histView = document.getElementById('tripsHistoryView');
+    const toggleGroup = document.getElementById('tripsViewToggleGroup');
+
+    // Reset tabs
+    [tabCurrent, tabInvitations, tabHistory].forEach(t => t.classList.remove('active'));
+    [listView, calView, invView, histView].forEach(v => v.classList.add('d-none'));
+
+    if (tab === 'invitations') {
+        tabInvitations.classList.add('active');
+        invView.classList.remove('d-none');
+        if (toggleGroup) toggleGroup.style.setProperty('display', 'none', 'important');
+    } else if (tab === 'history') {
+        tabHistory.classList.add('active');
+        histView.classList.remove('d-none');
+        if (toggleGroup) toggleGroup.style.setProperty('display', 'none', 'important');
+    } else {
+        tabCurrent.classList.add('active');
+        listView.classList.remove('d-none');
+        if (toggleGroup) toggleGroup.style.display = 'flex';
+        // Reset sub toggle to list
+        document.getElementById('btnListView').classList.add('active');
+        document.getElementById('btnCalendarView').classList.remove('active');
+    }
+}
+
+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');
+}
+
+// Obsługa parametru URL przy starcie (np. kliknięcie dzwonka w headerze)
+document.addEventListener('DOMContentLoaded', function() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const tabParam = urlParams.get('tab');
+    if (tabParam === 'invitations') {
+        switchTripsTab('invitations');
+    }
+});
+</script>
+
+<?php include 'footer.php'; ?>

prototype/travel-leader-pilot/invitation-details.php

@@ -0,0 +1,269 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Zaproszenie od biura podróży';
+include 'header.php';
+?>
+
+<div class="app-content" style="padding-bottom: 90px;">
+
+    <!-- Pasek powrotu i statusu zlecenia -->
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <a href="index.php" class="text-decoration-none fw-semibold d-inline-flex align-items-center gap-1" style="color: var(--dark-navy); font-size: 0.85rem;">
+            <i class='bx bx-left-arrow-alt fs-4'></i> Wróć do wycieczek
+        </a>
+        <span class="badge bg-warning-subtle text-warning border border-warning-subtle py-1 px-2 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.74rem;">
+            <i class='bx bx-time-five'></i> 18h na decyzję
+        </span>
+    </div>
+
+    <!-- Karta biura podróży wysyłającego zaproszenie -->
+    <div class="section-card mb-3 p-3">
+        <div class="d-flex justify-content-between align-items-start">
+            <div class="d-flex align-items-center gap-3">
+                <div class="rounded-3 d-flex align-items-center justify-content-center text-white fw-bold shadow-sm" style="width: 44px; height: 44px; background: linear-gradient(135deg, #5c60f5, #777bfb); font-size: 1.25rem;">
+                    A
+                </div>
+                <div>
+                    <span class="text-uppercase text-muted fw-bold" style="font-size: 0.68rem; letter-spacing: 0.5px;">ZAPRASZAJĄCE BIURO PODRÓŻY</span>
+                    <h5 class="fw-bold text-dark mb-0" style="font-size: 1rem;">Almatur Warszawa</h5>
+                    <small class="text-muted" style="font-size: 0.76rem;">Oddział Operacyjny • Koordynator: Michał Wiśniewski</small>
+                </div>
+            </div>
+            <a href="tel:+48228261234" class="btn btn-sm btn-light border text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 36px; height: 36px;" title="Zadzwoń do biura">
+                <i class='bx bx-phone-call fs-5'></i>
+            </a>
+        </div>
+    </div>
+
+    <!-- Karta zlecenia / wycieczki (Czysty, minimalistyczny układ bez zbędnych zdjęć) -->
+    <div class="section-card mb-3 p-3">
+        <div class="d-flex align-items-center gap-2 mb-2">
+            <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1" style="font-size: 0.72rem;">
+                Wycieczka #15
+            </span>
+            <span class="badge bg-light text-dark border px-2 py-1" style="font-size: 0.72rem;">
+                🇮🇹 Włochy
+            </span>
+        </div>
+
+        <h4 class="fw-bold text-dark mb-1" style="font-size: 1.15rem; line-height: 1.3;">
+            Magia Toskanii i Rzym
+        </h4>
+        <div class="text-muted small d-flex align-items-center gap-2 mb-3" style="font-size: 0.78rem;">
+            <span><i class='bx bx-calendar text-primary me-1'></i>05.10.2027 – 12.10.2027</span>
+            <span>•</span>
+            <span>8 dni</span>
+        </div>
+
+        <!-- Grid parametrów -->
+        <div class="row g-2">
+            <div class="col-6">
+                <div class="p-2 rounded-2 bg-light border">
+                    <small class="text-muted d-block" style="font-size: 0.7rem;">Grupa & Transport</small>
+                    <strong class="text-dark" style="font-size: 0.82rem;"><i class='bx bx-group text-primary me-1'></i>38 osób (Autokar)</strong>
+                </div>
+            </div>
+            <div class="col-6">
+                <div class="p-2 rounded-2 bg-light border">
+                    <small class="text-muted d-block" style="font-size: 0.7rem;">Charakter imprezy</small>
+                    <strong class="text-dark" style="font-size: 0.82rem;"><i class='bx bx-map-alt text-primary me-1'></i>Objazdowa (Dorośli)</strong>
+                </div>
+            </div>
+            <div class="col-6">
+                <div class="p-2 rounded-2 bg-light border">
+                    <small class="text-muted d-block" style="font-size: 0.7rem;">Start i zakończenie</small>
+                    <strong class="text-dark" style="font-size: 0.82rem;"><i class='bx bx-navigation text-primary me-1'></i>Warszawa &rarr; Rzym</strong>
+                </div>
+            </div>
+            <div class="col-6">
+                <div class="p-2 rounded-2 bg-light border">
+                    <small class="text-muted d-block" style="font-size: 0.7rem;">Główne punkty</small>
+                    <strong class="text-dark" style="font-size: 0.82rem;"><i class='bx bx-landmark text-primary me-1'></i>Florencja, Siena, Rzym</strong>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Warunki finansowe i rozliczenie -->
+    <div class="section-card mb-3 p-3">
+        <h6 class="fw-bold text-dark mb-3 d-flex align-items-center gap-2" style="font-size: 0.9rem;">
+            <i class='bx bx-wallet text-primary fs-5'></i> Warunki Finansowe
+        </h6>
+
+        <div class="d-flex justify-content-between align-items-center p-3 rounded-3 mb-3" style="background: #f8fafd; border: 1px solid var(--border-color);">
+            <div>
+                <span class="text-muted small d-block" style="font-size: 0.72rem;">Stawka dzienna netto:</span>
+                <span class="fs-5 fw-bold text-dark">550 PLN</span>
+                <span class="text-muted small">/ dzień</span>
+            </div>
+            <div class="text-end">
+                <span class="text-muted small d-block" style="font-size: 0.72rem;">Łączne wynagrodzenie (8 dni):</span>
+                <span class="fs-4 fw-extrabold text-success" style="font-weight: 800;">4 400 PLN</span>
+                <span class="text-success small d-block" style="font-size: 0.72rem;">netto na fakturę / zlecenie</span>
+            </div>
+        </div>
+
+        <div class="text-muted small mb-1" style="font-size: 0.74rem;">
+            <i class='bx bx-info-circle me-1'></i> Wypłata wynagrodzenia realizowana w terminie do 7 dni roboczych od rozliczenia imprezy w Travel Managerze.
+        </div>
+    </div>
+
+    <!-- Gwarantowane świadczenia od biura -->
+    <div class="section-card mb-3 p-3">
+        <h6 class="fw-bold text-dark mb-2 d-flex align-items-center gap-2" style="font-size: 0.9rem;">
+            <i class='bx bx-check-circle text-success fs-5'></i> Zapewniane Świadczenia
+        </h6>
+
+        <div class="d-flex flex-column gap-2 pt-1" style="font-size: 0.8rem;">
+            <div class="d-flex align-items-center gap-2 text-dark">
+                <i class='bx bx-check text-success fs-5'></i>
+                <span><strong>Pokój 1-osobowy</strong> w hotelach (standard 3* / 4*)</span>
+            </div>
+            <div class="d-flex align-items-center gap-2 text-dark">
+                <i class='bx bx-check text-success fs-5'></i>
+                <span><strong>Pełne wyżywienie pilota</strong> (śniadania w hotelach + obiadokolacje)</span>
+            </div>
+            <div class="d-flex align-items-center gap-2 text-dark">
+                <i class='bx bx-check text-success fs-5'></i>
+                <span><strong>Ubezpieczenie KL / NNW</strong> na pełną sumę gwarancyjną</span>
+            </div>
+            <div class="d-flex align-items-center gap-2 text-dark">
+                <i class='bx bx-check text-success fs-5'></i>
+                <span><strong>Zwrot kosztów transferu</strong> na lotnisko zbiórki</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Wiadomość od biura podróży -->
+    <div class="section-card mb-4 p-3" style="background: #fafbff;">
+        <h6 class="fw-bold text-dark mb-2 d-flex align-items-center gap-2" style="font-size: 0.88rem;">
+            <i class='bx bx-message-dots text-primary fs-5'></i> Wiadomość od Koordynatora
+        </h6>
+        <p class="text-muted mb-0" style="font-size: 0.8rem; line-height: 1.5; font-style: italic;">
+            „Cześć Oskar! Szykujemy naszą flagową jesienną objazdówkę po Toskanii i Rzymie. Grupa dorosłych, bardzo kulturalna. Bardzo zależy nam na Twojej obecności ze względu na świetne referencje z Florencji. W razie pytań dzwoń śmiało na numer operacyjny!”
+        </p>
+        <div class="text-end mt-2">
+            <span class="small fw-semibold text-dark" style="font-size: 0.74rem;">— Michał Wiśniewski, Almatur</span>
+        </div>
+    </div>
+
+</div><!-- /.app-content -->
+
+<!-- Pasek decyzji przypięty do dołu (Decision Sticky Bar) -->
+<div class="decision-sticky-footer" id="decisionFooter">
+    <button type="button" class="btn-decision-decline" onclick="openRejectBottomSheet();">
+        <i class='bx bx-x fs-5'></i>
+        <span>Odrzuć</span>
+    </button>
+    <button type="button" class="btn-decision-accept" onclick="acceptInvitation();">
+        <i class='bx bx-check-double fs-5'></i>
+        <span>Przyjmij wycieczkę</span>
+    </button>
+</div>
+
+<!-- Modal potwierdzenia akceptacji z sukcesem -->
+<div class="modal fade" id="acceptSuccessModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
+    <div class="modal-dialog modal-dialog-centered" style="max-width: 360px;">
+        <div class="modal-content border-0 shadow-lg text-center p-4" style="border-radius: 24px;">
+            <div class="mx-auto mb-3 rounded-circle d-flex align-items-center justify-content-center" style="width: 64px; height: 64px; background: #dcfce7; color: #16a34a; font-size: 2rem;">
+                <i class='bx bx-check'></i>
+            </div>
+            <h4 class="fw-bold text-dark mb-1">Wycieczka Zaakceptowana!</h4>
+            <p class="text-muted small mb-3" style="font-size: 0.82rem;">
+                Gratulacje! Zlecenie <strong>#15 Magia Toskanii i Rzym</strong> zostało przypisane do Twojego grafiku. Biuro Almatur zostało natychmiast powiadomione.
+            </p>
+            <div class="p-2 px-3 bg-light rounded-2 text-start mb-3" style="font-size: 0.76rem;">
+                <div class="d-flex justify-content-between mb-1">
+                    <span class="text-muted">Termin:</span>
+                    <strong class="text-dark">05.10 – 12.10.2027</strong>
+                </div>
+                <div class="d-flex justify-content-between">
+                    <span class="text-muted">Wynagrodzenie:</span>
+                    <strong class="text-success">4 400 PLN netto</strong>
+                </div>
+            </div>
+            <button type="button" class="btn btn-primary w-100 py-2 fw-semibold" style="border-radius: 12px;" onclick="window.location.href='index.php?accepted=15';">
+                Przejdź do moich wycieczek &rarr;
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Arkusz wysuwany z wyborem powodu odrzucenia (Bottom Sheet) -->
+<div id="rejectSheetBackdrop" class="bottom-sheet-backdrop" onclick="closeRejectBottomSheet();"></div>
+<div id="rejectBottomSheet" class="bottom-sheet-content" style="z-index: 1060;">
+    <div class="sheet-drag-handle"></div>
+
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            <h5 class="fw-bold mb-0 text-dark" style="font-size: 1.05rem;">Odrzucenie Zaproszenia</h5>
+            <small class="text-muted" style="font-size: 0.75rem;">Podaj powód, by biuro mogło dobrać innego pilota</small>
+        </div>
+        <button type="button" class="btn-close" style="font-size: 0.75rem;" onclick="closeRejectBottomSheet();" aria-label="Zamknij"></button>
+    </div>
+
+    <form id="rejectReasonForm" onsubmit="confirmRejection(event);">
+        <div class="mb-3">
+            <div class="d-flex flex-column gap-2" style="font-size: 0.82rem;">
+                <label class="p-2 px-3 rounded-2 border d-flex align-items-center gap-2 cursor-pointer" style="background: #fafbff;">
+                    <input type="radio" name="reject_reason" value="conflict" class="form-check-input mt-0" checked>
+                    <span>🗓️ Kolizja z planami prywatnymi / urlop</span>
+                </label>
+                <label class="p-2 px-3 rounded-2 border d-flex align-items-center gap-2 cursor-pointer" style="background: #fafbff;">
+                    <input type="radio" name="reject_reason" value="rate" class="form-check-input mt-0">
+                    <span>💰 Za niska stawka dzienna na ten termin</span>
+                </label>
+                <label class="p-2 px-3 rounded-2 border d-flex align-items-center gap-2 cursor-pointer" style="background: #fafbff;">
+                    <input type="radio" name="reject_reason" value="destination" class="form-check-input mt-0">
+                    <span>📍 Preferuję inne destynacje w tym okresie</span>
+                </label>
+                <label class="p-2 px-3 rounded-2 border d-flex align-items-center gap-2 cursor-pointer" style="background: #fafbff;">
+                    <input type="radio" name="reject_reason" value="other" class="form-check-input mt-0">
+                    <span>✏️ Inny powód</span>
+                </label>
+            </div>
+        </div>
+
+        <div class="mb-3">
+            <label class="form-label text-dark small fw-semibold mb-1" for="rejectMessage">Krótka notatka dla koordynatora (opcjonalnie):</label>
+            <textarea class="form-control" id="rejectMessage" rows="2" style="font-size: 0.8rem;" placeholder="np. Chętnie pojadę z Wami w listopadzie..."></textarea>
+        </div>
+
+        <div class="d-flex gap-2">
+            <button type="button" class="btn btn-outline-secondary w-50 py-2" style="border-radius: 10px; font-size: 0.82rem;" onclick="closeRejectBottomSheet();">
+                Anuluj
+            </button>
+            <button type="submit" class="btn btn-danger w-50 py-2 fw-semibold" style="border-radius: 10px; font-size: 0.82rem;">
+                Odrzuć zlecenie
+            </button>
+        </div>
+    </form>
+</div>
+
+<script>
+function openRejectBottomSheet() {
+    document.getElementById('rejectSheetBackdrop').classList.add('active');
+    document.getElementById('rejectBottomSheet').classList.add('active');
+}
+
+function closeRejectBottomSheet() {
+    document.getElementById('rejectSheetBackdrop').classList.remove('active');
+    document.getElementById('rejectBottomSheet').classList.remove('active');
+}
+
+function acceptInvitation() {
+    // Pokaż modal sukcesu
+    const modalEl = document.getElementById('acceptSuccessModal');
+    const bsModal = new bootstrap.Modal(modalEl);
+    bsModal.show();
+}
+
+function confirmRejection(e) {
+    e.preventDefault();
+    closeRejectBottomSheet();
+    alert('Zaproszenie zostało odrzucone. Biuro Almatur otrzymało powiadomienie.');
+    window.location.href = 'index.php?rejected=15';
+}
+</script>
+
+<?php include 'footer.php'; ?>

prototype/travel-leader-pilot/profile-edit.php

@@ -0,0 +1,269 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Edycja Profilu';
+include 'header.php';
+?>
+
+<div class="app-content">
+
+    <!-- Pasek powrotu -->
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <a href="profile.php" class="text-decoration-none d-flex align-items-center gap-1 text-muted" style="font-size: 0.85rem; font-weight: 600;">
+            <i class='bx bx-arrow-back fs-5'></i> Powrót do profilu
+        </a>
+        <button type="button" class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.8rem;" onclick="saveProfile();">
+            <i class='bx bx-check'></i> Zapisz
+        </button>
+    </div>
+
+    <h5 class="fw-bold mb-3" style="color: var(--dark-navy);">Edycja Profilu</h5>
+
+    <!-- Toast powiadomienie o zapisie -->
+    <div id="saveToast" class="alert alert-success d-none rounded-3 shadow-sm py-2 px-3 mb-3 d-flex align-items-center justify-content-between" style="font-size: 0.82rem;">
+        <span><i class='bx bx-check-circle me-1'></i> Profil zaktualizowany! Zmiany widoczne dla biur.</span>
+        <a href="profile.php" class="fw-bold text-success text-decoration-underline ms-2">Zobacz</a>
+    </div>
+
+    <!-- 0. Nowoczesny, kompaktowy przełącznik widoczności (Pill card) -->
+    <div class="visibility-status-pill-card mb-3">
+        <div class="d-flex align-items-center gap-2">
+            <span class="status-indicator-dot active" id="visibilityDot"></span>
+            <div>
+                <span class="fw-bold" style="font-size: 0.84rem; color: var(--dark-navy);" id="visibilityTitle">
+                    Widoczny w bazie biur podróży
+                </span>
+            </div>
+        </div>
+        <div class="form-check form-switch m-0">
+            <input class="form-check-input" type="checkbox" id="visibilitySwitch" checked style="cursor: pointer; transform: scale(1.15);" onchange="toggleVisibility(this);">
+        </div>
+    </div>
+
+    <!-- 1. Zdjęcie profilowe & Wideo-Wizytówka -->
+    <div class="section-card mb-3">
+        <div class="section-title">
+            <span><i class='bx bx-image text-primary me-1'></i> Zdjęcie i Wideo</span>
+        </div>
+
+        <div class="d-flex align-items-center gap-3 mb-3">
+            <div class="profile-avatar-img d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: white; font-size: 1.4rem; font-weight: 800; flex-shrink: 0;">
+                OK
+            </div>
+            <div>
+                <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-1 px-3" style="font-size: 0.76rem;" onclick="alert('Wybierz zdjęcie z telefonu.');">
+                    <i class='bx bx-camera'></i> Zmień zdjęcie profilowe
+                </button>
+            </div>
+        </div>
+
+        <div class="mb-3">
+            <label class="form-label-custom">Link do wideo-autoprezentacji</label>
+            <div class="input-group">
+                <span class="input-group-text bg-light border-end-0 py-1"><i class='bx bxl-youtube text-danger'></i></span>
+                <input type="text" class="form-control form-control-custom" value="https://youtu.be/oskar-pilot-intro" placeholder="YouTube, Vimeo...">
+            </div>
+        </div>
+
+        <div>
+            <label class="form-label-custom">Zdjęcia ze szlaków i wypraw</label>
+            <div class="d-flex gap-2">
+                <div class="media-thumbnail d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: #eff0fe; color: var(--primary); cursor: pointer;" onclick="alert('Wybierz kolejne zdjęcia');">
+                    <i class='bx bx-plus fs-4'></i>
+                </div>
+                <div class="media-thumbnail d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: #60a5fa; color: white;">
+                    <i class='bx bx-landscape fs-4'></i>
+                </div>
+                <div class="media-thumbnail d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: #f59e0b; color: white;">
+                    <i class='bx bx-camera fs-4'></i>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 2. Dane podstawowe & Autoprezentacja -->
+    <div class="section-card mb-3" id="bio">
+        <div class="section-title">
+            <span><i class='bx bx-user text-primary me-1'></i> Dane podstawowe & O mnie</span>
+        </div>
+
+        <div class="mb-2">
+            <label class="form-label-custom">Imię i Nazwisko</label>
+            <input type="text" class="form-control-custom" value="Oskar Kaczmarek">
+        </div>
+
+        <div class="mb-2">
+            <label class="form-label-custom">Tytuł zawodowy / Slogan</label>
+            <input type="text" class="form-control-custom" value="Licencjonowany Pilot Wycieczek & Przewodnik">
+        </div>
+
+        <div class="row g-2 mb-2">
+            <div class="col-6">
+                <label class="form-label-custom">Rok rozpoczęcia</label>
+                <input type="number" id="startYearInput" class="form-control-custom" value="2019" min="1970" max="2026" oninput="updateExpYears();">
+                <small class="text-primary fw-bold d-block mt-1" id="expCalculatedHint" style="font-size: 0.72rem;">
+                    <i class='bx bx-check'></i> Staż: 7 lat
+                </small>
+            </div>
+            <div class="col-6">
+                <label class="form-label-custom">Miasto bazowe</label>
+                <input type="text" class="form-control-custom" value="Warszawa / Rzym">
+            </div>
+        </div>
+
+        <div class="mb-1">
+            <label class="form-label-custom">Opis autoprezentacji dla biur</label>
+            <textarea class="form-control-custom" rows="3">Pasjonat kultury śródziemnomorskiej z wykształceniem historycznym. Od 2019 roku z sukcesami pilotuję wycieczki objazdowe po Włoszech, Hiszpanii i Bałkanach. Wyróżnia mnie opanowanie w sytuacjach kryzysowych, doskonały kontakt z grupą oraz płynna znajomość języka włoskiego i angielskiego.</textarea>
+        </div>
+    </div>
+
+    <!-- 3. Destynacje i Obsługiwane Kraje -->
+    <div class="section-card mb-3" id="destynacje">
+        <div class="section-title">
+            <span><i class='bx bx-map-pin text-primary me-1'></i> Obsługiwane kraje</span>
+        </div>
+
+        <div class="d-flex flex-wrap gap-1 mb-2" id="countryChips">
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇮🇹 Włochy</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇬🇷 Grecja</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇪🇸 Hiszpania</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇭🇷 Chorwacja</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇳🇴 Norwegia</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇦🇹 Austria</span>
+            <span class="chip-tag" onclick="this.classList.toggle('primary')">🇵🇹 Portugalia</span>
+            <span class="chip-tag" onclick="this.classList.toggle('primary')">🇹🇷 Turcja</span>
+            <span class="chip-tag" onclick="this.classList.toggle('primary')">🇫🇷 Francja</span>
+        </div>
+
+        <div class="input-group">
+            <input type="text" id="newCountryInput" class="form-control form-control-custom py-1" placeholder="Wpisz inny kraj...">
+            <button class="btn btn-outline-primary py-1 px-3" type="button" onclick="addNewCountry();" style="border-radius: var(--radius-sm); margin-left: 6px; font-size: 0.78rem;">
+                + Dodaj
+            </button>
+        </div>
+    </div>
+
+    <!-- 4. Języki Obce -->
+    <div class="section-card mb-3" id="jezyki">
+        <div class="section-title">
+            <span><i class='bx bx-chat text-primary me-1'></i> Języki</span>
+        </div>
+
+        <div class="d-flex flex-column gap-2 mb-2">
+            <div class="row g-2 align-items-center">
+                <div class="col-7">
+                    <input type="text" class="form-control-custom" value="Polski" readonly>
+                </div>
+                <div class="col-5">
+                    <select class="form-select form-control-custom py-1">
+                        <option selected>Ojczysty</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="row g-2 align-items-center">
+                <div class="col-7">
+                    <input type="text" class="form-control-custom" value="Angielski">
+                </div>
+                <div class="col-5">
+                    <select class="form-select form-control-custom py-1">
+                        <option>B1 (Średni)</option>
+                        <option>B2 (Płynny)</option>
+                        <option selected>C1 (Biegły)</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="row g-2 align-items-center">
+                <div class="col-7">
+                    <input type="text" class="form-control-custom" value="Włoski">
+                </div>
+                <div class="col-5">
+                    <select class="form-select form-control-custom py-1">
+                        <option>B1 (Średni)</option>
+                        <option selected>B2 (Płynny)</option>
+                        <option>C1 (Biegły)</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <button type="button" class="btn btn-sm btn-light w-100 rounded-3 py-1 text-muted" style="font-size: 0.76rem;" onclick="alert('Dodaj kolejny język');">
+            + Dodaj język
+        </button>
+    </div>
+
+    <!-- 5. Tagi & Specjalizacje -->
+    <div class="section-card mb-4" id="tagi">
+        <div class="section-title">
+            <span><i class='bx bx-purchase-tag text-primary me-1'></i> Tagi & Specjalizacje</span>
+        </div>
+
+        <div class="d-flex flex-wrap gap-1">
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Objazdówki</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Trekking & góry</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Przewodnik miejski</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Grupy szkolne</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> VIP / Incentive</span>
+            <span class="chip-tag" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Narty</span>
+            <span class="chip-tag" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Rejsy</span>
+        </div>
+    </div>
+
+    <!-- Zapisz -->
+    <div class="mb-4">
+        <button type="button" class="btn-primary-custom" onclick="saveProfile();">
+            <i class='bx bx-save'></i> Zapisz profil publiczny
+        </button>
+    </div>
+
+</div><!-- /.app-content -->
+
+<script>
+function updateExpYears() {
+    const startYear = parseInt(document.getElementById('startYearInput').value, 10);
+    const currentYear = new Date().getFullYear();
+    const hint = document.getElementById('expCalculatedHint');
+    if (!isNaN(startYear) && startYear > 1950 && startYear <= currentYear) {
+        const years = currentYear - startYear;
+        hint.innerHTML = `<i class='bx bx-check'></i> Staż: ${years} ${years === 1 ? 'rok' : (years < 5 ? 'lata' : 'lat')}`;
+        hint.className = 'text-primary fw-bold d-block mt-1';
+    } else {
+        hint.innerHTML = `<i class='bx bx-info-circle'></i> Podaj prawidłowy rok`;
+        hint.className = 'text-danger fw-bold d-block mt-1';
+    }
+}
+
+function toggleVisibility(checkbox) {
+    const dot = document.getElementById('visibilityDot');
+    const title = document.getElementById('visibilityTitle');
+    if (checkbox.checked) {
+        dot.className = 'status-indicator-dot active';
+        title.innerHTML = 'Widoczny w bazie biur podróży';
+    } else {
+        dot.className = 'status-indicator-dot';
+        title.innerHTML = 'Profil ukryty w bazie biur';
+    }
+}
+
+function saveProfile() {
+    const toast = document.getElementById('saveToast');
+    toast.classList.remove('d-none');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+function addNewCountry() {
+    const input = document.getElementById('newCountryInput');
+    const val = input.value.trim();
+    if (val) {
+        const container = document.getElementById('countryChips');
+        const span = document.createElement('span');
+        span.className = 'chip-tag primary';
+        span.innerHTML = '🌍 ' + val;
+        span.onclick = function() { this.classList.toggle('primary'); };
+        container.appendChild(span);
+        input.value = '';
+    }
+}
+</script>
+
+<?php include 'footer.php'; ?>

prototype/travel-leader-pilot/profile-reviews.php

@@ -0,0 +1,221 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Opinie Biur Podróży';
+include 'header.php';
+?>
+
+<div class="app-content">
+
+    <!-- Pasek powrotu -->
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <a href="profile.php" class="text-decoration-none d-flex align-items-center gap-1 text-muted" style="font-size: 0.85rem; font-weight: 600;">
+            <i class='bx bx-arrow-back fs-5'></i> Powrót do profilu
+        </a>
+        <span class="badge bg-light text-muted" style="font-size: 0.72rem;">Zweryfikowane przez Travel Manager</span>
+    </div>
+
+    <!-- Podsumowanie ocen (Rating Summary Hero) -->
+    <div class="section-card text-center mb-3">
+        <div class="d-flex align-items-center justify-content-center gap-2 mb-1">
+            <h2 class="fw-bold mb-0" style="color: var(--dark-navy); font-size: 2.2rem;">4.9</h2>
+            <div class="text-start">
+                <div class="text-warning" style="font-size: 1.1rem; line-height: 1;">
+                    <i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star-half'></i>
+                </div>
+                <small class="text-muted" style="font-size: 0.72rem;">na podstawie 18 ocen</small>
+            </div>
+        </div>
+        <div class="text-muted mb-3" style="font-size: 0.76rem;">100% biur poleca tego pilota na kolejne wyjazdy</div>
+
+        <!-- Rozbicie gwiazdek -->
+        <div class="d-flex flex-column gap-1" style="max-width: 260px; margin: 0 auto; font-size: 0.72rem;">
+            <div class="d-flex align-items-center gap-2">
+                <span style="width: 24px;">5★</span>
+                <div class="progress flex-grow-1" style="height: 6px;">
+                    <div class="progress-bar bg-warning" style="width: 89%;"></div>
+                </div>
+                <span class="text-muted" style="width: 20px;">16</span>
+            </div>
+            <div class="d-flex align-items-center gap-2">
+                <span style="width: 24px;">4★</span>
+                <div class="progress flex-grow-1" style="height: 6px;">
+                    <div class="progress-bar bg-warning" style="width: 11%;"></div>
+                </div>
+                <span class="text-muted" style="width: 20px;">2</span>
+            </div>
+            <div class="d-flex align-items-center gap-2">
+                <span style="width: 24px;">3★</span>
+                <div class="progress flex-grow-1" style="height: 6px;">
+                    <div class="progress-bar bg-warning" style="width: 0%;"></div>
+                </div>
+                <span class="text-muted" style="width: 20px;">0</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Filtry opinii -->
+    <div class="d-flex gap-2 overflow-x-auto pb-2 mb-3" style="white-space: nowrap;">
+        <button class="nav-pill-item active" style="font-size: 0.78rem; padding: 5px 12px;">Wszystkie (18)</button>
+        <button class="nav-pill-item" style="font-size: 0.78rem; padding: 5px 12px;">Włochy (12)</button>
+        <button class="nav-pill-item" style="font-size: 0.78rem; padding: 5px 12px;">Hiszpania (4)</button>
+        <button class="nav-pill-item" style="font-size: 0.78rem; padding: 5px 12px;">Grecja (2)</button>
+    </div>
+
+    <h6 class="fw-bold mb-3" style="color: var(--dark-navy); font-size: 0.9rem;">Opinie od Biur Podróży</h6>
+
+    <!-- Opinia 1 (Z już dodaną odpowiedzią pilota) -->
+    <div class="section-card mb-3">
+        <div class="d-flex justify-content-between align-items-start mb-2">
+            <div class="d-flex align-items-center gap-2">
+                <div class="rounded-circle d-flex align-items-center justify-content-center bg-primary-subtle text-primary fw-bold" style="width: 34px; height: 34px; font-size: 0.8rem;">
+                    AL
+                </div>
+                <div>
+                    <h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Biuro Podróży Almatur</h6>
+                    <small class="text-muted" style="font-size: 0.7rem;">Wycieczka: Klasyczne Włochy • Maj 2026</small>
+                </div>
+            </div>
+            <span class="badge bg-warning-subtle text-warning fw-bold" style="font-size: 0.72rem;">
+                <i class='bx bxs-star'></i> 5.0
+            </span>
+        </div>
+
+        <p class="mb-3 text-secondary" style="font-size: 0.82rem; line-height: 1.45;">
+            "Pan Oskar prowadził 8-dniowy objazd po Włoszech. Klienci byli zachwyceni jego wiedzą i empatią. Brak jakichkolwiek problemów organizacyjnych. Bardzo chętnie zarezerwujemy kolejne terminy na jesień."
+        </p>
+
+        <!-- Odpowiedź pilota (Już opublikowana) -->
+        <div class="p-3 rounded-3" style="background-color: #f6f7fe; border-left: 3px solid var(--primary);">
+            <div class="d-flex justify-content-between align-items-center mb-1">
+                <div class="d-flex align-items-center gap-1">
+                    <i class='bx bx-reply text-primary'></i>
+                    <span class="fw-bold" style="font-size: 0.76rem; color: var(--primary);">Twoja odpowiedź jako pilot</span>
+                </div>
+                <small class="text-muted" style="font-size: 0.68rem;">3 dni temu</small>
+            </div>
+            <p class="mb-0 text-secondary" style="font-size: 0.78rem; line-height: 1.4;">
+                Dziękuję serdecznie za zaufanie! Współpraca z koordynatorem trasy i grupą układała się wzorowo. Do zobaczenia na kolejnych wyjazdach!
+            </p>
+        </div>
+    </div>
+
+    <!-- Opinia 2 (Z możliwością dodania odpowiedzi przez formularz) -->
+    <div class="section-card mb-3" id="reviewCard2">
+        <div class="d-flex justify-content-between align-items-start mb-2">
+            <div class="d-flex align-items-center gap-2">
+                <div class="rounded-circle d-flex align-items-center justify-content-center bg-info-subtle text-info fw-bold" style="width: 34px; height: 34px; font-size: 0.8rem;">
+                    LT
+                </div>
+                <div>
+                    <h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Logos Tour Warszawa</h6>
+                    <small class="text-muted" style="font-size: 0.7rem;">Wycieczka: Andaluzja & Gibraltar • Kwiecień 2026</small>
+                </div>
+            </div>
+            <span class="badge bg-warning-subtle text-warning fw-bold" style="font-size: 0.72rem;">
+                <i class='bx bxs-star'></i> 4.8
+            </span>
+        </div>
+
+        <p class="mb-2 text-secondary" style="font-size: 0.82rem; line-height: 1.45;">
+            "Świetny kontakt telefoniczny i regularne raportowanie przebiegu trasy do centrali biura. Grupa bardzo zadowolona z realizacji programu mimo trudnych warunków pogodowych w górach."
+        </p>
+
+        <!-- Przycisk / formularz odpowiedzi -->
+        <div id="replyArea2">
+            <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-1 px-3 mt-1" style="font-size: 0.74rem;" onclick="toggleReplyBox(2);">
+                <i class='bx bx-reply'></i> Odpowiedz na opinię
+            </button>
+        </div>
+
+        <div id="replyForm2" class="d-none mt-2 p-3 rounded-3" style="background-color: #f8f9fd; border: 1px solid var(--border-color);">
+            <label class="form-label-custom mb-1" style="font-size: 0.76rem;">Napisz publiczną odpowiedź do biura:</label>
+            <textarea id="replyText2" class="form-control-custom mb-2" rows="2" placeholder="Podziękuj za współpracę lub odnieś się do szczegółów wycieczki..."></textarea>
+            <div class="d-flex justify-content-end gap-2">
+                <button type="button" class="btn btn-sm btn-light rounded-pill py-1 px-3" style="font-size: 0.72rem;" onclick="toggleReplyBox(2);">Anuluj</button>
+                <button type="button" class="btn btn-sm btn-primary rounded-pill py-1 px-3" style="font-size: 0.72rem;" onclick="publishReply(2);">Opublikuj odpowiedź</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Opinia 3 -->
+    <div class="section-card mb-4" id="reviewCard3">
+        <div class="d-flex justify-content-between align-items-start mb-2">
+            <div class="d-flex align-items-center gap-2">
+                <div class="rounded-circle d-flex align-items-center justify-content-center bg-success-subtle text-success fw-bold" style="width: 34px; height: 34px; font-size: 0.8rem;">
+                    RT
+                </div>
+                <div>
+                    <h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Rainbow Tours</h6>
+                    <small class="text-muted" style="font-size: 0.7rem;">Wycieczka: Sycylia w pigułce • Wrzesień 2025</small>
+                </div>
+            </div>
+            <span class="badge bg-warning-subtle text-warning fw-bold" style="font-size: 0.72rem;">
+                <i class='bx bxs-star'></i> 5.0
+            </span>
+        </div>
+
+        <p class="mb-2 text-secondary" style="font-size: 0.82rem; line-height: 1.45;">
+            "Wzorowy pilotaż i panowanie nad 45-osobową grupą. Zero opóźnień, kierowcy autokaru chwalili dyscyplinę i profesjonalizm pilota."
+        </p>
+
+        <!-- Przycisk odpowiedzi -->
+        <div id="replyArea3">
+            <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-1 px-3 mt-1" style="font-size: 0.74rem;" onclick="toggleReplyBox(3);">
+                <i class='bx bx-reply'></i> Odpowiedz na opinię
+            </button>
+        </div>
+
+        <div id="replyForm3" class="d-none mt-2 p-3 rounded-3" style="background-color: #f8f9fd; border: 1px solid var(--border-color);">
+            <label class="form-label-custom mb-1" style="font-size: 0.76rem;">Napisz publiczną odpowiedź do biura:</label>
+            <textarea id="replyText3" class="form-control-custom mb-2" rows="2" placeholder="Podziękuj za współpracę..."></textarea>
+            <div class="d-flex justify-content-end gap-2">
+                <button type="button" class="btn btn-sm btn-light rounded-pill py-1 px-3" style="font-size: 0.72rem;" onclick="toggleReplyBox(3);">Anuluj</button>
+                <button type="button" class="btn btn-sm btn-primary rounded-pill py-1 px-3" style="font-size: 0.72rem;" onclick="publishReply(3);">Opublikuj odpowiedź</button>
+            </div>
+        </div>
+    </div>
+
+</div><!-- /.app-content -->
+
+<script>
+function toggleReplyBox(id) {
+    const form = document.getElementById('replyForm' + id);
+    const area = document.getElementById('replyArea' + id);
+    if (form.classList.contains('d-none')) {
+        form.classList.remove('d-none');
+        area.classList.add('d-none');
+    } else {
+        form.classList.add('d-none');
+        area.classList.remove('d-none');
+    }
+}
+
+function publishReply(id) {
+    const textInput = document.getElementById('replyText' + id);
+    const val = textInput.value.trim();
+    if (!val) {
+        alert('Wpisz treść odpowiedzi przed publikacją.');
+        return;
+    }
+
+    const form = document.getElementById('replyForm' + id);
+    form.classList.add('d-none');
+
+    const replyArea = document.getElementById('replyArea' + id);
+    replyArea.innerHTML = `
+        <div class="p-3 rounded-3 mt-2" style="background-color: #f6f7fe; border-left: 3px solid var(--primary);">
+            <div class="d-flex justify-content-between align-items-center mb-1">
+                <div class="d-flex align-items-center gap-1">
+                    <i class='bx bx-reply text-primary'></i>
+                    <span class="fw-bold" style="font-size: 0.76rem; color: var(--primary);">Twoja odpowiedź jako pilot</span>
+                </div>
+                <small class="text-muted" style="font-size: 0.68rem;">Przed chwilą</small>
+            </div>
+            <p class="mb-0 text-secondary" style="font-size: 0.78rem; line-height: 1.4;">${val}</p>
+        </div>
+    `;
+    replyArea.classList.remove('d-none');
+}
+</script>
+
+<?php include 'footer.php'; ?>

prototype/travel-leader-pilot/profile.php

@@ -0,0 +1,215 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Mój Profil Pilota';
+include 'header.php';
+
+// Rok rozpoczęcia działalności jako pilot (z bazy danych / edycji)
+$startYear = 2019;
+$currentYear = (int)date('Y');
+$experienceYears = max(1, $currentYear - $startYear);
+?>
+
+<div class="app-content">
+
+    <!-- Pasek nagłówka profilu z akcjami -->
+    <!-- Pasek nagłówka profilu z akcjami i statusem bazy -->
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            <div class="d-flex align-items-center gap-2 mb-1">
+                <h5 class="fw-bold mb-0" style="color: var(--dark-navy);">Mój Profil</h5>
+                <span class="d-inline-flex align-items-center gap-1 text-success fw-bold" style="font-size: 0.7rem; background: #ecfdf5; padding: 2px 8px; border-radius: 99px; border: 1px solid #a7f3d0;">
+                    <span style="width: 6px; height: 6px; background-color: #10b981; border-radius: 50%;"></span> Aktywny w bazie
+                </span>
+            </div>
+            <small class="text-muted" style="font-size: 0.74rem;">Wizytówka widoczna dla biur podróży</small>
+        </div>
+        <a href="profile-edit.php" class="btn btn-sm btn-primary-custom py-2 px-3" style="width: auto; font-size: 0.78rem;">
+            <i class='bx bx-edit-alt'></i> Edytuj
+        </a>
+    </div>
+
+    <!-- Karta główna profilu (Hero - w 100% realne informacje pilota) -->
+    <div class="profile-hero">
+        <div class="profile-avatar-container">
+            <div class="profile-avatar-img d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #4f46e5, #7c3aed); color: white; font-size: 2.2rem; font-weight: 800;">
+                OK
+            </div>
+            <div class="profile-verified-badge" title="Zweryfikowany pilot TravelLeader">
+                <i class='bx bx-check'></i>
+            </div>
+        </div>
+
+        <h4 class="profile-name">Oskar Kaczmarek</h4>
+        <div class="profile-tagline">
+            <i class='bx bx-compass text-primary'></i> Licencjonowany Pilot Wycieczek & Przewodnik
+        </div>
+
+        <!-- Średnia ocen i liczba opinii od biur podróży -> przejście do nowego widoku profile-reviews.php -->
+        <a href="profile-reviews.php" class="rating-badge-pill text-decoration-none" title="Zobacz opinie i referencje biur">
+            <i class='bx bxs-star'></i>
+            <span>4.9 / 5.0</span>
+            <span class="text-muted fw-normal">(18 opinii od 6 biur)</span>
+            <i class='bx bx-chevron-right text-muted'></i>
+        </a>
+
+        <!-- Szybkie statystyki (staż wyliczany automatycznie z roku rozpoczęcia) -->
+        <div class="row g-2 mt-2 pt-2 border-top">
+            <div class="col-4">
+                <div class="fw-bold" style="font-size: 1.05rem; color: var(--dark-navy);"><?= $experienceYears ?> lat</div>
+                <div class="text-muted" style="font-size: 0.7rem;">Staż (od <?= $startYear ?>)</div>
+            </div>
+            <div class="col-4 border-start border-end">
+                <div class="fw-bold" style="font-size: 1.05rem; color: var(--primary);">42</div>
+                <div class="text-muted" style="font-size: 0.7rem;">Zrealizowanych</div>
+            </div>
+            <div class="col-4">
+                <div class="fw-bold" style="font-size: 1.05rem; color: #10b981;">100%</div>
+                <div class="text-muted" style="font-size: 0.7rem;">Dyspozycyjność</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Sekcja: Autoprezentacja / O mnie -->
+    <div class="section-card">
+        <div class="section-title">
+            <span><i class='bx bx-user-voice text-primary me-1'></i> O mnie</span>
+            <a href="profile-edit.php#bio" class="text-muted" style="font-size: 0.75rem;"><i class='bx bx-pencil'></i></a>
+        </div>
+        <p class="mb-0 text-secondary" style="font-size: 0.84rem; line-height: 1.5;">
+            Pasjonat kultury śródziemnomorskiej z wykształceniem historycznym. Od <?= $startYear ?> roku z sukcesami pilotuję wycieczki objazdowe po Włoszech, Hiszpanii i Bałkanach. Wyróżnia mnie opanowanie w sytuacjach kryzysowych, doskonały kontakt z grupą oraz płynna znajomość języka włoskiego i angielskiego.
+        </p>
+    </div>
+
+    <!-- Sekcja: Wideo-Wizytówka & Multimedia -->
+    <div class="section-card">
+        <div class="section-title">
+            <span><i class='bx bx-video text-primary me-1'></i> Wideo-Wizytówka i Zdjęcia</span>
+            <span class="badge bg-label-primary rounded-pill" style="font-size: 0.7rem;">Wideo + 4 foto</span>
+        </div>
+
+        <!-- Odtwarzacz wideo autoprezentacji -->
+        <div class="video-card-preview" onclick="alert('Odtwarzanie wideo-autoprezentacji pilota (1:15 min). Biuro podróży może posłuchać głosu i prezencji pilota przed wysłaniem zlecenia.');">
+            <div class="video-play-btn">
+                <i class='bx bx-play' style="margin-left: 3px;"></i>
+            </div>
+            <div class="fw-bold" style="font-size: 0.85rem;">Autoprezentacja dla biur (1:15 min)</div>
+            <small style="font-size: 0.72rem; opacity: 0.8;">Kliknij, aby odtworzyć próbkę</small>
+        </div>
+
+        <!-- Siatka zdjęć z tras -->
+        <div class="media-grid mt-2">
+            <div class="media-thumbnail d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #60a5fa, #3b82f6); color: white;">
+                <i class='bx bx-landscape fs-2'></i>
+            </div>
+            <div class="media-thumbnail d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #f59e0b, #d97706); color: white;">
+                <i class='bx bx-camera fs-2'></i>
+            </div>
+            <div class="media-thumbnail d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #10b981, #059669); color: white;">
+                <i class='bx bx-group fs-2'></i>
+            </div>
+        </div>
+    </div>
+
+    <!-- Sekcja: Obsługiwane Kraje i Destynacje -->
+    <div class="section-card">
+        <div class="section-title">
+            <span><i class='bx bx-globe text-primary me-1'></i> Kraje & Destynacje</span>
+            <a href="profile-edit.php#destynacje" class="text-muted" style="font-size: 0.75rem;"><i class='bx bx-pencil'></i></a>
+        </div>
+        <div class="d-flex flex-wrap">
+            <span class="chip-tag primary">🇮🇹 Włochy (Ekspert)</span>
+            <span class="chip-tag primary">🇬🇷 Grecja & Cyklady</span>
+            <span class="chip-tag primary">🇪🇸 Hiszpania & Andaluzja</span>
+            <span class="chip-tag">🇭🇷 Chorwacja</span>
+            <span class="chip-tag">🇳🇴 Norwegia (Fiordy)</span>
+            <span class="chip-tag">🇦🇹 Austria</span>
+        </div>
+    </div>
+
+    <!-- Sekcja: Języki Obce -->
+    <div class="section-card">
+        <div class="section-title">
+            <span><i class='bx bx-message-dots text-primary me-1'></i> Języki</span>
+            <a href="profile-edit.php#jezyki" class="text-muted" style="font-size: 0.75rem;"><i class='bx bx-pencil'></i></a>
+        </div>
+        <div class="d-flex flex-column gap-2">
+            <div class="d-flex justify-content-between align-items-center p-2 rounded-3" style="background: #f8f9fd;">
+                <div class="d-flex align-items-center gap-2">
+                    <span style="font-size: 1.1rem;">🇵🇱</span>
+                    <span class="fw-bold" style="font-size: 0.84rem;">Polski</span>
+                </div>
+                <span class="badge bg-light text-dark" style="font-size: 0.72rem;">Ojczysty</span>
+            </div>
+
+            <div class="d-flex justify-content-between align-items-center p-2 rounded-3" style="background: #f8f9fd;">
+                <div class="d-flex align-items-center gap-2">
+                    <span style="font-size: 1.1rem;">🇬🇧</span>
+                    <span class="fw-bold" style="font-size: 0.84rem;">Angielski</span>
+                </div>
+                <span class="badge bg-primary-subtle text-primary" style="font-size: 0.72rem;">C1 (Biegły)</span>
+            </div>
+
+            <div class="d-flex justify-content-between align-items-center p-2 rounded-3" style="background: #f8f9fd;">
+                <div class="d-flex align-items-center gap-2">
+                    <span style="font-size: 1.1rem;">🇮🇹</span>
+                    <span class="fw-bold" style="font-size: 0.84rem;">Włoski</span>
+                </div>
+                <span class="badge bg-primary-subtle text-primary" style="font-size: 0.72rem;">B2 (Płynny)</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Sekcja: Tagi & Specjalizacje -->
+    <div class="section-card">
+        <div class="section-title">
+            <span><i class='bx bx-purchase-tag-alt text-primary me-1'></i> Specjalizacje & Tagi</span>
+            <a href="profile-edit.php#tagi" class="text-muted" style="font-size: 0.75rem;"><i class='bx bx-pencil'></i></a>
+        </div>
+        <div class="d-flex flex-wrap">
+            <span class="chip-tag"><i class='bx bx-bus'></i> Wycieczki objazdowe</span>
+            <span class="chip-tag"><i class='bx bx-walk'></i> Trekking & góry</span>
+            <span class="chip-tag"><i class='bx bx-buildings'></i> Przewodnik miejski (Rzym, Florencja)</span>
+            <span class="chip-tag"><i class='bx bx-book-open'></i> Grupy młodzieżowe / szkolne</span>
+            <span class="chip-tag"><i class='bx bx-diamond'></i> Wyjazdy VIP / Incentive</span>
+            <span class="chip-tag"><i class='bx bx-wine'></i> Enoturystyka & kulinaria</span>
+        </div>
+    </div>
+
+    <!-- Sekcja: Kursy & Certyfikaty -->
+    <div class="section-card">
+        <div class="section-title">
+            <span><i class='bx bx-award text-primary me-1'></i> Certyfikaty i Szkolenia</span>
+            <a href="courses.php" class="text-primary fw-bold" style="font-size: 0.75rem;">Zobacz ofertę szkoleń &rarr;</a>
+        </div>
+
+        <div class="d-flex align-items-center gap-3 p-2 rounded-3 mb-2" style="background: #f8f9fd;">
+            <div class="d-flex align-items-center justify-content-center rounded-circle bg-success-subtle text-success" style="width: 36px; height: 36px;">
+                <i class='bx bx-badge-check fs-4'></i>
+            </div>
+            <div class="flex-grow-1">
+                <div class="fw-bold" style="font-size: 0.84rem; color: var(--dark-navy);">Superpilot Academy 2026</div>
+                <small class="text-muted" style="font-size: 0.72rem;">Certyfikat Pilotażu Europy Południowej</small>
+            </div>
+        </div>
+
+        <div class="d-flex align-items-center gap-3 p-2 rounded-3" style="background: #f8f9fd;">
+            <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary" style="width: 36px; height: 36px;">
+                <i class='bx bx-plus-medical fs-5'></i>
+            </div>
+            <div class="flex-grow-1">
+                <div class="fw-bold" style="font-size: 0.84rem; color: var(--dark-navy);">Kwalifikowana Pierwsza Pomoc (KPP)</div>
+                <small class="text-muted" style="font-size: 0.72rem;">Ważny do: 04.2028</small>
+            </div>
+        </div>
+    </div>
+
+    <!-- Przycisk edycji na dole -->
+    <div class="mb-4">
+        <a href="profile-edit.php" class="btn-primary-custom">
+            <i class='bx bx-edit'></i> Przejdź do edycji danych profilu
+        </a>
+    </div>
+
+</div><!-- /.app-content -->
+
+<?php include 'footer.php'; ?>

prototype/travel/app-orders.php

@@ -15,7 +15,8 @@ include '../../header-travel.php';
             <div class="d-flex flex-column flex-md-row gap-3 w-100" style="max-width: 600px;">
                 <div class="input-group input-group-merge w-100">
                     <span class="input-group-text" id="search-addon"><i class="bx bx-search"></i></span>
-                    <input type="text" class="form-control" placeholder="Szukaj wycieczki..." aria-label="Szukaj" aria-describedby="search-addon">
+                    <input type="text" class="form-control" placeholder="Szukaj wycieczki..." aria-label="Szukaj"
+                        aria-describedby="search-addon">
                 </div>
                 <select class="form-select w-100" style="max-width: 250px;">
                     <option value="all" selected>Wszystkie</option>
@@ -24,7 +25,8 @@ include '../../header-travel.php';
                 </select>
             </div>
             <div class="btn-group" role="group" aria-label="Status wycieczek">
-                <input type="radio" class="btn-check" name="statusFilter" id="btnRadioAktualne" autocomplete="off" checked>
+                <input type="radio" class="btn-check" name="statusFilter" id="btnRadioAktualne" autocomplete="off"
+                    checked>
                 <label class="btn btn-outline-primary" for="btnRadioAktualne">Aktualne</label>
 
                 <input type="radio" class="btn-check" name="statusFilter" id="btnRadioArchiwalne" autocomplete="off">
@@ -37,15 +39,20 @@ include '../../header-travel.php';
     <div class="card mb-4">
         <div class="card-header border-bottom d-flex justify-content-between align-items-center py-3">
             <div>
-                <h5 class="mb-2"><i class="bx bx-map-alt text-primary me-2"></i>Wycieczka #1024 - Włochy Klasyczne</h5>
-                <div class="d-flex align-items-center">
-                    <span class="badge bg-label-secondary me-3"><i class="bx bx-group me-1"></i> 45 osób</span>
-                    <div class="d-flex align-items-center">
-                        <div class="avatar avatar-sm me-2">
-                            <img src="assets/logo-sloneczko.png" alt="Logo" class="rounded-circle border">
-                        </div>
-                        <span class="fw-bold text-body">Biuro Podróży "Słoneczko"</span>
+                <div class="d-flex align-items-center mb-1">
+                    <div class="avatar avatar-xs me-2" style="cursor: default;">
+                        <img src="assets/logo-sloneczko.png" alt="Logo" class="rounded-circle border">
                     </div>
+                    <span class="fw-semibold text-secondary small">Biuro Podróży "Słoneczko"</span>
+                </div>
+                <div class="d-flex align-items-center flex-wrap gap-2">
+                    <h5 class="mb-0 fw-bold">
+                        <i class="bx bx-map-alt text-primary me-1"></i>Włochy Klasyczne (3 dni)
+                    </h5>
+                    <span class="badge bg-label-secondary d-inline-flex align-items-center"><i
+                            class="bx bx-tag-alt me-1"></i>ID #1024</span>
+                    <span class="badge bg-label-info d-inline-flex align-items-center"><i
+                            class="bx bx-group me-1"></i>40+3</span>
                 </div>
             </div>
             <div>
@@ -56,19 +63,21 @@ include '../../header-travel.php';
             <table class="table table-hover">
                 <thead>
                     <tr>
-                        <th>Data Od</th>
-                        <th>Data Do</th>
+                        <th>Zlecenie od</th>
+                        <th>Zlecenie do</th>
                         <th>Status</th>
+                        <th>Pliki</th>
                         <th>Akcje</th>
                     </tr>
                 </thead>
                 <tbody class="table-border-bottom-0">
                     <tr>
-                        <td>2024-05-10 08:00</td>
-                        <td>2024-05-12 18:00</td>
+                        <td>2024-05-10</td>
+                        <td>2024-05-12</td>
                         <td>
                             <div class="dropdown">
-                                <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button"
+                                    data-bs-toggle="dropdown" aria-expanded="false">
                                     Nowe
                                 </button>
                                 <ul class="dropdown-menu">
@@ -79,17 +88,23 @@ include '../../header-travel.php';
                             </div>
                         </td>
                         <td>
-                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#orderDetailsModal">
+                            <span class="badge bg-label-secondary" title="3 załączniki (do pobrania w szczegółach)"><i
+                                    class="bx bx-paperclip me-1"></i>3</span>
+                        </td>
+                        <td>
+                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal"
+                                data-bs-target="#orderDetailsModal">
                                 <i class="bx bx-search-alt-2 me-1"></i> Szczegóły
                             </button>
                         </td>
                     </tr>
                     <tr>
-                        <td>2024-05-15 09:00</td>
-                        <td>2024-05-17 20:00</td>
+                        <td>2024-05-15</td>
+                        <td>2024-05-17</td>
                         <td>
                             <div class="dropdown">
-                                <button class="btn btn-sm btn-outline-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                <button class="btn btn-sm btn-outline-warning dropdown-toggle" type="button"
+                                    data-bs-toggle="dropdown" aria-expanded="false">
                                     W realizacji
                                 </button>
                                 <ul class="dropdown-menu">
@@ -100,7 +115,12 @@ include '../../header-travel.php';
                             </div>
                         </td>
                         <td>
-                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#orderDetailsModal">
+                            <span class="badge bg-label-secondary" title="2 załączniki (do pobrania w szczegółach)"><i
+                                    class="bx bx-paperclip me-1"></i>2</span>
+                        </td>
+                        <td>
+                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal"
+                                data-bs-target="#orderDetailsModal">
                                 <i class="bx bx-search-alt-2 me-1"></i> Szczegóły
                             </button>
                         </td>
@@ -114,15 +134,20 @@ include '../../header-travel.php';
     <div class="card mb-4">
         <div class="card-header border-bottom d-flex justify-content-between align-items-center py-3">
             <div>
-                <h5 class="mb-2"><i class="bx bx-map-alt text-primary me-2"></i>Wycieczka #1080 - Złota Praga</h5>
-                <div class="d-flex align-items-center">
-                    <span class="badge bg-label-secondary me-3"><i class="bx bx-group me-1"></i> 30 osób</span>
-                    <div class="d-flex align-items-center">
-                        <div class="avatar avatar-sm me-2">
-                            <img src="assets/logo-adventure.png" alt="Logo" class="rounded-circle border">
-                        </div>
-                        <span class="fw-bold text-body">Biuro Podróży "Adventure"</span>
+                <div class="d-flex align-items-center mb-1">
+                    <div class="avatar avatar-xs me-2" style="cursor: default;">
+                        <img src="assets/logo-adventure.png" alt="Logo" class="rounded-circle border">
                     </div>
+                    <span class="fw-semibold text-secondary small">Biuro Podróży "Adventure"</span>
+                </div>
+                <div class="d-flex align-items-center flex-wrap gap-2">
+                    <h5 class="mb-0 fw-bold">
+                        <i class="bx bx-map-alt text-primary me-1"></i>Złota Praga (3 dni)
+                    </h5>
+                    <span class="badge bg-label-secondary d-inline-flex align-items-center"><i
+                            class="bx bx-tag-alt me-1"></i>ID #1080</span>
+                    <span class="badge bg-label-info d-inline-flex align-items-center"><i
+                            class="bx bx-group me-1"></i>30+2</span>
                 </div>
             </div>
             <div>
@@ -133,19 +158,21 @@ include '../../header-travel.php';
             <table class="table table-hover">
                 <thead>
                     <tr>
-                        <th>Data Od</th>
-                        <th>Data Do</th>
+                        <th>Zlecenie od</th>
+                        <th>Zlecenie do</th>
                         <th>Status</th>
+                        <th>Pliki</th>
                         <th>Akcje</th>
                     </tr>
                 </thead>
                 <tbody class="table-border-bottom-0">
                     <tr>
-                        <td>2024-06-01 06:00</td>
-                        <td>2024-06-03 22:00</td>
+                        <td>2024-06-01</td>
+                        <td>2024-06-03</td>
                         <td>
                             <div class="dropdown">
-                                <button class="btn btn-sm btn-outline-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                <button class="btn btn-sm btn-outline-success dropdown-toggle" type="button"
+                                    data-bs-toggle="dropdown" aria-expanded="false">
                                     Zakończone
                                 </button>
                                 <ul class="dropdown-menu">
@@ -156,7 +183,12 @@ include '../../header-travel.php';
                             </div>
                         </td>
                         <td>
-                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#orderDetailsModal">
+                            <span class="badge bg-label-secondary" title="1 załącznik (do pobrania w szczegółach)"><i
+                                    class="bx bx-paperclip me-1"></i>1</span>
+                        </td>
+                        <td>
+                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal"
+                                data-bs-target="#orderDetailsModal">
                                 <i class="bx bx-search-alt-2 me-1"></i> Szczegóły
                             </button>
                         </td>
@@ -173,48 +205,76 @@ include '../../header-travel.php';
     <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="orderDetailsModalLabel">Szczegóły zlecenia</h5>
+                <h5 class="modal-title" id="orderDetailsModalLabel">Szczegóły zlecenia | Wycieczka #1234</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
             </div>
             <div class="modal-body">
                 <div class="row mb-3">
                     <div class="col-12">
-                        <h6 class="fw-bold mb-2">Szczegóły wycieczki</h6>
+                        <h6 class="fw-bold mb-2">Szczegóły zlecenia</h6>
                         <div class="p-3 bg-lighter rounded">
                             <div class="row">
-                                <div class="col-md-6 mb-3">
-                                    <small class="text-muted d-block">Wycieczka</small>
-                                    <span class="fw-medium">KADR w Bieszczady</span><br>
-                                    <span class="text-muted small">2026-04-25 &ndash; 2026-04-26</span>
+                                <div class="col-md-3 col-6 mb-3">
+                                    <small class="text-muted d-block">Zlecenie od</small>
+                                    <span class="fw-medium">2024-05-10</span>
+                                </div>
+                                <div class="col-md-3 col-6 mb-3">
+                                    <small class="text-muted d-block">Zlecenie do</small>
+                                    <span class="fw-medium">2024-05-12</span>
                                 </div>
                                 <div class="col-md-6 mb-3">
-                                    <small class="text-muted d-block">Data wycieczki</small>
-                                    <span>2026-04-25 &ndash; 2026-04-25</span>
+                                    <small class="text-muted d-block">Wycieczka</small>
+                                    <span class="fw-medium">Włochy Klasyczne (3 dni)</span><br>
+                                    <span class="text-muted small">24.08.2024 - 26.08.2024</span>
+                                </div>
+                                <div class="col-md-6 mb-3">
+                                    <small class="text-muted d-block">Liczba osób</small>
+                                    <span>40+3</span>
                                 </div>
                                 <div class="col-md-6 mb-3">
                                     <small class="text-muted d-block">Status</small>
-                                    <span>Brak statusu</span>
+                                    <span class="badge bg-label-primary">Nowe</span>
                                 </div>
                                 <div class="col-md-6 mb-3">
-                                    <small class="text-muted d-block">Operator</small>
-                                    <span>Biuro Podróży Adventure</span>
+                                    <small class="text-muted d-block">Zleceniodawca</small>
+                                    <span>Biuro Podróży "Słoneczko"</span>
                                 </div>
-                                <div class="col-md-6 mb-3 mb-md-0">
+                                <div class="col-md-6 mb-3">
                                     <small class="text-muted d-block">Organizacja</small>
                                     <span>Szkoła Podstawowa nr 1 w Warszawie, Związek Turystyki Młodzieżowej</span>
                                 </div>
                                 <div class="col-md-6 mb-3">
-                                    <small class="text-muted d-block">Klient</small>
-                                    <span>Bartłomiej Banaczyk</span>
+                                    <small class="text-muted d-block">Przedstawiciel zleceniodawcy</small>
+                                    <span class="fw-medium text-body">Bartłomiej Banaczyk</span>
+                                    <div class="small d-flex flex-wrap gap-3 mt-1">
+                                        <a href="tel:+48600100200"
+                                            class="text-decoration-none text-secondary d-inline-flex align-items-center">
+                                            <i class="bi bi-telephone text-primary me-1"></i>+48 600 100 200
+                                        </a>
+                                        <a href="mailto:b.banaczyk@sloneczko.pl"
+                                            class="text-decoration-none text-secondary d-inline-flex align-items-center">
+                                            <i class="bi bi-envelope text-primary me-1"></i>b.banaczyk@sloneczko.pl
+                                        </a>
+                                    </div>
                                 </div>
-                                <div class="col-12 mb-3">
-                                    <small class="text-muted d-block mb-1">Miejsce podstawienia autokaru</small>
-                                    <a href="https://maps.google.com/?q=Warszawa,+Plac+Defilad+1" target="_blank" class="fw-medium text-primary text-decoration-none" style="display:inline-flex; align-items:center;">
-                                        <i class="bx bx-map me-1"></i>Warszawa, Plac Defilad 1 (Parking pod PKiN), godz. 07:30 <i class="bx bx-link-external ms-2"></i>
+                                <div class="col-md-6 mb-3">
+                                    <small class="text-muted d-block mb-1">Miejsce podstawienia</small>
+                                    <a href="https://maps.google.com/?q=Warszawa,+Plac+Defilad+1" target="_blank"
+                                        class="fw-medium text-primary text-decoration-none"
+                                        style="display:inline-flex; align-items:center;">
+                                        <i class="bx bx-map me-1"></i>Warszawa, Plac Defilad 1 (Parking pod PKiN) <i
+                                            class="bx bx-link-external ms-2"></i>
                                     </a>
                                 </div>
+                                <div class="col-md-6 mb-3">
+                                    <small class="text-muted d-block mb-1">Data i godzina podstawienia</small>
+                                    <span class="fw-medium text-body d-inline-flex align-items-center">
+                                        <i class="bx bx-time-five text-primary me-1"></i>2024-05-10, godz. 07:30
+                                    </span>
+                                </div>
                                 <div class="col-12">
-                                    <small class="text-muted d-block mb-2">Załączniki od organizatora</small>
+                                    <small class="text-muted d-block mb-2"><i
+                                            class="bx bx-paperclip me-1"></i>Załączniki od organizatora (3)</small>
                                     <div class="d-flex flex-wrap gap-2">
                                         <a href="javascript:void(0);" class="btn btn-sm btn-outline-secondary">
                                             <i class="bx bx-download me-1"></i> Karta wycieczki
@@ -231,24 +291,34 @@ include '../../header-travel.php';
                         </div>
                     </div>
                 </div>
-                
+
                 <hr>
-                
+
                 <div class="row">
                     <div class="col-12">
                         <h6 class="fw-bold mb-3">Dane realizacyjne transportu</h6>
-                        <p class="text-muted small mb-4">Prosimy o uzupełnienie danych wymaganych do realizacji zlecenia oraz aktualizację statusu.</p>
+                        <p class="text-muted small mb-4">Prosimy o uzupełnienie danych wymaganych do realizacji zlecenia
+                            oraz aktualizację statusu.</p>
                     </div>
                     <div class="col-md-12 mb-4">
                         <label class="form-label fw-bold text-primary d-block">Status zlecenia</label>
                         <div class="dropdown">
-                            <button class="btn btn-outline-primary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                <span><span class="badge bg-label-primary me-2">Nowe</span> Oczekuje na realizację</span>
+                            <button
+                                class="btn btn-outline-primary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center"
+                                type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                <span><span class="badge bg-label-primary me-2">Nowe</span> Oczekuje na
+                                    realizację</span>
                             </button>
                             <ul class="dropdown-menu w-100">
-                                <li><a class="dropdown-item" href="javascript:void(0);"><span class="badge bg-label-primary me-2">Nowe</span> Oczekuje na realizację</a></li>
-                                <li><a class="dropdown-item" href="javascript:void(0);"><span class="badge bg-label-warning me-2">W realizacji</span> Przejazd w trakcie</a></li>
-                                <li><a class="dropdown-item" href="javascript:void(0);"><span class="badge bg-label-success me-2">Zakończone</span> Przejazd zrealizowany</a></li>
+                                <li><a class="dropdown-item" href="javascript:void(0);"><span
+                                            class="badge bg-label-primary me-2">Nowe</span> Oczekuje na realizację</a>
+                                </li>
+                                <li><a class="dropdown-item" href="javascript:void(0);"><span
+                                            class="badge bg-label-warning me-2">W realizacji</span> Przejazd w
+                                        trakcie</a></li>
+                                <li><a class="dropdown-item" href="javascript:void(0);"><span
+                                            class="badge bg-label-success me-2">Zakończone</span> Przejazd
+                                        zrealizowany</a></li>
                             </ul>
                         </div>
                     </div>
@@ -268,6 +338,20 @@ include '../../header-travel.php';
                         <label for="driverPhone" class="form-label">Telefon do kierowcy</label>
                         <input type="text" id="driverPhone" class="form-control" placeholder="+48...">
                     </div>
+                    <div class="col-12 mb-3">
+                        <label class="form-label">Notatka do zlecenia</label>
+                        <div class="p-3 bg-lighter rounded border">
+                            <div class="d-flex align-items-start gap-2">
+                                <i class="bx bx-message-square-detail text-primary fs-5 mt-1"></i>
+                                <div>
+                                    <small class="text-muted d-block mb-1">Komunikat od zleceniodawcy:</small>
+                                    <div class="text-body">
+                                        Prosimy o podstawienie autokaru minimum 15 minut przed czasem. Sprawny mikrofon dla przewodnika oraz klimatyzacja są wymagane. Kierowca proszony o kontakt z pilotem po dotarciu na parking.
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
                 <hr>
@@ -299,9 +383,11 @@ include '../../header-travel.php';
                         <small class="text-muted">Wyliczane automatycznie</small>
                     </div>
                     <div class="col-md-12 mb-3">
-                        <label for="parkingCosts" class="form-label text-warning fw-bold">Opłaty drogowe (Edytowalne)</label>
+                        <label for="parkingCosts" class="form-label text-warning fw-bold">Opłaty drogowe
+                            (Edytowalne)</label>
                         <div class="input-group">
-                            <input type="number" id="parkingCosts" class="form-control border-warning" placeholder="0.00" step="0.01">
+                            <input type="number" id="parkingCosts" class="form-control border-warning"
+                                placeholder="0.00" step="0.01">
                             <span class="input-group-text border-warning">PLN</span>
                         </div>
                     </div>
@@ -319,4 +405,4 @@ include '../../header-travel.php';
 
 </body>
 
-</html>
+</html>

prototype/travel/menu.php

@@ -32,6 +32,13 @@ $supplierAppPages = ['app-orders.php', 'app-travel-agencies.php'];
                     <div data-i18n="Dostawcy usług">Dostawcy usług</div>
                 </a>
             </li>
+            <li class="menu-item">
+                <a href="../superpilot-web/index.php" class="menu-link text-primary fw-semibold">
+                    <i class="menu-icon tf-icons bx bx-compass text-primary"></i>
+                    <div data-i18n="Baza Pilotów">Baza Pilotów Superpilot</div>
+                    <span class="badge bg-label-primary rounded-pill ms-auto" style="font-size: 0.65rem;">NOWOŚĆ</span>
+                </a>
+            </li>
 
             <li class="menu-item <?php echo in_array($currentPage, $clientsPages, true) ? 'active open' : ''; ?>">
                 <a href="javascript:void(0);" class="menu-link menu-toggle">