---
phase: 03-form-submit-booking
plan: 01
type: execute
wave: 1
depends_on: ["02-01"]
files_modified:
  - wp-content/plugins/carei-reservation/includes/class-elementor-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/includes/class-softra-api.php
  - wp-content/plugins/carei-reservation/includes/class-rest-proxy.php
autonomous: false
---

<objective>
## Goal
Zbudować kompletny flow wysyłki formularza: tworzenie klienta w API Softra → podsumowanie kosztów w overlay → złożenie rezerwacji → potwierdzenie. Formularz staje się w pełni funkcjonalny.

## Purpose
Bez tego flow formularz tylko zbiera dane do console.log. To jest core value — klient składa rezerwację która trafia do systemu Softra Rent.

## Output
Działający submit: formularz → API customer/add → pricing summary overlay → makebooking → confirm → komunikat sukcesu.
</objective>

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

## Prior Work
@.paul/phases/02-form-ui-step1/02-01-SUMMARY.md
- Formularz Krok 1 w modalu z dynamicznym ładowaniem segmentów/oddziałów/extras
- Walidacja + zbieranie danych (console.log)
- Pricelist ID dostępny z odpowiedzi /pricelist endpoint

## API Documentation
@docs/rent-api-02-klienci-i-konta.md — customer/add wymaga: name, address, paymentMethod, isCompany, account|skipAccountCreate, pesel|passportNo|idCard (dla osób fizycznych)
@docs/rent-api-03-rezerwacje-i-platnosci.md — makebooking wymaga: dateFrom, dateTo, customerId, pickUpLocation, returnLocation, carParameters, priceListId, validTime

## Source Files
@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
@wp-content/plugins/carei-reservation/includes/class-softra-api.php
@wp-content/plugins/carei-reservation/includes/class-rest-proxy.php
</context>

<acceptance_criteria>

## AC-1: Formularz zbiera dodatkowe dane wymagane przez API
```gherkin
Given formularz rezerwacji jest otwarty
When użytkownik przewija do sekcji "Dane najemcy"
Then widoczne są dodatkowe pola: Miejscowość, Kod pocztowy, Ulica, PESEL
And pola adresowe i PESEL są wymagane przy walidacji
```

## AC-2: Submit formularza tworzy klienta i pokazuje podsumowanie kosztów
```gherkin
Given użytkownik wypełnił wszystkie wymagane pola formularza
When klika "Wyślij"
Then przycisk zmienia się na "Przetwarzanie..." (disabled)
And w tle: tworzony jest klient via /customer/add
And w tle: pobierane jest podsumowanie kosztów via /rent/princingSummary
And wyświetla się overlay z podsumowaniem: lista opłat, wartość netto/brutto
And overlay ma przycisk "Potwierdź rezerwację" i "Wróć do formularza"
```

## AC-3: Potwierdzenie rezerwacji kończy flow
```gherkin
Given overlay z podsumowaniem jest wyświetlony
When użytkownik klika "Potwierdź rezerwację"
Then w tle: tworzona jest rezerwacja via /rent/makebooking
And w tle: rezerwacja jest potwierdzana via /rent/confirm
And overlay zamienia się na komunikat sukcesu z numerem rezerwacji
And jest przycisk "Zamknij" który zamyka modal

When rezerwacja się nie powiedzie (API error)
Then wyświetla się komunikat błędu z przyczyną (rejectReason)
And użytkownik może wrócić do formularza i spróbować ponownie
```

</acceptance_criteria>

<tasks>

