---
phase: 06-wyjazd-zagraniczny
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - wp-content/plugins/carei-reservation/includes/class-elementor-widget.php
  - wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
  - wp-content/plugins/carei-reservation/assets/css/carei-reservation.css
autonomous: false
---

<objective>
## Goal
Wydzielić pozycje "WYJAZD ZA GRANICĘ ..." z sekcji "Opcje dodatkowe" do osobnej sekcji "Wyjazd zagraniczny" z checkboxem "Planuję trasę poza granicę Polski" i interaktywną wyszukiwarką krajów zgodną z Figmą.

## Purpose
Użytkownik chcący zarezerwować samochód z wyjazdem za granicę powinien mieć dedykowaną, intuicyjną sekcję zamiast listy checkboxów zagubionych wśród opcji dodatkowych. Design Figmy przewiduje wyszukiwarkę krajów z flagami, cenami i możliwością dodawania/usuwania — lepsze UX niż surowe checkboxy.

## Output
- Sekcja "Wyjazd zagraniczny" z checkboxem toggle
- Wyszukiwarka krajów z 3 stanami (default, active, z wybranymi)
- Karty krajów z flagą, nazwą, ceną, przyciskiem +/×
- Wybrane kraje trafiają do API jako extras przy submit
</objective>

<context>
## Project Context
@.paul/PROJECT.md
@.paul/ROADMAP.md
@.paul/STATE.md

## Prior Work
@.paul/phases/02-form-ui/02-01-SUMMARY.md — struktura formularza (opcje dodatkowe, loadExtras)

## Source Files
@wp-content/plugins/carei-reservation/includes/class-elementor-widget.php — HTML formularza (linia 126-143: extras wrapper)
@wp-content/plugins/carei-reservation/assets/js/carei-reservation.js — loadExtras() linia 315-346, buildExtraCard() linia 348-364, getSelectedExtrasForApi() linia 588-604
@wp-content/plugins/carei-reservation/assets/css/carei-reservation.css — style extra-card (linia 390-429)

## Design Reference
@docs/figma-formularz/README.md — sekcja "Wyjazd zagraniczny" (linia 113-117) + wyszukiwarka krajów (linia 146-177)
@docs/figma-formularz/input-wyszukiwarka-krajow.jsx — stany wyszukiwarki, karty krajów, kolory
@docs/figma-formularz/screenshot-popup-desktop.png
@docs/figma-formularz/screenshot-input-kraje-stany.png
</context>

<skills>
No SPECIAL-FLOWS.md — skills section omitted.
</skills>

<acceptance_criteria>

## AC-1: Pozycje WYJAZD ZA GRANICĘ nie pojawiają się w Opcjach dodatkowych
```gherkin
Given formularz z załadowanym cennikiem z API
When pricelist zawiera pozycje zaczynające się od "WYJAZD ZA GRANIC"
Then te pozycje NIE wyświetlają się w sekcji "Opcje dodatkowe"
And wyświetlają się TYLKO w sekcji "Wyjazd zagraniczny"
```

## AC-2: Sekcja "Wyjazd zagraniczny" z checkboxem toggle
```gherkin
Given formularz z załadowanymi extras
When użytkownik widzi sekcję "Wyjazd zagraniczny"
Then widoczny jest checkbox "Planuję trasę poza granicę Polski"
And wyszukiwarka krajów jest UKRYTA dopóki checkbox nie jest zaznaczony
When użytkownik zaznacza checkbox
Then wyszukiwarka krajów pojawia się z animacją
When użytkownik odznacza checkbox
Then wyszukiwarka znika i wybrane kraje się czyszczą
```

## AC-3: Wyszukiwarka krajów — wyszukiwanie i dodawanie
```gherkin
Given checkbox "Planuję trasę..." jest zaznaczony
When użytkownik widzi domyślny stan wyszukiwarki
Then widzi ikonę "+" i tekst "Wyszukaj i dodaj kraj na trasie"
When użytkownik klika pole i wpisuje tekst (np. "Nie")
Then pod polem pojawiają się karty krajów pasujących do frazy
And każda karta ma: flagę (emoji/obraz), nazwę kraju, cenę "od X do Y zł", przycisk "+"
When użytkownik klika "+" na karcie kraju
Then kraj zostaje dodany do listy wybranych (karta zmienia styl na selected, "+" → "×")
```

