@extends('layouts.app')

@section('content')
<div class="container py-4" x-cloak
     x-data="(() => {
        // wejście z Blade
        const initial      = @js(old('pozycje', $prefill ?: [(object)[]]));
        const stawki       = @js($stawki);
        const initialTryb  = @js(old('tryb', 'ZASTEPCZA'));

        const emptyZ = { // ZASTĘPCZA
          nazwa:'', jm:'', ilosc:'', cena_netto_po:'', cena_brutto_po:'',
          netto_po:'', vat_po:'', brutto_po:'', stawka:'23', gtu:'', pkwiu:'', usun:false,
          ref_id: ''
        };
        const emptyR = { // RÓŻNICOWA
          nazwa:'', netto_delta:'', vat_delta:'', brutto_delta:'', gtu:'', pkwiu:''
        };

        const looksZ = (r)=> r && (r.cena_netto_po!==undefined || r.cena_brutto_po!==undefined || r.netto_po!==undefined || r.vat_po!==undefined || r.brutto_po!==undefined);
        const looksR = (r)=> r && (r.netto_delta!==undefined || r.vat_delta!==undefined || r.brutto_delta!==undefined);

        let tryb = initialTryb || 'ZASTEPCZA';
        if (Array.isArray(initial) && initial.length) {
          if (looksR(initial[0])) tryb = 'ROZNICOWA';
          else if (looksZ(initial[0])) tryb = 'ZASTEPCZA';
        }

        let rows = (Array.isArray(initial) && initial.length ? initial : [tryb==='ZASTEPCZA'?{...emptyZ}:{...emptyR}])
          .map(r => tryb==='ZASTEPCZA' ? Object.assign({}, emptyZ, r||{}) : Object.assign({}, emptyR, 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;
        };

        function toZ(){ return rows.map(r => Object.assign({}, emptyZ, { nazwa:r.nazwa || '', gtu:r.gtu||'', pkwiu:r.pkwiu||'' })); }
        function toR(){ return rows.map(r => Object.assign({}, emptyR, { nazwa:r.nazwa || '', gtu:r.gtu||'', pkwiu:r.pkwiu||'' })); }

        return {
          rows, stawki, tryb,

          addRow(){
            this.rows.push(this.tryb==='ZASTEPCZA' ? {...emptyZ} : {...emptyR});
          },
          removeRow(i){
            this.rows.splice(i,1);
            if(this.rows.length===0) this.rows.push(this.tryb==='ZASTEPCZA' ? {...emptyZ} : {...emptyR});
          },

          recalcZ(row){
            const qty   = num(row.ilosc);
            const rate  = vatPercent(row.stawka);
            if (num(row.cena_netto_po) > 0) {
              const net = qty * num(row.cena_netto_po);
              const vat = round2(net * (rate/100));
              const gross = round2(net + vat);
              row.netto_po   = round2(net);
              row.vat_po     = vat;
              row.brutto_po  = gross;
            } else if (num(row.cena_brutto_po) > 0) {
              const gross = qty * num(row.cena_brutto_po);
              let net, vat;
              if (rate > 0) {
                net = round2(gross / (1 + rate/100));
                vat = round2(gross - net);
              } else {
                net = round2(gross);
                vat = 0;
              }
              row.netto_po   = net;
              row.vat_po     = vat;
              row.brutto_po  = round2(gross);
            } else {
              row.netto_po   = '';
              row.vat_po     = '';
              row.brutto_po  = '';
            }
          },

          // przełącznik trybu — tylko UI
          init(){
            this.$watch('tryb', (nv, ov) => {
              if(nv===ov) return;
              this.rows = (nv==='ZASTEPCZA') ? toZ() : toR();
            });
          }
        };
     })()">


    <style>[x-cloak]{display:none!important}</style>

    {{-- Nagłówek --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <h2 class="h5 fw-semibold mb-1">Korekta — Krok 3/5: Pozycje</h2>
            <p class="text-secondary small mb-0">
                Korekta ID: {{ $korektaId }}
            </p>
        </div>
        <a href="{{ route('korekty.create.parties', $korektaId) }}" 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="{{ route('korekty.store.lines', $korektaId) }}">
        @csrf

        <div class="card glass-card shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div>
                    <h5 class="card-title mb-0">Pozycje korekty</h5>
                    <small class="text-muted">
                        Wybierz tryb wprowadzania danych. <b>ZASTĘPCZA</b>: wpisujesz stan „po”. <b>RÓŻNICOWA</b>: wpisujesz sumy różnic (Δ).
                    </small>
                </div>

                {{-- Przełącznik trybu UI (backend i tak czyta rodzaj z nagłówka) --}}
                <div class="btn-group" role="group" aria-label="Tryb korekty">
                    <input type="radio" class="btn-check" name="tryb" id="trybZ" value="ZASTEPCZA" x-model="tryb">
                    <label class="btn btn-outline-primary btn-sm" for="trybZ">ZASTĘPCZA</label>

                    <input type="radio" class="btn-check" name="tryb" id="trybR" value="ROZNICOWA" x-model="tryb">
                    <label class="btn btn-outline-primary btn-sm" for="trybR">RÓŻNICOWA</label>
                </div>

                <button type="button" class="btn btn-success btn-sm" @click="addRow()">+ Dodaj wiersz</button>
            </div>

            {{-- Pasek nagłówków --}}
            <template x-if="tryb==='ZASTEPCZA'">
                <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</div>
                        <div class="col-1">j.m.</div>
                        <div class="col-1">Ilość</div>
                        <div class="col-2">Cena NETTO (po)</div>
                        <div class="col-2">Cena BRUTTO (po)</div>
                        <div class="col-2">Stawka VAT</div>
                    </div>
                </div>
            </template>
            <template x-if="tryb==='ROZNICOWA'">
                <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-4">Nazwa</div>
                        <div class="col-2">Δ NETTO</div>
                        <div class="col-2">Δ VAT</div>
                        <div class="col-2">Δ BRUTTO</div>
                    </div>
                </div>
            </template>

            {{-- Wiersze --}}
            <div class="card-body p-0">
                <template x-for="(row, idx) in rows" :key="idx">
                    <div class="border-bottom px-3 py-3">

                        {{-- ZASTĘPCZA: pełne wiersze po korekcie --}}
                        <template x-if="tryb==='ZASTEPCZA'">
                            <div>
                                <div class="row g-2 align-items-start">
                                    <div class="col-1 pt-2"><span class="text-muted" x-text="idx+1"></span></div>

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

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

                                    <div class="col-1">
                                        <input type="number" min="0" step="0.00000001"
                                               class="form-control form-control-sm"
                                               :name="`pozycje[${idx}][ilosc]`"
                                               x-model.number="row.ilosc" @input="recalcZ(row)" required>
                                    </div>

                                    <div class="col-2">
                                        <input type="number" min="0" step="0.00000001"
                                               class="form-control form-control-sm"
                                               :name="`pozycje[${idx}][cena_netto_po]`"
                                               x-model.number="row.cena_netto_po"
                                               @input="row.cena_brutto_po=''; recalcZ(row)"
                                               placeholder="np. 100.00">
                                        <div class="form-text">Podaj to <i>albo</i> cenę brutto.</div>
                                    </div>

                                    <div class="col-2">
                                        <input type="number" min="0" step="0.00000001"
                                               class="form-control form-control-sm"
                                               :name="`pozycje[${idx}][cena_brutto_po]`"
                                               x-model.number="row.cena_brutto_po"
                                               @input="row.cena_netto_po=''; recalcZ(row)"
                                               placeholder="np. 123.00">
                                        <div class="form-text">Podaj to <i>albo</i> cenę netto.</div>
                                    </div>

                                    <div class="col-2">
                                        <select class="form-select form-select-sm"
                                                :name="`pozycje[${idx}][stawka]`"
                                                x-model="row.stawka" @change="recalcZ(row)" required>
                                            <template x-for="s in stawki" :key="s">
                                                <option :value="s" x-text="s"></option>
                                            </template>
                                        </select>
                                    </div>

                                    {{-- ref_id (opcjonalny link do pozycji FA) --}}
                                    <input type="hidden" :name="`pozycje[${idx}][ref_id]`" x-model="row.ref_id">

                                    {{-- usuń --}}
                                    <div class="col-12 mt-2 text-end">
                                        <label class="me-3 small">
                                            <input type="checkbox" :name="`pozycje[${idx}][usun]`" x-model="row.usun"> usuń pozycję
                                        </label>
                                        <button type="button" class="btn btn-outline-danger btn-sm" @click="removeRow(idx)">Usuń wiersz</button>
                                    </div>
                                </div>

                                <div class="bg-light rounded p-2 mt-3">
                                    <div class="row g-2">
                                        <div class="col-12 col-md-3">
                                            <label class="form-label small mb-1">Wartość NETTO (po)</label>
                                            <input type="number" step="0.01" min="0"
                                                   class="form-control form-control-sm"
                                                   :name="`pozycje[${idx}][netto_po]`"
                                                   x-model.number="row.netto_po" required>
                                        </div>
                                        <div class="col-12 col-md-3">
                                            <label class="form-label small mb-1">VAT (po)</label>
                                            <input type="number" step="0.01" min="0"
                                                   class="form-control form-control-sm"
                                                   :name="`pozycje[${idx}][vat_po]`"
                                                   x-model.number="row.vat_po" required>
                                        </div>
                                        <div class="col-12 col-md-3">
                                            <label class="form-label small mb-1">Wartość BRUTTO (po)</label>
                                            <input type="number" step="0.01" min="0"
                                                   class="form-control form-control-sm"
                                                   :name="`pozycje[${idx}][brutto_po]`"
                                                   x-model.number="row.brutto_po" required>
                                        </div>

                                        <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>
                                        <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>
                                    </div>
                                </div>
                            </div>
                        </template>

                        {{-- RÓŻNICOWA: tylko delty --}}
                        <template x-if="tryb==='ROZNICOWA'">
                            <div>
                                <div class="row g-2 align-items-start">
                                    <div class="col-1 pt-2"><span class="text-muted" x-text="idx+1"></span></div>

                                    <div class="col-4">
                                        <input type="text" class="form-control form-control-sm"
                                               :name="`pozycje[${idx}][nazwa]`" x-model="row.nazwa" required>
                                        <div class="form-text">Pełna nazwa towaru/usługi.</div>
                                    </div>

                                    <div class="col-2">
                                        <input type="number" step="0.01"
                                               class="form-control form-control-sm"
                                               :name="`pozycje[${idx}][netto_delta]`"
                                               x-model.number="row.netto_delta">
                                        <div class="form-text">Δ NETTO (może być ujemna).</div>
                                    </div>

                                    <div class="col-2">
                                        <input type="number" step="0.01"
                                               class="form-control form-control-sm"
                                               :name="`pozycje[${idx}][vat_delta]`"
                                               x-model.number="row.vat_delta">
                                        <div class="form-text">Δ VAT.</div>
                                    </div>

                                    <div class="col-2">
                                        <input type="number" step="0.01"
                                               class="form-control form-control-sm"
                                               :name="`pozycje[${idx}][brutto_delta]`"
                                               x-model.number="row.brutto_delta">
                                        <div class="form-text">Δ BRUTTO.</div>
                                    </div>

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

                                <div class="bg-light rounded p-2 mt-3">
                                    <div class="row g-2">
                                        <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>
                                        <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>
                                    </div>
                                </div>
                            </div>
                        </template>

                    </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="{{ route('korekty.create.parties', $korektaId) }}" 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>

{{-- Funkcja MUSI być globalna (window.*) i dostępna zanim Alpine zainicjalizuje x-data --}}

@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