@extends('layouts.app')

@section('title', 'Dodatkowe dane faktury')

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

        {{-- Nagłówek --}}
        <div class="d-flex justify-content-between align-items-start mb-4">
            <div>
                <h1 class="h3 mb-1">
                    Dodatkowe dane faktury
                </h1>
                <p class="text-muted mb-0">
                    FA #{{ $faktura->id }} @if($faktura->numer) &mdash; numer: <code>{{ $faktura->numer }}</code> @endif
                </p>
            </div>
            <div class="text-end small text-muted d-none d-md-block">
                <div>Krok 5 z 6 &mdash; dane dodatkowe</div>
                <div>FA(3): <code>ZaliczkaCzesciowa</code>, <code>FakturaZaliczkowa</code>, <code>DodatkowyOpis</code>, <code>Stopka</code></div>
            </div>
        </div>

        {{-- Pasek kroków kreatora --}}
        <ul class="nav nav-pills nav-justified mb-4 small invoice-stepper">
            <li class="nav-item">
                <a href="{{ route('faktury.edit.header', $faktura->id) }}" class="nav-link">
                    <span class="badge bg-light text-muted me-2">1</span> Ogólne
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('faktury.edit.parties', $faktura->id) }}" class="nav-link">
                    <span class="badge bg-light text-muted me-2">2</span> Podmioty
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('faktury.edit.lines', $faktura->id) }}" class="nav-link">
                    <span class="badge bg-light text-muted me-2">3</span> Pozycje
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('faktury.edit.payments', $faktura->id) }}" class="nav-link">
                    <span class="badge bg-light text-muted me-2">4</span> Płatność
                </a>
            </li>
            <li class="nav-item">
                <span class="nav-link active">
                    <span class="badge bg-light text-primary me-2">5</span> Dodatkowe
                </span>
            </li>
            <li class="nav-item">
                <span class="nav-link disabled">
                    <span class="badge bg-light text-muted me-2">6</span> Podsumowanie
                </span>
            </li>
        </ul>

        {{-- Komunikaty walidacji --}}
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong>Uwaga!</strong> Formularz zawiera błędy. Popraw je zgodnie z wymaganiami FA(3), a następnie spróbuj ponownie.
                <ul class="mb-0 mt-2 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Zamknij"></button>
            </div>
        @endif

        @php
            $zaliczkiRows = old('zaliczki', $zaliczki ? $zaliczki->map(function ($z) {
                return [
                    'data'  => optional($z->data)->format('Y-m-d'),
                    'kwota' => $z->kwota,
                    'kurs'  => $z->kurs,
                ];
            })->toArray() : []);

            if (empty($zaliczkiRows)) {
                $zaliczkiRows = [[]]; // co najmniej jeden pusty wiersz
            }

            $rozliczeniaRows = old('rozliczenia', $rozliczenia ? $rozliczenia->map(function ($r) {
                return [
                    'nr_ksef'         => $r->nr_ksef,
                    'nr_faktury'      => $r->nr_faktury,
                    'nr_ksef_faktury' => $r->nr_ksef_faktury,
                ];
            })->toArray() : []);

            if (empty($rozliczeniaRows)) {
                $rozliczeniaRows = [[]];
            }

            $dodatkoweRows = old('dodatkowe', $dodatkowe ? $dodatkowe->map(function ($d) {
                return [
                    'nr_wiersza' => $d->nr_wiersza,
                    'klucz'      => $d->klucz,
                    'wartosc'    => $d->wartosc,
                ];
            })->toArray() : []);

            if (empty($dodatkoweRows)) {
                $dodatkoweRows = [[]];
            }

            $stopka = $stopka ?? null;
        @endphp

        <form method="POST" action="{{ route('faktury.update.extras', $faktura->id) }}" novalidate>
            @csrf

            {{-- ZALICZKI --}}
            <div class="invoice-section-soft mb-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex flex-column">
                        <span class="fw-semibold">Zaliczki</span>
                        <small class="text-muted">
                            Dla faktury zaliczkowej (<code>RodzajFaktury = ZAL</code>) wymagana jest co najmniej jedna zaliczka:
                            <code>P_6Z</code>, <code>P_15Z</code>, <code>KursWalutyZW</code>.
                        </small>
                    </div>
                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                        &lt;ZaliczkaCzesciowa&gt;
                    </span>
                </div>

                <div class="mt-3">
                    <div id="zaliczki-rows">
                        @foreach ($zaliczkiRows as $i => $row)
                            <div class="border rounded-3 p-3 mb-3 zaliczka-row bg-white">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <strong>Zaliczka #<span class="zaliczka-index">{{ $i + 1 }}</span></strong>
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-zaliczka">
                                        Usuń
                                    </button>
                                </div>

                                <div class="row g-3 mt-1">
                                    <div class="col-md-4">
                                        <label for="zaliczki_{{ $i }}_data" class="form-label">
                                            Data otrzymania (<code>P_6Z</code>)
                                        </label>
                                        <input
                                            type="date"
                                            class="form-control form-control-sm @error("zaliczki.$i.data") is-invalid @enderror"
                                            id="zaliczki_{{ $i }}_data"
                                            name="zaliczki[{{ $i }}][data]"
                                            value="{{ $row['data'] ?? '' }}"
                                        >
                                        @error("zaliczki.$i.data")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label for="zaliczki_{{ $i }}_kwota" class="form-label">
                                            Kwota zaliczki (<code>P_15Z</code>)
                                        </label>
                                        <input
                                            type="number"
                                            step="0.01"
                                            class="form-control form-control-sm @error("zaliczki.$i.kwota") is-invalid @enderror"
                                            id="zaliczki_{{ $i }}_kwota"
                                            name="zaliczki[{{ $i }}][kwota]"
                                            value="{{ $row['kwota'] ?? '' }}"
                                        >
                                        @error("zaliczki.$i.kwota")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label for="zaliczki_{{ $i }}_kurs" class="form-label">
                                            Kurs waluty (<code>KursWalutyZW</code>)
                                        </label>
                                        <input
                                            type="number"
                                            step="0.000001"
                                            class="form-control form-control-sm @error("zaliczki.$i.kurs") is-invalid @enderror"
                                            id="zaliczki_{{ $i }}_kurs"
                                            name="zaliczki[{{ $i }}][kurs]"
                                            value="{{ $row['kurs'] ?? '' }}"
                                        >
                                        @error("zaliczki.$i.kurs")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-add-zaliczka">
                        + Dodaj zaliczkę
                    </button>
                </div>
            </div>

            {{-- FAKTURY ZALICZKOWE DO ROZLICZENIA --}}
            <div class="invoice-section-soft mb-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex flex-column">
                        <span class="fw-semibold">Faktury zaliczkowe do rozliczenia</span>
                        <small class="text-muted">
                            Dla faktury rozliczeniowej (<code>RodzajFaktury = ROZ</code>) wskaż powiązane faktury zaliczkowe:
                            numer faktury i/lub numer KSeF.
                        </small>
                    </div>
                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                        &lt;FakturaZaliczkowa&gt;
                    </span>
                </div>

                <div class="mt-3">
                    <div id="rozliczenia-rows">
                        @foreach ($rozliczeniaRows as $i => $row)
                            <div class="border rounded-3 p-3 mb-3 rozliczenie-row bg-white">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <strong>Faktura zaliczkowa #<span class="rozliczenie-index">{{ $i + 1 }}</span></strong>
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-rozliczenie">
                                        Usuń
                                    </button>
                                </div>

                                <div class="row g-3 mt-1">
                                    <div class="col-md-3">
                                        <div class="form-check mt-4">
                                            <input
                                                type="checkbox"
                                                class="form-check-input"
                                                id="rozliczenia_{{ $i }}_nr_ksef"
                                                name="rozliczenia[{{ $i }}][nr_ksef]"
                                                value="1"
                                                {{ !empty($row['nr_ksef']) ? 'checked' : '' }}
                                            >
                                            <label class="form-check-label" for="rozliczenia_{{ $i }}_nr_ksef">
                                                Faktura w KSeF
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="rozliczenia_{{ $i }}_nr_faktury" class="form-label">
                                            Nr faktury zaliczkowej (poza KSeF)
                                        </label>
                                        <input
                                            type="text"
                                            class="form-control form-control-sm @error("rozliczenia.$i.nr_faktury") is-invalid @enderror"
                                            id="rozliczenia_{{ $i }}_nr_faktury"
                                            name="rozliczenia[{{ $i }}][nr_faktury]"
                                            value="{{ $row['nr_faktury'] ?? '' }}"
                                        >
                                        @error("rozliczenia.$i.nr_faktury")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-5">
                                        <label for="rozliczenia_{{ $i }}_nr_ksef_faktury" class="form-label">
                                            Nr KSeF faktury zaliczkowej
                                        </label>
                                        <input
                                            type="text"
                                            class="form-control form-control-sm @error("rozliczenia.$i.nr_ksef_faktury") is-invalid @enderror"
                                            id="rozliczenia_{{ $i }}_nr_ksef_faktury"
                                            name="rozliczenia[{{ $i }}][nr_ksef_faktury]"
                                            value="{{ $row['nr_ksef_faktury'] ?? '' }}"
                                        >
                                        @error("rozliczenia.$i.nr_ksef_faktury")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-add-rozliczenie">
                        + Dodaj fakturę zaliczkową
                    </button>
                </div>
            </div>

            {{-- DODATKOWY OPIS --}}
            <div class="invoice-section-soft mb-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex flex-column">
                        <span class="fw-semibold">Dodatkowe opisy</span>
                        <small class="text-muted">
                            Parametryzowane klucz–wartość, powiązane opcjonalnie z numerem wiersza faktury.
                        </small>
                    </div>
                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                        &lt;DodatkowyOpis&gt;
                    </span>
                </div>

                <div class="mt-3">
                    <div id="dodatkowe-rows">
                        @foreach ($dodatkoweRows as $i => $row)
                            <div class="border rounded-3 p-3 mb-3 dodatkowy-row bg-white">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <strong>Opis #<span class="dodatkowy-index">{{ $i + 1 }}</span></strong>
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-dodatkowy">
                                        Usuń
                                    </button>
                                </div>

                                <div class="row g-3 mt-1">
                                    <div class="col-md-2">
                                        <label for="dodatkowe_{{ $i }}_nr_wiersza" class="form-label">Nr wiersza</label>
                                        <input
                                            type="number"
                                            min="1"
                                            class="form-control form-control-sm @error("dodatkowe.$i.nr_wiersza") is-invalid @enderror"
                                            id="dodatkowe_{{ $i }}_nr_wiersza"
                                            name="dodatkowe[{{ $i }}][nr_wiersza]"
                                            value="{{ $row['nr_wiersza'] ?? '' }}"
                                        >
                                        @error("dodatkowe.$i.nr_wiersza")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label for="dodatkowe_{{ $i }}_klucz" class="form-label">Klucz</label>
                                        <input
                                            type="text"
                                            class="form-control form-control-sm @error("dodatkowe.$i.klucz") is-invalid @enderror"
                                            id="dodatkowe_{{ $i }}_klucz"
                                            name="dodatkowe[{{ $i }}][klucz]"
                                            value="{{ $row['klucz'] ?? '' }}"
                                        >
                                        @error("dodatkowe.$i.klucz")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label for="dodatkowe_{{ $i }}_wartosc" class="form-label">Wartość</label>
                                        <textarea
                                            class="form-control form-control-sm @error("dodatkowe.$i.wartosc") is-invalid @enderror"
                                            id="dodatkowe_{{ $i }}_wartosc"
                                            name="dodatkowe[{{ $i }}][wartosc]"
                                            rows="2"
                                        >{{ $row['wartosc'] ?? '' }}</textarea>
                                        @error("dodatkowe.$i.wartosc")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-add-dodatkowy">
                        + Dodaj opis
                    </button>
                </div>
            </div>

            {{-- STOPKA --}}
            <div class="invoice-section-soft mb-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex flex-column">
                        <span class="fw-semibold">Stopka faktury</span>
                        <small class="text-muted">
                            Informacje dodatkowe i rejestrowe do wyświetlenia na fakturze / w FA(3).
                        </small>
                    </div>
                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                        &lt;Stopka&gt;
                    </span>
                </div>

                <div class="mt-3">
                    <div class="mb-3">
                        <label for="stopka_faktury" class="form-label">
                            Stopka faktury (<code>StopkaFaktury</code>)
                        </label>
                        <textarea
                            class="form-control @error('stopka_faktury') is-invalid @enderror"
                            id="stopka_faktury"
                            name="stopka_faktury"
                            rows="3"
                        >{{ old('stopka_faktury', $stopka->stopka_faktury ?? '') }}</textarea>
                        @error('stopka_faktury')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <h6 class="mt-3">Rejestry (<code>Rejestry</code>)</h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="pelna_nazwa_rejestru" class="form-label">Pełna nazwa rejestru</label>
                            <input
                                type="text"
                                class="form-control @error('pelna_nazwa_rejestru') is-invalid @enderror"
                                id="pelna_nazwa_rejestru"
                                name="pelna_nazwa_rejestru"
                                value="{{ old('pelna_nazwa_rejestru', $stopka->pelna_nazwa_rejestru ?? '') }}"
                            >
                            @error('pelna_nazwa_rejestru')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-2">
                            <label for="krs" class="form-label">KRS</label>
                            <input
                                type="text"
                                class="form-control @error('krs') is-invalid @enderror"
                                id="krs"
                                name="krs"
                                value="{{ old('krs', $stopka->krs ?? '') }}"
                            >
                            @error('krs')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-2">
                            <label for="regon" class="form-label">REGON</label>
                            <input
                                type="text"
                                class="form-control @error('regon') is-invalid @enderror"
                                id="regon"
                                name="regon"
                                value="{{ old('regon', $stopka->regon ?? '') }}"
                            >
                            @error('regon')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-2">
                            <label for="bdo" class="form-label">BDO</label>
                            <input
                                type="text"
                                class="form-control @error('bdo') is-invalid @enderror"
                                id="bdo"
                                name="bdo"
                                value="{{ old('bdo', $stopka->bdo ?? '') }}"
                            >
                            @error('bdo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            {{-- Przyciski nawigacji --}}
            <div class="d-flex justify-content-between mb-1 mt-4">
                <a href="{{ route('faktury.edit.payments', $faktura->id) }}" class="btn btn-outline-secondary">
                    &laquo; Wstecz – płatności
                </a>

                <button type="submit" class="btn btn-primary">
                    Zapisz i przejdź do podsumowania &raquo;
                </button>
            </div>
        </form>
    </div>
</div>

{{-- JS do dodawania / usuwania wierszy + lekkie reindeksowanie --}}
<script>
    (function () {
        function reindexRows(container, rowSelector, indexSelector, namePrefix) {
            const rows = container.querySelectorAll(rowSelector);
            rows.forEach((row, i) => {
                const labelSpan = row.querySelector(indexSelector);
                if (labelSpan) labelSpan.textContent = i + 1;

                row.querySelectorAll('input, textarea, select').forEach(input => {
                    const name = input.getAttribute('name');
                    if (!name) return;
                    const newName = name.replace(new RegExp(namePrefix + '\\[\\d+\\]'), namePrefix + '[' + i + ']');
                    input.setAttribute('name', newName);
                    const id = input.getAttribute('id');
                    if (id) {
                        const newId = id.replace(new RegExp(namePrefix + '_\\d+_'), namePrefix + '_' + i + '_');
                        input.setAttribute('id', newId);
                    }
                });
            });
        }

        // ZALICZKI
        const zaliczkiContainer = document.getElementById('zaliczki-rows');
        const btnAddZaliczka = document.getElementById('btn-add-zaliczka');

        if (btnAddZaliczka && zaliczkiContainer) {
            btnAddZaliczka.addEventListener('click', function () {
                const index = zaliczkiContainer.querySelectorAll('.zaliczka-row').length;
                const tpl = `
                <div class="border rounded-3 p-3 mb-3 zaliczka-row bg-white">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <strong>Zaliczka #<span class="zaliczka-index">${index + 1}</span></strong>
                        <button type="button" class="btn btn-sm btn-outline-danger btn-remove-zaliczka">
                            Usuń
                        </button>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-4">
                            <label class="form-label">Data otrzymania (<code>P_6Z</code>)</label>
                            <input type="date"
                                   class="form-control form-control-sm"
                                   name="zaliczki[${index}][data]">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Kwota zaliczki (<code>P_15Z</code>)</label>
                            <input type="number"
                                   step="0.01"
                                   class="form-control form-control-sm"
                                   name="zaliczki[${index}][kwota]">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Kurs waluty (<code>KursWalutyZW</code>)</label>
                            <input type="number"
                                   step="0.000001"
                                   class="form-control form-control-sm"
                                   name="zaliczki[${index}][kurs]">
                        </div>
                    </div>
                </div>`;
                zaliczkiContainer.insertAdjacentHTML('beforeend', tpl);
            });

            zaliczkiContainer.addEventListener('click', function (e) {
                if (e.target.classList.contains('btn-remove-zaliczka')) {
                    const rows = zaliczkiContainer.querySelectorAll('.zaliczka-row');
                    if (rows.length > 1) {
                        e.target.closest('.zaliczka-row').remove();
                        reindexRows(zaliczkiContainer, '.zaliczka-row', '.zaliczka-index', 'zaliczki');
                    }
                }
            });
        }

        // ROZLICZENIA
        const rozliczeniaContainer = document.getElementById('rozliczenia-rows');
        const btnAddRozliczenie = document.getElementById('btn-add-rozliczenie');

        if (btnAddRozliczenie && rozliczeniaContainer) {
            btnAddRozliczenie.addEventListener('click', function () {
                const index = rozliczeniaContainer.querySelectorAll('.rozliczenie-row').length;
                const tpl = `
                <div class="border rounded-3 p-3 mb-3 rozliczenie-row bg-white">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <strong>Faktura zaliczkowa #<span class="rozliczenie-index">${index + 1}</span></strong>
                        <button type="button" class="btn btn-sm btn-outline-danger btn-remove-rozliczenie">
                            Usuń
                        </button>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-3">
                            <div class="form-check mt-4">
                                <input type="checkbox"
                                       class="form-check-input"
                                       name="rozliczenia[${index}][nr_ksef]"
                                       value="1">
                                <label class="form-check-label">
                                    Faktura w KSeF
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Nr faktury zaliczkowej (poza KSeF)</label>
                            <input type="text"
                                   class="form-control form-control-sm"
                                   name="rozliczenia[${index}][nr_faktury]">
                        </div>
                        <div class="col-md-5">
                            <label class="form-label">Nr KSeF faktury zaliczkowej</label>
                            <input type="text"
                                   class="form-control form-control-sm"
                                   name="rozliczenia[${index}][nr_ksef_faktury]">
                        </div>
                    </div>
                </div>`;
                rozliczeniaContainer.insertAdjacentHTML('beforeend', tpl);
            });

            rozliczeniaContainer.addEventListener('click', function (e) {
                if (e.target.classList.contains('btn-remove-rozliczenie')) {
                    const rows = rozliczeniaContainer.querySelectorAll('.rozliczenie-row');
                    if (rows.length > 1) {
                        e.target.closest('.rozliczenie-row').remove();
                        reindexRows(rozliczeniaContainer, '.rozliczenie-row', '.rozliczenie-index', 'rozliczenia');
                    }
                }
            });
        }

        // DODATKOWE OPISY
        const dodatkoweContainer = document.getElementById('dodatkowe-rows');
        const btnAddDodatkowy = document.getElementById('btn-add-dodatkowy');

        if (btnAddDodatkowy && dodatkoweContainer) {
            btnAddDodatkowy.addEventListener('click', function () {
                const index = dodatkoweContainer.querySelectorAll('.dodatkowy-row').length;
                const tpl = `
                <div class="border rounded-3 p-3 mb-3 dodatkowy-row bg-white">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <strong>Opis #<span class="dodatkowy-index">${index + 1}</span></strong>
                        <button type="button" class="btn btn-sm btn-outline-danger btn-remove-dodatkowy">
                            Usuń
                        </button>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-2">
                            <label class="form-label">Nr wiersza</label>
                            <input type="number"
                                   min="1"
                                   class="form-control form-control-sm"
                                   name="dodatkowe[${index}][nr_wiersza]">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Klucz</label>
                            <input type="text"
                                   class="form-control form-control-sm"
                                   name="dodatkowe[${index}][klucz]">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Wartość</label>
                            <textarea class="form-control form-control-sm"
                                      rows="2"
                                      name="dodatkowe[${index}][wartosc]"></textarea>
                        </div>
                    </div>
                </div>`;
                dodatkoweContainer.insertAdjacentHTML('beforeend', tpl);
            });

            dodatkoweContainer.addEventListener('click', function (e) {
                if (e.target.classList.contains('btn-remove-dodatkowy')) {
                    const rows = dodatkoweContainer.querySelectorAll('.dodatkowy-row');
                    if (rows.length > 1) {
                        e.target.closest('.dodatkowy-row').remove();
                        reindexRows(dodatkoweContainer, '.dodatkowy-row', '.dodatkowy-index', 'dodatkowe');
                    }
                }
            });
        }
    })();
</script>
@endsection