| 1 |
<?php |
| 2 |
if (!defined('ABSPATH')) { |
| 3 |
exit; |
| 4 |
} |
| 5 |
?> |
| 6 |
<section class="yatra-trip-section" id="itinerary" itemscope itemtype="https://schema.org/TouristTrip"> |
| 7 |
<div class="yatra-section-header-with-actions"> |
| 8 |
<h2 class="yatra-trip-section-title"> |
| 9 |
<?php yatra_render_tab_icon($tab->icon ?? null, 'calendar', 'yatra-trip-section-title-icon', $tab->label ?? __('Itinerary', 'yatra')); ?> |
| 10 |
<?php echo esc_html(isset($tab->label) ? $tab->label : __('Itinerary', 'yatra')); ?> |
| 11 |
</h2> |
| 12 |
<div class="yatra-itinerary-actions"> |
| 13 |
<button type="button" class="yatra-toggle-all-btn" id="yatra-toggle-all"> |
| 14 |
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="toggle-icon expand-icon" aria-hidden="true"> |
| 15 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/> |
| 16 |
</svg> |
| 17 |
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="toggle-icon collapse-icon" aria-hidden="true"> |
| 18 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25"/> |
| 19 |
</svg> |
| 20 |
<span class="toggle-text"><?php echo esc_html__('Expand All', 'yatra'); ?></span> |
| 21 |
</button> |
| 22 |
</div> |
| 23 |
</div> |
| 24 |
|
| 25 |
<?php |
| 26 |
// Use dynamic itinerary data from trip only |
| 27 |
$itinerary_days = $trip->getItineraryDays(); |
| 28 |
|
| 29 |
// Icon mapping function |
| 30 |
$get_icon = function($icon_name) { |
| 31 |
$icons = [ |
| 32 |
'car' => '<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 17h.01M16 17h.01M3 11l1.5-4.5A2 2 0 016.4 5h11.2a2 2 0 011.9 1.5L21 11M3 11v6a1 1 0 001 1h1m16-7v6a1 1 0 01-1 1h-1M3 11h18"/></svg>', |
| 33 |
'plane' => '<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>', |
| 34 |
'utensils' => '<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18m-7-4h14M5 3v4a2 2 0 002 2h10a2 2 0 002-2V3"/></svg>', |
| 35 |
'hotel' => '<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>', |
| 36 |
'hiking' => '<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM5 22l3-9 4 3 5-7"/></svg>', |
| 37 |
'moon' => '<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>', |
| 38 |
'camera' => '<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/></svg>', |
| 39 |
]; |
| 40 |
return $icons[$icon_name] ?? $icons['hiking']; |
| 41 |
}; |
| 42 |
|
| 43 |
// Item type colors |
| 44 |
$type_colors = [ |
| 45 |
'Transportation' => '#3b82f6', |
| 46 |
'Meal' => '#f59e0b', |
| 47 |
'Accommodation' => '#8b5cf6', |
| 48 |
'Activity' => '#10b981', |
| 49 |
'Rest' => '#6b7280', |
| 50 |
]; |
| 51 |
?> |
| 52 |
|
| 53 |
<div class="yatra-itinerary-timeline"> |
| 54 |
<?php if (empty($itinerary_days)): ?> |
| 55 |
<div class="yatra-empty-itinerary"> |
| 56 |
<div class="yatra-empty-state-icon"> |
| 57 |
<?php echo yatra_svg_icon('calendar', 'yatra-icon-lg'); ?> |
| 58 |
</div> |
| 59 |
<h3 class="yatra-empty-state-title"><?php esc_html_e('No Itinerary Available', 'yatra'); ?></h3> |
| 60 |
<p class="yatra-empty-state-description"> |
| 61 |
<?php esc_html_e('Detailed itinerary information will be available soon. Please check back later or contact us for more details.', 'yatra'); ?> |
| 62 |
</p> |
| 63 |
</div> |
| 64 |
<?php else: ?> |
| 65 |
<?php foreach ($itinerary_days as $idx => $day): ?> |
| 66 |
<div class="yatra-itinerary-day<?php echo (int) $idx === 0 ? ' is-day-expanded' : ''; ?>" data-day="<?php echo esc_attr($day['day']); ?>"> |
| 67 |
<div class="yatra-itinerary-day-header"> |
| 68 |
<div class="yatra-day-badge"><?php esc_html_e('Day', 'yatra'); ?> <?php echo esc_html($day['day']); ?></div> |
| 69 |
<h3 class="yatra-day-title"><?php echo esc_html($day['day_title']); ?></h3> |
| 70 |
<button type="button" class="yatra-day-toggle" aria-expanded="<?php echo (int) $idx === 0 ? 'true' : 'false'; ?>"> |
| 71 |
<svg class="yatra-chevron-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 72 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> |
| 73 |
</svg> |
| 74 |
</button> |
| 75 |
</div> |
| 76 |
|
| 77 |
<div class="yatra-itinerary-day-content"> |
| 78 |
<?php if (!empty($day['day_description'])): ?> |
| 79 |
<div class="yatra-day-description"> |
| 80 |
<?php echo wp_kses_post(wpautop($day['day_description'])); ?> |
| 81 |
</div> |
| 82 |
<?php endif; ?> |
| 83 |
<div class="yatra-entries-timeline"> |
| 84 |
<?php foreach ($day['entries'] as $index => $entry): |
| 85 |
$rawColor = isset($entry['item_type_color']) ? (string) $entry['item_type_color'] : ''; |
| 86 |
$type_color = $rawColor !== '' ? $rawColor : ($type_colors[$entry['item_type']] ?? '#6b7280'); |
| 87 |
?> |
| 88 |
<div class="yatra-entry-item" style="--entry-color: <?php echo esc_attr($type_color); ?>"> |
| 89 |
<div class="yatra-entry-timeline-dot"></div> |
| 90 |
<div class="yatra-entry-card"> |
| 91 |
<div class="yatra-entry-header"> |
| 92 |
<div class="yatra-entry-icon" style="background: <?php echo esc_attr($type_color); ?>15; color: <?php echo esc_attr($type_color); ?>"> |
| 93 |
<?php |
| 94 |
// Prefer icon picker data from backend (supports Font Awesome + images). |
| 95 |
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped |
| 96 |
echo yatra_stored_picker_icon_markup($entry['icon_picker'] ?? null, 'hiking', 'yatra-icon-sm'); |
| 97 |
?> |
| 98 |
</div> |
| 99 |
<div class="yatra-entry-info"> |
| 100 |
<span class="yatra-entry-type" style="color: <?php echo esc_attr($type_color); ?>"><?php echo esc_html(yatra_itinerary_item_type_label((string) $entry['item_type'])); ?></span> |
| 101 |
<h4 class="yatra-entry-title"><?php echo esc_html($entry['title']); ?></h4> |
| 102 |
</div> |
| 103 |
<?php |
| 104 |
// Time block honours `time_type`: |
| 105 |
// - exact → render the start/end time range (only if values exist) |
| 106 |
// - duration → suppress the time pill entirely (the duration value renders |
| 107 |
// in the meta row below) |
| 108 |
// - flexible → render a "Flexible" label so readers know intentionally no time |
| 109 |
$entryTimeType = $entry['time_type'] ?? 'exact'; |
| 110 |
$hasStart = !empty($entry['start_time']); |
| 111 |
$hasEnd = !empty($entry['end_time']); |
| 112 |
$showTimePill = ($entryTimeType === 'exact' && $hasStart) || $entryTimeType === 'flexible'; |
| 113 |
?> |
| 114 |
<?php if ($showTimePill): ?> |
| 115 |
<div class="yatra-entry-time"> |
| 116 |
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 117 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> |
| 118 |
</svg> |
| 119 |
<span> |
| 120 |
<?php if ($entryTimeType === 'flexible'): ?> |
| 121 |
<?php esc_html_e('Flexible', 'yatra'); ?> |
| 122 |
<?php else: ?> |
| 123 |
<?php echo esc_html($entry['start_time']); ?> |
| 124 |
<?php if ($hasEnd) { echo ' - ' . esc_html($entry['end_time']); } ?> |
| 125 |
<?php endif; ?> |
| 126 |
</span> |
| 127 |
</div> |
| 128 |
<?php endif; ?> |
| 129 |
</div> |
| 130 |
|
| 131 |
<p class="yatra-entry-description"><?php echo esc_html($entry['description']); ?></p> |
| 132 |
|
| 133 |
<?php if (!empty($entry['notes'])): ?> |
| 134 |
<div class="yatra-entry-notes" role="note" aria-label="<?php esc_attr_e('Note', 'yatra'); ?>"> |
| 135 |
<div class="yatra-entry-notes__head"> |
| 136 |
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> |
| 137 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> |
| 138 |
</svg> |
| 139 |
<span class="yatra-entry-notes__label"><?php esc_html_e('Note', 'yatra'); ?></span> |
| 140 |
</div> |
| 141 |
<div class="yatra-entry-notes__body"><?php echo wp_kses_post(wpautop($entry['notes'])); ?></div> |
| 142 |
</div> |
| 143 |
<?php endif; ?> |
| 144 |
|
| 145 |
<?php if (!empty($entry['cost']) && $entry['cost'] > 0): ?> |
| 146 |
<div class="yatra-entry-cost"> |
| 147 |
<span class="yatra-cost-amount"> |
| 148 |
<?php echo yatra_format_price($entry['cost']); ?> |
| 149 |
</span> |
| 150 |
<?php if ($entry['cost_per_person']): ?> |
| 151 |
<span class="yatra-cost-label"><?php esc_html_e('per person', 'yatra'); ?></span> |
| 152 |
<?php else: ?> |
| 153 |
<span class="yatra-cost-label"><?php esc_html_e('per booking', 'yatra'); ?></span> |
| 154 |
<?php endif; ?> |
| 155 |
</div> |
| 156 |
<?php endif; ?> |
| 157 |
|
| 158 |
<div class="yatra-entry-meta"> |
| 159 |
<?php if ($entry['location']): ?> |
| 160 |
<div class="yatra-entry-meta-item"> |
| 161 |
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 162 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/> |
| 163 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/> |
| 164 |
</svg> |
| 165 |
<span><?php echo esc_html($entry['location']); ?></span> |
| 166 |
</div> |
| 167 |
<?php endif; ?> |
| 168 |
|
| 169 |
<?php if ($entry['duration']): ?> |
| 170 |
<div class="yatra-entry-meta-item"> |
| 171 |
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 172 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> |
| 173 |
</svg> |
| 174 |
<span><?php echo esc_html($entry['duration']); ?></span> |
| 175 |
</div> |
| 176 |
<?php endif; ?> |
| 177 |
</div> |
| 178 |
|
| 179 |
<?php if (!empty($entry['included']) || !empty($entry['excluded'])): ?> |
| 180 |
<div class="yatra-entry-inclusions" role="group" aria-label="<?php echo esc_attr__('Included and excluded items', 'yatra'); ?>"> |
| 181 |
<div class="yatra-entry-inclusions-col is-included"> |
| 182 |
<div class="yatra-entry-inclusions-heading"> |
| 183 |
<span class="yatra-entry-inclusions-title"><?php echo esc_html__('Included', 'yatra'); ?></span> |
| 184 |
</div> |
| 185 |
<div class="yatra-entry-inclusions-tags"> |
| 186 |
<?php if (!empty($entry['included'])): ?> |
| 187 |
<?php foreach ($entry['included'] as $item): ?> |
| 188 |
<span class="yatra-included-tag"> |
| 189 |
<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> |
| 190 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/> |
| 191 |
</svg> |
| 192 |
<?php echo esc_html($item); ?> |
| 193 |
</span> |
| 194 |
<?php endforeach; ?> |
| 195 |
<?php else: ?> |
| 196 |
<span class="yatra-entry-inclusions-empty"><?php echo esc_html__('None', 'yatra'); ?></span> |
| 197 |
<?php endif; ?> |
| 198 |
</div> |
| 199 |
</div> |
| 200 |
|
| 201 |
<div class="yatra-entry-inclusions-col is-excluded"> |
| 202 |
<div class="yatra-entry-inclusions-heading"> |
| 203 |
<span class="yatra-entry-inclusions-title"><?php echo esc_html__('Excluded', 'yatra'); ?></span> |
| 204 |
</div> |
| 205 |
<div class="yatra-entry-inclusions-tags"> |
| 206 |
<?php if (!empty($entry['excluded'])): ?> |
| 207 |
<?php foreach ($entry['excluded'] as $item): ?> |
| 208 |
<span class="yatra-excluded-tag"> |
| 209 |
<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> |
| 210 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> |
| 211 |
</svg> |
| 212 |
<?php echo esc_html($item); ?> |
| 213 |
</span> |
| 214 |
<?php endforeach; ?> |
| 215 |
<?php else: ?> |
| 216 |
<span class="yatra-entry-inclusions-empty"><?php echo esc_html__('None', 'yatra'); ?></span> |
| 217 |
<?php endif; ?> |
| 218 |
</div> |
| 219 |
</div> |
| 220 |
</div> |
| 221 |
<?php endif; ?> |
| 222 |
|
| 223 |
<!-- Gallery Section --> |
| 224 |
<?php if (!empty($entry['gallery']) && is_array($entry['gallery'])): ?> |
| 225 |
<div class="yatra-entry-gallery"> |
| 226 |
<h5 class="yatra-gallery-title"> |
| 227 |
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 228 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/> |
| 229 |
</svg> |
| 230 |
<?php esc_html_e('Photos', 'yatra'); ?> |
| 231 |
</h5> |
| 232 |
<div class="yatra-gallery-grid"> |
| 233 |
<?php |
| 234 |
global $yatra_itinerary_gallery_images; |
| 235 |
$global_index = 0; |
| 236 |
// Find the starting index in global data for this entry's gallery |
| 237 |
foreach ($yatra_itinerary_gallery_images as $idx => $img_url) { |
| 238 |
foreach ($entry['gallery'] as $media) { |
| 239 |
$media_url = $media['thumbnail_url'] ?? $media['url'] ?? ''; |
| 240 |
if ($img_url === $media_url) { |
| 241 |
$global_index = $idx; |
| 242 |
break 2; |
| 243 |
} |
| 244 |
} |
| 245 |
} |
| 246 |
?> |
| 247 |
<?php foreach ($entry['gallery'] as $index => $media): ?> |
| 248 |
<div class="yatra-gallery-item"> |
| 249 |
<a href="#" class="yatra-itinerary-gallery-link" |
| 250 |
data-gallery="itinerary-gallery" |
| 251 |
data-image-index="<?php echo esc_attr($global_index + $index); ?>"> |
| 252 |
<div class="yatra-media-card"> |
| 253 |
<img src="<?php echo esc_url($media['thumbnail_url'] ?? $media['url'] ?? ''); ?>" |
| 254 |
data-full-size="<?php echo esc_url($media['url'] ?? ''); ?>" |
| 255 |
alt="<?php echo esc_attr($media['alt_text'] ?? $media['caption'] ?? $media['title'] ?? sprintf( |
| 256 |
/* translators: %d: gallery image sequence number. */ |
| 257 |
__('Itinerary Gallery Image %d', 'yatra'), |
| 258 |
$global_index + $index + 1 |
| 259 |
)); ?>" |
| 260 |
loading="lazy"> |
| 261 |
<?php if (isset($media['type']) && $media['type'] === 'video'): ?> |
| 262 |
<div class="yatra-media-overlay"> |
| 263 |
<svg width="32" height="32" fill="white" viewBox="0 0 24 24"> |
| 264 |
<path d="M8 5v14l11-7z"/> |
| 265 |
</svg> |
| 266 |
</div> |
| 267 |
<?php endif; ?> |
| 268 |
</div> |
| 269 |
</a> |
| 270 |
</div> |
| 271 |
<?php endforeach; ?> |
| 272 |
|
| 273 |
<!-- Add video to gallery if exists --> |
| 274 |
<?php if (!empty($entry['video_url'])): ?> |
| 275 |
<?php |
| 276 |
global $yatra_itinerary_gallery_images; |
| 277 |
$video_global_index = 0; |
| 278 |
// Find the index of this video thumbnail in global data |
| 279 |
$video_url = esc_url($entry['video_url']); |
| 280 |
$video_id = ''; |
| 281 |
$thumbnail_url = ''; |
| 282 |
|
| 283 |
// Extract video ID and thumbnail |
| 284 |
if (strpos($video_url, 'youtube.com') !== false || strpos($video_url, 'youtu.be') !== false) { |
| 285 |
// YouTube thumbnail extraction |
| 286 |
preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/shorts\/|youtube\.com\/live\/)([^&\n?#\/]+)/', $video_url, $matches); |
| 287 |
$video_id = $matches[1] ?? ''; |
| 288 |
$thumbnail_url = "https://img.youtube.com/vi/{$video_id}/maxresdefault.jpg"; |
| 289 |
} elseif (strpos($video_url, 'vimeo.com') !== false) { |
| 290 |
// Vimeo thumbnail extraction |
| 291 |
preg_match('#vimeo\.com\/.*?(\d+)#', $video_url, $matches); |
| 292 |
$video_id = $matches[1] ?? ''; |
| 293 |
if ($video_id) { |
| 294 |
// Get Vimeo thumbnail via oEmbed API |
| 295 |
$oembed_url = "https://vimeo.com/api/oembed.json?url=" . urlencode($video_url); |
| 296 |
$response = wp_remote_get($oembed_url); |
| 297 |
if (!is_wp_error($response) && wp_remote_retrieve_response_code($response) === 200) { |
| 298 |
$body = wp_remote_retrieve_body($response); |
| 299 |
$data = json_decode($body, true); |
| 300 |
if ($data && isset($data['thumbnail_url'])) { |
| 301 |
$thumbnail_url = $data['thumbnail_url']; |
| 302 |
} |
| 303 |
} |
| 304 |
|
| 305 |
// Fallback if API fails |
| 306 |
if (empty($thumbnail_url)) { |
| 307 |
$thumbnail_url = 'https://i.vimeocdn.com/video/' . $video_id . '_640.jpg'; |
| 308 |
} |
| 309 |
} |
| 310 |
} |
| 311 |
|
| 312 |
// Find the thumbnail in global data |
| 313 |
foreach ($yatra_itinerary_gallery_images as $idx => $img_url) { |
| 314 |
if ($img_url === $thumbnail_url) { |
| 315 |
$video_global_index = $idx; |
| 316 |
break; |
| 317 |
} |
| 318 |
} |
| 319 |
?> |
| 320 |
<div class="yatra-gallery-item"> |
| 321 |
<a href="<?php echo esc_url($video_url); ?>" class="yatra-itinerary-video-link" |
| 322 |
data-gallery="itinerary-gallery" |
| 323 |
data-image-index="<?php echo esc_attr($video_global_index); ?>" |
| 324 |
data-video-url="<?php echo esc_attr($video_url); ?>" |
| 325 |
data-video-id="<?php echo esc_attr($video_id); ?>"> |
| 326 |
<div class="yatra-media-card"> |
| 327 |
<img src="<?php echo esc_url($thumbnail_url ?: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDIwMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTIwIiBmaWxsPSIjMzc0MTUxIi8+CjxwYXRoIGQ9Ik04NSA0NUwxMTUgNjBMODE4IDc1VjQ1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+'); ?>" |
| 328 |
data-full-size="<?php echo esc_url($thumbnail_url ?: ''); ?>" |
| 329 |
alt="<?php esc_attr_e('Video thumbnail', 'yatra'); ?>" |
| 330 |
loading="lazy"> |
| 331 |
<div class="yatra-media-overlay yatra-media-youtube-overlay"> |
| 332 |
<div class="yatra-youtube-play-button"> |
| 333 |
<svg width="100" height="100" viewBox="0 0 100 100" fill="none"> |
| 334 |
<circle cx="50" cy="50" r="45" fill="rgba(255, 0, 0, 0.9)" stroke="white" stroke-width="3"/> |
| 335 |
<path d="M40 30 L70 50 L40 70 Z" fill="white"/> |
| 336 |
</svg> |
| 337 |
</div> |
| 338 |
</div> |
| 339 |
</div> |
| 340 |
</a> |
| 341 |
</div> |
| 342 |
<?php endif; ?> |
| 343 |
</div> |
| 344 |
</div> |
| 345 |
<?php endif; ?> |
| 346 |
</div> |
| 347 |
</div> |
| 348 |
<?php endforeach; ?> |
| 349 |
</div> |
| 350 |
</div> |
| 351 |
</div> |
| 352 |
<?php endforeach; ?> |
| 353 |
<?php endif; ?> |
| 354 |
</div> |
| 355 |
</section> |
| 356 |
|
| 357 |
<!-- Hidden Gallery Section for JavaScript Collection --> |
| 358 |
<?php if (!empty($yatra_itinerary_gallery_images)): ?> |
| 359 |
<div class="yatra-itinerary-trip-gallery" data-gallery="itinerary-gallery" aria-hidden="true"> |
| 360 |
<?php foreach ($yatra_itinerary_gallery_images as $index => $image_url): ?> |
| 361 |
<?php if ($image_url): ?> |
| 362 |
<div class="yatra-gallery-item" data-image-index="<?php echo esc_attr($index); ?>" itemscope itemtype="https://schema.org/ImageObject"> |
| 363 |
<img src="<?php echo esc_url($image_url); ?>" |
| 364 |
data-full-size="<?php echo esc_url($image_url); ?>" |
| 365 |
alt="<?php esc_attr_e('Itinerary Gallery Image', 'yatra'); ?>" |
| 366 |
itemprop="url" content="<?php echo esc_url($image_url); ?>" |
| 367 |
loading="lazy"> |
| 368 |
<meta itemprop="contentUrl" content="<?php echo esc_url($image_url); ?>"> |
| 369 |
</div> |
| 370 |
<?php endif; ?> |
| 371 |
<?php endforeach; ?> |
| 372 |
</div> |
| 373 |
<?php endif; ?> |
| 374 |
|
| 375 |
<!-- Itinerary Gallery Modal --> |
| 376 |
<div class="yatra-gallery-modal" id="itinerary-gallery" role="dialog" aria-modal="true" aria-label="<?php esc_attr_e('Itinerary Gallery', 'yatra'); ?>"> |
| 377 |
<div class="yatra-gallery-modal-overlay"></div> |
| 378 |
<div class="yatra-gallery-modal-content"> |
| 379 |
<button type="button" class="yatra-gallery-modal-close" aria-label="<?php esc_attr_e('Close Gallery', 'yatra'); ?>"> |
| 380 |
<svg class="yatra-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 381 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> |
| 382 |
</svg> |
| 383 |
</button> |
| 384 |
<button type="button" class="yatra-gallery-modal-prev" aria-label="<?php esc_attr_e('Previous Image', 'yatra'); ?>"> |
| 385 |
<svg class="yatra-icon-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 386 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/> |
| 387 |
</svg> |
| 388 |
</button> |
| 389 |
<button type="button" class="yatra-gallery-modal-next" aria-label="<?php esc_attr_e('Next Image', 'yatra'); ?>"> |
| 390 |
<svg class="yatra-icon-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 391 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/> |
| 392 |
</svg> |
| 393 |
</button> |
| 394 |
<div class="yatra-gallery-modal-main"> |
| 395 |
<img src="" alt="<?php esc_attr_e('Itinerary Gallery Image', 'yatra'); ?>" class="yatra-gallery-modal-image"> |
| 396 |
<div class="yatra-gallery-modal-loader"><?php esc_html_e('Loading...', 'yatra'); ?></div> |
| 397 |
</div> |
| 398 |
<div class="yatra-gallery-modal-info"> |
| 399 |
<div class="yatra-gallery-modal-counter"> |
| 400 |
<span class="yatra-gallery-current-index">1</span> / <span class="yatra-gallery-total-count">1</span> |
| 401 |
</div> |
| 402 |
</div> |
| 403 |
<div class="yatra-gallery-modal-thumbnails"> |
| 404 |
<div class="yatra-gallery-thumbnails-container"> |
| 405 |
<!-- Thumbnails will be populated by JavaScript --> |
| 406 |
</div> |
| 407 |
</div> |
| 408 |
</div> |
| 409 |
</div> |
| 410 |
|
