poprawki dla bazy pilotów web, modul zaproszen w apce mobile

This commit is contained in:
oskarn
2026-09-21 16:17:27 +02:00
parent 8c42888f52
commit d17cba2bbb
37 changed files with 2271 additions and 833 deletions
-17
View File
@@ -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
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

@@ -461,6 +461,14 @@ body {
position: relative;
}
.pilot-offer-avatar .pilot-avatar-img {
width: 100%;
height: 100%;
border-radius: 14px;
object-fit: cover;
display: block;
}
.pilot-offer-avatar .verified-badge-mini {
position: absolute;
bottom: -3px;
@@ -475,6 +483,36 @@ body {
justify-content: center;
font-size: 0.7rem;
border: 2px solid #ffffff;
z-index: 2;
}
.pilot-card-gallery-preview {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
}
.pilot-card-gallery-preview img {
width: 60px;
height: 40px;
border-radius: 6px;
object-fit: cover;
border: 1px solid var(--border-color);
transition: transform 0.15s ease, box-shadow 0.15s ease;
cursor: pointer;
}
.pilot-card-gallery-preview img:hover {
transform: scale(1.08);
box-shadow: var(--shadow-subtle);
}
.pilot-card-gallery-preview .gallery-more-badge {
font-size: 0.7rem;
color: var(--text-muted);
font-weight: 600;
margin-left: 2px;
}
.pilot-offer-content {
@@ -771,6 +809,14 @@ body {
box-shadow: 0 4px 12px rgba(92, 96, 245, 0.2);
}
.profile-avatar-large .profile-avatar-img {
width: 100%;
height: 100%;
border-radius: 18px;
object-fit: cover;
display: block;
}
.profile-avatar-large .large-verified-badge {
position: absolute;
bottom: -3px;
@@ -852,11 +898,11 @@ body {
}
.profile-stats-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.85rem;
padding-top: 1.25rem;
margin-top: 1.25rem;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
padding-top: 1rem;
margin-top: 1rem;
border-top: 1px solid var(--border-subtle);
}
@@ -864,22 +910,23 @@ body {
background: #f8f9fd;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.75rem 1rem;
padding: 0.5rem 0.9rem;
display: flex;
flex-direction: column;
align-items: baseline;
gap: 0.55rem;
}
.profile-stat-box .stat-val {
font-size: 1.15rem;
font-size: 0.92rem;
font-weight: 700;
color: var(--dark-navy);
line-height: 1.2;
white-space: nowrap;
}
.profile-stat-box .stat-lbl {
font-size: 0.74rem;
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 2px;
}
/* Karty sekcji profilu */
@@ -934,10 +981,10 @@ body {
/* Wideo i Zdjęcia */
.profile-video-box {
position: relative;
border-radius: var(--radius-md);
border-radius: var(--radius-sm);
overflow: hidden;
height: 200px;
background: linear-gradient(135deg, #1e2244 0%, #0f172a 100%);
height: 160px;
background: linear-gradient(135deg, #1e2244 0%, #111827 100%);
cursor: pointer;
display: flex;
align-items: center;
@@ -952,15 +999,15 @@ body {
}
.profile-video-play-btn {
width: 52px;
height: 52px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--primary);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
font-size: 1.4rem;
box-shadow: 0 4px 14px rgba(92, 96, 245, 0.4);
transition: transform 0.15s ease;
}
@@ -969,15 +1016,56 @@ body {
transform: scale(1.08);
}
.profile-photos-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 1rem;
.pilot-gallery-filters {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.gallery-filter-btn {
background: #f1f3f9;
color: var(--text-body);
border: 1px solid var(--border-color);
font-size: 0.74rem;
font-weight: 600;
padding: 3px 10px;
border-radius: var(--radius-full);
transition: all 0.15s ease;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
line-height: 1.4;
}
.gallery-filter-btn:hover {
background: #e6e9f5;
color: var(--dark-navy);
}
.gallery-filter-btn.active {
background: var(--primary);
color: #ffffff;
border-color: var(--primary);
box-shadow: 0 2px 6px rgba(92, 96, 245, 0.25);
}
.gallery-filter-btn .badge-count {
font-size: 0.68rem;
opacity: 0.85;
}
.gallery-photo-item {
transition: transform 0.2s ease, opacity 0.2s ease;
}
.gallery-photo-item.is-hidden {
display: none !important;
}
.profile-photo-thumb {
height: 85px;
height: 94px;
border-radius: var(--radius-sm);
overflow: hidden;
cursor: pointer;
@@ -985,24 +1073,201 @@ body {
border: 1px solid var(--border-color);
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: 600;
font-size: 0.78rem;
flex-direction: column;
justify-content: flex-end;
padding: 8px 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.profile-photo-thumb:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
border-color: var(--primary-border);
}
.profile-photo-thumb .photo-tag-title {
font-size: 0.76rem;
font-weight: 700;
color: #ffffff;
line-height: 1.2;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.profile-photo-thumb .photo-tag-sub {
font-size: 0.66rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.2;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.profile-photo-thumb .photo-zoom-hint {
position: absolute;
top: 8px;
right: 8px;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.82rem;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.profile-photo-thumb:hover .photo-zoom-hint {
opacity: 1;
transform: scale(1.05);
}
/* Modal Zaawansowanej Galerii (Lightbox Pro) */
.gallery-modal-content {
background: #0f172a;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.modal-gallery-filters {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.modal-filter-btn {
background: rgba(255, 255, 255, 0.08);
color: #94a3b8;
border: 1px solid rgba(255, 255, 255, 0.12);
font-size: 0.76rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 50px;
transition: all 0.2s ease;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
}
.modal-filter-btn:hover {
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
}
.modal-filter-btn.active {
background: var(--primary);
color: #ffffff;
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(92, 96, 245, 0.4);
}
.modal-filter-btn .count {
font-size: 0.7rem;
opacity: 0.8;
}
.gallery-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 460px;
max-height: 68vh;
background: #070b14;
border-radius: 12px;
overflow: hidden;
}
.gallery-stage img {
max-height: 68vh;
max-width: 100%;
object-fit: contain;
transition: opacity 0.2s ease-in-out;
}
.gallery-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
font-size: 1.35rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
z-index: 10;
}
.gallery-nav-btn:hover {
background: var(--primary);
color: #ffffff;
border-color: var(--primary);
transform: translateY(-50%) scale(1.08);
}
.gallery-nav-btn.prev {
left: 12px;
}
.gallery-nav-btn.next {
right: 12px;
}
.modal-gallery-thumbs {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 6px 2px 2px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.modal-gallery-thumb-item {
width: 68px;
height: 46px;
border-radius: 6px;
flex-shrink: 0;
cursor: pointer;
overflow: hidden;
position: relative;
border: 2px solid transparent;
opacity: 0.45;
transition: all 0.2s ease;
background-size: cover;
background-position: center;
}
.modal-gallery-thumb-item:hover {
opacity: 0.85;
transform: translateY(-2px);
}
.modal-gallery-thumb-item.active {
opacity: 1;
border-color: var(--primary);
box-shadow: 0 0 10px rgba(92, 96, 245, 0.55);
transform: scale(1.04);
}
/* Recenzje i opinie */
.rating-breakdown-card {
background: #f8f9fd;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 1.25rem;
border-radius: var(--radius-md);
padding: 1.25rem 1.5rem;
}
.review-card-item {
+163
View File
@@ -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>
@@ -83,21 +83,49 @@
</div>
</div>
<!-- Modal Podglądu Zdjęć ze Szlaków (Lightbox) -->
<!-- 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-lg">
<div class="modal-content border-0 shadow-lg bg-dark text-white" style="border-radius: var(--sp-radius-md); overflow: hidden;">
<div class="modal-header border-0 pb-0">
<h6 class="modal-title fw-bold text-white mb-0" id="lightboxTitle">Zdjęcie z trasy</h6>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
<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>
<div class="modal-body p-4 text-center">
<div class="rounded-3 d-flex align-items-center justify-content-center p-5 mb-2" id="lightboxPlaceholder" style="min-height: 380px; background: linear-gradient(135deg, #1e293b, #334155); color: white;">
<div class="text-center">
<i class='bx bx-landscape' style="font-size: 4rem; opacity: 0.8;"></i>
<h5 class="fw-bold mt-2" id="lightboxSubtext">Florencja & Toskania — Grupa objazdowa Almatur</h5>
<p class="text-white-50 small">Fotografia wykonana podczas realizacji programu autokarowego • Wrzesień 2026</p>
<!-- 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>
@@ -388,7 +388,7 @@ include __DIR__ . '/header.php';
data-dates-free="05-15-sep 25-30-sep październik-2027">
<div class="pilot-offer-avatar">
OK
<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>
@@ -443,6 +443,14 @@ include __DIR__ . '/header.php';
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">
@@ -476,9 +484,9 @@ include __DIR__ . '/header.php';
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, #059669 0%, #34d399 100%);">
AL
<div class="verified-badge-mini">
<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>
@@ -527,6 +535,14 @@ include __DIR__ . '/header.php';
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">
@@ -86,63 +86,61 @@ include __DIR__ . '/header.php';
</div>
</div>
<div class="table-responsive text-nowrap">
<table class="table table-hover align-middle mb-0">
<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 18px;">Wycieczka & Termin</th>
<th>Pilot</th>
<th>Stawka dzienna</th>
<th>Status w aplikacji pilota</th>
<th>Data wysłania</th>
<th class="text-end" style="padding: 12px 18px;">Akcje</th>
<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: 14px 18px;">
<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.8rem; flex-shrink: 0;">
<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">Wycieczka #15: Magia Toskanii i Rzym</div>
<small class="text-muted"><i class='bx bx-calendar'></i> 05.10.2027 – 12.10.2027 (8 dni)</small>
<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>
<td style="padding: 12px 14px;">
<div class="d-flex align-items-center gap-2">
<div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold" style="width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary) 0%, #767bf7 100%); font-size: 0.78rem; flex-shrink: 0;">
OK
</div>
<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">Oskar Kaczmarek</a>
<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>
<strong class="text-navy">550 PLN</strong> <small class="text-muted">/ dzień netto</small>
<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>
<span class="badge bg-warning-subtle text-warning fw-bold px-3 py-1 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.74rem;">
<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;">Powiadomienie PUSH doręczone (18h na odpowiedź)</small>
<small class="text-muted d-block mt-1" style="font-size: 0.7rem;">18h na odpowiedź w mobile</small>
</td>
<td>
<td style="padding: 12px 14px;">
<span class="text-muted small">Dziś, 09:15</span>
</td>
<td class="text-end" style="padding: 14px 18px;">
<div class="d-flex align-items-center justify-content-end gap-1">
<button type="button" class="btn btn-sm btn-outline-primary" style="font-size: 0.76rem;" onclick="showToastNotification('Przypomnienie PUSH wysłane!', 'Wysłano ponowny alert na telefon pilota Oskara Kaczmarka.');">
<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.76rem;" title="Profil pilota">
<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>
@@ -151,47 +149,45 @@ include __DIR__ . '/header.php';
<!-- Pozycja 2: Wycieczka #12 (Oskar Kaczmarek - potwierdzona) -->
<tr class="inquiry-row" data-status="confirmed">
<td style="padding: 14px 18px;">
<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.8rem; flex-shrink: 0;">
<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">Wycieczka #12: Klasyczne Włochy (oskar prod)</div>
<small class="text-muted"><i class='bx bx-calendar'></i> 16.09.2027 – 24.09.2027 (9 dni)</small>
<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>
<td style="padding: 12px 14px;">
<div class="d-flex align-items-center gap-2">
<div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold" style="width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary) 0%, #767bf7 100%); font-size: 0.78rem; flex-shrink: 0;">
OK
</div>
<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">Oskar Kaczmarek</a>
<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>
<strong class="text-navy">550 PLN</strong> <small class="text-muted">/ dzień netto</small>
<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>
<span class="badge bg-success-subtle text-success fw-bold px-3 py-1 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.74rem;">
<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 TravelLeader Mobile</small>
<small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Potwierdzone w mobile</small>
</td>
<td>
<td style="padding: 12px 14px;">
<span class="text-muted small">Wczoraj, 14:22</span>
</td>
<td class="text-end" style="padding: 14px 18px;">
<div class="d-flex align-items-center justify-content-end gap-1">
<button type="button" class="btn btn-sm btn-light border text-muted" style="font-size: 0.76rem;" onclick="alert('Generowanie umowy zlecenia dla pilota Oskara Kaczmarka (Klasyczne Włochy)...');">
<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.76rem;">
<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>
@@ -200,47 +196,45 @@ include __DIR__ . '/header.php';
<!-- Pozycja 3: Norwegia (Anna Lewandowska - potwierdzona) -->
<tr class="inquiry-row" data-status="confirmed">
<td style="padding: 14px 18px;">
<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.8rem; flex-shrink: 0;">
<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">Wycieczka #18: Fiordy Norwegii & Bergen</div>
<small class="text-muted"><i class='bx bx-calendar'></i> 12.08.2027 – 19.08.2027 (8 dni)</small>
<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>
<td style="padding: 12px 14px;">
<div class="d-flex align-items-center gap-2">
<div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold" style="width: 32px; height: 32px; background: linear-gradient(135deg, #059669, #10b981); font-size: 0.78rem; flex-shrink: 0;">
AL
</div>
<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">Anna Lewandowska</span>
<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>
<strong class="text-navy">650 PLN</strong> <small class="text-muted">/ dzień netto</small>
<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>
<span class="badge bg-success-subtle text-success fw-bold px-3 py-1 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.74rem;">
<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>
<td style="padding: 12px 14px;">
<span class="text-muted small">3 dni temu</span>
</td>
<td class="text-end" style="padding: 14px 18px;">
<div class="d-flex align-items-center justify-content-end gap-1">
<button type="button" class="btn btn-sm btn-light border text-muted" style="font-size: 0.76rem;" onclick="alert('Generowanie umowy zlecenia dla pilotki Anny Lewandowskiej...');">
<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.76rem;">
<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>
@@ -249,45 +243,45 @@ include __DIR__ . '/header.php';
<!-- Pozycja 4: Wycieczka zrealizowana (Do oceny / Zrecenzowana) -->
<tr class="inquiry-row" data-status="completed">
<td style="padding: 14px 18px;">
<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.8rem; flex-shrink: 0;">
<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">Wycieczka #8: Klasyczne Włochy (Maj 2026)</div>
<small class="text-muted"><i class='bx bx-calendar'></i> Zrealizowana pomyślnie</small>
<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>
<td style="padding: 12px 14px;">
<div class="d-flex align-items-center gap-2">
<div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold" style="width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary) 0%, #767bf7 100%); font-size: 0.78rem; flex-shrink: 0;">
OK
</div>
<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">Oskar Kaczmarek</a>
<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>
<strong class="text-navy">500 PLN</strong> <small class="text-muted">/ dzień netto</small>
<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>
<span class="badge bg-primary-subtle text-primary fw-bold px-3 py-1 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.74rem;">
<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>
<td style="padding: 12px 14px;">
<span class="text-muted small">Maj 2026</span>
</td>
<td class="text-end" style="padding: 14px 18px;">
<a href="pilot-profile.php#opinie" class="btn btn-sm btn-outline-primary" style="font-size: 0.76rem;">
Zobacz opinię &rarr;
</a>
<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>
@@ -25,7 +25,7 @@ $experienceYears = max(1, $currentYear - $startYear);
<!-- Lewa strona Hero: Awatar, dane, ranga -->
<div class="d-flex align-items-start gap-4">
<div class="profile-avatar-large">
OK
<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>
@@ -33,14 +33,7 @@ $experienceYears = max(1, $currentYear - $startYear);
<div>
<div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
<h2 class="profile-name">Oskar Kaczmarek</h2>
<span class="profile-badge-available">
<span class="status-dot"></span>
Dostępny dla biur
</span>
<span class="pilot-academy-badge">
<i class='bx bx-check-shield'></i> Superpilot Academy 2026
</span>
<h2 class="profile-name mb-0">Oskar Kaczmarek</h2>
</div>
<div class="text-muted mb-2" style="font-size: 0.88rem;">
@@ -68,39 +61,22 @@ $experienceYears = max(1, $currentYear - $startYear);
</div>
</div>
<!-- Prawa strona Hero: Główne akcje rezerwacji i kontaktu -->
<div class="d-flex flex-column gap-2 text-end">
<button type="button" class="btn btn-primary px-4 py-2 fw-semibold" style="font-size: 0.88rem; border-radius: var(--radius-sm);" onclick="openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 - 24.09.2027')">
<i class='bx bx-calendar-plus me-1'></i> Zarezerwuj termin / Wyślij zapytanie
<!-- 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>
<div class="d-flex gap-2 justify-content-end">
<a href="tel:+48600123456" class="btn btn-outline-secondary btn-sm" style="font-size: 0.78rem;">
<i class='bx bx-phone me-1'></i> +48 600 123 456
</a>
<button type="button" class="btn btn-outline-secondary btn-sm" style="font-size: 0.78rem;" onclick="this.classList.toggle('text-warning'); this.innerHTML = (this.classList.contains('text-warning') ? '<i class=\'bx bxs-bookmark me-1\'></i> Zapisano' : '<i class=\'bx bx-bookmark me-1\'></i> Zapisz');">
<i class='bx bx-bookmark me-1'></i> Zapisz
</button>
</div>
<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>
<!-- Pasek 3 spokojnych wskaźników jakości (Zgodnie z wytycznymi: bez zbędnego licznika zrealizowanych) -->
<div class="profile-stats-strip">
<div class="profile-stat-box">
<div class="stat-val"><?= $experienceYears ?> lat doświadczenia</div>
<div class="stat-lbl">Ciągła praktyka pilotażu tras objazdowych od <?= $startYear ?> r.</div>
</div>
<div class="profile-stat-box">
<div class="stat-val text-success">100% dyspozycyjności</div>
<div class="stat-lbl">Wszystkie potwierdzone zlecenia zrealizowane bez odwołań</div>
</div>
<div class="profile-stat-box">
<div class="stat-val" style="color: var(--primary);">100% poleceń biur</div>
<div class="stat-lbl">Każde biuro podróży deklaruje chęć ponownej współpracy</div>
</div>
</div>
</div>
<!-- Główny układ 2-kolumnowy (2/3 Zawartość merytoryczna + 1/3 Sticky Panel Rezerwacji i Kalendarza) -->
@@ -121,15 +97,9 @@ $experienceYears = max(1, $currentYear - $startYear);
<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-3" style="font-size: 0.9rem; line-height: 1.65;">
<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 class="d-flex flex-wrap gap-2 pt-2 border-top">
<span class="tech-tag"><i class='bx bx-check text-success me-1'></i> Wykształcenie historyczne (UW)</span>
<span class="tech-tag"><i class='bx bx-check text-success me-1'></i> Doświadczenie w grupach autokarowych i lotniczych</span>
<span class="tech-tag"><i class='bx bx-check text-success me-1'></i> Standardy rozliczeń dewizowych Travel Manager</span>
</div>
</div>
</div>
@@ -219,66 +189,93 @@ $experienceYears = max(1, $currentYear - $startYear);
</div>
</div>
<!-- Karta 3: Autoprezentacja & Fotorelacje ze szlaków -->
<!-- Karta 3: Autoprezentacja Wideo & Fotorelacje z Tras -->
<div class="profile-section-card">
<div class="profile-section-header">
<h5 class="profile-section-title">
<i class='bx bx-video'></i> Autoprezentacja Wideo & Fotorelacje
</h5>
<span class="badge bg-light text-muted border">Wideo 1:15 min</span>
<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">
<p class="text-secondary small mb-3">
Krótkie nagranie wideo przygotowane dla koordynatorów biur podróży: dykcja, kultura osobista oraz wypowiedzi w języku włoskim i angielskim.
</p>
<!-- Wideo-wizytówka -->
<div class="profile-video-box" 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.95rem;">Oskar Kaczmarek — Autoprezentacja warsztatu pilota</div>
<div class="text-white-50 small">Nagrano: Florencja / Rzym • Trasa objazdowa • 1:15 min</div>
</div>
</div>
<!-- Fotorelacje 4 miniatury ze szlaków -->
<div class="d-flex justify-content-between align-items-center mt-3 mb-1">
<div class="small fw-bold text-navy">Fotorelacje z tras i pracy z grupą:</div>
<small class="text-muted">4 zdjęcia w galerii</small>
</div>
<div class="profile-photos-grid">
<div class="profile-photo-thumb" style="background: linear-gradient(135deg, #60a5fa, #3b82f6);" onclick="openPhotoLightbox('Florencja & Toskania — Grupa objazdowa Almatur')">
<div class="text-center p-1">
<i class='bx bx-camera fs-4'></i>
<div class="small">Toskania</div>
<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>
<div class="profile-photo-thumb" style="background: linear-gradient(135deg, #f59e0b, #d97706);" onclick="openPhotoLightbox('Rzym — Koloseum & Forum Romanum')">
<div class="text-center p-1">
<i class='bx bx-buildings fs-4'></i>
<div class="small">Rzym</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>
<div class="profile-photo-thumb" style="background: linear-gradient(135deg, #10b981, #059669);" onclick="openPhotoLightbox('Cyklady & Ateny — Rejs z grupą')">
<div class="text-center p-1">
<i class='bx bx-ship fs-4'></i>
<div class="small">Grecja</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>
<div class="profile-photo-thumb" style="background: linear-gradient(135deg, #8b5cf6, #6d28d9);" onclick="openPhotoLightbox('Andaluzja — Alhambra & Granada')">
<div class="text-center p-1">
<i class='bx bx-group fs-4'></i>
<div class="small">Andaluzja</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>
@@ -302,58 +299,61 @@ $experienceYears = max(1, $currentYear - $startYear);
<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">
<div class="col-md-4 text-center border-end">
<div class="display-4 fw-bold text-navy mb-1" style="font-size: 2.75rem; line-height: 1;">4.9</div>
<div class="text-warning fs-5 mb-1">
<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">na podstawie 18 ocen od 6 biur</div>
<div class="badge bg-success-subtle text-success mt-2 rounded-pill px-3 py-1" style="font-size: 0.72rem;">
100% poleceń na kolejne wyjazdy
<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>
<div class="col-md-8 ps-md-4 mt-3 mt-md-0">
<!-- 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 align-items-center gap-2">
<span style="width: 30px;" class="fw-semibold">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: 45px;">16 (89%)</span>
<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 align-items-center gap-2">
<span style="width: 30px;" class="fw-semibold">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: 45px;">2 (11%)</span>
<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 align-items-center gap-2">
<span style="width: 30px;" class="fw-semibold">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: 45px;">0</span>
</div>
</div>
<div class="row g-2 mt-3 pt-3 border-top text-center" style="font-size: 0.75rem;">
<div class="col-4">
<strong class="text-navy d-block">5.0 / 5.0</strong>
<span class="text-muted">Punktualność</span>
</div>
<div class="col-4">
<strong class="text-navy d-block">4.9 / 5.0</strong>
<span class="text-muted">Kontakt z grupą</span>
</div>
<div class="col-4">
<strong class="text-navy d-block">4.9 / 5.0</strong>
<span class="text-muted">Język w trasie</span>
<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>
@@ -456,13 +456,8 @@ $experienceYears = max(1, $currentYear - $startYear);
<!-- 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">
<div>
<h6 class="fw-bold mb-0 text-navy" style="font-size: 0.92rem;">Kalendarz Dostępności</h6>
<small class="text-muted" style="font-size: 0.72rem;">Stan na żywo z aplikacji pilota</small>
</div>
<span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2 py-1" style="font-size: 0.68rem;">
Zsynchronizowany
</span>
<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 -->
@@ -528,29 +523,24 @@ $experienceYears = max(1, $currentYear - $startYear);
<!-- 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 termin
<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> Wycieczka potwierdzona
<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 class="mt-3 p-2 rounded-2 bg-light text-muted small" style="font-size: 0.75rem;">
<i class='bx bx-pointer me-1 text-primary'></i> Wybór: <strong id="calSelectedRange" class="text-dark">Kliknij zielony dzień, aby wybrać termin</strong>
<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-3 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 / Wyślij zapytanie
<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 class="text-center mt-2 text-muted" style="font-size: 0.72rem;">
Powiadomienie PUSH trafi bezpośrednio do aplikacji pilota
</div>
</div>
</div>
@@ -597,26 +587,29 @@ $experienceYears = max(1, $currentYear - $startYear);
</select>
</div>
<!-- Oceny cząstkowe -->
<!-- Oceny cząstkowe z perspektywy biura -->
<div class="col-12">
<label class="form-label fw-bold small text-muted">Oceny cząstkowe:</label>
<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">Punktualność</div>
<div class="text-warning fs-5">★★★★★</div>
<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">Kontakt z grupą</div>
<div class="text-warning fs-5">★★★★★</div>
<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">Radzenie w kryzysie</div>
<div class="text-warning fs-5">★★★★★</div>
<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>
@@ -665,19 +658,205 @@ function openVideoModal(pilotName, duration) {
}
}
function openPhotoLightbox(caption) {
// 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) {
if (document.getElementById('lightboxTitle')) document.getElementById('lightboxTitle').innerText = caption;
if (document.getElementById('lightboxSubtext')) document.getElementById('lightboxSubtext').innerText = caption;
const modal = new bootstrap.Modal(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');
@@ -690,7 +869,7 @@ document.addEventListener('DOMContentLoaded', function() {
const dayFormatted = (dayNum < 10 ? '0' + dayNum : dayNum) + '.09.2027';
window.selectedProfileDates = dayFormatted;
if (selectedRangeSpan) {
selectedRangeSpan.innerText = dayFormatted + ' (Termin wolny - gotowy do zapytania)';
selectedRangeSpan.innerHTML = '<span class="badge bg-success-subtle text-success border border-success-subtle py-1 px-2">Wybrany termin: <strong>' + dayFormatted + '</strong></span>';
}
});
});
@@ -112,30 +112,27 @@ include __DIR__ . '/header.php';
</div>
</div>
<!-- 4 kluczowe wymiary oceny -->
<!-- Kluczowe wymiary oceny biura podróży -->
<div class="row g-3 pt-3 border-top">
<div class="col-md-3 col-6">
<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>
<small class="text-muted d-block mt-1">Punktualność</small>
<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-3 col-6">
<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>
<small class="text-muted d-block mt-1">Kontakt z grupą</small>
<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-3 col-6">
<div class="p-3 rounded-3 bg-light text-center">
<div class="text-warning fs-5 fw-bold">4.9 ★</div>
<small class="text-muted d-block mt-1">Zarządzanie kryzysem</small>
</div>
</div>
<div class="col-md-3 col-6">
<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>
<small class="text-muted d-block mt-1">Języki w hotelach</small>
<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>
-165
View File
@@ -1,165 +0,0 @@
<!-- Modal Rezerwacji / Zapytania Ofertowego (Standard UX/UI 2026) -->
<div class="modal fade" id="bookingModal" tabindex="-1" aria-labelledby="bookingModalLabel" 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); overflow: hidden;">
<!-- Spokojny, czytelny nagłówek modala -->
<div class="modal-header bg-white border-bottom py-3 px-4">
<div class="d-flex align-items-center gap-2">
<div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; background: var(--primary-light); color: var(--primary); font-size: 1.2rem;">
<i class='bx bx-calendar-check'></i>
</div>
<div>
<h5 class="modal-title fw-bold text-navy mb-0" id="bookingModalLabel" style="font-size: 1.05rem;">
Zapytanie o Dostępność & Rezerwacja Terminu
</h5>
<small class="text-muted" style="font-size: 0.76rem;">
Zlecenie trafi bezpośrednio do aplikacji mobilnej pilota z możliwością natychmiastowej akceptacji
</small>
</div>
</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 (Spokojna karta) -->
<div class="d-flex align-items-center justify-content-between p-3 rounded-3 mb-4" style="background: #f8f9fd; border: 1px solid var(--border-color);">
<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, var(--primary) 0%, #767bf7 100%); font-size: 1.1rem; flex-shrink: 0;">
OK
</div>
<div>
<div class="d-flex align-items-center gap-2">
<span class="fw-bold text-dark" id="bookingPilotNameDisplay" style="font-size: 0.95rem;">Oskar Kaczmarek</span>
<span class="pilot-academy-badge" style="font-size: 0.68rem; padding: 2px 8px;">
<i class='bx bx-check-shield'></i> Superpilot Academy
</span>
</div>
<div class="text-muted small d-flex align-items-center gap-2 mt-1" style="font-size: 0.76rem;">
<span><i class='bx bx-compass text-primary'></i> Pilot Wycieczek & Przewodnik</span>
<span>•</span>
<span><i class='bx bx-map-pin text-muted'></i> Baza: Warszawa</span>
</div>
</div>
</div>
<div class="text-end">
<span class="profile-meta-rating" style="font-size: 0.75rem;">
<i class='bx bxs-star text-warning'></i> 4.9 (18 opinii)
</span>
</div>
</div>
<input type="hidden" id="bookingPilotId" value="1">
<input type="hidden" id="bookingPilotName" value="Oskar Kaczmarek">
<!-- Sekcja 1: Wybór wycieczki z Travel Managera -->
<div class="mb-3">
<label class="form-label fw-bold text-dark small mb-1">
Powiąż z imprezą w Travel Managerze:
</label>
<select class="form-select form-select-sm fw-semibold" id="bookingTourSelect" style="font-size: 0.84rem; padding: 0.5rem 0.75rem;">
<option value="12" selected>Wycieczka #12: Klasyczne Włochy (16.09 - 24.09.2027) • 44 uczestników</option>
<option value="15">Wycieczka #15: Magia Toskanii i Rzym (05.10 - 12.10.2027) • 38 uczestników</option>
<option value="21">Wycieczka #21: Andaluzja i Gibraltar (12.11 - 19.11.2027) • 40 uczestników</option>
<option value="new">+ Utwórz zapytanie niestandardowe / Inny termin...</option>
</select>
<div class="text-muted mt-1" style="font-size: 0.72rem;">
Wybranie imprezy automatycznie przeniesie ramowy program trasy do aplikacji pilota.
</div>
</div>
<!-- Sekcja 2: Termin i Trasa (2 kolumny) -->
<div class="row g-3 mb-3">
<div class="col-md-6">
<label class="form-label fw-bold text-dark small mb-1">Termin realizacji 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>
</div>
</div>
<div class="col-md-6">
<label class="form-label fw-bold text-dark small mb-1">Destynacja i 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>
</div>
</div>
</div>
<!-- Sekcja 3: Finanse i Świadczenia (2 kolumny) -->
<div class="row g-3 mb-3">
<div class="col-md-6">
<label class="form-label fw-bold text-dark small mb-1">Proponowana stawka dzienna netto:</label>
<div class="input-group input-group-sm mb-1">
<span class="input-group-text bg-light fw-bold text-dark">PLN</span>
<input type="number" class="form-control fw-bold text-dark" id="bookingRate" value="550" step="50">
<span class="input-group-text bg-light text-muted">/ dzień netto</span>
</div>
<div class="text-muted" style="font-size: 0.72rem;">
Szacowany koszt zlecenia (9 dni): <strong class="text-dark">4 950 PLN netto</strong>
</div>
</div>
<div class="col-md-6">
<label class="form-label fw-bold text-dark small mb-1">Świadczenia zapewniane przez biuro:</label>
<div class="p-2 border rounded-2 bg-light" style="font-size: 0.78rem;">
<div class="form-check mb-1">
<input class="form-check-input" type="checkbox" id="benefitHotel" checked>
<label class="form-check-label text-dark" for="benefitHotel">
Pokój 1-osobowy dla pilota w hotelach
</label>
</div>
<div class="form-check mb-1">
<input class="form-check-input" type="checkbox" id="benefitMeals" checked>
<label class="form-check-label text-dark" for="benefitMeals">
Wyżywienie (śniadania + obiadokolacje)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="benefitInsurance" checked>
<label class="form-check-label text-dark" for="benefitInsurance">
Ubezpieczenie KL / NNW w trakcie trasy
</label>
</div>
</div>
</div>
</div>
<!-- Sekcja 4: Wiadomość dla pilota -->
<div class="mb-3">
<label class="form-label fw-bold text-dark small mb-1">Wiadomość / uwagi do zlecenia:</label>
<textarea class="form-control" rows="3" style="font-size: 0.82rem; line-height: 1.45;" placeholder="Dodatkowe informacje, specyfika grupy, zbiórka...">Dzień dobry Panie Oskarze, zapraszamy do poprowadzenia wycieczki objazdowej po Włoszech. Znając Pana referencje z poprzednich tras, liczymy na ponowną udaną współpracę!</textarea>
</div>
<!-- Dyskretny box o powiadomieniu PUSH -->
<div class="d-flex align-items-center gap-3 p-3 rounded-2" style="background: var(--primary-light); border: 1px solid var(--primary-border);">
<i class='bx bx-mobile-alt fs-3' style="color: var(--primary);"></i>
<div style="font-size: 0.78rem; line-height: 1.4; color: var(--dark-navy);">
<strong>Powiadomienie PUSH:</strong> Pilot otrzyma natychmiast zapytanie na telefonie w aplikacji <code>TravelLeader Mobile</code> i ma 24h na potwierdzenie dostępności.
</div>
</div>
</div>
<div class="modal-footer bg-light px-4 py-3 border-top d-flex justify-content-between align-items-center">
<span class="text-muted small" style="font-size: 0.74rem;">
<i class='bx bx-shield-check text-success me-1'></i> Bezpieczna rezerwacja w ekosystemie Travel Manager
</span>
<div class="d-flex align-items-center gap-2">
<button type="button" class="btn btn-outline-secondary btn-sm" 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 do pilota
</button>
</div>
</div>
</form>
</div>
</div>
</div>
@@ -183,49 +183,81 @@ html, body {
padding: 14px 16px calc(var(--bottom-nav-height) + 16px);
}
/* System Ribbon Bar (Opcja 3: Wstążka systemowa pod nagłówkiem na pełną szerokość) */
/* System Ribbon Bar (Wstążki systemowe pod nagłówkiem na pełną szerokość) */
.system-ribbons-stack {
display: flex;
flex-direction: column;
flex-shrink: 0;
position: relative;
z-index: 15;
}
.system-ribbon-bar {
background: linear-gradient(90deg, #4f53e8 0%, #686cf7 100%);
color: white;
padding: 8px 18px;
padding: 7px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
gap: 10px;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(79, 83, 232, 0.18);
box-shadow: 0 2px 8px rgba(79, 83, 232, 0.15);
position: relative;
z-index: 10;
}
/* Wstążka zaproszenia (Ciepły akcent pilności z 24h timerem) */
.system-ribbon-bar.ribbon-invitation {
background: linear-gradient(90deg, #d9480f 0%, #ea580c 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 8px rgba(217, 72, 15, 0.22);
}
.system-ribbon-bar.ribbon-invitation .btn-ribbon-action {
color: #c2410c;
}
.system-ribbon-bar.ribbon-invitation .btn-ribbon-action:hover {
color: #9a3412;
}
.ribbon-badge-urgent {
background: rgba(0, 0, 0, 0.22) !important;
border: 1px solid rgba(255, 255, 255, 0.4) !important;
color: #ffe0b2 !important;
}
.ribbon-badge {
background: rgba(255, 255, 255, 0.22);
color: white;
font-size: 0.72rem;
font-size: 0.7rem;
font-weight: 800;
padding: 2px 7px;
padding: 2px 6px;
border-radius: 99px;
border: 1px solid rgba(255, 255, 255, 0.35);
line-height: 1.2;
flex-shrink: 0;
}
.ribbon-text {
font-size: 0.78rem;
font-size: 0.77rem;
line-height: 1.25;
color: rgba(255, 255, 255, 0.95);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ribbon-sub {
color: rgba(255, 255, 255, 0.82);
color: rgba(255, 255, 255, 0.85);
font-size: 0.72rem;
}
.btn-ribbon-action {
background: rgba(255, 255, 255, 0.95);
color: #4f53e8;
padding: 4px 12px;
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: 0.72rem;
font-size: 0.7rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
@@ -234,11 +266,11 @@ html, body {
gap: 3px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
flex-shrink: 0;
}
.btn-ribbon-action:hover {
background: white;
color: #383cc7;
transform: scale(1.03);
}
@@ -246,7 +278,7 @@ html, body {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.75);
font-size: 1.2rem;
font-size: 1.15rem;
padding: 0;
line-height: 1;
cursor: pointer;
@@ -254,6 +286,7 @@ html, body {
align-items: center;
justify-content: center;
transition: color 0.2s ease;
flex-shrink: 0;
}
.btn-ribbon-close:hover {
@@ -1061,3 +1094,400 @@ html, body {
background: #e4e7f3;
color: var(--dark-navy);
}
/* ==========================================================================
Moduł Zaproszeń i Powiadomień (TravelLeader Mobile 2026)
========================================================================== */
/* Dzwonek powiadomień w nagłówku */
.header-notif-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--dark-navy);
font-size: 1.25rem;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(31, 34, 68, 0.04);
}
.header-notif-btn:hover {
background-color: var(--primary-light);
color: var(--primary);
border-color: var(--primary-border);
}
.header-notif-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 9999px;
background: #ff4757;
color: #ffffff;
font-size: 0.65rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #ffffff;
box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4);
animation: notif-pulse 2s infinite ease-in-out;
}
@keyframes notif-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
/* Badge Alert w zakładce nawigacji */
.badge-count.badge-alert {
background: #ff4757 !important;
color: #ffffff !important;
font-weight: 800;
box-shadow: 0 2px 6px rgba(255, 71, 87, 0.35);
}
/* ==========================================================================
Moduł Zaproszeń i Powiadomień (TravelLeader Mobile 2026 - Wersja Minimalistyczna)
========================================================================== */
/* Dzwonek powiadomień w nagłówku */
.header-notif-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--dark-navy);
font-size: 1.25rem;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(31, 34, 68, 0.04);
}
.header-notif-btn:hover {
background-color: var(--primary-light);
color: var(--primary);
border-color: var(--primary-border);
}
.header-notif-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 9999px;
background: #ff4757;
color: #ffffff;
font-size: 0.65rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #ffffff;
box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4);
animation: notif-pulse 2s infinite ease-in-out;
}
@keyframes notif-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
/* Badge Alert w zakładce nawigacji */
.badge-count.badge-alert {
background: #ff4757 !important;
color: #ffffff !important;
font-weight: 800;
box-shadow: 0 2px 6px rgba(255, 71, 87, 0.35);
}
/* ==========================================================================
1. Ultrakompaktowy pasek na górze ekranu głównego (Zero drabinki, 1 linia)
========================================================================== */
.invitation-compact-bar {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #1e223d, #2b3056);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-sm);
padding: 10px 14px;
margin-bottom: 12px;
color: #ffffff;
text-decoration: none;
box-shadow: 0 4px 14px rgba(30, 34, 61, 0.15);
transition: all 0.2s ease;
}
.invitation-compact-bar:hover {
background: linear-gradient(135deg, #252a4a, #343a68);
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(30, 34, 61, 0.22);
}
.inv-bar-left {
display: flex;
align-items: center;
gap: 7px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.8rem;
}
.inv-pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ff4757;
flex-shrink: 0;
box-shadow: 0 0 8px #ff4757;
animation: notif-pulse 1.8s infinite;
}
.inv-bar-agency {
font-weight: 800;
color: #ffffff;
}
.inv-bar-divider {
color: rgba(255, 255, 255, 0.35);
font-size: 0.75rem;
}
.inv-bar-title {
color: #e2e8f0;
font-weight: 500;
}
.inv-bar-rate {
color: #2ed573;
font-weight: 700;
margin-left: 2px;
}
.inv-bar-right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.inv-bar-timer {
background: rgba(255, 209, 102, 0.16);
border: 1px solid rgba(255, 209, 102, 0.35);
color: #ffd166;
font-size: 0.68rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.inv-bar-right i {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.7);
}
/* ==========================================================================
2. Minimalistyczne kafelki w zakładce "Zaproszenia" (Single-Tap Row)
========================================================================== */
.invitation-compact-item {
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 12px 14px;
margin-bottom: 10px;
text-decoration: none;
color: inherit;
box-shadow: var(--shadow-card);
transition: all 0.2s ease;
position: relative;
}
.invitation-compact-item:hover {
border-color: var(--primary-border);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(92, 96, 245, 0.08);
}
.invitation-compact-item.is-pending {
border-left: 4px solid #f59e0b;
background: linear-gradient(to right, #fffdf8, #ffffff);
}
.invitation-compact-item.is-accepted {
border-left: 4px solid #10b981;
}
.invitation-compact-item.is-rejected {
border-left: 4px solid #ef4444;
opacity: 0.8;
}
.inv-item-icon {
position: relative;
width: 40px;
height: 40px;
border-radius: 10px;
background: #eff0fe;
color: var(--primary);
font-weight: 800;
font-size: 1.05rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 12px;
}
.inv-item-status-dot {
position: absolute;
top: -2px;
right: -2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ff4757;
border: 2px solid #ffffff;
}
.inv-item-content {
flex: 1;
min-width: 0;
}
.inv-item-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2px;
}
.inv-item-agency {
font-size: 0.72rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.inv-item-timer {
font-size: 0.68rem;
font-weight: 700;
color: #d97706;
background: #fef3c7;
padding: 1px 5px;
border-radius: 4px;
}
.inv-item-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--dark-navy);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}
.inv-item-meta {
font-size: 0.74rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.inv-item-arrow {
margin-left: 8px;
flex-shrink: 0;
}
/* Pasek stałych decyzji na dole ekranu szczegółów */
.decision-sticky-footer {
position: sticky;
bottom: 0;
left: 0;
right: 0;
background: #ffffff;
border-top: 1px solid var(--border-color);
padding: 12px 16px 16px;
box-shadow: 0 -4px 20px rgba(31, 34, 68, 0.08);
z-index: 50;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 12px;
}
.btn-decision-decline {
background: #fdf3f4;
border: 1px solid #fecdd3;
color: #e11d48;
font-size: 0.84rem;
font-weight: 700;
padding: 12px 14px;
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
transition: all 0.2s;
}
.btn-decision-decline:hover {
background: #ffe4e6;
color: #be123c;
}
.btn-decision-accept {
background: linear-gradient(135deg, #10b981, #059669);
border: none;
color: #ffffff;
font-size: 0.86rem;
font-weight: 700;
padding: 12px 16px;
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
cursor: pointer;
transition: all 0.2s;
}
.btn-decision-accept:hover {
background: linear-gradient(135deg, #059669, #047857);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
}
@@ -3,6 +3,9 @@ $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">
@@ -55,13 +58,23 @@ if (!isset($pageTitle)) {
<div class="brand-name">Travel<span style="color: #2b304f;">Leader</span></div>
</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">
<i class='bx bx-user'></i>
</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>
+588
View File
@@ -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'; ?>
@@ -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'; ?>
-322
View File
@@ -1,322 +0,0 @@
<?php
$enablePrototypeComments = true;
$pageTitle = 'TravelLeader - Wycieczki i Zlecenia';
include 'header.php';
?>
<!-- Systemowa wstążka profilu (Edge-to-edge pod nagłówkiem, nie koliduje z wyszukiwarką) -->
<div class="system-ribbon-bar">
<div class="d-flex align-items-center gap-2">
<span class="ribbon-badge">45%</span>
<div class="ribbon-text">
<span class="fw-bold">Profil w bazie</span>
<span class="ribbon-sub"> • Uzupełnij dane dla biur</span>
</div>
</div>
<div class="d-flex align-items-center gap-2">
<a href="profile.php" class="btn-ribbon-action">
Dokończ &gt;
</a>
<button type="button" class="btn-ribbon-close" onclick="this.closest('.system-ribbon-bar').style.display='none';" title="Zamknij powiadomienie">
<i class='bx bx-x'></i>
</button>
</div>
</div>
<div class="app-content">
<!-- Wyszukiwarka i filtr zakresu dat (odtworzone ze zrzutu ekranu) -->
<div class="search-filter-card">
<div class="search-filter-icon">
<i class='bx bx-search'></i>
</div>
<div class="search-filter-text flex-grow-1">
<h6>Wycieczki</h6>
<small>
<i class='bx bx-calendar'></i> 18 wrz 2026 &rarr; 18 wrz 2027
</small>
</div>
<i class='bx bx-chevron-down text-muted fs-4'></i>
</div>
<!-- Pasek zakładek i przełącznik widoku (Lista vs Kalendarz wycieczek) -->
<div class="trips-tabs-bar">
<div class="nav-pills-custom">
<a href="#" class="nav-pill-item active">
<i class='bx bx-home-alt-2'></i>
<span>Bieżące</span>
<span class="badge-count">1</span>
</a>
<a href="#" class="nav-pill-item">
<i class='bx bx-history'></i>
<span>Historia</span>
<span class="badge-count">0</span>
</a>
</div>
<!-- Przełącznik Lista / Kalendarz w obrębie wycieczek -->
<div class="view-toggle-group">
<button type="button" id="btnListView" class="view-toggle-btn active" title="Widok listy" onclick="switchTripsView('list');">
<i class='bx bx-list-ul'></i>
</button>
<button type="button" id="btnCalendarView" class="view-toggle-btn" title="Widok kalendarza" onclick="switchTripsView('calendar');">
<i class='bx bx-calendar'></i>
</button>
</div>
</div>
<!-- WIDOK 1: LISTA WYCIECZEK -->
<div id="tripsListView">
<div class="trip-card">
<div class="trip-card-header">
<div class="d-flex align-items-center flex-grow-1">
<div class="trip-id-badge">12</div>
<div class="trip-title-area">
<h5 class="trip-title">oskar prod</h5>
</div>
</div>
<div class="trip-status-pill">
<span class="badge-status">Planowana</span>
<div class="status-subtext">za 363 dni</div>
</div>
</div>
<!-- Dane wycieczki -->
<div class="trip-info-row">
<i class='bx bx-calendar'></i>
<span>16-24.09.2027</span>
</div>
<div class="trip-info-row">
<i class='bx bx-group'></i>
<span>24 / 0</span>
</div>
<div class="trip-info-row">
<i class='bx bx-map'></i>
<span class="text-muted">Brak danych</span>
</div>
<!-- Stopka karty -->
<div class="trip-card-footer">
<div class="trip-code">
<i class='bx bx-briefcase-alt'></i>
<span>123osk123</span>
</div>
<a href="#" class="btn-details" onclick="openTripBottomSheet('16 WRZEŚNIA 2027'); return false;">
Szczegóły &gt;
</a>
</div>
</div>
</div>
<!-- WIDOK 2: KALENDARZ WYCIECZEK (Odtworzony 1:1 ze zrzutu ekranu) -->
<div id="tripsCalendarView" class="d-none">
<div class="trips-calendar-container">
<!-- Nagłówek miesiąca -->
<div class="d-flex justify-content-between align-items-center mb-3 px-1">
<button type="button" class="btn btn-sm btn-light rounded-circle p-1" onclick="alert('Przejdź do Sierpnia 2027');"><i class='bx bx-chevron-left fs-5'></i></button>
<div class="month-title-header mb-0">WRZESIEŃ 2027</div>
<button type="button" class="btn btn-sm btn-light rounded-circle p-1" onclick="alert('Przejdź do Października 2027');"><i class='bx bx-chevron-right fs-5'></i></button>
</div>
<table class="calendar-table">
<thead>
<tr>
<th>Pn</th>
<th>Wt</th>
<th>Śr</th>
<th>Cz</th>
<th>Pt</th>
<th>So</th>
<th>Nd</th>
</tr>
</thead>
<tbody>
<!-- Tydzień 1 -->
<tr>
<td class="other-month"><span class="day-number">30</span></td>
<td class="other-month"><span class="day-number">31</span></td>
<td><span class="day-number">1</span></td>
<td><span class="day-number">2</span></td>
<td><span class="day-number">3</span></td>
<td><span class="day-number">4</span></td>
<td><span class="day-number">5</span></td>
</tr>
<!-- Tydzień 2 -->
<tr>
<td><span class="day-number">6</span></td>
<td><span class="day-number">7</span></td>
<td><span class="day-number">8</span></td>
<td><span class="day-number">9</span></td>
<td><span class="day-number">10</span></td>
<td><span class="day-number">11</span></td>
<td><span class="day-number">12</span></td>
</tr>
<!-- Tydzień 3: Początek wycieczki 16-19 września -->
<tr>
<td><span class="day-number">13</span></td>
<td><span class="day-number">14</span></td>
<td><span class="day-number">15</span></td>
<td onclick="openTripBottomSheet('16 WRZEŚNIA 2027');">
<span class="day-number fw-bold text-primary">16</span>
<span class="trip-ribbon-bar trip-ribbon-start">oskar prod</span>
</td>
<td onclick="openTripBottomSheet('17 WRZEŚNIA 2027');">
<span class="day-number fw-bold text-primary">17</span>
<span class="trip-ribbon-bar">&nbsp;</span>
</td>
<td onclick="openTripBottomSheet('18 WRZEŚNIA 2027');">
<span class="day-number fw-bold text-primary">18</span>
<span class="trip-ribbon-bar">&nbsp;</span>
</td>
<td onclick="openTripBottomSheet('19 WRZEŚNIA 2027');">
<span class="day-number fw-bold text-primary">19</span>
<span class="trip-ribbon-bar">&nbsp;</span>
</td>
</tr>
<!-- Tydzień 4: Ciąg dalszy wycieczki 20-24 września -->
<tr>
<td onclick="openTripBottomSheet('20 WRZEŚNIA 2027');">
<span class="day-number fw-bold text-primary">20</span>
<span class="trip-ribbon-bar">oskar prod</span>
</td>
<td onclick="openTripBottomSheet('21 WRZEŚNIA 2027');">
<span class="day-number fw-bold text-primary">21</span>
<span class="trip-ribbon-bar">&nbsp;</span>
</td>
<td onclick="openTripBottomSheet('22 WRZEŚNIA 2027');">
<span class="day-number fw-bold text-primary">22</span>
<span class="trip-ribbon-bar">&nbsp;</span>
</td>
<td onclick="openTripBottomSheet('23 WRZEŚNIA 2027');">
<span class="day-number fw-bold text-primary">23</span>
<span class="trip-ribbon-bar">&nbsp;</span>
</td>
<td onclick="openTripBottomSheet('24 WRZEŚNIA 2027');">
<span class="day-number fw-bold text-primary">24</span>
<span class="trip-ribbon-bar trip-ribbon-end">&nbsp;</span>
</td>
<td><span class="day-number">25</span></td>
<td><span class="day-number">26</span></td>
</tr>
<!-- Tydzień 5 -->
<tr>
<td><span class="day-number">27</span></td>
<td><span class="day-number">28</span></td>
<td><span class="day-number">29</span></td>
<td><span class="day-number">30</span></td>
<td class="other-month"><span class="day-number">1</span></td>
<td class="other-month"><span class="day-number">2</span></td>
<td class="other-month"><span class="day-number">3</span></td>
</tr>
</tbody>
</table>
<div class="mt-3 pt-2 border-top d-flex justify-content-between align-items-center">
<small class="text-muted" style="font-size: 0.72rem;">
<i class='bx bxs-circle text-primary' style="font-size: 0.6rem;"></i> Zaznaczony termin wycieczki (16-24 Wrz)
</small>
<a href="availability.php" class="text-primary fw-bold text-decoration-none" style="font-size: 0.72rem;">
Kalendarz dostępności &rarr;
</a>
</div>
</div>
</div>
</div><!-- /.app-content -->
<!-- BOTTOM SHEET MODAL (Odtworzony 1:1 ze zrzutu ekranu) -->
<div id="tripSheetBackdrop" class="bottom-sheet-backdrop" onclick="closeTripBottomSheet();"></div>
<div id="tripBottomSheet" class="bottom-sheet-content">
<div class="sheet-drag-handle"></div>
<div class="d-flex justify-content-between align-items-start mb-2">
<div>
<div class="text-uppercase fw-bold text-muted" style="font-size: 0.68rem; letter-spacing: 0.5px;">WYBRANY DZIEŃ</div>
<h5 class="fw-bold mb-0" id="sheetSelectedDate" style="color: var(--dark-navy); font-size: 1.15rem;">16 WRZEŚNIA 2027</h5>
</div>
<button type="button" class="btn-close" style="font-size: 0.75rem;" onclick="closeTripBottomSheet();" aria-label="Zamknij"></button>
</div>
<!-- Karta wycieczki wewnątrz Bottom Sheet -->
<div class="trip-card mb-0 shadow-none border mt-3">
<div class="trip-card-header">
<div class="d-flex align-items-center flex-grow-1">
<div class="trip-id-badge">12</div>
<div class="trip-title-area">
<h5 class="trip-title">oskar prod</h5>
</div>
</div>
<div class="trip-status-pill">
<span class="badge-status">Planowana</span>
<div class="status-subtext">za 363 dni</div>
</div>
</div>
<div class="trip-info-row">
<i class='bx bx-calendar'></i>
<span>16-24.09.2027</span>
</div>
<div class="trip-info-row">
<i class='bx bx-group'></i>
<span>24 / 0</span>
</div>
<div class="trip-info-row">
<i class='bx bx-map'></i>
<span class="text-muted">Brak danych</span>
</div>
<div class="trip-card-footer">
<div class="trip-code">
<i class='bx bx-briefcase-alt'></i>
<span>123osk123</span>
</div>
<button type="button" class="btn-details" onclick="alert('Otwieranie pełnych szczegółów wycieczki 12 oskar prod');">
Szczegóły &gt;
</button>
</div>
</div>
</div>
<script>
function switchTripsView(view) {
const listView = document.getElementById('tripsListView');
const calView = document.getElementById('tripsCalendarView');
const btnList = document.getElementById('btnListView');
const btnCal = document.getElementById('btnCalendarView');
if (view === 'calendar') {
listView.classList.add('d-none');
calView.classList.remove('d-none');
btnCal.classList.add('active');
btnList.classList.remove('active');
} else {
listView.classList.remove('d-none');
calView.classList.add('d-none');
btnList.classList.add('active');
btnCal.classList.remove('active');
}
}
function openTripBottomSheet(dateTitle) {
document.getElementById('sheetSelectedDate').innerText = dateTitle;
document.getElementById('tripSheetBackdrop').classList.add('active');
document.getElementById('tripBottomSheet').classList.add('active');
}
function closeTripBottomSheet() {
document.getElementById('tripSheetBackdrop').classList.remove('active');
document.getElementById('tripBottomSheet').classList.remove('active');
}
</script>
<?php include 'footer.php'; ?>