@extends('layouts.app')

@section('full-width', 'true')

@section('content')
    <div class="container-fluid px-0">

        {{-- Styl tylko dla tego widoku --}}
        <style>
            .invoice-wizard-shell {
                border-radius: 1.5rem;
                padding: 1.75rem 1.5rem 2rem;
                background:
                    radial-gradient(circle at 0 0, rgba(59,130,246,.12), transparent 55%),
                    radial-gradient(circle at 100% 0, rgba(147,51,234,.10), transparent 60%),
                    rgba(255,255,255,.92);
                box-shadow: 0 22px 55px rgba(15,23,42,.18);
                border: 1px solid rgba(148,163,184,.35);
            }

            @media (min-width: 992px) {
                .invoice-wizard-shell {
                    padding: 2rem 1.75rem 2.3rem;
                }
            }

            /* Stepper */
            .invoice-stepper {
                background: rgba(248,250,252,.92);
                border-radius: 999px;
                padding: .35rem;
                border: 1px solid rgba(226,232,240,.9);
            }
            .invoice-stepper .nav-link {
                border-radius: 999px;
                padding: .4rem .75rem;
                font-size: .85rem;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: .35rem;
            }
            .invoice-stepper .nav-link.active {
                background: linear-gradient(135deg,#2563eb,#4f46e5);
                color: #fff;
                box-shadow: 0 10px 25px rgba(37,99,235,.45);
            }
            .invoice-stepper .nav-link.active .badge {
                background: rgba(255,255,255,.18) !important;
                color: #e0e7ff !important;
            }

            /* Główna karta sekcji <Fa> */
            .invoice-wizard-card {
                border-radius: 1.3rem;
                border: 1px solid rgba(148,163,184,.35);
                background:
                    linear-gradient(145deg, rgba(248,250,252,.98), rgba(239,246,255,.98));
                box-shadow: 0 18px 45px rgba(15,23,42,.16);
                overflow: hidden;
            }
            .invoice-wizard-header {
                padding: .85rem 1.4rem;
                border-bottom: 1px solid rgba(226,232,240,.9);
                background: linear-gradient(135deg, rgba(219,234,254,.9), rgba(238,242,255,.9));
            }
            .invoice-wizard-header .badge {
                font-size: .7rem;
            }

            .invoice-wizard-body {
                padding: 1.4rem 1.4rem 1.2rem;
            }

            .invoice-wizard-footer {
                padding: .85rem 1.4rem 1.1rem;
                border-top: 1px solid rgba(226,232,240,.9);
                background: rgba(249,250,251,.95);
            }

            /* Bloki w środku (P_6 / WZ / korekty) */
            .invoice-section-soft {
                border-radius: 1.05rem;
                background: rgba(255,255,255,.9);
                border: 1px solid rgba(226,232,240,.9);
                box-shadow: 0 12px 26px rgba(15,23,42,.06);
            }
            .invoice-section-soft legend {
                padding: .35rem .8rem;
                border-radius: 999px;
                background: rgba(219,234,254,.9);
                display: inline-flex;
                align-items: center;
                gap: .35rem;
            }

            /* Pola formularza w tym wizardzie */
            .invoice-wizard-body .form-label {
                font-size: .84rem;
                font-weight: 600;
                color: #374151;
            }

            .invoice-wizard-body .form-text {
                font-size: .75rem;
                color: #6b7280;
            }

            .invoice-wizard-body .form-control,
            .invoice-wizard-body .form-select {
                border-radius: .9rem;
                border: 1px solid rgba(209,213,219,.9);
                font-size: .9rem;
                padding-inline: .85rem;
                height: 44px;
                background: linear-gradient(145deg,#f9fafb,#eef2ff);
                box-shadow:
                    0 1px 0 rgba(255,255,255,.8) inset,
                    0 1px 2px rgba(15,23,42,.06);
                transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .06s ease;
            }

            .invoice-wizard-body textarea.form-control {
                min-height: 70px;
                height: auto;
                border-radius: 1rem;
            }

            .invoice-wizard-body .form-control:focus,
            .invoice-wizard-body .form-select:focus {
                border-color: rgba(37,99,235,.8);
                background: #ffffff;
                box-shadow:
                    0 0 0 1px rgba(37,99,235,.35),
                    0 0 0 4px rgba(191,219,254,.75),
                    0 10px 25px rgba(37,99,235,.25);
                transform: translateY(-1px);
            }

            .invoice-wizard-body .form-control::placeholder {
                color: #9ca3af;
                font-size: .83rem;
            }

            .invoice-pill-label {
                font-size: .78rem;
                text-transform: uppercase;
                letter-spacing: .14em;
                color: #9ca3af;
            }

            .invoice-radio-pills .form-check {
                margin-right: 1rem;
            }
            .invoice-radio-pills .form-check-input {
                cursor: pointer;
            }
            .invoice-radio-pills .form-check-label {
                cursor: pointer;
                font-size: .86rem;
            }

            /* Przyciski */
            .invoice-wizard-footer .btn-primary {
                border-radius: 999px;
                padding-inline: 1.7rem;
                padding-block: .55rem;
                font-weight: 600;
                letter-spacing: .03em;
                box-shadow: 0 18px 45px rgba(37,99,235,.35);
            }
            .invoice-wizard-footer .btn-primary:hover {
                transform: translateY(-1px);
                box-shadow: 0 24px 60px rgba(37,99,235,.45);
            }

            .korekta-row {
                background: rgba(249,250,251,.96);
            }
        </style>

        <div class="invoice-wizard-shell">

            {{-- Nagłówek strony --}}
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-start mb-4 gap-3">
                <div>
                    <div class="invoice-pill-label mb-2">
                        Krok 1 z 5 &middot; dane nagłówkowe (sekcja <code>Fa</code>)
                    </div>
                    <h1 class="h3 mb-1">Nowa faktura</h1>
                    <p class="text-muted mb-0 tile-subtitle">
                        Uzupełnij podstawowe dane dokumentu, z których powstanie sekcja <code>&lt;Fa&gt;</code> w FA(3).
                    </p>
                </div>
                <div class="text-end small text-muted d-none d-md-block">
                    <div><span class="badge bg-light text-dark border">FA(3)</span> &nbsp; Struktura logiczna KSeF</div>
                    <div class="mt-1">
                        Pola: <code>KodWaluty</code>, <code>P_1</code>, <code>P_2</code>, <code>P_6</code>/<code>OkresFa</code>,
                        <code>RodzajFaktury</code>, <code>WZ</code>
                    </div>
                </div>
            </div>

            {{-- Pasek kroków kreatora --}}
            <div class="mb-4">
                <ul class="nav nav-pills nav-justified small invoice-stepper">
                    <li class="nav-item">
                        <span class="nav-link active">
                            <span class="badge bg-light text-primary me-1">1</span> Ogólne
                        </span>
                    </li>
                    <li class="nav-item">
                        <span class="nav-link disabled">
                            <span class="badge bg-light text-muted me-1">2</span> Podmioty
                        </span>
                    </li>
                    <li class="nav-item">
                        <span class="nav-link disabled">
                            <span class="badge bg-light text-muted me-1">3</span> Pozycje
                        </span>
                    </li>
                    <li class="nav-item">
                        <span class="nav-link disabled">
                            <span class="badge bg-light text-muted me-1">4</span> Płatność
                        </span>
                    </li>
                    <li class="nav-item">
                        <span class="nav-link disabled">
                            <span class="badge bg-light text-muted me-1">5</span> Podsumowanie
                        </span>
                    </li>
                </ul>
            </div>

            {{-- Komunikaty --}}
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show shadow-sm border-0 mb-4" role="alert">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-check-circle-fill me-2"></i>
                        <div>{{ session('success') }}</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Zamknij"></button>
                </div>
            @endif

            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show shadow-sm border-0 mb-4" role="alert">
                    <div class="d-flex">
                        <div class="me-2">
                            <span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-white bg-opacity-25"
                                  style="width: 28px;height: 28px;">
                                <i class="bi bi-exclamation-triangle-fill"></i>
                            </span>
                        </div>
                        <div>
                            <strong>Nie udało się zapisać nagłówka faktury.</strong>
                            <p class="mb-1 small">
                                Popraw poniższe błędy zgodnie z wymogami FA(3) (elementy sekcji <code>&lt;Fa&gt;</code>).
                            </p>
                            <ul class="mb-0 small ps-3">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Zamknij"></button>
                </div>
            @endif

            <form method="POST" action="{{ route('faktury.store.header') }}" novalidate>
                @csrf

                <div class="invoice-wizard-card">
                    <div class="invoice-wizard-header d-flex justify-content-between align-items-center">
                        <div>
                            <span class="fw-semibold">Dane ogólne faktury</span>
                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle ms-2">
                                Sekcja &lt;Fa&gt;
                            </span>
                        </div>
                        <small class="text-muted">
                            Pola wymagane dla poprawnego FA(3) oznaczono <span class="text-danger">*</span>
                        </small>
                    </div>

                    <div class="invoice-wizard-body">
                        {{-- Wiersz: KodWaluty + RodzajFaktury --}}
                        <div class="row g-3 mb-3">
                            {{-- KodWaluty --}}
                            <div class="col-md-4">
                                <label for="kod_waluty" class="form-label">
                                    Kod waluty (<code>KodWaluty</code>) <span class="text-danger">*</span>
                                </label>
                                <select name="kod_waluty" id="kod_waluty"
                                        class="form-select @error('kod_waluty') is-invalid @enderror">
                                    @foreach (['PLN','EUR','USD','GBP'] as $waluta)
                                        <option value="{{ $waluta }}"
                                            @selected(old('kod_waluty', $defaultCurrency) === $waluta)>
                                            {{ $waluta }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="form-text">
                                    Trzyznakowy kod ISO 4217, przenoszony do elementu <code>&lt;KodWaluty&gt;</code>.
                                </div>
                                @error('kod_waluty')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- RodzajFaktury --}}
                            <div class="col-md-8">
                                <label for="rodzaj_faktury" class="form-label">
                                    Rodzaj faktury (<code>RodzajFaktury</code>) <span class="text-danger">*</span>
                                </label>
                                <select name="rodzaj_faktury" id="rodzaj_faktury"
                                        class="form-select @error('rodzaj_faktury') is-invalid @enderror">
                                    <option value="">-- wybierz rodzaj faktury --</option>
                                    <option value="VAT"      @selected(old('rodzaj_faktury')==='VAT')>VAT – faktura podstawowa</option>
                                    <option value="KOR"      @selected(old('rodzaj_faktury')==='KOR')>KOR – korekta</option>
                                    <option value="ZAL"      @selected(old('rodzaj_faktury')==='ZAL')>ZAL – zaliczkowa</option>
                                    <option value="ROZ"      @selected(old('rodzaj_faktury')==='ROZ')>ROZ – rozliczająca</option>
                                    <option value="UPR"      @selected(old('rodzaj_faktury')==='UPR')>UPR – uproszczona</option>
                                    <option value="KOR_ZAL"  @selected(old('rodzaj_faktury')==='KOR_ZAL')>KOR_ZAL – korekta zaliczkowej</option>
                                    <option value="KOR_ROZ"  @selected(old('rodzaj_faktury')==='KOR_ROZ')>KOR_ROZ – korekta rozliczającej</option>
                                </select>
                                <div class="form-text">
                                    Określa typ dokumentu w FA(3) i warunkuje wymagania pól korekty.
                                </div>
                                @error('rodzaj_faktury')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Wiersz: P_1, P_1M, P_2 --}}
                        <div class="row g-3 mb-3">
                            {{-- P_1 --}}
                            <div class="col-md-4">
                                <label for="data_wystawienia" class="form-label">
                                    Data wystawienia (<code>P_1</code>) <span class="text-danger">*</span>
                                </label>
                                <input type="date"
                                       id="data_wystawienia"
                                       name="data_wystawienia"
                                       class="form-control @error('data_wystawienia') is-invalid @enderror"
                                       value="{{ old('data_wystawienia', now()->toDateString()) }}">
                                <div class="form-text">
                                    Data wystawienia faktury zgodna z FA(3).
                                </div>
                                @error('data_wystawienia')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- P_1M --}}
                            <div class="col-md-4">
                                <label for="miejsce_wystawienia" class="form-label">
                                    Miejsce wystawienia (<code>P_1M</code>)
                                </label>
                                <input type="text"
                                       id="miejsce_wystawienia"
                                       name="miejsce_wystawienia"
                                       class="form-control @error('miejsce_wystawienia') is-invalid @enderror"
                                       value="{{ old('miejsce_wystawienia') }}"
                                       placeholder="np. Warszawa">
                                <div class="form-text">
                                    Miejscowość wystawienia faktury (opcjonalne, ale zalecane).
                                </div>
                                @error('miejsce_wystawienia')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- P_2 --}}
                            <div class="col-md-4">
                                <label for="numer" class="form-label">
                                    Numer faktury (<code>P_2</code>) <span class="text-danger">*</span>
                                </label>
                                <input type="text"
                                       id="numer"
                                       name="numer"
                                       class="form-control @error('numer') is-invalid @enderror"
                                       value="{{ old('numer') }}"
                                       placeholder="np. FV2026/02/150">
                                <div class="form-text">
                                    Numer wewnętrzny dokumentu, który trafi do <code>&lt;P_2&gt;</code>.
                                </div>
                                @error('numer')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- P_6 / OkresFa --}}
                        <div class="invoice-section-soft p-3 mb-3">
                            <legend class="fs-6 fw-semibold mb-2">
                                Data dostawy / okres rozliczeniowy
                                (<code>P_6</code> lub <code>OkresFa</code>)
                            </legend>

                            <div class="invoice-radio-pills d-flex flex-wrap gap-3 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="tryb_okresu"
                                           id="tryb_okresu_data"
                                           value="data"
                                           @checked(old('tryb_okresu','data') === 'data')>
                                    <label class="form-check-label" for="tryb_okresu_data">
                                        Pojedyncza data (<code>P_6</code>)
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="tryb_okresu"
                                           id="tryb_okresu_okres"
                                           value="okres"
                                           @checked(old('tryb_okresu') === 'okres')>
                                    <label class="form-check-label" for="tryb_okresu_okres">
                                        Okres od–do (<code>P_6_Od</code> / <code>P_6_Do</code> w <code>&lt;OkresFa&gt;</code>)
                                    </label>
                                </div>
                            </div>

                            {{-- P_6 --}}
                            <div id="sekcja-data" class="mb-2">
                                <label for="data_sprzedazy" class="form-label mb-1">
                                    Data dostawy / wykonania usługi (<code>P_6</code>)
                                </label>
                                <input type="date"
                                       id="data_sprzedazy"
                                       name="data_sprzedazy"
                                       class="form-control @error('data_sprzedazy') is-invalid @enderror"
                                       value="{{ old('data_sprzedazy') }}"
                                       placeholder="dd.mm.rrrr">
                                @error('data_sprzedazy')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- OkresFa --}}
                            <div id="sekcja-okres" class="mb-2" style="display:none;">
                                <label class="form-label mb-1">
                                    Okres rozliczeniowy (<code>OkresFa</code>)
                                </label>
                                <div class="row g-2">
                                    <div class="col-sm-6">
                                        <input type="date"
                                               name="okres_od"
                                               id="okres_od"
                                               class="form-control @error('okres_od') is-invalid @enderror"
                                               value="{{ old('okres_od') }}"
                                               placeholder="Od (P_6_Od)">
                                        @error('okres_od')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="date"
                                               name="okres_do"
                                               id="okres_do"
                                               class="form-control @error('okres_do') is-invalid @enderror"
                                               value="{{ old('okres_do') }}"
                                               placeholder="Do (P_6_Do)">
                                        @error('okres_do')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-text mt-1">
                                    Dla faktur okresowych w FA(3) wykorzystywany jest blok <code>&lt;OkresFa&gt;</code>.
                                </div>
                            </div>
                        </div>

                        {{-- Sekcja korekty --}}
                        <div id="sekcja-korekta" class="invoice-section-soft mb-3 border-warning-subtle" style="display:none;">
                            <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-3">
                                <span class="fw-semibold text-warning-emphasis">
                                    Dane korekty faktury
                                </span>
                                <small class="text-muted">
                                    Wymagane dla typów: <code>KOR</code>, <code>KOR_ZAL</code>, <code>KOR_ROZ</code>
                                </small>
                            </div>

                            <div class="row g-3 mb-3">
                                <div class="col-md-8">
                                    <label for="przyczyna_korekty" class="form-label">
                                        Przyczyna korekty (<code>PrzyczynaKorekty</code>) <span class="text-danger">*</span>
                                    </label>
                                    <textarea
                                        id="przyczyna_korekty"
                                        name="przyczyna_korekty"
                                        rows="2"
                                        class="form-control @error('przyczyna_korekty') is-invalid @enderror"
                                    >{{ old('przyczyna_korekty') }}</textarea>
                                    <div class="form-text">
                                        Opis słowny przyczyny korekty zgodny z wymogami FA(3).
                                    </div>
                                    @error('przyczyna_korekty')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4">
                                    <label for="typ_korekty" class="form-label">
                                        Typ korekty (<code>TypKorekty</code>) <span class="text-danger">*</span>
                                    </label>
                                    <select name="typ_korekty"
                                            id="typ_korekty"
                                            class="form-select @error('typ_korekty') is-invalid @enderror">
                                        <option value="">-- wybierz --</option>
                                        <option value="1" @selected(old('typ_korekty')==1)>1 – zmiana wartości zamówienia</option>
                                        <option value="2" @selected(old('typ_korekty')==2)>2 – rabat zbiorczy / okresowy</option>
                                        <option value="3" @selected(old('typ_korekty')==3)>3 – inne (np. stawka VAT)</option>
                                    </select>
                                    <div class="form-text">
                                        Kod opisujący sposób korekty, zgodnie z opisem FA(3).
                                    </div>
                                    @error('typ_korekty')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="border rounded-3 p-3 bg-white bg-opacity-60">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="fw-semibold small">
                                        Faktury korygowane (<code>&lt;DaneFaKorygowanej&gt;</code>)
                                    </span>
                                    <button type="button"
                                            class="btn btn-sm btn-outline-secondary"
                                            id="btn-add-korekta">
                                        + Dodaj fakturę korygowaną
                                    </button>
                                </div>

                                <div class="small text-muted mb-2">
                                    Podaj co najmniej jedną fakturę korygowaną: numer i/lub numer KSeF (wymogi XSD).
                                </div>

                                <div id="korekty-wrapper" class="vstack gap-3">
                                    {{-- rzędy dodaje JS --}}
                                </div>

                                @error('korekty')
                                    <div class="text-danger small mt-2">{{ $message }}</div>
                                @enderror
                                @error('korekty.*')
                                    <div class="text-danger small mt-2">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- WZ --}}
                        <div class="invoice-section-soft p-3">
                            <label class="form-label mb-2">
                                Numery WZ (<code>WZ</code>)
                            </label>
                            <div id="wz-wrapper" class="vstack gap-2 mb-2">
                                <input type="text"
                                       name="wz[0]"
                                       class="form-control @error('wz.0') is-invalid @enderror"
                                       value="{{ old('wz.0') }}"
                                       placeholder="np. 44343434/2026">
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-add-wz">
                                + Dodaj kolejny numer WZ
                            </button>
                            <div class="form-text mt-1">
                                Wiele dokumentów WZ zostanie zapisanych jako kolejne elementy <code>&lt;WZ&gt;</code>.
                            </div>
                            @error('wz.*')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="invoice-wizard-footer d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary">
                            Zapisz i przejdź do podmiotów &raquo;
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        (function () {
            const trybRadio      = document.querySelectorAll('input[name="tryb_okresu"]');
            const sekcjaData     = document.getElementById('sekcja-data');
            const sekcjaOkres    = document.getElementById('sekcja-okres');

            const dataSprzedazy  = document.getElementById('data_sprzedazy');
            const okresOd        = document.getElementById('okres_od');
            const okresDo        = document.getElementById('okres_do');

            const rodzajSelect   = document.getElementById('rodzaj_faktury');
            const sekcjaKorekta  = document.getElementById('sekcja-korekta');
            const przyczynaKorekty = document.getElementById('przyczyna_korekty');
            const typKorekty     = document.getElementById('typ_korekty');
            const korektyWrapper = document.getElementById('korekty-wrapper');
            const btnAddKorekta  = document.getElementById('btn-add-korekta');

            const wzWrapper      = document.getElementById('wz-wrapper');
            const btnAddWz       = document.getElementById('btn-add-wz');

            function refreshOkres() {
                const val = document.querySelector('input[name="tryb_okresu"]:checked')?.value;

                if (val === 'okres') {
                    sekcjaData.style.opacity = .4;
                    sekcjaOkres.style.display = 'block';
                    sekcjaOkres.style.opacity = 1;

                    if (dataSprzedazy) dataSprzedazy.removeAttribute('required');
                    if (okresOd) okresOd.setAttribute('required', 'required');
                    if (okresDo) okresDo.setAttribute('required', 'required');
                } else {
                    sekcjaData.style.opacity = 1;
                    sekcjaOkres.style.display = 'none';

                    if (dataSprzedazy) dataSprzedazy.setAttribute('required', 'required');
                    if (okresOd) okresOd.removeAttribute('required');
                    if (okresDo) okresDo.removeAttribute('required');
                }
            }

            function isCorrectionType(value) {
                return ['KOR', 'KOR_ZAL', 'KOR_ROZ'].includes(value);
            }

            function refreshKorekta() {
                const val = rodzajSelect.value;

                if (isCorrectionType(val)) {
                    sekcjaKorekta.style.display = 'block';
                    if (przyczynaKorekty) przyczynaKorekty.setAttribute('required', 'required');
                    if (typKorekty) typKorekty.setAttribute('required', 'required');
                } else {
                    sekcjaKorekta.style.display = 'none';
                    if (przyczynaKorekty) przyczynaKorekty.removeAttribute('required');
                    if (typKorekty) typKorekty.removeAttribute('required');
                }
            }

            function addKorektaRow() {
                if (!korektyWrapper) return;

                const index = korektyWrapper.querySelectorAll('.korekta-row').length;

                const wrapper = document.createElement('div');
                wrapper.className = 'korekta-row border rounded-3 p-3 position-relative';

                wrapper.innerHTML = `
                    <button type="button" class="btn-close position-absolute top-0 end-0 mt-2 me-2"
                            aria-label="Usuń" data-role="remove-korekta"></button>

                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label small mb-1">
                                Data wystawienia korygowanej (<code>DataWystFaKorygowanej</code>)
                            </label>
                            <input type="date"
                                   name="korekty[${index}][data_wystawienia]"
                                   class="form-control form-control-sm">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small mb-1">
                                Nr faktury korygowanej (<code>NrFaKorygowanej</code>)
                            </label>
                            <input type="text"
                                   name="korekty[${index}][nr_faktury]"
                                   class="form-control form-control-sm"
                                   placeholder="np. FV2026/02/150">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small mb-1">
                                Nr KSeF (<code>NrKSeF</code>)
                            </label>
                            <input type="text"
                                   name="korekty[${index}][nr_ksef]"
                                   class="form-control form-control-sm"
                                   placeholder="opcjonalny identyfikator">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small mb-1">
                                Nr KSeF faktury korygowanej (<code>NrKSeFFaKorygowanej</code>)
                            </label>
                            <input type="text"
                                   name="korekty[${index}][nr_ksef_faktury]"
                                   class="form-control form-control-sm"
                                   placeholder="pełny numer KSeF">
                        </div>
                    </div>

                    <div class="form-text small mt-2">
                        Co najmniej jedno z pól: numer faktury lub numer KSeF powinno być uzupełnione.
                    </div>
                `;

                korektyWrapper.appendChild(wrapper);
            }

            // Init handlers
            trybRadio.forEach(r => r.addEventListener('change', refreshOkres));
            if (rodzajSelect) {
                rodzajSelect.addEventListener('change', refreshKorekta);
            }

            if (btnAddKorekta && korektyWrapper) {
                btnAddKorekta.addEventListener('click', function () {
                    addKorektaRow();
                });

                korektyWrapper.addEventListener('click', function (e) {
                    if (e.target && e.target.matches('[data-role="remove-korekta"]')) {
                        const row = e.target.closest('.korekta-row');
                        if (row) row.remove();
                    }
                });
            }

            // dodawanie kolejnych WZ
            if (btnAddWz && wzWrapper) {
                btnAddWz.addEventListener('click', function () {
                    const index = wzWrapper.querySelectorAll('input[name^="wz["]').length;
                    const input = document.createElement('input');
                    input.type = 'text';
                    input.name = 'wz[' + index + ']';
                    input.className = 'form-control';
                    input.placeholder = 'np. 44343434/2026';
                    wzWrapper.appendChild(input);
                });
            }

            refreshOkres();
            refreshKorekta();
        })();
    </script>
@endsection