<task type="auto">
  <name>Task 1: Dodatkowe pola formularza + overlay podsumowania (HTML/CSS)</name>
  <files>wp-content/plugins/carei-reservation/includes/class-elementor-widget.php, wp-content/plugins/carei-reservation/assets/css/carei-reservation.css</files>
  <action>
    **class-elementor-widget.php — dodaj do sekcji "Dane najemcy":**

    Po wierszu Imię/Nazwisko, przed wierszem Email/Telefon, dodaj wiersz adresowy:
    ```
    .carei-form__row (3 kolumny: Miejscowość | Kod pocztowy | Ulica)
      ├─ input#carei-city (Miejscowość, required)
      ├─ input#carei-zipcode (Kod pocztowy, placeholder "00-000", required)
      └─ input#carei-street (Ulica i nr domu, required)
    ```

    Po wierszu Email/Telefon dodaj wiersz PESEL:
    ```
    .carei-form__field.carei-form__field--half
      └─ input#carei-pesel (PESEL, type="text", maxlength="11", required)
    ```

    **Overlay podsumowania — dodaj PO form, ale wewnątrz .carei-modal:**

    ```html
    <div id="carei-summary-overlay" class="carei-summary" style="display:none;">
      <h3 class="carei-summary__title">Podsumowanie rezerwacji</h3>
      <div class="carei-summary__details" id="carei-summary-details">
        <!-- JS wypełni: segment, daty, oddział -->
      </div>
      <div class="carei-summary__table" id="carei-summary-table">
        <!-- JS wypełni: tabela opłat z princingSummary -->
      </div>
      <div class="carei-summary__total" id="carei-summary-total">
        <!-- JS wypełni: netto, VAT, brutto -->
      </div>
      <div class="carei-summary__actions">
        <button type="button" class="carei-summary__btn carei-summary__btn--back" id="carei-summary-back">
          Wróć do formularza
        </button>
        <button type="button" class="carei-summary__btn carei-summary__btn--confirm" id="carei-summary-confirm">
          Potwierdź rezerwację
        </button>
      </div>
      <div class="carei-summary__error" id="carei-summary-error" style="display:none;"></div>
    </div>
    ```

    **Widok sukcesu — dodaj PO overlay podsumowania:**

    ```html
    <div id="carei-success-view" class="carei-success" style="display:none;">
      <div class="carei-success__icon">✓</div>
      <h3 class="carei-success__title">Rezerwacja złożona!</h3>
      <p class="carei-success__number" id="carei-success-number"></p>
      <p class="carei-success__message">Potwierdzenie zostało wysłane na podany adres e-mail.</p>
      <button type="button" class="carei-success__close" id="carei-success-close">Zamknij</button>
    </div>
    ```

    **carei-reservation.css — dodaj style:**

    - `.carei-form__row--address`: grid 3 kolumny (1fr auto 1fr), mobile: 1 kolumna
    - `.carei-form__field--half`: max-width 50%, mobile: 100%
    - `.carei-summary`: pełna wysokość modala, flex column, gap 24px, padding jak modal
    - `.carei-summary__title`: jak .carei-modal-title
    - `.carei-summary__table`: tabela z opłatami — wiersz: nazwa | ilość | cena | wartość
    - `.carei-summary__table table`: width 100%, border-collapse, alternating rows
    - `.carei-summary__total`: pogrubiony, wyrównany do prawej, netto/VAT/brutto
    - `.carei-summary__actions`: flex, gap 16px, justify-content space-between
    - `.carei-summary__btn--back`: border 1px solid carei-blue, bg transparent, color carei-blue
    - `.carei-summary__btn--confirm`: bg carei-red, color white (jak submit)
    - `.carei-summary__error`: bg rgba(255,0,0,0.05), color red, padding 12px, border-radius
    - `.carei-success`: flex column, align-items center, text-align center, gap 16px
    - `.carei-success__icon`: 64px circle, bg green, color white, font-size 32px
    - `.carei-success__close`: jak .carei-form__submit
  </action>
  <verify>
    `php -l wp-content/plugins/carei-reservation/includes/class-elementor-widget.php` — brak syntax errors.
    CSS plik zawiera style dla `.carei-summary` i `.carei-success`.
  </verify>
  <done>AC-1 satisfied: dodatkowe pola adresowe i PESEL widoczne, overlay HTML gotowy</done>
</task>

