# Itinerary Block

Displays a detailed itinerary with stops, events, and an interactive map. This block shows the complete journey including legs (days/segments), individual stops, and provides both list and map views.

## Overview

The Itinerary block is used on template pages to display a complete itinerary with all its components. It shows the itinerary name, description, and organizes stops into legs (days or segments). Each stop can be a listing, event, or informational note. The block provides both a detailed list view and an interactive map view with numbered markers.

**Use cases:**
- Display a complete travel itinerary with multiple stops
- Show day-by-day journey breakdowns
- Provide interactive map navigation
- Present events and listings in chronological order

## Block Features & Options

### Display Modes
- **List View**: Detailed stop-by-stop breakdown with descriptions and contact information
- **Map View**: Interactive map with numbered markers for each stop
- **Tabbed Interface**: Switch between list and map views (mobile-responsive)

### Layout Options
- **Leg Titles**: Show/hide day/segment titles
- **Leg Introductions**: Display introductions for each leg
- **Stop Numbering**: Numbered badges for each stop
- **Responsive Design**: Mobile-optimized with collapsible navigation

### Content & Filter Options
- **Itinerary Selection**: Choose specific itinerary or use page context
- **Stop Information**: Control display of names, descriptions, hero images
- **Listing Information**: Control display of names, descriptions, addresses, contact details, cities
- **Event Details**: Show/hide event costs, ticket links, websites, phone numbers, location details
- **Media Display**: Show/hide hero images for stops and notes

### Display Toggles
- **Itinerary Content**: Name, description
- **Itinerary Hero Image**: Show hero image in two-column layout with name/description
- **Stop Information**: Names, descriptions, hero images
- **Listing Information**: Names, short descriptions, descriptions, cities, addresses, phone, email, website, booking links, tags
- **Event Information**: Name, description, cost, ticket URLs, website, phone, location details
- **Region Information**: Name, subtitle, short description, description (for region-type stops only)
- **Leg Information**: Titles, introductions, hero images

## How it Works

The Itinerary block retrieves itinerary data from the Tourismo API and displays it in a structured format. It organizes stops into legs (representing days or segments) and renders each stop based on its type (listing, event, or note). The block provides both a detailed list view and an interactive map view with numbered markers corresponding to each stop.

**Data flow:**
1. Retrieves itinerary data (either from page context or specific itinerary ID)
2. Organizes stops into legs with proper numbering
3. Renders each stop type appropriately (listing, event, region, or note)
4. Displays comprehensive listing, event, and region details based on attribute settings
5. Shows hero images for itinerary, legs, and individual stops
6. Generates map markers for stops with coordinates
7. Provides tabbed interface for list/map views

## How to Add & Configure

1. **Add the block** to a template page (Itinerary page type)
2. **Configure itinerary source**:
   - If on an Itinerary template page: automatically uses page context
   - If on other page types: select specific itinerary from dropdown
3. **Set display options** in the block sidebar:
   - Toggle itinerary name and description
   - Configure stop information display
   - Set event detail visibility
   - Control leg title and description display
4. **Preview** the block to see both list and map views

## Shortcode Usage

### Basic Shortcode
```
[tourismo-itinerary]
```

