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