<task type="auto">
  <name>Task 2: JS — submit flow (customer → pricing → booking → confirm)</name>
  <files>wp-content/plugins/carei-reservation/assets/js/carei-reservation.js, wp-content/plugins/carei-reservation/includes/class-softra-api.php, wp-content/plugins/carei-reservation/includes/class-rest-proxy.php</files>
  <action>
    **JS — przepisz initSubmit() i dodaj nowe funkcje:**

    **Stan globalny — dodaj zmienne:**
    ```
    var currentCustomerId = null;
    var currentPriceListId = null;  // z odpowiedzi pricelist (już ładowany w loadExtras)
    var currentPricingSummary = null;
    var currentReservationId = null;
    var summaryOverlay, successView, summaryBack, summaryConfirm;
    ```

    **initRefs() — dodaj referencje:**
    - summaryOverlay = getElementById('carei-summary-overlay')
    - successView = getElementById('carei-success-view')
    - summaryBack = getElementById('carei-summary-back')
    - summaryConfirm = getElementById('carei-summary-confirm')
    - summaryError = getElementById('carei-summary-error')

    **loadExtras() — zapisz priceListId:**
    - Przy ładowaniu pricelist, zapisz `currentPriceListId = pricelist.id` z pierwszego elementu odpowiedzi

    **Nowy flow submit:**

    1. `handleSubmit()`:
       - Walidacja (jak teraz)
       - Disable submit btn → "Przetwarzanie..."
       - Wywołaj `createCustomerAndShowSummary()`

    2. `createCustomerAndShowSummary()`:
       - Zbierz dane formularza
       - POST /customer z danymi:
         ```json
         {
           "firstName": formData.firstName,
           "lastName": formData.lastName,
           "name": firstName + " " + lastName,
           "isCompany": "N",
           "address": {
             "city": formData.city,
             "zipCode": formData.zipCode,
             "street": formData.street,
             "homeNo": "-"
           },
           "pesel": formData.pesel,
           "email": formData.email,
           "phoneMobile": formData.phone,
           "paymentMethod": "GOTÓWKA",
           "skipAccountCreate": "T",
           "emailVerified": true
         }
         ```
       - On success: `currentCustomerId = response.customerId`
       - Wywołaj `loadPricingSummary()`
       - On error: pokaż błąd, re-enable submit btn

    3. `loadPricingSummary()`:
       - POST /pricing-summary z danymi:
         ```json
         {
           "dateFrom": formData.dateFrom + ":00",
           "dateTo": formData.dateTo + ":00",
           "customerId": currentCustomerId,
           "pickUpLocation": { "branchName": formData.pickupBranch, "outOfBranch": "N" },
           "returnLocation": { "branchName": returnBranch, "outOfBranch": "N" },
           "carParameters": { "categoryName": formData.segment },
           "priceListId": currentPriceListId,
           "priceItems": selectedExtrasAsBookingPriceItems()
         }
         ```
       - On success: `currentPricingSummary = response`
       - Wywołaj `showSummaryOverlay(response)`
       - On error: pokaż błąd, re-enable submit btn

    4. `selectedExtrasAsBookingPriceItems()`:
       - Dla każdego zaznaczonego checkbox extras[]:
         ```json
         {
           "id": checkbox.value,
           "name": checkbox label text,
           "unit": "szt.",
           "amount": 1,
           "priceBeforeDiscount": checkbox.dataset.price,
           "discount": 0,
           "priceAfterDiscount": checkbox.dataset.price
         }
         ```

    5. `showSummaryOverlay(summary)`:
       - Ukryj form, pokaż summaryOverlay
       - Wypełnij #carei-summary-details: segment, daty, oddział
       - Wypełnij #carei-summary-table: tabela z summary.pricelist items
         - Kolumny: Nazwa | Ilość | Cena netto | Wartość brutto
         - Oznacz wiersze addedBySystem=true (np. kursywą + "doliczone automatycznie")
       - Wypełnij #carei-summary-total: totalNetValue, totalVatValue, totalGrossValue

    6. `handleSummaryBack()`:
       - Ukryj summaryOverlay, pokaż form
       - Re-enable submit btn

    7. `handleSummaryConfirm()`:
       - Disable confirm btn → "Rezerwuję..."
       - POST /booking z pełnymi danymi makebooking:
         ```json
         {
           "dateFrom": ..., "dateTo": ...,
           "customerId": currentCustomerId,
           "pickUpLocation": { "branchName": ..., "outOfBranch": "N" },
           "returnLocation": { "branchName": ..., "outOfBranch": "N" },
           "carParameters": { "categoryName": segment },
           "priceListId": currentPriceListId,
           "validTime": 30,
           "priceItems": selectedExtrasAsBookingPriceItems(),
           "agreementItems": agreementItemsFromForm(),
           "comments": formData.message
         }
         ```
       - On success (response.success=true):
         - `currentReservationId = response.reservationId`
         - POST /booking/confirm z { reservationId }
         - Pokaż success view z response.reservationNo
       - On error: pokaż błąd w #carei-summary-error, re-enable btn

    8. `agreementItemsFromForm()`:
       - Privacy checkbox → return [{ id: agreementId, value: true }]
       - AgreementId: załaduj raz z GET /agreements na modal open, zapisz w zmiennej

    9. `showSuccessView(reservationNo)`:
       - Ukryj summaryOverlay, pokaż successView
       - Wypełnij #carei-success-number: "Nr rezerwacji: " + reservationNo

    10. `handleSuccessClose()`:
        - Zamknij modal (closeModal())
        - Reset formularza

    **Walidacja — dodaj nowe wymagane pola do requiredFields:**
    - { id: 'carei-city', type: 'input', msg: 'Podaj miejscowość' }
    - { id: 'carei-zipcode', type: 'input', msg: 'Podaj kod pocztowy' }
    - { id: 'carei-street', type: 'input', msg: 'Podaj ulicę' }
    - { id: 'carei-pesel', type: 'pesel', msg: 'Podaj poprawny PESEL (11 cyfr)' }
    - Walidacja PESEL: dokładnie 11 cyfr

    **REST proxy — dodaj brakujący endpoint /cancel:**
    W class-rest-proxy.php dodaj route POST /booking/cancel.
    W class-softra-api.php metoda cancel_booking już może istnieć, jeśli nie — dodaj.

    **WAŻNE — obsługa błędów:**
    - Każdy krok API (customer, pricing, booking, confirm) może failować
    - Przy każdym błędzie: wyświetl czytelny komunikat, pozwól wrócić do formularza
    - Timeout: jeśli API nie odpowie w 30s → "Serwer nie odpowiada, spróbuj ponownie"
    - rejectReason z API: wyświetl użytkownikowi (np. "CAR_NOT_FOUND" → "Brak dostępnego pojazdu w wybranym terminie")
  </action>
  <verify>
    JS plik nie zawiera syntax errors.
    PHP pliki: `php -l class-softra-api.php`, `php -l class-rest-proxy.php` — brak błędów.
    Flow: form submit → customer → pricing summary → display overlay.
  </verify>
  <done>AC-2 (submit tworzy klienta i pokazuje podsumowanie), AC-3 (potwierdzenie kończy flow)</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>Kompletny flow rezerwacji: formularz → tworzenie klienta → podsumowanie kosztów → rezerwacja → potwierdzenie</what-built>
  <how-to-verify>
    1. Wgraj pliki na serwer (carei.pagedev.pl)
    2. Otwórz formularz, wypełnij wszystkie pola (w tym adres, PESEL)
    3. Kliknij "Wyślij" — sprawdź:
       - Przycisk zmienia się na "Przetwarzanie..."
       - Po chwili pojawia się overlay z podsumowaniem kosztów
       - Tabela pokazuje opłaty (wynajem + ewentualne dodatki)
       - Widoczne wartości netto/VAT/brutto
    4. Kliknij "Wróć do formularza" — formularz wraca
    5. Kliknij "Wyślij" ponownie → overlay → "Potwierdź rezerwację"
       - Sprawdź czy pojawia się komunikat sukcesu z numerem rezerwacji
    6. Test błędów:
       - Wyślij z niepoprawnym PESEL → walidacja łapie
       - Wyślij z datami w przeszłości → sprawdź reakcję API
    7. Na mobile: overlay i success view powinny być responsywne
  </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/carei-reservation.php (main plugin file)