### Available Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `linked_page_id` | string | "" | **Required** - ID of the linked listing page |
| `linked_region_page_id` | string | "" | **Required** - ID of the linked region page |
| `custom_template_name` | string | "" | Custom template name for advanced customization |
| `specific_itinerary` | string | "" | Specific itinerary ID (if not using page context) |
| `itinerary_region_id` | string | "" | Region ID for the itinerary |
| `class_name` | string | "" | Additional CSS classes |
| `align` | string | "full" | Block alignment (left, center, right, full) |
| `show_image` | boolean | false | Show itinerary hero image in two-column layout |
| `show_name` | boolean | true | Show itinerary name |
| `show_description` | boolean | true | Show itinerary description |
| `show_stop_name` | boolean | true | Show stop names |
| `show_stop_description` | boolean | true | Show stop descriptions |
| `show_stop_hero` | boolean | false | Show hero images for stops |
| `show_listing_name` | boolean | true | Show listing names |
| `show_listing_short_description` | boolean | false | Show listing short descriptions |
| `show_listing_description` | boolean | false | Show listing descriptions |
| `show_listing_city` | boolean | false | Show listing cities |
| `show_listing_address` | boolean | false | Show listing addresses |
| `show_listing_phone` | boolean | false | Show listing phone numbers |
| `show_listing_email` | boolean | false | Show listing email addresses |
| `show_listing_website` | boolean | true | Show listing websites |
| `show_listing_booking_link` | boolean | false | Show listing booking links |
| `show_listing_tags` | boolean | false | Show listing tags |
| `show_leg_title` | boolean | true | Show leg titles |
| `show_leg_introduction` | boolean | false | Show leg introductions |
| `show_leg_hero` | boolean | false | Show leg hero images |
| `show_event_cost` | boolean | true | Show event costs |
| `show_event_ticket_url` | boolean | true | Show event ticket URLs |
| `show_event_website` | boolean | true | Show event websites |
| `show_event_phone` | boolean | false | Show event phone numbers |
| `show_event_location` | boolean | true | Show event location details |
| `show_event_name` | boolean | false | Show event names |
| `show_event_description` | boolean | false | Show event descriptions |
| `show_region_name` | boolean | false | Show region names |
| `show_region_short_description` | boolean | false | Show region short descriptions |
| `show_region_description` | boolean | false | Show region descriptions |
| `show_region_subtitle` | boolean | false | Show region subtitles |

### Practical Examples

**Basic itinerary display:**
```
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456"]
```

**Itinerary with minimal information:**
```
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" show_listing_address="false" show_listing_phone="false" show_listing_email="false" show_listing_tags="false"]
```

**Itinerary with enhanced event details:**
```
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" show_event_cost="true" show_event_ticket_url="true" show_event_website="true" show_event_phone="true"]
```

**Itinerary with comprehensive listing details:**
```
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" show_listing_name="true" show_listing_short_description="true" show_listing_description="true" show_listing_city="true" show_listing_address="true" show_listing_phone="true" show_listing_email="true" show_listing_website="true" show_listing_booking_link="true" show_listing_tags="true"]
```

**Itinerary with region-type stops:**
```
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" show_region_name="true" show_region_subtitle="true" show_region_short_description="true" show_region_description="true"]
```

**Itinerary with hero image:**
```
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" show_image="true"]
```

**Itinerary with leg hero images:**
```
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" show_leg_hero="true"]
```

**Specific itinerary (not on template page):**
```
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" specific_itinerary="789"]
```

## Content Displayed

The Itinerary block displays:

**Itinerary Header:**
- Itinerary name and description
- Hero image (optional, displays in two-column layout)

**Legs (Days/Segments):**
- Leg titles and introductions
- Numbered stops within each leg

**Stop Types:**
- **Listings**: Name, subtitle, short description, description, city, address, contact details, website, booking links, tags, hero images
- **Events**: Name, subtitle, description, cost, ticket links, website, phone, location, time, hero images
- **Regions**: Name, subtitle, short description, description, hero images
- **Notes**: Description, subtitle, and optional hero images

**Note:** Stop hero images are displayed at the end of each stop section, after all other content. Stop subtitle is available as a property and can be accessed via shortcodes (`[itin-subtitle]` and `[itin-stripped-subtitle]`).

**Interactive Map:**
- Numbered markers for each stop with coordinates
- Info windows with stop details
- Clickable links to stop pages

**Navigation:**
- Tabbed interface (list/map views)
- Mobile-responsive collapsible leg navigation
- Sticky navigation on mobile devices

## Related Blocks

- **Itineraries Block** - Collection block for displaying multiple itineraries
- **Map Block** - Standalone interactive map
- **Title Block** - Display itinerary name separately
- **Description Block** - Show itinerary description independently