---
phase: 07-hero-search-form
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - wp-content/plugins/carei-reservation/includes/class-search-widget.php
  - wp-content/plugins/carei-reservation/assets/css/carei-reservation.css
  - wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
  - wp-content/plugins/carei-reservation/carei-reservation.php
autonomous: false
---

<objective>
## Goal
Nowy widget Elementor "Carei Search Form" — kompaktowy mini formularz rezerwacji do osadzenia w sekcji hero. Po wypełnieniu i kliknięciu przycisku otwiera istniejący popup formularza rezerwacji z automatycznie uzupełnionymi danymi (segment, daty, lokalizacja).

## Purpose
Użytkownik widzi formularz już na hero — nie musi szukać przycisku rezerwacji. Skraca ścieżkę konwersji i daje natychmiastowe CTA.

## Output
- Nowy plik: `class-search-widget.php` (widget Elementor)
- Rozszerzony CSS: style mini formularza
- Rozszerzony JS: logika prefill + otwarcie modala z danymi z mini formularza
- Rejestracja widgetu w `carei-reservation.php`
</objective>

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

## Source Files
@wp-content/plugins/carei-reservation/carei-reservation.php
@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
</context>

<acceptance_criteria>

## AC-1: Widget renderuje mini formularz
```gherkin
Given strona z osadzonym widgetem "Carei Search Form" w Elementorze
When strona się ładuje
Then widoczny jest kompaktowy formularz z polami: segment (select), daty od/do, miejsce odbioru (select), checkbox "Zwrot w tej samej lokalizacji", przycisk "Złóż zapytanie o rezerwację"
```

## AC-2: Selecty ładują dane z API
```gherkin
Given mini formularz jest widoczny na stronie
When strona się załadowała
Then select segmentu zawiera segmenty z API (segments-branches-map)
And select lokalizacji filtruje się po wybranym segmencie
```

## AC-3: Przycisk otwiera modal z pre-wypełnionymi danymi
```gherkin
Given użytkownik wypełnił mini formularz (segment, daty, lokalizacja)
When kliknie "Złóż zapytanie o rezerwację"
Then otwiera się istniejący modal rezerwacji
And pola segment, data od, data do, miejsce odbioru są automatycznie wypełnione wartościami z mini formularza
And checkbox zwrotu jest zsynchronizowany
And extras/pricelist ładują się automatycznie (jak po ręcznym wypełnieniu)
```

## AC-4: Design zgodny z Figmą
```gherkin
Given mini formularz jest renderowany
When wyświetla się na desktop
Then tło #EDEDF3, zaokrąglone rogi 14px, border #2F2482/10%
And pola mają białe tło, zaokrąglone rogi
And przycisk jest czerwony (#FF0000) z białym tekstem, pełna szerokość
And font Albert Sans, tytuł bold fioletowy (#2F2482)
```

</acceptance_criteria>

<tasks>

<task type="auto">
  <name>Task 1: Widget Elementor + HTML mini formularza</name>
  <files>wp-content/plugins/carei-reservation/includes/class-search-widget.php, wp-content/plugins/carei-reservation/carei-reservation.php</files>
  <action>
    1. Utworzyć `class-search-widget.php` z klasą `Carei_Search_Widget extends \Elementor\Widget_Base`:
       - name: `carei-search-form`
       - title: `Carei Search Form`
       - icon: `eicon-search`
       - categories: `['general']`
       - style/script depends: te same co główny widget (carei-reservation-css, carei-reservation-js)
       - Brak kontrolek Elementor (formularz jest statyczny)
    
    2. Metoda `render()` generuje HTML:
       - Container `div.carei-search-form` z tłem
       - Tytuł: `<h2 class="carei-search-form__title">Wypełnij formularz rezerwacji<span>.</span></h2>`
       - Select segmentu: `<select id="carei-search-segment">` z placeholder "Wybierz segment" i ikoną strzałki
       - Wiersz z dwoma polami daty: `<input type="datetime-local" id="carei-search-date-from">` i `id="carei-search-date-to"` z ikonkami kalendarza i labelami "Od kiedy?" / "Do kiedy?"
       - Select lokalizacji: `<select id="carei-search-pickup">` z ikoną pinu i placeholder "Miejsce odbioru"
       - Checkbox: `<input type="checkbox" id="carei-search-same-return" checked>` z label "Zwrot w tej samej lokalizacji"
       - Przycisk: `<button type="button" class="carei-search-form__submit" id="carei-search-submit">` z tekstem "Złóż zapytanie o rezerwację"
    
    3. Zarejestrować widget w `carei-reservation.php`:
       - Dodać `require_once` w callbacku `elementor/widgets/register`
       - `$widgets_manager->register( new Carei_Search_Widget() );`
    
    Avoid: Duplikowanie modala — mini formularz NIE zawiera modala. Modal jest renderowany przez istniejący widget Carei Reservation, który musi być obecny na tej samej stronie.
  </action>
  <verify>Widget "Carei Search Form" widoczny w panelu Elementor, po osadzeniu renderuje HTML mini formularza</verify>
  <done>AC-1 satisfied: Mini formularz renderuje się z wszystkimi polami</done>