## AC-4: Wybrane kraje trafiają do API przy submit
```gherkin
Given użytkownik wybrał kraje w wyszukiwarce (np. Niemcy, Czechy)
When formularz jest submitowany
Then getSelectedExtrasForApi() zawiera pozycje z pricelist odpowiadające wybranym krajom
And pricing summary i booking zawierają te pozycje
```

## AC-5: Design zgodny z Figmą
```gherkin
Given sekcja "Wyjazd zagraniczny" jest wyświetlona
Then separator "Wyjazd zagraniczny" ma taki sam styl jak inne separatory
And karty krajów mają: border-radius 8px, nazwę w #2F2482 Albert Sans SemiBold 15px, cenę w #505050
And wybrany kraj ma tło rgba(47,36,130,0.05), border rgba(47,36,130,0.2)
And pole wyszukiwarki ma 48px wysokości, border-radius 8px
```

</acceptance_criteria>

<tasks>

<task type="auto">
  <name>Task 1: HTML sekcji "Wyjazd zagraniczny" + filtrowanie w JS</name>
  <files>wp-content/plugins/carei-reservation/includes/class-elementor-widget.php, wp-content/plugins/carei-reservation/assets/js/carei-reservation.js</files>
  <action>
    **PHP (class-elementor-widget.php):**
    Dodać nową sekcję HTML PRZED sekcją "Opcje dodatkowe" (między linią 135 "Ubezpieczenie" a linią 136 "Opcje dodatkowe"):

    ```
    <div class="carei-form__divider"><span>Wyjazd zagraniczny</span></div>
    <div class="carei-form__section" id="carei-abroad-section">
        <label class="carei-form__checkbox-label">
            <input type="checkbox" id="carei-abroad-toggle" name="abroadToggle">
            <span class="carei-form__checkbox-box"><svg ...checkmark...</svg></span>
            <span>Planuję trasę poza granicę Polski</span>
        </label>
        <div id="carei-abroad-search" class="carei-abroad" style="display:none;">
            <div class="carei-abroad__input-wrap" id="carei-abroad-input-wrap">
                <svg class="carei-abroad__plus-icon">+</svg>
                <input type="text" id="carei-abroad-input" class="carei-abroad__input" placeholder="Wyszukaj i dodaj kraj na trasie">
            </div>
            <div class="carei-abroad__results" id="carei-abroad-results"></div>
            <div class="carei-abroad__selected" id="carei-abroad-selected"></div>
        </div>
    </div>
    ```

    **JS (carei-reservation.js) — modyfikacja loadExtras():**
    W pętli `items.forEach()` (linia 329-341) dodać trzecią kategorię:
    - Jeśli `name` zaczyna się od "wyjazd za granic" → `abroadItems.push(item)` (NIE do extraItems)
    - Parsować nazwę kraju z item.name (np. "WYJAZD ZA GRANICĘ - NIEMCY" → "Niemcy")
    - Przechowywać `abroadItems` w zmiennej modułowej (dostępnej dla wyszukiwarki)

    Po załadowaniu — NIE renderować abroadItems jako checkboxów. Zamiast tego, zachować dane w pamięci JS do użycia przez wyszukiwarkę.

    Avoid: Nie usuwać istniejącej logiki insurance/extras — tylko dodać nową kategorię w `forEach`.
  </action>
  <verify>
    1. Otworzyć formularz, wybrać segment i oddział
    2. Pozycje "WYJAZD ZA GRANICĘ ..." NIE pojawiają się w "Opcje dodatkowe"
    3. Widoczna sekcja "Wyjazd zagraniczny" z checkboxem
  </verify>
  <done>AC-1 satisfied: pozycje WYJAZD nie lądują w Opcjach dodatkowych. AC-2 partially: sekcja HTML istnieje.</done>
</task>

