@extends('layouts.app')

@section('content')
@php
    /** @var \App\Models\Proforma\Proforma $proforma */
    $isEdit = isset($mode) && $mode === 'edit';
@endphp
<div class="container py-4"
     x-data="linesForm(@js(old('pozycje', $prefill ?: [['p_12_stawka'=>'23']])), @js($stawki))">

    {{-- Nagłówek --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <h2 class="h5 fw-semibold mb-1">
                {{ $isEdit ? 'Edycja pro formy — Krok 3/5: Pozycje' : 'Nowa pro forma — Krok 3/5: Pozycje' }}
            </h2>
            <p class="text-secondary small mb-0">
                Pro forma #{{ $proforma->id_faktura }} · {{ $proforma->p_2_numer }} · {{ $proforma->p_1_data_wystawienia }}
            </p>
        </div>
        <a href="{{ $isEdit ? route('proforma.edit.parties', $proforma->id_faktura)
                            : route('proforma.create.parties', $proforma->id_faktura) }}"
           class="btn btn-outline-secondary">
            Wróć do podmiotów
        </a>
    </div>

    {{-- Pasek postępu --}}
    <div class="mb-4">
        <div class="progress" style="height:8px;"><div class="progress-bar bg-primary" style="width:60%"></div></div>
        <div class="d-flex justify-content-between small text-muted mt-2">
            <span>1. Nagłówek</span>
            <span>2. Podmioty</span>
            <span class="fw-semibold text-primary">3. Pozycje</span>
            <span>4. Płatności</span>
            <span>5. Podsumowanie</span>
        </div>
    </div>

    {{-- Komunikaty --}}
    @if (session('success')) <div class="alert alert-success">{{ session('success') }}</div> @endif
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0 ps-3">@foreach ($errors->all() as $e) <li>{{ $e }}</li> @endforeach</ul>
        </div>
    @endif

    <form method="POST"
          action="{{ $isEdit ? route('proforma.update.lines', $proforma->id_faktura)
                             : route('proforma.store.lines',  $proforma->id_faktura) }}">
        @csrf
        @if($isEdit) @method('PATCH') @endif

        <div class="card glass-card shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="card-title mb-0">Pozycje pro formy</h5>
                    <small class="text-muted">
                        Podaj <strong>jedną</strong> z cen jednostkowych: NETTO <i>albo</i> BRUTTO. Reszta przeliczy się automatycznie.
                    </small>
                </div>
                <button type="button" class="btn btn-success btn-sm" @click="addRow()">+ Dodaj wiersz</button>
            </div>

            {{-- Pasek „nagłówków” jak w tabeli (sam tekst, dla czytelności) --}}
            <div class="px-3 py-2 bg-light small text-secondary border-bottom">
                <div class="row g-2 fw-semibold">
                    <div class="col-1">#</div>
                    <div class="col-3">Nazwa (P_7)</div>
                    <div class="col-1">j.m. (P_8A)</div>
                    <div class="col-1">Ilość (P_8B)</div>
                    <div class="col-2">Cena NETTO (P_9A)</div>
                    <div class="col-2">Cena BRUTTO (P_9B)</div>
                    <div class="col-2">Stawka (P_12)</div>
                </div>
            </div>

            {{-- Wiersze (bez <table>, brak konfliktu z Alpine) --}}
            <div class="card-body p-0">
                <template x-for="(row, idx) in rows" :key="idx">
                    <div class="border-bottom px-3 py-3">
                        {{-- Linia główna --}}
                        <div class="row g-2 align-items-start">
                            <div class="col-1 pt-2">
                                <span class="text-muted" x-text="idx+1"></span>
                            </div>

                            {{-- P_7 nazwa --}}
                            <div class="col-3">
                                <input type="text" class="form-control form-control-sm"
                                       :name="`pozycje[${idx}][p_7_nazwa]`"
                                       x-model="row.p_7_nazwa" required>
                                <div class="form-text">
                                    Pełna nazwa towaru/usługi. <b>Wymagane.</b> KSeF: <code>/Fa/FaWiersz/P_7</code>
                                </div>
                            </div>

                            {{-- P_8A j.m. --}}
                            <div class="col-1">
                                <input type="text" class="form-control form-control-sm"
                                       :name="`pozycje[${idx}][p_8a_jednostka]`"
                                       x-model="row.p_8a_jednostka" placeholder="np. szt">
                                <div class="form-text">Opcj. KSeF: <code>/P_8A</code></div>
                            </div>

                            {{-- P_8B ilość --}}
                            <div class="col-1">
                                <input type="number" min="0" step="0.00000001"
                                       class="form-control form-control-sm"
                                       :name="`pozycje[${idx}][p_8b_ilosc]`"
                                       x-model.number="row.p_8b_ilosc" @input="recalc(row)" required>
                                <div class="form-text">Do 8 miejsc. <code>/P_8B</code></div>
                            </div>

                            {{-- P_9A cena netto --}}
                            <div class="col-2">
                                <input type="number" min="0" step="0.00000001"
                                       class="form-control form-control-sm"
                                       :name="`pozycje[${idx}][p_9a_cena_netto]`"
                                       x-model.number="row.p_9a_cena_netto"
                                       @input="row.p_9b_cena_brutto=''; recalc(row)"
                                       placeholder="np. 100.00">
                                <div class="form-text">Wypełnij to <i>albo</i> BRUTTO. <code>/P_9A</code></div>
                            </div>

                            {{-- P_9B cena brutto --}}
                            <div class="col-2">
                                <input type="number" min="0" step="0.00000001"
                                       class="form-control form-control-sm"
                                       :name="`pozycje[${idx}][p_9b_cena_brutto]`"
                                       x-model.number="row.p_9b_cena_brutto"
                                       @input="row.p_9a_cena_netto=''; recalc(row)"
                                       placeholder="np. 123.00">
                                <div class="form-text">Wypełnij to <i>albo</i> NETTO. <code>/P_9B</code></div>
                            </div>

                            {{-- P_12 stawka --}}
                            <div class="col-2">
                                <select class="form-select form-select-sm"
                                        :name="`pozycje[${idx}][p_12_stawka]`"
                                        x-model="row.p_12_stawka" @change="recalc(row)" required>
                                    <template x-for="s in stawki" :key="s">
                                        <option :value="s" x-text="s"></option>
                                    </template>
                                </select>
                                <div class="form-text">
                                    Np. 23/8/5 lub 0 KR, 0 WDT, 0 EX, zw, oo, np I/II. <code>/P_12</code>
                                </div>
                            </div>

                            {{-- Usuń --}}
                            <div class="col-12 mt-2 text-end">
                                <button type="button" class="btn btn-outline-danger btn-sm" @click="removeRow(idx)">Usuń</button>
                            </div>
                        </div>

                        {{-- Linia dodatkowa (jak drugi wiersz) --}}
                        <div class="bg-light rounded p-2 mt-3">
                            <div class="row g-2">
                                {{-- P_10 rabat --}}
                                <div class="col-12 col-md-3">
                                    <label class="form-label small mb-1">Rabat (P_10) — kwota</label>
                                    <input type="number" step="0.00000001" min="0"
                                           class="form-control form-control-sm"
                                           :name="`pozycje[${idx}][p_10_rabat]`"
                                           x-model.number="row.p_10_rabat" @input="recalc(row)"
                                           placeholder="opcjonalnie">
                                    <div class="form-text">Kwota, nie %. <code>/P_10</code></div>
                                </div>

                                {{-- P_11 NETTO --}}
                                <div class="col-12 col-md-3">
                                    <label class="form-label small mb-1">Wartość NETTO (P_11)</label>
                                    <input type="number" step="0.01" min="0"
                                           class="form-control form-control-sm"
                                           :name="`pozycje[${idx}][p_11_wart_netto]`"
                                           x-model.number="row.p_11_wart_netto" required>
                                    <div class="form-text"><code>/P_11</code></div>
                                </div>

                                {{-- P_11Vat --}}
                                <div class="col-12 col-md-3">
                                    <label class="form-label small mb-1">VAT (P_11Vat)</label>
                                    <input type="number" step="0.01" min="0"
                                           class="form-control form-control-sm"
                                           :name="`pozycje[${idx}][p_11_vat]`"
                                           x-model.number="row.p_11_vat" required>
                                    <div class="form-text">Dla 0/ZW/OO/NP → 0.00. <code>/P_11Vat</code></div>
                                </div>

                                {{-- P_11A BRUTTO --}}
                                <div class="col-12 col-md-3">
                                    <label class="form-label small mb-1">Wartość BRUTTO (P_11A)</label>
                                    <input type="number" step="0.01" min="0"
                                           class="form-control form-control-sm"
                                           :name="`pozycje[${idx}][p_11a_wart_brutto]`"
                                           x-model.number="row.p_11a_wart_brutto" required>
                                    <div class="form-text">NETTO + VAT. <code>/P_11A</code></div>
                                </div>

                                {{-- GTU + PKWiU --}}
                                <div class="col-12 col-md-3">
                                    <label class="form-label small mb-1">GTU (opc.)</label>
                                    <input class="form-control form-control-sm"
                                           :name="`pozycje[${idx}][gtu]`"
                                           x-model="row.gtu" placeholder="np. GTU_12">
                                    <div class="form-text">JPK_V7 (jeśli dot.).</div>
                                </div>
                                <div class="col-12 col-md-3">
                                    <label class="form-label small mb-1">PKWiU (opc.)</label>
                                    <input class="form-control form-control-sm"
                                           :name="`pozycje[${idx}][pkwiu]`"
                                           x-model="row.pkwiu" placeholder="np. 62.01">
                                    <div class="form-text">Pomocniczo.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <div class="card-body pt-3 text-center">
                <button type="button" class="btn btn-success btn-sm" @click="addRow()">+ Dodaj kolejny wiersz</button>
            </div>
        </div>

        <div class="d-flex justify-content-between">
            <a href="{{ $isEdit ? route('proforma.edit.parties', $proforma->id_faktura)
                                : route('proforma.create.parties', $proforma->id_faktura) }}"
               class="btn btn-outline-secondary">Wstecz</a>

            <button type="submit" class="btn btn-primary">
                Zapisz pozycje i przejdź do płatności
            </button>
        </div>
    </form>