- wp-content/plugins/elementor-addon/* (istniejący plugin)
- wp-content/themes/hello-elementor/* (theme)
- .env, docs/*

## SCOPE LIMITS
- Ten plan implementuje flow: customer → pricing summary → booking → confirm
- NIE implementuje płatności online (preautoryzacja karty itp.)
- NIE implementuje konta klienta (skipAccountCreate='T')
- NIE buduje panelu admina (Phase 5)
- Wyjazd zagraniczny i ubezpieczenie pominięte (backlog)
- Anulowanie rezerwacji: endpoint dodany ale UI nie (future)

</boundaries>

<verification>
Before declaring plan complete:
- [ ] `php -l` na wszystkich zmienionych plikach PHP — brak błędów
- [ ] Formularz zawiera pola: adres (city, zip, street), PESEL
- [ ] Submit flow: customer/add → princingSummary → overlay z tabelą kosztów
- [ ] Confirm flow: makebooking → confirm → success view z numerem rezerwacji
- [ ] Error handling: API errors wyświetlane użytkownikowi
- [ ] Responsive: overlay i success view działają na mobile
- [ ] Human verify: pełny test flow na żywym serwerze
</verification>

<success_criteria>
- Formularz składa rezerwację w systemie Softra Rent
- Użytkownik widzi podsumowanie kosztów przed potwierdzeniem
- Użytkownik dostaje numer rezerwacji po potwierdzeniu
- Błędy API wyświetlane czytelnie
</success_criteria>

<output>
After completion, create `.paul/phases/03-form-submit-booking/03-01-SUMMARY.md`
</output>