2742 lines
79 KiB
PHP
2742 lines
79 KiB
PHP
<!DOCTYPE html>
|
||
<html <?php language_attributes(); ?>>
|
||
<head>
|
||
<?php wp_head(); ?>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
<script src="https://js.stripe.com/v3/"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
|
||
<style>
|
||
/* Daily Program Styles */
|
||
.tour-daily-program {
|
||
margin: 3rem 0;
|
||
padding: 2.5rem;
|
||
background-color: #f8f9fa;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
|
||
max-width: 800px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.tour-daily-program h2 {
|
||
color: var(--dark);
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
font-size: 1.8rem;
|
||
position: relative;
|
||
padding-bottom: 1rem;
|
||
}
|
||
|
||
.tour-daily-program h2:after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 60px;
|
||
height: 3px;
|
||
background-color: var(--accent);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.daily-program-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
padding: 1rem;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.program-day {
|
||
background: white;
|
||
padding: 1.5rem;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
margin-bottom: 0;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.program-day:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.day-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.2rem;
|
||
margin-bottom: 1rem;
|
||
padding: 0;
|
||
}
|
||
|
||
.day-number {
|
||
background-color: var(--accent);
|
||
color: white;
|
||
width: 3rem;
|
||
height: 3rem;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 1.2rem;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.day-header h3 {
|
||
margin: 0;
|
||
color: #1F2937;
|
||
font-size: 1.3rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.program-day p {
|
||
margin: 0;
|
||
margin-left: 4.2rem;
|
||
color: #4B5563;
|
||
line-height: 1.8;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
/* Hero Section Styles */
|
||
.tour-hero {
|
||
position: relative;
|
||
height: 80vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tour-hero img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.tour-hero-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
rgba(0, 0, 0, 0.3) 0%,
|
||
rgba(0, 0, 0, 0.5) 50%,
|
||
rgba(0, 0, 0, 0.7) 100%
|
||
);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tour-hero-content {
|
||
text-align: center;
|
||
color: white;
|
||
padding: 2rem;
|
||
max-width: 800px;
|
||
width: 100%;
|
||
}
|
||
|
||
.tour-hero-content h1 {
|
||
font-size: 3.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 2rem;
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||
word-wrap: break-word;
|
||
hyphens: auto;
|
||
}
|
||
|
||
.tour-hero-meta {
|
||
display: flex;
|
||
gap: 2rem;
|
||
align-items: center;
|
||
margin-top: 1.5rem;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tour-hero-meta span {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
color: #fff;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.tour-price {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
backdrop-filter: blur(5px);
|
||
padding: 0.5rem 1.5rem;
|
||
border-radius: 50px;
|
||
font-weight: 600;
|
||
font-size: 1.4rem !important;
|
||
color: #fff !important;
|
||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tour-price:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.tour-hero-meta i {
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.tour-hero-content h1 {
|
||
font-size: 2.2rem;
|
||
margin-bottom: 1.5rem;
|
||
line-height: 1.2;
|
||
padding: 0 0.5rem;
|
||
}
|
||
|
||
.tour-hero-meta {
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
width: 100%;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.tour-hero-meta span {
|
||
justify-content: center;
|
||
width: 100%;
|
||
font-size: 1rem;
|
||
text-align: center;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.tour-price {
|
||
font-size: 1.2rem !important;
|
||
padding: 0.4rem 1.2rem;
|
||
}
|
||
|
||
.tour-hero-meta i {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.tour-location {
|
||
max-width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.tour-daily-program {
|
||
padding: 1rem;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.tour-daily-program h2 {
|
||
font-size: 1.6rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.daily-program-list {
|
||
padding: 0;
|
||
margin: 0 -0.5rem;
|
||
width: calc(100% + 1rem);
|
||
}
|
||
|
||
.program-day {
|
||
padding: 1.2rem;
|
||
margin: 0 0.5rem 1rem 0.5rem;
|
||
}
|
||
|
||
.day-header {
|
||
gap: 1rem;
|
||
}
|
||
|
||
.day-number {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.day-header h3 {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.program-day p {
|
||
margin-left: 3.5rem;
|
||
font-size: 1rem;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.tour-hero-content h1 {
|
||
font-size: 1.8rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.tour-hero-content {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.tour-price {
|
||
font-size: 1.1rem !important;
|
||
padding: 0.3rem 1rem;
|
||
}
|
||
|
||
.tour-hero-meta span {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.tour-hero-meta i {
|
||
font-size: 1.1rem;
|
||
}
|
||
}
|
||
|
||
.tour-content-wrapper {
|
||
max-width: 1200px;
|
||
margin: 2rem auto;
|
||
padding: 0 1rem;
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.tour-info h2 {
|
||
color: #1F2937;
|
||
margin-bottom: 1rem;
|
||
font-size: 1.8rem;
|
||
word-wrap: break-word;
|
||
hyphens: auto;
|
||
}
|
||
|
||
.tour-description {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.tour-description p {
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.included-list, .not-included-list, .available-extras-list {
|
||
display: grid;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.included-item, .not-included-item, .available-extra-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.included-item i, .not-included-item i, .available-extra-item i {
|
||
min-width: 16px;
|
||
margin-top: 0.3rem;
|
||
}
|
||
|
||
.included-item span, .not-included-item span, .available-extra-item span {
|
||
flex: 1;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.included-item i {
|
||
color: #10B981;
|
||
}
|
||
|
||
.not-included-item i {
|
||
color: #EF4444;
|
||
}
|
||
|
||
.available-extra-item i {
|
||
color: #9b59b6;
|
||
}
|
||
|
||
/* Booking Form Styles */
|
||
.booking-sidebar {
|
||
position: sticky;
|
||
top: 2rem;
|
||
}
|
||
|
||
.booking-form {
|
||
background-color: white;
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.booking-form h3 {
|
||
color: #1F2937;
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
text-align: center;
|
||
position: relative;
|
||
padding-bottom: 1rem;
|
||
}
|
||
|
||
.booking-form h3:after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 50px;
|
||
height: 3px;
|
||
background: var(--accent);
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.form-group .price-label {
|
||
color: #666;
|
||
font-size: 14px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.form-group input {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 6px;
|
||
font-size: 1rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.form-group input:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px rgba(0, 121, 140, 0.1);
|
||
}
|
||
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 6px;
|
||
font-size: 1rem;
|
||
transition: all 0.3s ease;
|
||
resize: vertical;
|
||
min-height: 100px;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.form-group textarea:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px rgba(0, 121, 140, 0.1);
|
||
}
|
||
|
||
.price-summary {
|
||
background: #F9FAFB;
|
||
padding: 1rem;
|
||
border-radius: 6px;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.price-label {
|
||
color: #6B7280;
|
||
font-size: 0.875rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.base-price {
|
||
color: #1F2937;
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.btn-book {
|
||
width: 100%;
|
||
padding: 1rem;
|
||
background: var(--accent);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-book:hover {
|
||
background: var(--accent-dark);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.btn-book i {
|
||
font-size: 1.125rem;
|
||
}
|
||
|
||
/* Popup Styles */
|
||
.popup-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
backdrop-filter: blur(5px);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.popup-content {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 16px;
|
||
width: 95%;
|
||
max-width: 550px;
|
||
max-height: 90vh;
|
||
position: relative;
|
||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.popup-header {
|
||
position: sticky;
|
||
top: 0;
|
||
background: white;
|
||
z-index: 10;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 1.5rem;
|
||
padding-bottom: 1rem;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.popup-header h3 {
|
||
font-size: 1.5rem;
|
||
color: #1a202c;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
}
|
||
|
||
.close-popup {
|
||
background: none;
|
||
border: none;
|
||
color: #64748b;
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
padding: 0.5rem;
|
||
border-radius: 50%;
|
||
transition: all 0.2s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.close-popup:hover {
|
||
background: #f1f5f9;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.tour-summary {
|
||
background: #f8fafc;
|
||
padding: 1.5rem;
|
||
border-radius: 12px;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.tour-details {
|
||
display: grid;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.tour-details p {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 0;
|
||
padding: 0.5rem 0;
|
||
color: #475569;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.tour-details p span:first-child {
|
||
color: #1e293b;
|
||
font-weight: 500;
|
||
min-width: 100px;
|
||
}
|
||
|
||
.tour-details p span:last-child {
|
||
color: #1e293b;
|
||
text-align: right;
|
||
}
|
||
|
||
.extras-section {
|
||
background: white;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
margin: 1.5rem 0;
|
||
}
|
||
|
||
.extras-section h4 {
|
||
color: #1e293b;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.popup-extras-list {
|
||
display: grid;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.popup-extra-item {
|
||
background: #f8fafc;
|
||
padding: 1rem 1.25rem;
|
||
border-radius: 10px;
|
||
border: 1px solid #e2e8f0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.popup-extra-item:hover {
|
||
background: #f1f5f9;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.popup-extra-item input[type="checkbox"] {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 6px;
|
||
border: 2px solid #cbd5e1;
|
||
accent-color: var(--accent);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.popup-extra-item label {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
color: #334155;
|
||
margin: 0;
|
||
}
|
||
|
||
.popup-extra-item .extra-price {
|
||
color: var(--accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.single-supplement-notice {
|
||
text-align: left;
|
||
background: #f0f9ff;
|
||
border: 1px solid #bae6fd;
|
||
padding: 1rem 1.25rem;
|
||
border-radius: 10px;
|
||
margin-top: 1.5rem;
|
||
display: flex;
|
||
gap: 1rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.single-supplement-notice i {
|
||
color: #0284c7;
|
||
font-size: 1.25rem;
|
||
margin-top: 0.2rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.single-supplement-notice span {
|
||
color: #0369a1;
|
||
font-size: 0.95rem;
|
||
line-height: 1.5;
|
||
text-align: left;
|
||
}
|
||
|
||
.total-price {
|
||
background: white;
|
||
margin-top: 1.5rem;
|
||
padding: 1rem 1.5rem;
|
||
border-top: 1px solid #e5e7eb;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.total-price .price-label {
|
||
font-size: 1.1rem;
|
||
color: #475569;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.total-price .price-amount {
|
||
font-size: 1.5rem;
|
||
color: var(--accent);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.payment-section {
|
||
margin-top: 2rem;
|
||
padding: 1.5rem;
|
||
background: white;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.payment-section h4 {
|
||
color: #1e293b;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
#card-element {
|
||
padding: 1rem;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 10px;
|
||
background: #f8fafc;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
#card-element.StripeElement--focus {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 2px rgba(0, 121, 140, 0.1);
|
||
}
|
||
|
||
#card-element.StripeElement--invalid {
|
||
border-color: #ef4444;
|
||
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
|
||
}
|
||
|
||
.payment-error {
|
||
color: #dc2626;
|
||
font-size: 0.9rem;
|
||
margin-top: 0.75rem;
|
||
padding: 0.5rem;
|
||
background: #fef2f2;
|
||
border-radius: 6px;
|
||
border: 1px solid #fecaca;
|
||
display: none;
|
||
}
|
||
|
||
.payment-error.visible {
|
||
display: block;
|
||
animation: fadeIn 0.3s ease-in;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
0% { opacity: 0; }
|
||
100% { opacity: 1; }
|
||
}
|
||
|
||
.btn-confirm-payment {
|
||
width: 100%;
|
||
padding: 1rem;
|
||
background: var(--accent);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.btn-confirm-payment:hover {
|
||
background: var(--accent-dark);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.spinner {
|
||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 50%;
|
||
border-top: 2px solid white;
|
||
width: 20px;
|
||
height: 20px;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.spinner.hidden {
|
||
display: none;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.popup-overlay {
|
||
padding: 0;
|
||
}
|
||
|
||
.popup-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
max-height: 100vh;
|
||
border-radius: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.popup-header {
|
||
padding: 1rem 1.5rem;
|
||
margin: -2rem -2rem 1.5rem;
|
||
}
|
||
|
||
.popup-body {
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.total-price {
|
||
margin: 1.5rem -1rem;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.btn-confirm-payment {
|
||
margin: 2rem -1rem 0;
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
|
||
/* Payment Success Page */
|
||
.payment-success {
|
||
text-align: center;
|
||
padding: 4rem 2rem;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.payment-success i {
|
||
font-size: 4rem;
|
||
color: #28a745;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.payment-success h2 {
|
||
color: #333;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.payment-success p {
|
||
color: #666;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.btn-return {
|
||
display: inline-block;
|
||
padding: 1rem 2rem;
|
||
background-color: var(--primary);
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 4px;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.btn-return:hover {
|
||
background-color: var(--secondary);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.tour-content-wrapper {
|
||
grid-template-columns: 1fr;
|
||
padding: 0 0.8rem;
|
||
}
|
||
|
||
.tour-info {
|
||
order: 1;
|
||
}
|
||
|
||
.tour-booking {
|
||
order: 0;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.booking-form {
|
||
position: static;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.booking-sidebar {
|
||
position: static;
|
||
}
|
||
|
||
.tour-info h2 {
|
||
font-size: 1.6rem;
|
||
text-align: center;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.included-item, .not-included-item, .available-extra-item {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.included-item i, .not-included-item i, .available-extra-item i {
|
||
margin-top: 0.2rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.tour-content-wrapper {
|
||
margin: 1rem auto;
|
||
padding: 0 0.5rem;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.tour-info h2 {
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
.tour-booking {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.booking-form {
|
||
padding: 1.5rem 1rem;
|
||
}
|
||
|
||
.included-list, .not-included-list, .available-extras-list {
|
||
gap: 0.8rem;
|
||
}
|
||
}
|
||
|
||
/* Galerija na strani */
|
||
.tour-gallery {
|
||
margin: 3rem 0;
|
||
}
|
||
|
||
.tour-gallery h2 {
|
||
color: #1F2937;
|
||
margin-bottom: 1rem;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.gallery-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
gap: 1rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.gallery-grid img {
|
||
width: 100%;
|
||
height: 200px;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
transition: transform 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.gallery-grid img:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* Gallery Modal */
|
||
.gallery-modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 9999;
|
||
padding: 0;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background-color: rgba(0, 0, 0, 0.95);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.gallery-modal.show {
|
||
opacity: 1;
|
||
}
|
||
|
||
.modal-content {
|
||
margin: auto;
|
||
display: block;
|
||
max-width: 90%;
|
||
max-height: 90vh;
|
||
object-fit: contain;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%) scale(0.9);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.gallery-modal.show .modal-content {
|
||
transform: translate(-50%, -50%) scale(1);
|
||
}
|
||
|
||
.close-modal {
|
||
position: absolute;
|
||
right: 25px;
|
||
top: 15px;
|
||
color: #f1f1f1;
|
||
font-size: 35px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
z-index: 1000;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.close-modal:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.prev,
|
||
.next {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 60px;
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 30px;
|
||
transition: all 0.3s ease;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
border-radius: 50%;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.prev {
|
||
left: 20px;
|
||
}
|
||
|
||
.next {
|
||
right: 20px;
|
||
}
|
||
|
||
.prev:hover,
|
||
.next:hover {
|
||
opacity: 1;
|
||
background-color: var(--accent);
|
||
}
|
||
|
||
.image-counter {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
color: white;
|
||
font-size: 16px;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.prev,
|
||
.next {
|
||
width: 40px;
|
||
height: 40px;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.prev {
|
||
left: 10px;
|
||
}
|
||
|
||
.next {
|
||
right: 10px;
|
||
}
|
||
|
||
.close-modal {
|
||
right: 15px;
|
||
top: 10px;
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
|
||
/* Added styles for error handling */
|
||
.error {
|
||
border-color: #ff0000 !important;
|
||
box-shadow: 0 0 0 1px #ff0000 !important;
|
||
background-color: rgba(255, 0, 0, 0.03) !important;
|
||
}
|
||
.card-errors.visible {
|
||
display: block;
|
||
color: #ff0000;
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
}
|
||
.payment-error {
|
||
color: #ff0000;
|
||
margin-top: 10px;
|
||
display: none;
|
||
}
|
||
.payment-error.visible {
|
||
display: block;
|
||
}
|
||
|
||
.price-on-request {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 1.2rem;
|
||
color: var(--accent);
|
||
padding: 0.5rem;
|
||
background: rgba(0, 121, 140, 0.1);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.price-on-request i {
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
.price-on-request span {
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Guide Info Styles - More Specific */
|
||
.tour-hero .guide-info-container {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
padding: 1.5rem;
|
||
border-radius: 12px;
|
||
margin-top: 2rem;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
max-width: 600px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
position: absolute;
|
||
bottom: 2rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
}
|
||
|
||
.tour-hero .guide-info {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr auto;
|
||
gap: 1.5rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.tour-hero .guide-image {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 3px solid var(--accent);
|
||
}
|
||
|
||
.tour-hero .guide-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.tour-hero .guide-name {
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
color: #003d5b;
|
||
margin: 0;
|
||
}
|
||
|
||
.tour-hero .guide-title {
|
||
color: #666;
|
||
font-size: 0.9rem;
|
||
margin-top: 0.2rem;
|
||
}
|
||
|
||
.tour-hero .guide-contact {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.8rem;
|
||
}
|
||
|
||
.tour-hero .contact-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
color: #003d5b;
|
||
}
|
||
|
||
.tour-hero .contact-item i {
|
||
width: 20px;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.tour-hero .contact-item a {
|
||
color: #003d5b;
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.tour-hero .contact-item a:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.tour-hero .guide-message {
|
||
margin-top: 1rem;
|
||
font-size: 0.95rem;
|
||
color: #444;
|
||
line-height: 1.4;
|
||
text-align: center;
|
||
border-top: 1px solid #eee;
|
||
padding-top: 1rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.tour-hero .guide-info-container {
|
||
position: relative;
|
||
bottom: auto;
|
||
left: auto;
|
||
transform: none;
|
||
margin: 1rem;
|
||
width: calc(100% - 2rem);
|
||
}
|
||
|
||
.tour-hero .guide-info {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
}
|
||
|
||
.tour-hero .guide-image {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.tour-hero .guide-contact {
|
||
margin-top: 1rem;
|
||
}
|
||
}
|
||
|
||
/* Guide Info v Book Now obrazcu */
|
||
.guide-info-container {
|
||
margin-bottom: 20px;
|
||
padding: 20px;
|
||
background: #f9f9f9;
|
||
border-radius: 12px;
|
||
border: 1px solid #e5e7eb;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.guide-info {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 20px;
|
||
align-items: center;
|
||
}
|
||
|
||
.guide-image {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 2px solid #fff;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.guide-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.guide-name {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.guide-title {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.guide-contact {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.contact-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
color: #666;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.contact-item:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.guide-message {
|
||
margin-top: 12px;
|
||
font-style: italic;
|
||
color: #666;
|
||
font-size: 14px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.guide-info {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.guide-image {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.guide-contact {
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.guide-info-container {
|
||
background: #fff;
|
||
padding: 1.5rem;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
margin-bottom: 2rem;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.guide-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.guide-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.guide-image-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.guide-image {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 2px solid #fff;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.guide-name {
|
||
margin: 0;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.guide-contact {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.8rem;
|
||
}
|
||
|
||
.contact-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
color: #333;
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.contact-item:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.contact-item i {
|
||
width: 20px;
|
||
text-align: center;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.contact-item span {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.guide-info {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.guide-contact {
|
||
width: 100%;
|
||
align-items: center;
|
||
}
|
||
|
||
.contact-item {
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.tour-faq {
|
||
padding: 4rem 0;
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.tour-faq .container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.tour-faq h2 {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
color: #333;
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.faq-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.faq-item {
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.faq-question {
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.faq-question:hover {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.faq-question h3 {
|
||
margin: 0;
|
||
font-size: 1.1rem;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.faq-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.faq-toggle .fa-minus {
|
||
display: none;
|
||
}
|
||
|
||
.faq-answer {
|
||
padding: 0 1.5rem;
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
opacity: 0;
|
||
}
|
||
|
||
.faq-item.active .faq-question {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.faq-item.active .faq-toggle .fa-plus {
|
||
display: none;
|
||
}
|
||
|
||
.faq-item.active .faq-toggle .fa-minus {
|
||
display: block;
|
||
}
|
||
|
||
.faq-item.active .faq-answer {
|
||
padding: 1.5rem;
|
||
max-height: 500px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.no-faqs {
|
||
text-align: center;
|
||
padding: 2rem;
|
||
background: white;
|
||
border-radius: 8px;
|
||
color: #666;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.tour-faq h2 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.faq-question h3 {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body <?php body_class(); ?>>
|
||
|
||
<?php get_header(); ?>
|
||
|
||
<style>
|
||
.error {
|
||
border-color: #ff0000 !important;
|
||
box-shadow: 0 0 0 1px #ff0000 !important;
|
||
background-color: rgba(255, 0, 0, 0.03) !important;
|
||
}
|
||
.card-errors.visible {
|
||
display: block;
|
||
color: #ff0000;
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
}
|
||
.payment-error {
|
||
color: #ff0000;
|
||
margin-top: 10px;
|
||
display: none;
|
||
}
|
||
.payment-error.visible {
|
||
display: block;
|
||
}
|
||
</style>
|
||
|
||
<!-- Booking Popup -->
|
||
<div id="bookingPopup" class="popup-overlay" style="display: none;">
|
||
<div class="popup-content">
|
||
<div class="popup-header">
|
||
<h3>Complete Your Booking</h3>
|
||
<button class="close-popup">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="popup-body">
|
||
<div class="tour-summary">
|
||
<h4 id="popupTourName" style="margin-top: 0; margin-bottom: 1rem; color: #1e293b; font-size: 1.2rem;"></h4>
|
||
<div class="tour-details">
|
||
<p>
|
||
<span>Date: </span>
|
||
<span id="popupDate"></span>
|
||
</p>
|
||
<p>
|
||
<span>Participants: </span>
|
||
<span id="popupParticipants"></span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="single-supplement-notice" style="display: none;" class="single-supplement-notice">
|
||
<i class="fas fa-info-circle"></i>
|
||
<span style="text-align: left;">For single travelers, a supplement of €100 per day (<span id="single-supplement-total"></span> total for <span id="tour-duration-display"></span> days) has been automatically added to the price.</span>
|
||
</div>
|
||
|
||
<div class="total-price">
|
||
<span class="price-label">Total Amount</span>
|
||
<span class="price-amount">€<span id="popupTotalPrice">0.00</span></span>
|
||
</div>
|
||
|
||
<!-- Promocijska koda -->
|
||
<div class="popup-promo-container">
|
||
<label for="popup-promo-code">Do you have a promotional code?</label>
|
||
<div class="promo-code-input">
|
||
<input type="text" id="popup-promo-code" name="popup-promo-code" placeholder="Enter your code">
|
||
<button type="button" id="popup-apply-promo">Apply Code</button>
|
||
</div>
|
||
<div id="popup-promo-message"></div>
|
||
</div>
|
||
|
||
<div id="payment-options" style="display: none; margin-bottom: 15px; padding: 15px; background-color: #f9f9f9; border-radius: 8px;">
|
||
<h4 style="margin-top: 0; margin-bottom: 10px;">Payment Options</h4>
|
||
<div class="payment-option">
|
||
<input type="radio" id="full-payment" name="payment-type" value="full" checked>
|
||
<label for="full-payment">Full payment (€<span id="full-payment-amount">0.00</span>)</label>
|
||
</div>
|
||
<div class="payment-option">
|
||
<input type="radio" id="partial-payment" name="payment-type" value="partial">
|
||
<label for="partial-payment">30% deposit now (€<span id="deposit-amount">0.00</span>), 70% balance before tour</label>
|
||
</div>
|
||
<div class="payment-note" style="margin-top: 10px; font-size: 0.9em; color: #666;">
|
||
<i class="fas fa-info-circle"></i> Partial payment available only for bookings at least 2 months in advance.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="payment-section">
|
||
<h4>Payment Details</h4>
|
||
<div id="card-element"></div>
|
||
<div id="card-errors" role="alert" class="payment-error"></div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-confirm-payment" id="submit-payment">
|
||
<span id="button-payment-text">Confirm Payment</span>
|
||
<div id="spinner" class="spinner hidden"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Success Popup -->
|
||
<div id="successPopup" class="popup-overlay" style="display: none;">
|
||
<div class="popup-content" style="max-width: 400px;">
|
||
<div class="popup-header">
|
||
<h3>Success!</h3>
|
||
<button class="close-popup">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="popup-body" style="text-align: center;">
|
||
<i class="fas fa-check-circle" style="font-size: 3rem; color: #10B981; margin-bottom: 1rem;"></i>
|
||
<h4 style="margin-bottom: 1rem;">Inquiry Sent Successfully</h4>
|
||
<p style="color: #4B5563; margin-bottom: 1.5rem;">Thank you for your inquiry. We will get back to you as soon as possible.</p>
|
||
<button class="btn-book" onclick="closeSuccessPopup()" style="max-width: 200px; margin: 0 auto;">
|
||
Close
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<?php while (have_posts()) : the_post();
|
||
$price = get_post_meta(get_the_ID(), '_tour_price', true);
|
||
$duration = get_post_meta(get_the_ID(), '_tour_duration', true);
|
||
$location = get_post_meta(get_the_ID(), '_tour_location', true);
|
||
$daily_program = get_post_meta(get_the_ID(), '_daily_program', true);
|
||
$included_items = get_post_meta(get_the_ID(), '_included_items', true);
|
||
$not_included_items = get_post_meta(get_the_ID(), '_not_included_items', true);
|
||
?>
|
||
|
||
<!-- Hero Section -->
|
||
<div class="tour-hero">
|
||
<?php
|
||
$hero_image_id = get_post_meta(get_the_ID(), '_hero_image', true);
|
||
$hero_image_url = wp_get_attachment_image_url($hero_image_id, 'full');
|
||
|
||
if ($hero_image_url) :
|
||
?>
|
||
<img src="<?php echo esc_url($hero_image_url); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
|
||
<?php elseif (has_post_thumbnail()) : ?>
|
||
<?php the_post_thumbnail('full', array('alt' => get_the_title())); ?>
|
||
<?php endif; ?>
|
||
<div class="tour-hero-overlay">
|
||
<div class="tour-hero-content">
|
||
<h1><?php the_title(); ?></h1>
|
||
<div class="tour-hero-meta">
|
||
<?php if ($price): ?>
|
||
<div class="tour-price">od <?php echo esc_html($price); ?>€</div>
|
||
<?php endif; ?>
|
||
<?php if ($duration) : ?>
|
||
<span class="tour-duration"><i class="far fa-clock"></i> <?php echo esc_html($duration); ?> days</span>
|
||
<?php endif; ?>
|
||
<?php if ($location) : ?>
|
||
<span class="tour-location"><i class="fas fa-map-marker-alt"></i> <?php echo esc_html($location); ?></span>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<?php
|
||
// Pridobi podatke o vodiču
|
||
$guide_image = get_post_meta(get_the_ID(), '_guide_image', true);
|
||
$guide_name = get_post_meta(get_the_ID(), '_guide_name', true);
|
||
$guide_title = get_post_meta(get_the_ID(), '_guide_title', true);
|
||
|
||
// Odstranimo prikaz kartice iz hero sekcije
|
||
?>
|
||
</div><!-- .tour-hero -->
|
||
|
||
<!-- Tour Content -->
|
||
<main class="tour-content-wrapper">
|
||
<!-- Left Column - Tour Information -->
|
||
<div class="tour-info">
|
||
<div class="tour-description">
|
||
<h2>About This Tour</h2>
|
||
<?php the_content(); ?>
|
||
</div>
|
||
|
||
<!-- Tour Gallery -->
|
||
<?php
|
||
$gallery_images = get_post_meta(get_the_ID(), '_tour_gallery', true);
|
||
if (!empty($gallery_images)) :
|
||
?>
|
||
<div class="tour-gallery">
|
||
<h2>Photo Gallery</h2>
|
||
<div class="gallery-grid">
|
||
<?php
|
||
foreach ($gallery_images as $image_id) :
|
||
$image_url = wp_get_attachment_image_url($image_id, 'large');
|
||
if ($image_url) :
|
||
?>
|
||
<img src="<?php echo esc_url($image_url); ?>"
|
||
alt="<?php echo esc_attr(get_the_title()); ?> Gallery Image"
|
||
onclick="openGalleryModal(this)">
|
||
<?php
|
||
endif;
|
||
endforeach;
|
||
?>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gallery Modal -->
|
||
<div id="galleryModal" class="gallery-modal">
|
||
<span class="close-modal">×</span>
|
||
<img id="modalImage" class="modal-content">
|
||
<a class="prev" onclick="changeImage(-1)">❮</a>
|
||
<a class="next" onclick="changeImage(1)">❯</a>
|
||
<div class="image-counter">
|
||
<span id="currentImageNum">1</span> / <span id="totalImages">1</span>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php if (!empty($daily_program)) : ?>
|
||
<div class="tour-daily-program">
|
||
<h2>Daily Program</h2>
|
||
<div class="daily-program-list">
|
||
<?php
|
||
$day_type_label = get_post_meta(get_the_ID(), '_day_type_label', true);
|
||
if (empty($day_type_label)) $day_type_label = 'Day';
|
||
|
||
foreach ($daily_program as $index => $day) :
|
||
?>
|
||
<div class="program-day">
|
||
<div class="day-header">
|
||
<div class="day-number"><?php echo esc_html($index + 1); ?></div>
|
||
<h3><?php echo esc_html($day_type_label); ?> <?php echo esc_html($index + 1); ?>: <?php echo esc_html($day['title']); ?></h3>
|
||
</div>
|
||
<p><?php echo wp_kses_post($day['description']); ?></p>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php if (!empty($included_items) || !empty($not_included_items)) : ?>
|
||
<div class="tour-included">
|
||
<h2>Included in Price</h2>
|
||
<div class="included-list">
|
||
<?php if (!empty($included_items)) : ?>
|
||
<?php foreach ($included_items as $item) : ?>
|
||
<div class="included-item">
|
||
<i class="fas fa-check"></i>
|
||
<span><?php echo esc_html($item); ?></span>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
<?php endif; ?>
|
||
|
||
<?php if (!empty($not_included_items)) : ?>
|
||
<?php foreach ($not_included_items as $item) : ?>
|
||
<div class="not-included-item">
|
||
<i class="fas fa-times"></i>
|
||
<span><?php echo esc_html($item); ?></span>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<!-- Available Extras -->
|
||
<?php
|
||
$available_extras = get_post_meta(get_the_ID(), '_available_extras', true);
|
||
if (!empty($available_extras)) :
|
||
?>
|
||
<div class="tour-section">
|
||
<h2>Available Extras</h2>
|
||
<div class="available-extras-list">
|
||
<?php foreach ($available_extras as $extra) : ?>
|
||
<div class="available-extra-item">
|
||
<i class="fas fa-plus-circle"></i>
|
||
<span><?php echo esc_html($extra['name']); ?></span>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<!-- Right Column - Booking Form -->
|
||
<div class="tour-booking">
|
||
<div class="booking-form">
|
||
<h3><?php echo get_post_meta(get_the_ID(), '_tour_price', true) ? 'Book Now' : 'Send Inquiry'; ?></h3>
|
||
|
||
<!-- Guide Information -->
|
||
<?php
|
||
$guide_image = get_post_meta(get_the_ID(), '_guide_image', true);
|
||
$guide_name = get_post_meta(get_the_ID(), '_guide_name', true);
|
||
$guide_title = get_post_meta(get_the_ID(), '_guide_title', true);
|
||
|
||
if ($guide_image || $guide_name) : ?>
|
||
<div class="guide-info-container">
|
||
<div class="guide-info">
|
||
<?php if ($guide_image): ?>
|
||
<img src="<?php echo esc_url($guide_image); ?>" alt="<?php echo esc_attr($guide_name); ?>" class="guide-image">
|
||
<?php endif; ?>
|
||
|
||
<div class="guide-details">
|
||
<?php if ($guide_name): ?>
|
||
<h4 class="guide-name"><?php echo esc_html($guide_name); ?></h4>
|
||
<?php endif; ?>
|
||
<?php if ($guide_title): ?>
|
||
<div class="guide-title"><?php echo esc_html($guide_title); ?></div>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<div class="guide-contact">
|
||
<div class="contact-item">
|
||
<i class="fas fa-phone"></i>
|
||
<a href="tel:+38631356333">+386 31 356 333</a>
|
||
</div>
|
||
<div class="contact-item">
|
||
<i class="fas fa-envelope"></i>
|
||
<a href="mailto:info@europewonder.com">info@europewonder.com</a>
|
||
</div>
|
||
<div class="contact-item">
|
||
<i class="fab fa-whatsapp"></i>
|
||
<a href="https://wa.me/38631356333" target="_blank">WhatsApp</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="guide-message">
|
||
Pošljite nam povpraševanje in pomagali vam bomo načrtovati vaše potovanje.
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<form id="payment-form" data-tour-id="<?php echo esc_attr(get_the_ID()); ?>" data-tour-name="<?php echo esc_attr(get_the_title()); ?>" data-tour-price="<?php echo esc_attr(get_post_meta(get_the_ID(), '_tour_price', true)); ?>">
|
||
<input type="hidden" id="tour-duration" value="<?php echo esc_attr(get_post_meta(get_the_ID(), '_tour_duration', true)); ?>">
|
||
<input type="hidden" id="base-price" value="<?php echo esc_attr(get_post_meta(get_the_ID(), '_tour_price', true)); ?>">
|
||
<input type="hidden" id="tour_total_price" name="tour_total_price" value="">
|
||
<input type="hidden" id="selected_extras" name="selected_extras" value="">
|
||
<div class="form-group">
|
||
<label for="name">Full Name</label>
|
||
<input type="text" id="name" name="name" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email">Email</label>
|
||
<input type="email" id="email" name="email" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="date">Departure Date</label>
|
||
<input type="date" id="date" name="date" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="participants">Number of Participants</label>
|
||
<input type="number" id="number-of-people" name="participants" min="1" value="1" required>
|
||
</div>
|
||
|
||
<div id="initial-single-supplement-notice" class="single-supplement-notice" style="display: none; background: #FEE2E2; border: 1px solid #FCA5A5; padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1.5rem;">
|
||
<i class="fas fa-info-circle" style="color: #DC2626;"></i>
|
||
<span style="color: #B91C1C;">For single travelers, a supplement of €100 per day will be added to the price.</span>
|
||
</div>
|
||
|
||
<?php if (get_post_meta(get_the_ID(), '_tour_price', true)) : ?>
|
||
<div class="form-group">
|
||
<label class="price-label">Total Price</label>
|
||
<div class="total-price">
|
||
<i class="fas fa-tag"></i>
|
||
<div class="price-wrapper">
|
||
<span id="total-price"><?php echo number_format(floatval(get_post_meta(get_the_ID(), '_tour_price', true)), 2); ?></span>
|
||
<span class="currency">€</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php else: ?>
|
||
<div class="form-group">
|
||
<label class="price-label">Price</label>
|
||
<div class="price-on-request">
|
||
<i class="fas fa-envelope"></i>
|
||
<span>Per Request</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="message">Message (optional)</label>
|
||
<textarea id="message" name="message" rows="4" placeholder="Enter any additional questions or special requirements..."></textarea>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<button type="submit" class="btn-book" id="submit-button">
|
||
<span id="button-text"><?php echo get_post_meta(get_the_ID(), '_tour_price', true) ? 'Proceed to Payment' : 'Send Inquiry'; ?></span>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- FAQ Section -->
|
||
<section class="tour-faq">
|
||
<div class="container">
|
||
<h2>Frequently Asked Questions</h2>
|
||
<?php
|
||
$faqs = get_post_meta(get_the_ID(), '_tour_faqs', true);
|
||
if (is_array($faqs) && !empty($faqs)) :
|
||
?>
|
||
<div class="faq-container">
|
||
<?php foreach ($faqs as $faq) : ?>
|
||
<div class="faq-item">
|
||
<div class="faq-question">
|
||
<h3><?php echo esc_html($faq['question']); ?></h3>
|
||
<span class="faq-toggle">
|
||
<i class="fas fa-plus"></i>
|
||
<i class="fas fa-minus"></i>
|
||
</span>
|
||
</div>
|
||
<div class="faq-answer">
|
||
<?php echo wp_kses_post($faq['answer']); ?>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php else : ?>
|
||
<p class="no-faqs">Currently no frequently asked questions for this tour.</p>
|
||
<?php endif; ?>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
.tour-faq {
|
||
padding: 4rem 0;
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.tour-faq .container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.tour-faq h2 {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
color: #333;
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.faq-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.faq-item {
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.faq-question {
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.faq-question:hover {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.faq-question h3 {
|
||
margin: 0;
|
||
font-size: 1.1rem;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.faq-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.faq-toggle .fa-minus {
|
||
display: none;
|
||
}
|
||
|
||
.faq-answer {
|
||
padding: 0 1.5rem;
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
opacity: 0;
|
||
}
|
||
|
||
.faq-item.active .faq-question {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.faq-item.active .faq-toggle .fa-plus {
|
||
display: none;
|
||
}
|
||
|
||
.faq-item.active .faq-toggle .fa-minus {
|
||
display: block;
|
||
}
|
||
|
||
.faq-item.active .faq-answer {
|
||
padding: 1.5rem;
|
||
max-height: 500px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.no-faqs {
|
||
text-align: center;
|
||
padding: 2rem;
|
||
background: white;
|
||
border-radius: 8px;
|
||
color: #666;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.tour-faq h2 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.faq-question h3 {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const faqItems = document.querySelectorAll('.faq-item');
|
||
|
||
faqItems.forEach(item => {
|
||
const question = item.querySelector('.faq-question');
|
||
|
||
question.addEventListener('click', () => {
|
||
const isActive = item.classList.contains('active');
|
||
|
||
// Zapri vsa ostala vprašanja
|
||
faqItems.forEach(otherItem => {
|
||
if (otherItem !== item) {
|
||
otherItem.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// Preklopi trenutno vprašanje
|
||
item.classList.toggle('active', !isActive);
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<?php endwhile; ?>
|
||
|
||
<script>
|
||
jQuery(document).ready(function($) {
|
||
// ---------- INICIALIZACIJA OSNOVNIH SPREMENLJIVK ----------
|
||
const form = $('#payment-form');
|
||
const tourPrice = parseFloat(form.data('tour-price'));
|
||
const participantsInput = $('#number-of-people');
|
||
const totalPriceElement = $('#total-price');
|
||
const submitButton = $('#submit-button');
|
||
const buttonText = $('#button-text');
|
||
const popup = $('#bookingPopup');
|
||
const closePopupBtn = $('.close-popup');
|
||
const singleSupplementNotice = $('#single-supplement-notice');
|
||
const SINGLE_SUPPLEMENT_PER_DAY = 100;
|
||
const tourDuration = parseInt($('#tour-duration').val());
|
||
|
||
// Inicializacija Stripe samo če ima tura ceno
|
||
let stripe, elements, cardElement;
|
||
if (tourPrice) {
|
||
stripe = Stripe('pk_live_51QDX5ED0QTWuqIH7U57GyAlPbkDeLoLmMOU3EHZs7e6W56nLGRzZUa5mx60xrO4eyWxZG0gQGnIsrJmEA3SbYKD200EcUZUqD1');
|
||
elements = stripe.elements();
|
||
cardElement = elements.create('card');
|
||
cardElement.mount('#card-element');
|
||
}
|
||
|
||
// Variable to store form data in closure scope
|
||
let storedFormData = null;
|
||
|
||
// Odstrani razred napake, ko uporabnik začne vnašati podatke
|
||
form.find('[required]').on('input', function() {
|
||
$(this).removeClass('error');
|
||
});
|
||
|
||
// ---------- FUNKCIJA ZA ZAPIRANJE POPUPA ----------
|
||
function closePopup() {
|
||
popup.fadeOut(300);
|
||
if (cardElement) {
|
||
cardElement.clear();
|
||
}
|
||
$('#card-errors').text('').removeClass('visible');
|
||
}
|
||
|
||
// ---------- NASTAVITEV DATUMA IN VALIDACIJA OBRAZCA ----------
|
||
// Nastavi današnji datum kot minimalni datum
|
||
const today = new Date().toISOString().split('T')[0];
|
||
$('#date').attr('min', today);
|
||
|
||
// Obvezna validacija ob pošiljanju obrazca
|
||
form.on('submit', function(e) {
|
||
e.preventDefault();
|
||
console.log('Form submit event triggered');
|
||
|
||
// Preveri, če so vsa obvezna polja izpolnjena
|
||
let isValid = true;
|
||
let firstInvalidField = null;
|
||
let missingFields = [];
|
||
|
||
form.find('[required]').each(function() {
|
||
const $field = $(this);
|
||
const fieldValue = $field.val().trim();
|
||
const fieldId = $field.attr('id');
|
||
const fieldLabel = $field.prev('label').text();
|
||
|
||
if (!fieldValue) {
|
||
isValid = false;
|
||
$field.addClass('error');
|
||
missingFields.push(fieldLabel);
|
||
if (!firstInvalidField) {
|
||
firstInvalidField = $field;
|
||
}
|
||
} else {
|
||
$field.removeClass('error');
|
||
}
|
||
});
|
||
|
||
if (!isValid) {
|
||
alert('Please fill in all required fields: ' + missingFields.join(', '));
|
||
if (firstInvalidField) {
|
||
firstInvalidField.focus();
|
||
}
|
||
return false;
|
||
}
|
||
|
||
// Če tura nima cene, pošlji povpraševanje
|
||
if (!tourPrice) {
|
||
const formData = {
|
||
action: 'send_tour_inquiry',
|
||
security: '<?php echo wp_create_nonce("send_tour_inquiry"); ?>',
|
||
tour_id: form.data('tour-id'),
|
||
tour_name: form.data('tour-name'),
|
||
name: $('#name').val(),
|
||
email: $('#email').val(),
|
||
date: $('#date').val(),
|
||
participants: $('#number-of-people').val(),
|
||
message: $('#message').val()
|
||
};
|
||
|
||
$.ajax({
|
||
url: '<?php echo admin_url("admin-ajax.php"); ?>',
|
||
type: 'POST',
|
||
data: formData,
|
||
success: function(response) {
|
||
if (response.success) {
|
||
// Prikaži success popup namesto preusmeritve
|
||
$('#successPopup').fadeIn(300);
|
||
// Počisti obrazec
|
||
form[0].reset();
|
||
} else {
|
||
alert(response.data.message || 'An error occurred while sending your inquiry. Please try again.');
|
||
}
|
||
},
|
||
error: function() {
|
||
alert('An error occurred while sending your inquiry. Please try again.');
|
||
}
|
||
});
|
||
return false;
|
||
}
|
||
|
||
// Če ima tura ceno, nadaljuj s plačilnim procesom
|
||
console.log('Vsa polja so izpolnjena, prikazujem popup');
|
||
|
||
$('#popupTourName').text(form.data('tour-name'));
|
||
$('#popupDate').text($('#date').val());
|
||
$('#popupParticipants').text($('#number-of-people').val());
|
||
|
||
$('.popup-extras-list input[type="checkbox"]').prop('checked', false);
|
||
|
||
const totalPrice = updateTotalPrice();
|
||
|
||
const selectedDate = new Date($('#date').val());
|
||
const today = new Date();
|
||
const twoMonthsFromNow = new Date();
|
||
twoMonthsFromNow.setMonth(today.getMonth() + 2);
|
||
|
||
if (selectedDate >= twoMonthsFromNow) {
|
||
$('#payment-options').show();
|
||
} else {
|
||
$('#payment-options').hide();
|
||
$('#full-payment').prop('checked', true);
|
||
}
|
||
|
||
popup.fadeIn(300);
|
||
});
|
||
|
||
// ---------- FUNKCIJA ZA POSODOBITEV SKUPNE CENE ----------
|
||
function updateTotalPrice() {
|
||
const basePrice = parseFloat($('#base-price').val());
|
||
const participants = parseInt(participantsInput.val());
|
||
const tourDuration = parseInt($('#tour-duration').val());
|
||
let totalPrice = basePrice * participants;
|
||
|
||
// Preveri če je samo en udeleženec - prikaži single supplement obvestilo
|
||
if (participants === 1) {
|
||
const singleSupplement = SINGLE_SUPPLEMENT_PER_DAY * tourDuration;
|
||
totalPrice += singleSupplement;
|
||
singleSupplementNotice.show();
|
||
// Posodobi prikaz števila dni in skupnega zneska za single supplement
|
||
$('#tour-duration-display').text(tourDuration);
|
||
$('#single-supplement-total').text('€' + singleSupplement);
|
||
} else {
|
||
singleSupplementNotice.hide();
|
||
}
|
||
|
||
// Dodaj cene dodatkov
|
||
const extras = getSelectedExtras();
|
||
let hasPriceOnRequest = false;
|
||
|
||
extras.forEach(function(extra) {
|
||
if (extra.is_price_per_request) {
|
||
hasPriceOnRequest = true;
|
||
console.log(`Dodatek "${extra.name}" ima ceno na zahtevo - ne dodajam k skupni vsoti`);
|
||
} else if (extra.is_per_day_per_person === "true") {
|
||
totalPrice += extra.price * tourDuration * participants;
|
||
} else {
|
||
totalPrice += extra.price;
|
||
}
|
||
});
|
||
|
||
// Posodobi prikazano ceno v obrazcu in popupu
|
||
totalPriceElement.text(totalPrice.toFixed(2));
|
||
|
||
// Posodobi cene možnosti plačila
|
||
$('#full-payment-amount').text(totalPrice.toFixed(2));
|
||
$('#deposit-amount').text((totalPrice * 0.3).toFixed(2));
|
||
|
||
// Posodobi hidden polje
|
||
$('#tour_total_price').val(totalPrice.toFixed(2));
|
||
|
||
// Posodobi prikaz cene v popupu glede na izbrani način plačila
|
||
const paymentType = $('input[name="payment-type"]:checked').val();
|
||
if (paymentType === 'partial') {
|
||
$('#popupTotalPrice').text((totalPrice * 0.3).toFixed(2));
|
||
} else {
|
||
$('#popupTotalPrice').text(totalPrice.toFixed(2));
|
||
}
|
||
|
||
// Če obstaja kak dodatek s ceno na zahtevo, dodaj opombo
|
||
if (hasPriceOnRequest) {
|
||
// Preveri če opomba že obstaja
|
||
if ($('#price-request-note').length === 0) {
|
||
// Dodaj opombo pod Total Amount
|
||
const note = $('<div id="price-request-note" style="font-size: 0.85rem; color: #666; margin-top: 5px;"><i class="fas fa-info-circle"></i> Some extras require price confirmation</div>');
|
||
$('.total-price').append(note);
|
||
}
|
||
} else {
|
||
// Odstrani opombo, če ni dodatkov s ceno na zahtevo
|
||
$('#price-request-note').remove();
|
||
}
|
||
|
||
return totalPrice;
|
||
}
|
||
|
||
// ---------- EVENT LISTENERS ----------
|
||
// Event Listener za spremembo števila udeležencev in dodatkov
|
||
participantsInput.on('change', function() {
|
||
console.log('Sprememba števila udeležencev na:', $(this).val());
|
||
updateTotalPrice();
|
||
|
||
// Prikaži ali skrij obvestilo o single supplement
|
||
const participants = parseInt($(this).val());
|
||
if (participants === 1) {
|
||
$('#initial-single-supplement-notice').slideDown(300);
|
||
} else {
|
||
$('#initial-single-supplement-notice').slideUp(300);
|
||
}
|
||
});
|
||
|
||
// Event listener za spremembo checkboxov za dodatke
|
||
$('.popup-extras-list input[type="checkbox"]').on('change', function() {
|
||
const extraName = $(this).data('name');
|
||
const isChecked = $(this).is(':checked');
|
||
console.log(`Dodatek "${extraName}" ${isChecked ? 'izbran' : 'odstranjen'}`);
|
||
updateTotalPrice();
|
||
});
|
||
|
||
// Event listener za spremembo načina plačila
|
||
$('input[name="payment-type"]').on('change', function() {
|
||
const paymentType = $(this).val();
|
||
const totalAmount = updateTotalPrice();
|
||
console.log(`Spremenjen način plačila na: ${paymentType}`);
|
||
|
||
// Posodobi prikazan znesek glede na izbrani način plačila
|
||
if (paymentType === 'partial') {
|
||
const depositAmount = parseFloat((totalAmount * 0.3).toFixed(2));
|
||
$('#popupTotalPrice').text(depositAmount.toFixed(2));
|
||
console.log(`Prikazan znesek posodobljen na polog: €${depositAmount.toFixed(2)}`);
|
||
} else {
|
||
$('#popupTotalPrice').text(totalAmount.toFixed(2));
|
||
console.log(`Prikazan znesek posodobljen na celoten znesek: €${totalAmount.toFixed(2)}`);
|
||
}
|
||
});
|
||
|
||
// Inicializacija cene pri nalaganju strani
|
||
updateTotalPrice();
|
||
|
||
// Zapiranje popupa
|
||
closePopupBtn.on('click', closePopup);
|
||
|
||
$(window).on('click', function(e) {
|
||
if ($(e.target).is(popup)) {
|
||
closePopup();
|
||
}
|
||
});
|
||
|
||
// ---------- GALERIJA MODAL ----------
|
||
let currentImageIndex = 0;
|
||
const galleryImages = <?php echo json_encode(array_values(array_filter(array_map(function($image_id) {
|
||
return wp_get_attachment_image_url($image_id, 'large');
|
||
}, $gallery_images ?? [])))); ?>;
|
||
|
||
window.openGalleryModal = function(img) {
|
||
const modal = document.getElementById('galleryModal');
|
||
const modalImg = document.getElementById('modalImage');
|
||
currentImageIndex = Array.from(img.parentElement.children).indexOf(img);
|
||
|
||
modal.style.display = "block";
|
||
setTimeout(() => modal.classList.add('show'), 10);
|
||
|
||
updateModalImage();
|
||
}
|
||
|
||
function updateModalImage() {
|
||
const modalImg = document.getElementById('modalImage');
|
||
const currentNum = document.getElementById('currentImageNum');
|
||
const totalImages = document.getElementById('totalImages');
|
||
|
||
modalImg.src = galleryImages[currentImageIndex];
|
||
currentNum.textContent = currentImageIndex + 1;
|
||
totalImages.textContent = galleryImages.length;
|
||
}
|
||
|
||
function changeImage(direction) {
|
||
currentImageIndex = (currentImageIndex + direction + galleryImages.length) % galleryImages.length;
|
||
updateModalImage();
|
||
}
|
||
|
||
function closeGalleryModal() {
|
||
const modal = document.getElementById('galleryModal');
|
||
modal.classList.remove('show');
|
||
setTimeout(() => modal.style.display = "none", 300);
|
||
}
|
||
|
||
// Event Listeners za galerijo
|
||
$('.close-modal').on('click', closeGalleryModal);
|
||
|
||
// Close modal on escape key and arrow navigation
|
||
$(document).on('keydown', function(e) {
|
||
const modal = document.getElementById('galleryModal');
|
||
if (modal.style.display === "block") {
|
||
if (e.key === 'Escape') {
|
||
closeGalleryModal();
|
||
} else if (e.key === 'ArrowLeft') {
|
||
changeImage(-1);
|
||
} else if (e.key === 'ArrowRight') {
|
||
changeImage(1);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Prevent scrolling when modal is open
|
||
$('#galleryModal').on('wheel', function(e) {
|
||
if (this.style.display === "block") {
|
||
e.preventDefault();
|
||
}
|
||
});
|
||
|
||
// Touch swipe support for mobile
|
||
let touchStartX = 0;
|
||
let touchEndX = 0;
|
||
|
||
$('#galleryModal').on('touchstart', function(e) {
|
||
touchStartX = e.originalEvent.changedTouches[0].screenX;
|
||
});
|
||
|
||
$('#galleryModal').on('touchend', function(e) {
|
||
touchEndX = e.originalEvent.changedTouches[0].screenX;
|
||
handleSwipe();
|
||
});
|
||
|
||
function handleSwipe() {
|
||
const swipeThreshold = 50;
|
||
const swipeDistance = touchEndX - touchStartX;
|
||
|
||
if (Math.abs(swipeDistance) > swipeThreshold) {
|
||
if (swipeDistance > 0) {
|
||
// Swipe right - previous image
|
||
changeImage(-1);
|
||
} else {
|
||
// Swipe left - next image
|
||
changeImage(1);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Add click handlers for navigation buttons
|
||
$('.prev').on('click', function() {
|
||
changeImage(-1);
|
||
});
|
||
|
||
$('.next').on('click', function() {
|
||
changeImage(1);
|
||
});
|
||
|
||
// ---------- OBDELAVA PLAČILA ----------
|
||
$('#submit-payment').on('click', function(e) {
|
||
e.preventDefault();
|
||
console.log('Payment submission initiated');
|
||
|
||
// Počisti prejšnja sporočila o napakah
|
||
$('#card-errors').text('').removeClass('visible');
|
||
|
||
const button = $(this);
|
||
const buttonPaymentText = $('#button-payment-text');
|
||
const spinner = $('#spinner');
|
||
|
||
// Preveri, če je Stripe polje izpolnjeno
|
||
if (!cardElement._complete) {
|
||
$('#card-errors').text('Please enter your card details.').addClass('visible');
|
||
return;
|
||
}
|
||
|
||
// Dodatna validacija, da preverimo, če manjka kakšen podatek
|
||
if (!storedFormData || !storedFormData.name || !storedFormData.email || !storedFormData.date) {
|
||
console.error('Manjkajoči podatki obrazca:', storedFormData);
|
||
|
||
// Neposredno pridobivanje vrednosti z document.getElementById
|
||
console.log('Poskus ponovnega zajema vrednosti z document.getElementById');
|
||
const nameValue = document.getElementById('name')?.value;
|
||
const emailValue = document.getElementById('email')?.value;
|
||
const dateValue = document.getElementById('date')?.value;
|
||
const participantsValue = document.getElementById('number-of-people')?.value;
|
||
|
||
// Poskusimo alternativne pristope
|
||
let directNameValue = '';
|
||
let directEmailValue = '';
|
||
let directDateValue = '';
|
||
let directParticipantsValue = '';
|
||
|
||
// Pristop preko HTMLCollection
|
||
console.log('Poskus s pregledovanjem vseh input elementov:');
|
||
const allInputs = document.getElementsByTagName('input');
|
||
for (let i = 0; i < allInputs.length; i++) {
|
||
console.log(`Input #${i}:`, {
|
||
id: allInputs[i].id,
|
||
name: allInputs[i].name,
|
||
value: allInputs[i].value,
|
||
type: allInputs[i].type
|
||
});
|
||
|
||
if (allInputs[i].id === 'name') {
|
||
directNameValue = allInputs[i].value;
|
||
}
|
||
if (allInputs[i].id === 'email') {
|
||
directEmailValue = allInputs[i].value;
|
||
}
|
||
if (allInputs[i].id === 'date') {
|
||
directDateValue = allInputs[i].value;
|
||
}
|
||
if (allInputs[i].id === 'number-of-people') {
|
||
directParticipantsValue = allInputs[i].value;
|
||
}
|
||
}
|
||
|
||
// Izberi najboljšo vrednost
|
||
const finalNameValue = directNameValue || nameValue || $('#name').val() || '';
|
||
const finalEmailValue = directEmailValue || emailValue || $('#email').val() || '';
|
||
const finalDateValue = directDateValue || dateValue || $('#date').val() || '';
|
||
const finalParticipantsValue = directParticipantsValue || participantsValue || $('#number-of-people').val() || '1';
|
||
|
||
console.log('Ponovno zajete DOM vrednosti:', {
|
||
name: finalNameValue,
|
||
email: finalEmailValue,
|
||
date: finalDateValue,
|
||
participants: finalParticipantsValue
|
||
});
|
||
|
||
// Za vsak primer ponovno naberimo podatke
|
||
storedFormData = {
|
||
action: 'process_tour_booking',
|
||
security: '<?php echo wp_create_nonce("process_tour_booking"); ?>',
|
||
tour_id: form.data('tour-id'),
|
||
tour_name: form.data('tour-name'),
|
||
name: finalNameValue,
|
||
email: finalEmailValue,
|
||
date: finalDateValue,
|
||
participants: finalParticipantsValue,
|
||
extras: JSON.stringify(getSelectedExtras()),
|
||
total_price: updateTotalPrice(),
|
||
single_supplement: parseInt(finalParticipantsValue) === 1
|
||
};
|
||
|
||
// Ponovno preveri
|
||
if (!storedFormData.name || !storedFormData.email || !storedFormData.date) {
|
||
$('#card-errors').text('Please fill in all required fields in the form.').addClass('visible');
|
||
console.error('Še vedno manjkajo podatki:', {
|
||
name: storedFormData.name || 'manjka',
|
||
email: storedFormData.email || 'manjka',
|
||
date: storedFormData.date || 'manjka'
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
|
||
button.prop('disabled', true);
|
||
buttonPaymentText.text('Processing...');
|
||
spinner.removeClass('hidden');
|
||
|
||
console.log('Pošiljam podatke:', storedFormData);
|
||
|
||
// Uporabi asinhron način s pomočjo funkcije
|
||
processPayment();
|
||
|
||
// Prepreči privzeto obnašanje gumba
|
||
return false;
|
||
});
|
||
|
||
// Funkcija za obdelavo plačila
|
||
async function processPayment() {
|
||
try {
|
||
// Pridobi izbrani način plačila
|
||
const paymentType = $('input[name="payment-type"]:checked').val();
|
||
|
||
// Nastavi vrednost plačila glede na izbrani način
|
||
const totalAmount = updateTotalPrice();
|
||
let paymentAmount = totalAmount;
|
||
|
||
if (paymentType === 'partial') {
|
||
paymentAmount = parseFloat((totalAmount * 0.3).toFixed(2)); // 30% celotnega zneska
|
||
console.log('Using partial payment (30%): €', paymentAmount);
|
||
} else {
|
||
console.log('Using full payment: €', paymentAmount);
|
||
}
|
||
|
||
// Najprej ustvari WooCommerce naročilo
|
||
const orderData = { ...storedFormData };
|
||
orderData.payment_type = paymentType;
|
||
orderData.payment_amount = paymentAmount;
|
||
|
||
const orderResponse = await $.ajax({
|
||
url: '<?php echo admin_url("admin-ajax.php"); ?>',
|
||
type: 'POST',
|
||
data: orderData,
|
||
dataType: 'json' // Eksplicitno določimo tip podatkov
|
||
});
|
||
|
||
console.log('Order response:', orderResponse);
|
||
|
||
if (!orderResponse.success) {
|
||
throw new Error(orderResponse.data?.message || 'Failed to create order');
|
||
}
|
||
|
||
// Pridobi client secret za Stripe
|
||
const { client_secret, order_id } = orderResponse.data;
|
||
|
||
console.log('Processing payment with client_secret:', client_secret, 'for order ID:', order_id);
|
||
|
||
// Potrdi plačilo s Stripe
|
||
const result = await stripe.confirmCardPayment(client_secret, {
|
||
payment_method: {
|
||
card: cardElement,
|
||
billing_details: {
|
||
name: storedFormData.name,
|
||
email: storedFormData.email
|
||
}
|
||
}
|
||
});
|
||
|
||
console.log('Stripe result:', result);
|
||
|
||
if (result.error) {
|
||
throw new Error(result.error.message);
|
||
}
|
||
|
||
// Preveri, če je plačilo uspešno zaključeno
|
||
if (result.paymentIntent.status === 'succeeded') {
|
||
console.log('Payment succeeded! Payment Intent ID:', result.paymentIntent.id);
|
||
|
||
// Pošlji še dodatno potrditev na strežnik
|
||
try {
|
||
const confirmationResult = await $.ajax({
|
||
url: '<?php echo admin_url("admin-ajax.php"); ?>',
|
||
type: 'POST',
|
||
data: {
|
||
action: 'confirm_stripe_payment',
|
||
security: '<?php echo wp_create_nonce("confirm_stripe_payment"); ?>',
|
||
payment_intent_id: result.paymentIntent.id,
|
||
order_id: order_id
|
||
},
|
||
dataType: 'json'
|
||
});
|
||
|
||
console.log('Payment confirmation result:', confirmationResult);
|
||
} catch (confirmError) {
|
||
console.warn('Failed to confirm payment on server, but payment was successful:', confirmError);
|
||
// Ne prekinemo, ker je plačilo že uspelo
|
||
}
|
||
|
||
// Uspešno plačilo - preusmeri na zahvalno stran
|
||
window.location.href = orderResponse.data.thank_you_url;
|
||
} else {
|
||
console.error('Payment was not successful. Status:', result.paymentIntent.status);
|
||
throw new Error('Payment processing incomplete. Please try again or contact support.');
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('Payment error:', error);
|
||
$('#card-errors').text(error.message).addClass('visible');
|
||
$('#submit-payment').prop('disabled', false);
|
||
$('#button-payment-text').text('Confirm Payment');
|
||
$('#spinner').addClass('hidden');
|
||
}
|
||
}
|
||
|
||
// ---------- POMOŽNE FUNKCIJE ----------
|
||
// Pomožna funkcija za zbiranje izbranih dodatkov
|
||
function getSelectedExtras() {
|
||
const selectedExtras = [];
|
||
const participants = parseInt($('#number-of-people').val());
|
||
const tourDuration = parseInt($('#tour-duration').val());
|
||
|
||
console.log('========== ZBIRANJE IZBRANIH DODATKOV ==========');
|
||
console.log('Število udeležencev:', participants);
|
||
console.log('Trajanje (dni):', tourDuration);
|
||
|
||
$('.popup-extras-list input[type="checkbox"]:checked').each(function() {
|
||
const extraName = $(this).data('name');
|
||
const extraBasePrice = parseFloat($(this).data('price'));
|
||
const isPerDayPerPerson = $(this).attr('data-per-day-per-person') === 'true';
|
||
|
||
console.log('-------------------------');
|
||
console.log('Dodatek:', extraName);
|
||
console.log('Osnovna cena:', extraBasePrice, '€');
|
||
console.log('Per day per person:', isPerDayPerPerson ? 'DA' : 'NE');
|
||
|
||
// Izračun končne cene
|
||
let extraTotalPrice = extraBasePrice;
|
||
let priceCalculation = '';
|
||
let isPricePerRequest = extraBasePrice === 0 || isNaN(extraBasePrice);
|
||
|
||
if (isPricePerRequest) {
|
||
extraTotalPrice = 0;
|
||
priceCalculation = `Cena na zahtevo`;
|
||
console.log('Dodatek na zahtevo - cena ni določena');
|
||
} else if (isPerDayPerPerson) {
|
||
extraTotalPrice = extraBasePrice * tourDuration * participants;
|
||
priceCalculation = `${extraBasePrice}€ × ${tourDuration} dni × ${participants} oseb = ${extraTotalPrice}€`;
|
||
console.log('Izračun cene dodatka:', priceCalculation);
|
||
} else {
|
||
priceCalculation = `${extraBasePrice}€ (fiksna cena)`;
|
||
console.log('Izračun cene dodatka:', priceCalculation);
|
||
}
|
||
|
||
selectedExtras.push({
|
||
name: extraName,
|
||
price: extraTotalPrice,
|
||
base_price: extraBasePrice,
|
||
quantity: 1,
|
||
is_per_day_per_person: isPerDayPerPerson,
|
||
is_price_per_request: isPricePerRequest,
|
||
days: tourDuration,
|
||
participants: participants,
|
||
price_calculation: priceCalculation
|
||
});
|
||
});
|
||
|
||
if (selectedExtras.length > 0) {
|
||
console.log('-------------------------');
|
||
console.log('Izbrani dodatki:', selectedExtras);
|
||
} else {
|
||
console.log('Ni izbranih dodatkov');
|
||
}
|
||
console.log('=============================================');
|
||
|
||
return selectedExtras;
|
||
}
|
||
|
||
// Funkcija za zapiranje success popupa
|
||
window.closeSuccessPopup = function() {
|
||
$('#successPopup').fadeOut(300);
|
||
}
|
||
|
||
// Zapiranje success popupa ob kliku na overlay
|
||
$('#successPopup').on('click', function(e) {
|
||
if ($(e.target).is('#successPopup')) {
|
||
closeSuccessPopup();
|
||
}
|
||
});
|
||
|
||
// Zapiranje success popupa ob kliku na X
|
||
$('#successPopup .close-popup').on('click', closeSuccessPopup);
|
||
|
||
// Preveri začetno stanje ob nalaganju strani
|
||
if (parseInt(participantsInput.val()) === 1) {
|
||
$('#initial-single-supplement-notice').show();
|
||
}
|
||
|
||
// Omogoči uporabo tipke Enter za potrditev kode
|
||
$('#popup-promo-code').on('keypress', function(e) {
|
||
if (e.which === 13) {
|
||
e.preventDefault();
|
||
$('#popup-apply-promo').click();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<?php get_footer(); ?>
|
||
</body>
|
||
</html>
|