@extends('layouts.app', ['title' => 'PMS · Neues Preisupdate'])
@section('content')

<div class="container-fluid py-4" style="max-width:900px;">

    <div class="mb-4">
        <a href="{{ route('pms.price-update.index') }}" class="text-decoration-none text-muted small">
            <i class="bi bi-arrow-left me-1"></i> Zurück zur Übersicht
        </a>
        <h4 class="fw-bold mb-0 mt-1"><i class="bi bi-graph-up-arrow me-2 text-primary"></i>Neues Preisupdate</h4>
    </div>

    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm py-2 mb-3">
            @foreach($errors->all() as $e)<div><i class="bi bi-exclamation-circle me-1"></i>{{ $e }}</div>@endforeach
        </div>
    @endif

    <form method="POST" action="{{ route('pms.price-update.store') }}" id="priceUpdateForm">
        @csrf

        <div class="row g-4">

            {{-- Schritt 1: Grunddaten --}}
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 fw-semibold pt-3 pb-1 px-4">
                        <span class="badge bg-primary rounded-pill me-2">1</span> Grunddaten
                    </div>
                    <div class="card-body px-4 pb-4">
                        <div class="row g-3">
                            <div class="col-md-8">
                                <label class="form-label small fw-semibold">Titel <span class="text-danger">*</span></label>
                                <input type="text" name="title" class="form-control"
                                       placeholder="z.B. Preiserhöhung 2026 – Leistungspositionen +10%"
                                       value="{{ old('title') }}" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small fw-semibold">Prozent <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">+</span>
                                    <input type="number" name="percent" id="inp_percent"
                                           class="form-control" step="0.01" min="0.01" max="100"
                                           placeholder="10.00" value="{{ old('percent') }}" required>
                                    <span class="input-group-text">%</span>
                                </div>
                                <div class="form-text">z.B. 8 für +8%, 12.5 für +12,5%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Schritt 2: Bereich --}}
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 fw-semibold pt-3 pb-1 px-4">
                        <span class="badge bg-primary rounded-pill me-2">2</span> Bereich wählen
                    </div>
                    <div class="card-body px-4 pb-4">
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <div class="form-check scope-card p-3 border rounded-3 h-100" style="cursor:pointer;">
                                    <input class="form-check-input" type="radio" name="scope"
                                           id="scope_service" value="service" {{ old('scope','service') === 'service' ? 'checked' : '' }}>
                                    <label class="form-check-label ms-2 w-100" for="scope_service" style="cursor:pointer;">
                                        <div class="fw-semibold"><i class="bi bi-book text-primary me-1"></i> Leistungspositionen</div>
                                        <small class="text-muted">Feld: unit_price in pms_service_positions</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check scope-card p-3 border rounded-3 h-100" style="cursor:pointer;">
                                    <input class="form-check-input" type="radio" name="scope"
                                           id="scope_material" value="material" {{ old('scope') === 'material' ? 'checked' : '' }}>
                                    <label class="form-check-label ms-2 w-100" for="scope_material" style="cursor:pointer;">
                                        <div class="fw-semibold"><i class="bi bi-box-seam text-warning me-1"></i> Materialkatalog</div>
                                        <small class="text-muted">Listpreis und/oder Einkaufspreis</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check scope-card p-3 border rounded-3 h-100" style="cursor:pointer;">
                                    <input class="form-check-input" type="radio" name="scope"
                                           id="scope_labor" value="labor" {{ old('scope') === 'labor' ? 'checked' : '' }}>
                                    <label class="form-check-label ms-2 w-100" for="scope_labor" style="cursor:pointer;">
                                        <div class="fw-semibold"><i class="bi bi-person-badge text-success me-1"></i> Lohnarten</div>
                                        <small class="text-muted">Kosten/h und/oder Verrechnungssatz/h</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check scope-card p-3 border rounded-3 h-100" style="cursor:pointer;">
                                    <input class="form-check-input" type="radio" name="scope"
                                           id="scope_equipment" value="equipment" {{ old('scope') === 'equipment' ? 'checked' : '' }}>
                                    <label class="form-check-label ms-2 w-100" for="scope_equipment" style="cursor:pointer;">
                                        <div class="fw-semibold"><i class="bi bi-tools text-info me-1"></i> Geräte</div>
                                        <small class="text-muted">Satz (€/h, €/Tag, €/Stk …)</small>
                                    </label>
                                </div>
                            </div>
                        </div>

                        {{-- Filter: Kategorien (nur bei scope=service) --}}
                        <div id="filter_service">
                            <label class="form-label small fw-semibold">Kategorien filtern</label>
                            <div class="mb-2">
                                <button type="button" class="btn btn-xs btn-outline-secondary me-1" onclick="selectAllCats(true)">Alle auswählen</button>
                                <button type="button" class="btn btn-xs btn-outline-secondary" onclick="selectAllCats(false)">Alle abwählen</button>
                                <span class="text-muted small ms-2">(leer = alle Kategorien)</span>
                            </div>
                            <div class="row g-2">
                                @foreach($categories as $cat)
                                <div class="col-md-6">
                                    <div class="form-check">
                                        <input class="form-check-input cat-check" type="checkbox"
                                               name="category_ids[]" value="{{ $cat->id }}"
                                               id="cat_{{ $cat->id }}"
                                               {{ in_array($cat->id, (array)old('category_ids',[])) ? 'checked' : '' }}>
                                        <label class="form-check-label small" for="cat_{{ $cat->id }}">
                                            <span class="text-muted me-1">{{ $cat->trade_nr }}</span>{{ $cat->name }}
                                        </label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        {{-- Filter: Preisspalten (nur bei scope=material) --}}
                        <div id="filter_material" style="display:none;">
                            <label class="form-label small fw-semibold">Preisspalten</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="price_columns[]"
                                       value="list_price" id="col_list" checked>
                                <label class="form-check-label" for="col_list">
                                    <strong>Listpreis</strong> (list_price)
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="price_columns[]"
                                       value="purchase_price" id="col_purchase">
                                <label class="form-check-label" for="col_purchase">
                                    <strong>Einkaufspreis</strong> (purchase_price)
                                </label>
                            </div>
                        </div>

                        {{-- Filter: Lohnspalten (nur bei scope=labor) --}}
                        <div id="filter_labor" style="display:none;">
                            <label class="form-label small fw-semibold">Preisspalten</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="price_columns[]"
                                       value="hourly_rate" id="col_hourly" checked>
                                <label class="form-check-label" for="col_hourly">
                                    <strong>Verrechnungssatz/h</strong> (was Kunde zahlt)
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="price_columns[]"
                                       value="cost_rate" id="col_cost">
                                <label class="form-check-label" for="col_cost">
                                    <strong>Kosten/h</strong> (was AG zahlt)
                                </label>
                            </div>
                        </div>

                        {{-- Info: Geräte (nur bei scope=equipment) --}}
                        <div id="filter_equipment" style="display:none;">
                            <p class="text-muted small mb-0">
                                <i class="bi bi-info-circle me-1"></i>
                                Es wird die Spalte <strong>rate</strong> (Satz pro Einheit) für alle aktiven Geräte erhöht.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Schritt 3: Vorschau --}}
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 fw-semibold pt-3 pb-1 px-4 d-flex align-items-center justify-content-between">
                        <span><span class="badge bg-primary rounded-pill me-2">3</span> Vorschau</span>
                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3" onclick="loadPreview()">
                            <i class="bi bi-search me-1"></i> Vorschau laden
                        </button>
                    </div>
                    <div class="card-body p-0" id="preview_area">
                        <div class="text-center text-muted py-4">
                            <i class="bi bi-arrow-up-circle d-block fs-3 mb-2 opacity-25"></i>
                            Einstellungen wählen und "Vorschau laden" klicken.
                        </div>
                    </div>
                </div>
            </div>

            {{-- Schritt 4: Anwenden --}}
            <div class="col-12" id="apply_section" style="display:none;">
                <div class="card border-danger border-2 shadow-sm">
                    <div class="card-header bg-danger bg-opacity-10 border-0 fw-semibold pt-3 pb-1 px-4">
                        <span class="badge bg-danger rounded-pill me-2">4</span>
                        <i class="bi bi-exclamation-triangle text-danger me-1"></i> Bestätigung & Anwenden
                    </div>
                    <div class="card-body px-4 pb-4">
                        <p class="text-muted small mb-3" id="confirm_text"></p>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="confirm" id="confirm_check" value="1">
                            <label class="form-check-label fw-semibold" for="confirm_check">
                                Ja, ich möchte dieses Preisupdate unwiderruflich anwenden (Rollback per Audit-Log möglich).
                            </label>
                        </div>
                        <button type="submit" class="btn btn-danger rounded-pill px-4" id="apply_btn" disabled>
                            <i class="bi bi-graph-up-arrow me-1"></i> Jetzt anwenden
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </form>
</div>