<task type="auto">
  <name>Task 2: Wyszukiwarka krajów — interakcje JS + style CSS</name>
  <files>wp-content/plugins/carei-reservation/assets/js/carei-reservation.js, wp-content/plugins/carei-reservation/assets/css/carei-reservation.css</files>
  <action>
    **JS — nowy blok "Abroad Country Search":**

    1. **Toggle checkbox:** Listener na `#carei-abroad-toggle`:
       - checked → `#carei-abroad-search` display:block (slide down)
       - unchecked → hide + wyczyść selected countries

    2. **Mapowanie krajów na flagi:** Obiekt `COUNTRY_FLAGS` z emoji flagami dla typowych krajów (Niemcy 🇩🇪, Czechy 🇨🇿, Norwegia 🇳🇴, etc.). Fallback: flaga 🏳️.

    3. **Wyszukiwanie:** Input event na `#carei-abroad-input`:
       - Filtruj `abroadItems` po nazwie kraju (case-insensitive, includes)
       - Renderuj karty wyników w `#carei-abroad-results` (2 kolumny CSS grid)
       - Karta: flaga (emoji 24px) + nazwa kraju + cena "od X do Y zł" + przycisk "+"
       - Już wybrane kraje w wynikach → styl selected (bg/border Figma) + przycisk "×"
       - Puste pole = nie pokazuj wyników (stan default)

    4. **Dodawanie kraju ("+"):**
       - Dodaj do `selectedCountries` Map (id → item)
       - Przerenderuj wyniki (kraj zmienia się na selected)
       - Przerenderuj `#carei-abroad-selected` — lista wybranych pod wyszukiwarką

    5. **Usuwanie kraju ("×"):**
       - Usuń z `selectedCountries`
       - Przerenderuj wyniki i selected

    6. **Integracja z getSelectedExtrasForApi():**
       Zmodyfikować `getSelectedExtrasForApi()` (linia 588-604) — oprócz `extras[]` checkboxów, dołączyć kraje z `selectedCountries` Map w tym samym formacie:
       ```js
       selectedCountries.forEach(function(item) {
           items.push({ id: item.id || item.code, name: item.name, ... });
       });
       ```

    **CSS — nowe reguły `.carei-abroad`:**

    Zgodne z Figmą (docs/figma-formularz):
    - `.carei-abroad__input-wrap`: height 48px, border-radius 8px, border 1px #D0D0D0, flex, gap 8px, padding 0 16px, align-items center
    - `.carei-abroad__input`: no border, flex 1, Albert Sans SemiBold 15px, color #2F2482, placeholder color #C7C7C7
    - `.carei-abroad__plus-icon`: 16px, color #2F2482
    - `.carei-abroad__results`: display grid, grid-template-columns 1fr 1fr, gap 8px, margin-top 8px
    - `.carei-abroad__card`: height 56px, border-radius 8px, border 1px rgba(0,0,0,0.1), flex, align-items center, padding 0 12px, gap 8px
    - `.carei-abroad__card--selected`: background rgba(47,36,130,0.05), border-color rgba(47,36,130,0.2)
    - `.carei-abroad__flag`: width 24px, height 24px, border-radius 50%, font-size 20px, line-height 24px, text-align center
    - `.carei-abroad__name`: Albert Sans SemiBold 15px, color #2F2482, flex 1
    - `.carei-abroad__price`: text-align right, color #505050 (format: "od" 10px + wartość 14px + "do" 10px + wartość 14px + "zł")
    - `.carei-abroad__action`: 16px button, cursor pointer, no bg/border
    - `.carei-abroad__selected`: margin-top 8px, flex column, gap 8px

    Mobile (max-width 600px):
    - `.carei-abroad__results`: grid-template-columns 1fr (1 kolumna)

    Avoid: Nie modyfikować istniejących stylów `.carei-form__extra-card`. Nowe klasy `.carei-abroad__*`.
  </action>
  <verify>
    1. Zaznacz checkbox "Planuję trasę..." → wyszukiwarka się pojawia
    2. Wpisz "Niem" → pojawia się karta Niemcy z flagą, ceną, "+"
    3. Kliknij "+" → Niemcy zmienia styl na selected, pojawia się w liście wybranych z "×"
    4. Kliknij "×" → kraj usunięty
    5. Odznacz checkbox → wyszukiwarka znika, wybrane kraje się czyszczą
    6. Submit z wybranym krajem → pricing summary zawiera pozycję WYJAZD
  </verify>
  <done>AC-2, AC-3, AC-4, AC-5 satisfied: pełna interakcja wyszukiwarki, integracja z API, design Figma</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>Sekcja "Wyjazd zagraniczny" z wyszukiwarką krajów w popup rezerwacji</what-built>
  <how-to-verify>
    1. Otwórz stronę z formularzem rezerwacji
    2. Wybierz segment i oddział (żeby załadować extras)
    3. Sprawdź: pozycje "WYJAZD ZA GRANICĘ ..." NIE widać w "Opcje dodatkowe"
    4. Sprawdź: widoczna sekcja "Wyjazd zagraniczny" z checkboxem
    5. Zaznacz "Planuję trasę poza granicę Polski" → wyszukiwarka się pojawia
    6. Wpisz fragment nazwy kraju → karty z flagami i cenami
    7. Dodaj kraj (+) → karta się podświetla, pojawia się w liście wybranych
    8. Usuń kraj (×) → znika z wybranych
    9. Odznacz checkbox → wszystko się czyści
    10. Zaznacz, dodaj kraje, submit → w summary widać pozycje WYJAZD
    11. Sprawdź responsywność na mobile (1 kolumna kart)
    12. Porównaj wygląd z Figmą (kolory, fonty, spacing)
  </how-to-verify>
  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
