feat(superpilot-web): wdrozenie webowej bazy pilotow z profilem, wyszukiwarka i zleceniami
- Wyszukiwarka ofert w stylu Pracuj.pl z multiselectem destynacji i filtrem bazy pilota - Przeprojektowany profil pilota zgodny ze standardem UX/UI 2026 i aplikacja mobile - Spokojny, ustrukturyzowany modal rezerwacji i zapytań ofertowych (booking-modal) - Panel zleceń i zapytań ofertowych biura (inquiries.php) powiazany z awatarem profilu - Integracja linku do Superpilota w menu glownym Travel Managera
This commit is contained in:
oskarn
@@ -0,0 +1,717 @@
|
||||
<?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">
|
||||
OK
|
||||
<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">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>
|
||||
</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: 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
|
||||
</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>
|
||||
</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) -->
|
||||
<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-3" 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>
|
||||
|
||||
<!-- 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 & Fotorelacje ze szlaków -->
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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 -->
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8 ps-md-4 mt-3 mt-md-0">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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 termin
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<div class="text-center mt-2 text-muted" style="font-size: 0.72rem;">
|
||||
Powiadomienie PUSH trafi bezpośrednio do aplikacji pilota
|
||||
</div>
|
||||
|
||||
</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 -->
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold small text-muted">Oceny cząstkowe:</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>
|
||||
</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>
|
||||
</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>
|
||||
</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();
|
||||
}
|
||||
}
|
||||
|
||||
function openPhotoLightbox(caption) {
|
||||
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);
|
||||
modal.show();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
window.selectedProfileDates = '16.09.2027 - 24.09.2027';
|
||||
|
||||
// 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.innerText = dayFormatted + ' (Termin wolny - gotowy do zapytania)';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 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