</task>

<task type="auto">
  <name>Task 2: JavaScript — ładowanie danych + prefill + otwarcie modala</name>
  <files>wp-content/plugins/carei-reservation/assets/js/carei-reservation.js</files>
  <action>
    1. W sekcji inicjalizacji (DOMContentLoaded) dodać wykrywanie mini formularza:
       ```
       var searchForm = document.querySelector('.carei-search-form');
       ```
       Jeśli istnieje, zainicjalizować `initSearchForm()`.
    
    2. Funkcja `initSearchForm()`:
       - Pobrać referencje do elementów: `carei-search-segment`, `carei-search-date-from`, `carei-search-date-to`, `carei-search-pickup`, `carei-search-same-return`
       - Załadować dane API (segments-branches-map) — REUŻYĆ istniejącą logikę `loadInitialData`, ale populować selecty mini formularza
       - Podpiąć event na zmianę segmentu → filtrowanie lokalizacji (jak w głównym formularzu)
       - Podpiąć event na `#carei-search-submit` click:
         a) Zebrać wartości z mini formularza
         b) Znaleźć overlay modala: `document.querySelector('[data-carei-modal]')`
         c) Wywołać `openModal()` (istniejąca funkcja)
         d) Po otwarciu modala (setTimeout ~100ms po openModal) ustawić wartości w głównym formularzu:
            - `segmentSelect.value = searchSegment` + dispatch 'change' event
            - `dateFrom.value = searchDateFrom` + dispatch 'change'
            - `dateTo.value = searchDateTo` + dispatch 'change'
            - `pickupSelect` — poczekać aż lokalizacje się załadują po change segmentu, potem ustawić wartość
            - `sameReturnCheck.checked = searchSameReturn`
         e) Triggerować `loadExtras()` jeśli wszystkie wymagane pola wypełnione
    
    3. Problem z timingiem: po ustawieniu segmentu, lokalizacje ładują się asynchronicznie. Rozwiązanie:
       - Dodać callback/promise lub event `carei:branches-loaded` który dispatch-uje się po załadowaniu lokalizacji
       - W prefill poczekać na ten event, potem ustawić pickupSelect.value
    
    4. Osobna inicjalizacja dat w mini formularzu — labelki "Od kiedy?"/"Do kiedy?" zachowują się jak placeholdery (widoczne gdy puste).
    
    Avoid: 
    - Nie duplikować fetchowania API — jeśli dane już załadowane (dataLoaded=true), reużyć cache
    - Nie łamać istniejącej logiki modala — openModal() musi działać normalnie gdy wywoływana z przycisku `data-carei-open-modal`
  </action>
  <verify>Po wypełnieniu mini formularza i kliknięciu przycisku: modal się otwiera, pola segment/daty/lokalizacja są wypełnione, extras się ładują</verify>
  <done>AC-2, AC-3 satisfied: Selecty ładują dane, przycisk otwiera modal z pre-fill</done>
</task>