</div>

<script>
function linesForm(initial, stawki){
    const empty = {
        p_7_nazwa:'', p_8a_jednostka:'', p_8b_ilosc:'',
        p_9a_cena_netto:'', p_9b_cena_brutto:'',
        p_10_rabat:'', p_11_wart_netto:'', p_11_vat:'', p_11a_wart_brutto:'',
        p_12_stawka:'23', gtu:'', pkwiu:''
    };

    const rows = (Array.isArray(initial) && initial.length ? initial : [ {...empty} ])
                  .map(r => Object.assign({}, empty, r||{}));

    const num = (v)=> {
        const n = parseFloat(String(v ?? '').toString().replace(',', '.'));
        return Number.isFinite(n) ? n : 0;
    };
    const round2 = (x)=> Number.isFinite(x) ? Math.round(x*100)/100 : 0;
    const vatPercent = (stawka) => {
        const s = String(stawka || '').trim().toLowerCase();
        const m = s.match(/(\d+([.,]\d+)?)/);
        return m ? parseFloat(m[1].replace(',', '.')) : 0;
    };

    return {
        rows, stawki,

        addRow(){ this.rows.push({...empty}); },
        removeRow(i){
            this.rows.splice(i,1);
            if(this.rows.length===0) this.rows.push({...empty});
        },

        recalc(row){
            const qty   = num(row.p_8b_ilosc);
            const rabat = num(row.p_10_rabat);
            const rate  = vatPercent(row.p_12_stawka);

            if (num(row.p_9a_cena_netto) > 0) {
                const priceN = num(row.p_9a_cena_netto);
                let net = qty * priceN - rabat; if (net < 0) net = 0;
                const vat = round2(net * (rate/100));
                const gross = round2(net + vat);
                row.p_11_wart_netto   = round2(net);
                row.p_11_vat          = vat;
                row.p_11a_wart_brutto = gross;
            } else if (num(row.p_9b_cena_brutto) > 0) {
                const priceB = num(row.p_9b_cena_brutto);
                let gross = qty * priceB - rabat; if (gross < 0) gross = 0;
                let net, vat;
                if (rate > 0) {
                    net = round2(gross / (1 + rate/100));
                    vat = round2(gross - net);
                } else {
                    net = round2(gross);
                    vat = 0;
                }
                row.p_11_wart_netto   = net;
                row.p_11_vat          = vat;
                row.p_11a_wart_brutto = round2(gross);
            } else {
                row.p_11_wart_netto   = '';
                row.p_11_vat          = '';
                row.p_11a_wart_brutto = '';
            }
        },
    };
}
</script>
@endsection

@push('styles')
<style>
.glass-card{
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(20,20,40,.1);
  border-radius: 1rem;
}
.glass-card:hover{ box-shadow: 0 10px 28px rgba(30,35,90,.12); }
</style>
@endpush