@push('scripts')
<script>
const previewUrl = '{{ route('pms.price-update.preview') }}';
const csrfToken  = '{{ csrf_token() }}';

document.querySelectorAll('input[name="scope"]').forEach(r => {
    r.addEventListener('change', () => {
        document.getElementById('filter_service').style.display   = r.value === 'service'   ? '' : 'none';
        document.getElementById('filter_material').style.display  = r.value === 'material'  ? '' : 'none';
        document.getElementById('filter_labor').style.display     = r.value === 'labor'     ? '' : 'none';
        document.getElementById('filter_equipment').style.display = r.value === 'equipment' ? '' : 'none';
        document.getElementById('apply_section').style.display    = 'none';
        document.getElementById('preview_area').innerHTML = '<div class="text-center text-muted py-4"><i class="bi bi-arrow-up-circle d-block fs-3 mb-2 opacity-25"></i>Einstellungen wählen und "Vorschau laden" klicken.</div>';
    });
});

function selectAllCats(val) {
    document.querySelectorAll('.cat-check').forEach(c => c.checked = val);
}

function loadPreview() {
    const scope   = document.querySelector('input[name="scope"]:checked')?.value;
    const percent = document.getElementById('inp_percent').value;

    if (!scope || !percent || parseFloat(percent) <= 0) {
        alert('Bitte Bereich und Prozent eingeben.');
        return;
    }

    if (parseFloat(percent) > 50) {
        if (!confirm(`Achtung: ${percent}% ist eine sehr hohe Erhöhung. Trotzdem fortfahren?`)) return;
    }

    const catIds = [...document.querySelectorAll('.cat-check:checked')].map(c => c.value);
    const cols   = [...document.querySelectorAll('input[name="price_columns[]"]:checked')].map(c => c.value);

    const body = new URLSearchParams({ _token: csrfToken, scope, percent });
    catIds.forEach(id => body.append('category_ids[]', id));
    cols.forEach(c  => body.append('price_columns[]', c));

    document.getElementById('preview_area').innerHTML = '<div class="text-center py-4"><div class="spinner-border spinner-border-sm text-primary"></div> Lade Vorschau…</div>';

    fetch(previewUrl, { method: 'POST', body, headers: { 'X-CSRF-TOKEN': csrfToken } })
        .then(r => r.json())
        .then(data => renderPreview(data, scope, percent))
        .catch(() => {
            document.getElementById('preview_area').innerHTML = '<div class="text-center text-danger py-4">Fehler beim Laden der Vorschau.</div>';
        });
}