<task type="auto">
  <name>Task 3: CSS — stylowanie mini formularza zgodne z Figmą</name>
  <files>wp-content/plugins/carei-reservation/assets/css/carei-reservation.css</files>
  <action>
    Dodać style dla `.carei-search-form` na końcu pliku CSS:
    
    1. Container `.carei-search-form`:
       - background: #EDEDF3
       - border-radius: 14px
       - border: 1px solid rgba(47, 36, 130, 0.1)
       - padding: ~24px 28px
       - max-width: 422px (z Figmy: width 422px)
       - box-shadow: subtletny drop shadow
    
    2. Tytuł `.carei-search-form__title`:
       - font-family: 'Albert Sans', sans-serif
       - font-weight: 700
       - color: #2F2482
       - text-align: center
       - span (kropka): color: #FF0000
    
    3. Pola formularza `.carei-search-form__field`:
       - background: #fff
       - border-radius: 8px
       - border: 1px solid #E0E0E0
       - padding: 12px 16px
       - font-size: 14px
       - Selecty: appearance: none + custom arrow icon
       - Daty: dwa pola obok siebie (flex row, gap)
    
    4. Checkbox `.carei-search-form__checkbox`:
       - Styl jak w głównym formularzu (custom checkbox box z SVG checkmark)
       - Kolor checked: #2F2482
    
    5. Przycisk `.carei-search-form__submit`:
       - background: #FF0000
       - color: #fff
       - border-radius: 8px
       - width: 100%
       - padding: 14px
       - font-weight: 600
       - ikona strzałki przed tekstem
       - hover: lekkie przyciemnienie
    
    6. Responsive:
       - Na mobile (< 768px): max-width: 100%, padding zmniejszony
       - Pola dat: mogą być w kolumnie na bardzo wąskich ekranach (< 400px)
    
    Avoid: Nie modyfikować istniejących styli modala/formularza — dodać TYLKO nowe reguły z prefiksem `.carei-search-form`
  </action>
  <verify>Mini formularz wygląda zgodnie z designem z Figmy: tło szare, pola białe, przycisk czerwony, tytuł fioletowy</verify>
  <done>AC-4 satisfied: Design zgodny z Figmą</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>Mini formularz rezerwacji w hero z pre-fill do modala</what-built>
  <how-to-verify>
    1. Otwórz stronę w Elementorze, osadź widget "Carei Search Form" w sekcji hero
    2. Na tej samej stronie musi być osadzony widget "Carei Reservation" (renderuje modal)
    3. Podgląd strony:
       - Mini formularz widoczny z polami segment, daty, lokalizacja, checkbox
       - Wybierz segment → lokalizacje się filtrują
       - Wypełnij daty i lokalizację
       - Kliknij "Złóż zapytanie o rezerwację"
       - Modal się otwiera z wypełnionymi danymi
       - Extras ładują się automatycznie
    4. Sprawdź design: tło szare, pola białe, przycisk czerwony
    5. Sprawdź mobile: formularz responsywny
  </how-to-verify>
  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
</task>

</tasks>

<boundaries>

## DO NOT CHANGE
- includes/class-elementor-widget.php — HTML modala pozostaje bez zmian
- includes/class-softra-api.php — logika API bez zmian
- includes/class-rest-proxy.php — endpointy REST bez zmian
- includes/class-admin-panel.php — panel admina bez zmian

## SCOPE LIMITS
- Mini formularz NIE ma własnego modala — korzysta z modala renderowanego przez istniejący widget
- Brak walidacji w mini formularzu — walidacja jest w głównym formularzu
- Brak pól danych osobowych w mini formularzu — tylko dane wynajmu
- Nie dodawać nowych zależności npm/composer

</boundaries>

<verification>
Before declaring plan complete:
- [ ] Widget "Carei Search Form" widoczny w panelu Elementor
- [ ] Mini formularz renderuje się na stronie z prawidłowym designem
- [ ] Selecty segmentu i lokalizacji ładują dane z API
- [ ] Kliknięcie przycisku otwiera modal z pre-wypełnionymi danymi
- [ ] Istniejący przycisk `data-carei-open-modal` nadal działa normalnie
- [ ] Responsive: formularz poprawny na mobile
- [ ] Brak błędów JS w konsoli
</verification>

<success_criteria>
- Widget osadzony w Elementorze renderuje mini formularz
- Dane z mini formularza poprawnie przenoszone do modala
- Design zgodny z Figmą
- Istniejąca funkcjonalność modala nienaruszona
</success_criteria>

<output>
After completion, create `.paul/phases/07-hero-search-form/07-01-SUMMARY.md`
</output>