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