@extends('layouts.app')

@section('content')
@php
    $isEdit   = isset($mode) && $mode === 'edit';
    $editable = ($faktura->can_be_editable ?? true) && !($faktura->usunieto ?? false);

    $action = $isEdit
        ? route('faktury.update.extras', $faktura->id_faktura)
        : route('faktury.store.extras',  $faktura->id_faktura);

    $backRoute = $isEdit
        ? route('faktury.edit.payments',  $faktura->id_faktura)
        : route('faktury.create.payments', $faktura->id_faktura);

    $submitLabel = $isEdit ? 'Zapisz zmiany' : 'Zakończ — zapisz i przejdź do podsumowania';
@endphp

<div class="container py-4">

    {{-- 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 faktury — Krok 5/5: Załączniki, kurs waluty, stopka'
                           : 'Nowa faktura — Krok 5/5: Załączniki, kurs waluty, stopka' }}
            </h2>
            <p class="text-secondary small mb-0">
                Faktura #{{ $faktura->id_faktura }} · {{ $faktura->p_2_numer }} · {{ $faktura->p_1_data_wystawienia }}
            </p>
        </div>
        <a href="{{ $backRoute }}" class="btn btn-outline-secondary">
            Wstecz
        </a>
    </div>

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

    {{-- Komunikaty --}}
    @if (!$editable)
        <div class="alert alert-info">
            Ta faktura jest {{ $faktura->usunieto ? 'oznaczona jako usunięta' : 'zatwierdzona' }} — edycja zablokowana.
            Pola poniżej są tylko do podglądu.
        </div>
    @endif

    @if (session('success')) <div class="alert alert-success">{{ session('success') }}</div> @endif
    @if (session('info'))    <div class="alert alert-info">{{ session('info') }}</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="{{ $action }}" enctype="multipart/form-data">
        @csrf
        @if($isEdit) @method('PATCH') @endif

        {{-- === ZAŁĄCZNIKI === --}}
        <div class="card glass-card shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="mb-0">Załączniki</h5>
                <small class="text-muted">Dozwolone: PDF, obrazy (PNG/JPG/GIF), TXT/XML/CSV/XLS/XLSX. Maks. 20&nbsp;MB na plik.</small>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input
                        type="file"
                        name="zalaczniki[]"
                        multiple
                        class="form-control"
                        @disabled(!$editable)
                        accept="application/pdf,image/png,image/jpeg,image/gif,text/plain,application/xml,text/xml,text/csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                    @error('zalaczniki')
                        <div class="text-danger small mt-2">{{ $message }}</div>
                    @enderror
                    {{-- błędy per-plik: zalaczniki.0, zalaczniki.1, ... --}}
                    @foreach ($errors->get('zalaczniki.*') as $idx => $msgs)
                        @foreach ($msgs as $msg)
                            <div class="text-danger small mt-1">Plik {{ $idx }}: {{ $msg }}</div>
                        @endforeach
                    @endforeach
                </div>

                @if($attachments->count())
                    <div class="border rounded">
                        <div class="px-3 py-2 border-bottom small text-muted">Istniejące załączniki</div>
                        <ul class="list-group list-group-flush">
                            @foreach($attachments as $att)
                                <li class="list-group-item d-flex align-items-center justify-content-between">
                                    <div class="small">
                                        <div class="fw-semibold d-flex align-items-center gap-2">
                                            {{ $att->nazwa_pliku }}
                                            @if($att->storage_url)
                                                <a class="link-primary"
                                                   href="{{ asset('storage/'.$att->storage_url) }}"
                                                   target="_blank" rel="noopener">
                                                    podgląd/pobierz
                                                </a>
                                            @endif
                                        </div>
                                        <div class="text-muted">
                                            {{ $att->mime_type ?? 'plik' }} ·
                                            @php
                                                $kb = $att->rozmiar_b ? ($att->rozmiar_b / 1024) : 0;
                                                $size = $kb >= 1024
                                                    ? number_format($kb/1024, 2, ',', ' ').' MB'
                                                    : number_format($kb, 1, ',', ' ').' KB';
                                            @endphp
                                            {{ $size }}
                                        </div>
                                    </div>

                                    @if($editable)
                                        <label class="small text-danger d-flex align-items-center gap-2 mb-0">
                                            <input type="checkbox" name="usun_zalacznik[]" value="{{ $att->id }}">
                                            Usuń
                                        </label>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>

        {{-- === KURS WALUTY (opcjonalny) === --}}
        <div class="card glass-card shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="mb-0">Kurs waluty (opcjonalnie)</h5>
                <small class="text-muted">Podaj, jeśli rozliczasz w innej walucie. Zapis nastąpi tylko, gdy wypełnisz <b>kod waluty</b>.</small>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label small">Kod waluty (ISO 4217)</label>
                        <input name="kurs[kod_waluty]"
                               value="{{ old('kurs.kod_waluty', $kurs['kod_waluty'] ?? '') }}"
                               class="form-control" placeholder="np. EUR" @disabled(!$editable)>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Tabela NBP</label>
                        <input name="kurs[tabela]"
                               value="{{ old('kurs.tabela', $kurs['tabela'] ?? '') }}"
                               class="form-control" placeholder="np. A/123" @disabled(!$editable)>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Data kursu</label>
                        <input type="date" name="kurs[data_kursu]"
                               value="{{ old('kurs.data_kursu', $kurs['data_kursu'] ?? '') }}"
                               class="form-control" @disabled(!$editable)>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Kurs</label>
                        <input name="kurs[kurs]" class="form-control"
                               value="{{ old('kurs.kurs', $kurs['kurs'] ?? '') }}"
                               placeholder="np. 4.234500" @disabled(!$editable)>
                    </div>
                </div>
            </div>
        </div>

        {{-- === STOPKA === --}}
        <div class="card glass-card shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="mb-0">Stopka (uwagi do faktury)</h5>
                <small class="text-muted">Np. podziękowanie, numer rachunku, informacje dodatkowe.</small>
            </div>
            <div class="card-body">
                <textarea name="stopka[uwagi]" rows="3" class="form-control"
                          placeholder="Treść stopki..." @disabled(!$editable)>{{ old('stopka.uwagi', $stopka['uwagi'] ?? '') }}</textarea>
            </div>
        </div>

        {{-- Przyciski --}}
        <div class="d-flex justify-content-between">
            <a href="{{ $backRoute }}" class="btn btn-outline-secondary">
                Wstecz
            </a>

            @if($editable)
                <button class="btn btn-primary">
                    {{ $submitLabel }}
                </button>
            @else
                <a href="{{ route('faktury.summary', $faktura->id_faktura) }}" class="btn btn-primary">
                    Podgląd podsumowania
                </a>
            @endif
        </div>
    </form>
</div>
@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;
}
@media (prefers-color-scheme: dark){
  .glass-card{ background: rgba(25,27,32,.45); border-color: rgba(255,255,255,.08); }
}
.progress{ border-radius: 999px; background-color: rgba(0,0,0,.06); }
.progress-bar{ border-radius: 999px; }
</style>
@endpush