function renderPreview(data, scope, percent) {
    const { total, sample, avg_old, avg_new } = data;

    let html = `
    <div class="px-4 pt-3 pb-2">
        <div class="row g-3 mb-3">
            <div class="col-md-4">
                <div class="border rounded-3 p-3 text-center">
                    <div class="fs-4 fw-bold text-primary">${total.toLocaleString('de-DE')}</div>
                    <small class="text-muted">Betroffene Positionen</small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="border rounded-3 p-3 text-center">
                    <div class="fs-4 fw-bold text-muted">${avg_old.toLocaleString('de-DE', {minimumFractionDigits:2})} €</div>
                    <small class="text-muted">Ø Preis vorher</small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="border rounded-3 p-3 text-center">
                    <div class="fs-4 fw-bold text-success">${avg_new.toLocaleString('de-DE', {minimumFractionDigits:2})} €</div>
                    <small class="text-muted">Ø Preis nachher</small>
                </div>
            </div>
        </div>
        <p class="small text-muted mb-2">Vorschau (erste ${sample.length} von ${total.toLocaleString('de-DE')} Positionen):</p>
    </div>
    <div class="table-responsive">
    <table class="table table-sm table-hover mb-0 align-middle">
        <thead class="table-light"><tr>
            <th>Bezeichnung</th><th>Kategorie</th>
            <th class="text-end">Alt €</th>
            <th class="text-end">Neu €</th>
            <th class="text-end text-success">Diff €</th>
        </tr></thead><tbody>`;

    sample.forEach(r => {
        html += `<tr>
            <td class="small">${r.label}</td>
            <td class="small text-muted">${r.category}</td>
            <td class="text-end small">${r.old_price.toLocaleString('de-DE', {minimumFractionDigits:2})}</td>
            <td class="text-end small fw-semibold">${r.new_price.toLocaleString('de-DE', {minimumFractionDigits:2})}</td>
            <td class="text-end small text-success">+${r.diff.toLocaleString('de-DE', {minimumFractionDigits:2})}</td>
        </tr>`;
    });

    html += `</tbody></table></div>`;
    document.getElementById('preview_area').innerHTML = html;

    // Apply-Sektion einblenden
    document.getElementById('apply_section').style.display = '';
    document.getElementById('confirm_text').textContent =
        `Du bist dabei, ${total.toLocaleString('de-DE')} Positionen um +${parseFloat(percent).toLocaleString('de-DE', {minimumFractionDigits:2})}% zu erhöhen. Diese Aktion kann per Rollback rückgängig gemacht werden.`;
}

document.getElementById('confirm_check').addEventListener('change', function() {
    document.getElementById('apply_btn').disabled = !this.checked;
});
</script>
@endpush

<style>
.scope-card:has(input:checked) { border-color: var(--bs-primary) !important; background: #f0f5ff; }
</style>
@endsection