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