</task>

</tasks>

<boundaries>

## DO NOT CHANGE
- wp-content/plugins/carei-reservation/includes/class-softra-api.php (API client — nie wymaga zmian)
- wp-content/plugins/carei-reservation/includes/class-rest-proxy.php (REST proxy — nie wymaga zmian)
- wp-content/plugins/carei-reservation/includes/class-admin-panel.php (Admin panel — osobna funkcjonalność)
- Istniejąca logika ubezpieczeń (filtrowanie ubezp/ochrony w loadExtras)
- Istniejąca logika buildExtraCard() — nie modyfikować, nowe karty mają osobny builder
- Istniejące style .carei-form__extra-card — nie modyfikować

## SCOPE LIMITS
- Nie dodawać prawdziwych obrazów flag (emoji wystarczą na MVP)
- Nie tworzyć osobnego API endpoint do krajów — dane z istniejącego pricelist
- Nie modyfikować logiki booking/confirm — tylko getSelectedExtrasForApi()
- Nie dodawać walidacji "minimum 1 kraj wybrany" — checkbox sam w sobie jest opcjonalny
- Summary overlay — wystarczy że kraje pojawią się jako standardowe pozycje extras

</boundaries>

<verification>
Before declaring plan complete:
- [ ] Pozycje "WYJAZD ZA GRANIC..." nie pojawiają się w "Opcje dodatkowe"
- [ ] Sekcja "Wyjazd zagraniczny" wyświetla się z separatorem i checkboxem
- [ ] Toggle checkbox pokazuje/ukrywa wyszukiwarkę
- [ ] Wyszukiwanie filtruje kraje w real-time
- [ ] Dodawanie/usuwanie krajów działa poprawnie
- [ ] Wybrane kraje trafiają do getSelectedExtrasForApi()
- [ ] Pricing summary zawiera pozycje WYJAZD dla wybranych krajów
- [ ] Mobile: karty w 1 kolumnie
- [ ] Brak błędów w konsoli JS
</verification>

<success_criteria>
- All tasks completed
- All verification checks pass
- No errors or warnings introduced
- Design wizualnie zgodny z Figmą (kolory, spacing, typografia)
- Istniejąca funkcjonalność (ubezpieczenie, opcje dodatkowe, booking flow) nienaruszona
</success_criteria>

<output>
After completion, create `.paul/phases/06-wyjazd-zagraniczny/06-01-SUMMARY.md`
</output>
