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

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

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-0">Leistungspositionen</h4>
            <small class="text-muted">PMS · Einstellungen · Positionsbibliothek</small>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('pms.service-positions.categories') }}"
               class="btn btn-sm btn-outline-secondary rounded-pill px-3">
                <i class="bi bi-tags me-1"></i>Kategorien
            </a>
            <button class="btn btn-sm btn-primary rounded-pill px-3"
                    data-bs-toggle="modal" data-bs-target="#modal-create-pos">
                <i class="bi bi-plus me-1"></i>Neue Position
            </button>
        </div>
    </div>

    {{-- Stats --}}
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="fs-4 fw-bold text-primary">{{ number_format($totalCount) }}</div>
                <div class="small text-muted">Positionen gesamt</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="fs-4 fw-bold text-success">{{ number_format($activeCount) }}</div>
                <div class="small text-muted">Aktiv</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="fs-4 fw-bold text-warning">{{ number_format($totalCount - $activeCount) }}</div>
                <div class="small text-muted">Inaktiv</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="fs-4 fw-bold text-secondary">{{ $categoryCount }}</div>
                <div class="small text-muted">Gewerke</div>
            </div>
        </div>
    </div>

    {{-- Filter --}}
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body px-4 py-3">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label small fw-semibold mb-1">Gewerk</label>
                    <select id="adm-trade" class="form-select form-select-sm">
                        <option value="">Alle Gewerke</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->trade_nr }}">{{ $cat->trade_nr }} – {{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label small fw-semibold mb-1">Suche</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="bi bi-search text-muted" style="font-size:11px;"></i>
                        </span>
                        <input type="text" id="adm-q" class="form-control border-start-0 ps-0"
                               placeholder="Kurztext, Suchbegriff oder Pos.-Nr.">
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold mb-1">Status</label>
                    <select id="adm-status" class="form-select form-select-sm">
                        <option value="">Alle aktiven</option>
                        <option value="aktiv">Aktiv</option>
                        <option value="inaktiv">Inaktiv</option>
                        <option value="geloescht">Gelöscht</option>
                    </select>
                </div>
                <div class="col-auto">
                    <button class="btn btn-sm btn-outline-secondary rounded-pill px-3" id="adm-reset">
                        <i class="bi bi-x me-1"></i>Reset
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabelle --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">

            <div id="adm-loading" class="text-center py-5" style="display:none;">
                <span class="spinner-border spinner-border-sm text-secondary me-2"></span>
                <span class="text-muted small">Lade…</span>
            </div>

            <div id="adm-empty" class="text-center text-muted py-5" style="display:none;">
                <i class="bi bi-inbox d-block fs-3 mb-2 opacity-25"></i>
                Keine Positionen gefunden.
            </div>

            <div id="adm-table-wrap">
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th class="px-3 py-2" style="width:120px; font-size:11px; letter-spacing:.04em;">POS.-NR.</th>
                                <th class="py-2" style="font-size:11px; letter-spacing:.04em;">KURZTEXT</th>
                                <th class="py-2" style="width:160px; font-size:11px; letter-spacing:.04em;">GEWERK</th>
                                <th class="py-2 text-center" style="width:55px; font-size:11px; letter-spacing:.04em;">ME</th>
                                <th class="py-2 text-end" style="width:95px; font-size:11px; letter-spacing:.04em;">PREIS</th>
                                <th class="py-2 text-center" style="width:65px; font-size:11px; letter-spacing:.04em;">STATUS</th>
                                <th class="py-2 text-center pe-3" style="width:80px; font-size:11px; letter-spacing:.04em;">AKTION</th>
                            </tr>
                        </thead>
                        <tbody id="adm-tbody"></tbody>
                    </table>
                </div>
                <div class="d-flex align-items-center justify-content-between px-3 py-2 border-top" id="adm-footer">
                    <small class="text-muted" id="adm-info"></small>
                    <div class="d-flex gap-1" id="adm-pagination"></div>
                </div>
            </div>

        </div>
    </div>

</div>

{{-- ══ Modal: Neue Position ══ --}}
<div class="modal fade" id="modal-create-pos" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title fw-semibold">
                    <i class="bi bi-plus-circle me-2 text-primary"></i>Neue Position anlegen
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Gewerk / Kategorie <span class="text-danger">*</span></label>
                    <select id="create-category" class="form-select form-select-sm">
                        <option value="">— bitte wählen —</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}">{{ $cat->trade_nr }} – {{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Kurztext <span class="text-danger">*</span></label>
                    <input type="text" id="create-short-text" class="form-control form-control-sm" maxlength="255">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Suchbegriff</label>
                    <input type="text" id="create-search-term" class="form-control form-control-sm" maxlength="100"
                           placeholder="GROSSBUCHSTABEN empfohlen">
                </div>
                <div class="row g-3 mb-3">
                    <div class="col-5">
                        <label class="form-label small fw-semibold">Einheit</label>
                        <select id="create-unit" class="form-select form-select-sm">
                            <option value="">—</option>
                        </select>
                    </div>
                    <div class="col-7">
                        <label class="form-label small fw-semibold">Richtpreis €</label>
                        <div class="input-group input-group-sm">
                            <input type="number" id="create-unit-price" class="form-control text-end"
                                   step="0.01" min="0" value="0">
                            <span class="input-group-text">€</span>
                        </div>
                    </div>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="create-is-active" checked>
                    <label class="form-check-label small" for="create-is-active">Sofort aktiv (in Bibliothek sichtbar)</label>
                </div>
                <div id="create-error" class="alert alert-danger py-2 mt-3 small" style="display:none;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-3"
                        data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary rounded-pill px-4" id="btn-create-save">
                    <i class="bi bi-check-lg me-1"></i>Anlegen
                </button>
            </div>
        </div>
    </div>
</div>

{{-- ══ Modal: Position bearbeiten ══ --}}
<div class="modal fade" id="modal-edit-pos" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title fw-semibold">
                    <i class="bi bi-pencil me-2 text-primary"></i>Position bearbeiten
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="edit-id">
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Pos.-Nr. <span class="text-muted fw-normal">(nicht änderbar)</span></label>
                    <input type="text" id="edit-position-nr" class="form-control form-control-sm bg-light" readonly>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Kurztext <span class="text-danger">*</span></label>
                    <input type="text" id="edit-short-text" class="form-control form-control-sm" maxlength="255">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Suchbegriff</label>
                    <input type="text" id="edit-search-term" class="form-control form-control-sm" maxlength="100">
                </div>
                <div class="row g-3 mb-3">
                    <div class="col-5">
                        <label class="form-label small fw-semibold">Einheit</label>
                        <select id="edit-unit" class="form-select form-select-sm">
                            <option value="">—</option>
                        </select>
                    </div>
                    <div class="col-7">
                        <label class="form-label small fw-semibold">Richtpreis €</label>
                        <div class="input-group input-group-sm">
                            <input type="number" id="edit-unit-price" class="form-control text-end" step="0.01" min="0">
                            <span class="input-group-text">€</span>
                        </div>
                    </div>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="edit-is-active">
                    <label class="form-check-label small" for="edit-is-active">Aktiv (in Bibliothek sichtbar)</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-3"
                        data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary rounded-pill px-4" id="btn-edit-save">
                    <i class="bi bi-check-lg me-1"></i>Speichern
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    .adm-action-btn {
        border: none; background: transparent; padding: 3px 6px;
        border-radius: 6px; cursor: pointer; color: #adb5bd;
        transition: color .15s, background .15s;
        line-height: 1;
    }
    .adm-action-btn:hover            { background: #f1f3f5; }
    .adm-action-btn.edit:hover       { color: #0d6efd; }
    .adm-action-btn.del:hover        { color: #dc3545; }
    .sp-badge-aktiv    { background:#d1e7dd; color:#0a3622; font-size:10px; padding:2px 8px; border-radius:20px; white-space:nowrap; }
    .sp-badge-inaktiv  { background:#fff3cd; color:#664d03; font-size:10px; padding:2px 8px; border-radius:20px; white-space:nowrap; }
    .sp-badge-geloescht{ background:#f8d7da; color:#58151c; font-size:10px; padding:2px 8px; border-radius:20px; white-space:nowrap; }
</style>

<script>
(function () {
    var csrf      = '{{ csrf_token() }}';
    var curPage   = 1;
    var editCache = {};

    /* ── Laden ── */
    function load(page) {
        curPage = page || 1;
        var trade  = document.getElementById('adm-trade').value;
        var q      = document.getElementById('adm-q').value.trim();
        var status = document.getElementById('adm-status').value;

        var url = '/pms/leistungspositionen/api/admin-suche?page=' + curPage + '&per_page=50';
        if (trade)  url += '&trade_nr=' + encodeURIComponent(trade);
        if (q)      url += '&q='        + encodeURIComponent(q);
        if (status) url += '&status='   + encodeURIComponent(status);

        document.getElementById('adm-loading').style.display    = '';
        document.getElementById('adm-table-wrap').style.display = 'none';
        document.getElementById('adm-empty').style.display      = 'none';

        fetch(url).then(r => r.json()).then(render).catch(function () {
            document.getElementById('adm-loading').style.display = 'none';
        });
    }

    /* ── Render ── */
    function render(data) {
        document.getElementById('adm-loading').style.display = 'none';

        if (!data.data || data.data.length === 0) {
            document.getElementById('adm-empty').style.display      = '';
            document.getElementById('adm-table-wrap').style.display = 'none';
            return;
        }

        document.getElementById('adm-empty').style.display      = 'none';
        document.getElementById('adm-table-wrap').style.display = '';

        var tbody = document.getElementById('adm-tbody');
        tbody.innerHTML = '';

        data.data.forEach(function (pos) {
            editCache[pos.id] = pos;
            var deleted = pos.is_deleted;
            var active  = pos.is_active && !deleted;
            var price   = pos.unit_price > 0
                ? parseFloat(pos.unit_price).toLocaleString('de-DE', {minimumFractionDigits:2, maximumFractionDigits:2}) + ' €'
                : '–';
            var catName = pos.category ? esc(pos.category.name) : '';

            var badge = deleted
                ? '<span class="sp-badge-geloescht">Gelöscht</span>'
                : active
                    ? '<span class="sp-badge-aktiv">Aktiv</span>'
                    : '<span class="sp-badge-inaktiv">Inaktiv</span>';

            var actions = deleted
                ? '<span class="text-muted" style="font-size:11px;">–</span>'
                : '<button class="adm-action-btn edit" data-id="' + pos.id + '" title="Bearbeiten"><i class="bi bi-pencil-square" style="font-size:13px;"></i></button>' +
                  '<button class="adm-action-btn del"  data-id="' + pos.id + '" data-title="' + esc(pos.short_text) + '" title="Löschen"><i class="bi bi-trash" style="font-size:13px;"></i></button>';

            var tr = document.createElement('tr');
            tr.setAttribute('data-id', pos.id);
            if (deleted) tr.classList.add('opacity-50');

            tr.innerHTML =
                '<td class="px-3 py-2" style="font-size:11px; font-family:monospace;">' + esc(pos.position_nr) + '</td>' +
                '<td class="py-2" style="font-size:13px; max-width:320px;">' + esc(pos.short_text) +
                    (pos.search_term ? '<br><small class="text-muted" style="font-size:10px;">' + esc(pos.search_term) + '</small>' : '') +
                '</td>' +
                '<td class="py-2">' +
                    '<span class="badge bg-light text-dark border" style="font-size:10px;">' + esc(pos.trade_nr) + '</span>' +
                    '<span class="text-muted ms-1" style="font-size:11px;">' + catName + '</span>' +
                '</td>' +
                '<td class="py-2 text-center" style="font-size:12px;">' + (pos.position_unit ? pos.position_unit.name : '–') + '</td>' +
                '<td class="py-2 text-end pe-2" style="font-size:12px;">' + price + '</td>' +
                '<td class="py-2 text-center">' + badge + '</td>' +
                '<td class="py-2 text-center pe-2">' + actions + '</td>';

            tbody.appendChild(tr);
        });

        document.getElementById('adm-info').textContent =
            data.from + '–' + data.to + ' von ' + data.total.toLocaleString('de-DE') + ' Positionen';

        buildPagination(data);
    }

    /* ── Pagination ── */
    function buildPagination(data) {
        var c = document.getElementById('adm-pagination');
        c.innerHTML = '';
        if (data.last_page <= 1) return;

        var last = data.last_page, cur = data.current_page;
        var show = new Set([1, last]);
        for (var i = Math.max(1, cur-2); i <= Math.min(last, cur+2); i++) show.add(i);
        var sorted = Array.from(show).sort((a,b) => a-b), prev = null;

        sorted.forEach(function (p) {
            if (prev !== null && p - prev > 1) {
                var d = document.createElement('span');
                d.className = 'btn btn-sm btn-outline-secondary disabled px-2';
                d.textContent = '…';
                c.appendChild(d);
            }
            var btn = document.createElement('button');
            btn.className = 'btn btn-sm px-2 ' + (p === cur ? 'btn-primary' : 'btn-outline-secondary');
            btn.textContent = p;
            btn.addEventListener('click', function () { load(p); });
            c.appendChild(btn);
            prev = p;
        });
    }

    function esc(s) { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

    function postForm(url, data, done) {
        var fd = new FormData();
        fd.append('_token', csrf);
        for (var k in data) fd.append(k, data[k]);
        fetch(url, { method:'POST', headers:{'X-CSRF-TOKEN':csrf,'Accept':'application/json'}, body:fd })
            .then(r => r.json()).then(done);
    }

    /* ── Tabellen-Klicks ── */
    document.getElementById('adm-tbody').addEventListener('click', function (e) {

        var editBtn = e.target.closest('.adm-action-btn.edit');
        if (editBtn) { openEditModal(editBtn.dataset.id); return; }

        var delBtn = e.target.closest('.adm-action-btn.del');
        if (delBtn) {
            if (!confirm('Position löschen?\n\n"' + delBtn.dataset.title + '"')) return;
            postForm('/pms/leistungspositionen/' + delBtn.dataset.id + '/loeschen', {}, function (data) {
                if (!data.success) return;
                var row = document.querySelector('tr[data-id="' + delBtn.dataset.id + '"]');
                if (row) {
                    row.classList.add('opacity-50');
                    row.cells[5].innerHTML = '<span class="sp-badge-geloescht">Gelöscht</span>';
                    row.cells[6].innerHTML = '<span class="text-muted" style="font-size:11px;">–</span>';
                }
            });
        }
    });

    /* ── Edit-Modal ── */
    function openEditModal(id) {
        var pos = editCache[id];
        if (!pos) return;
        document.getElementById('edit-id').value          = id;
        document.getElementById('edit-position-nr').value = pos.position_nr;
        document.getElementById('edit-short-text').value  = pos.short_text;
        document.getElementById('edit-search-term').value = pos.search_term || '';
        document.getElementById('edit-unit').value        = pos.fk_unit_id || '';
        document.getElementById('edit-unit-price').value  = pos.unit_price || 0;
        document.getElementById('edit-is-active').checked = !!pos.is_active;
        new bootstrap.Modal(document.getElementById('modal-edit-pos')).show();
    }

    document.getElementById('btn-edit-save').addEventListener('click', function () {
        var id = document.getElementById('edit-id').value;
        postForm('/pms/leistungspositionen/' + id + '/update', {
            short_text:  document.getElementById('edit-short-text').value,
            search_term: document.getElementById('edit-search-term').value,
            fk_unit_id:  document.getElementById('edit-unit').value,
            unit_price:  document.getElementById('edit-unit-price').value,
            is_active:   document.getElementById('edit-is-active').checked ? '1' : '0',
        }, function (data) {
            if (!data.success) return;
            editCache[id] = data.position;
            bootstrap.Modal.getInstance(document.getElementById('modal-edit-pos')).hide();
            updateRow(data.position);
        });
    });

    function updateRow(pos) {
        var row = document.querySelector('tr[data-id="' + pos.id + '"]');
        if (!row) return;
        var price = pos.unit_price > 0
            ? parseFloat(pos.unit_price).toLocaleString('de-DE', {minimumFractionDigits:2, maximumFractionDigits:2}) + ' €' : '–';
        row.cells[1].innerHTML = esc(pos.short_text) +
            (pos.search_term ? '<br><small class="text-muted" style="font-size:10px;">' + esc(pos.search_term) + '</small>' : '');
        row.cells[3].textContent = pos.position_unit ? pos.position_unit.name : '–';
        row.cells[4].innerHTML   = price;
        row.cells[5].innerHTML   = pos.is_active
            ? '<span class="sp-badge-aktiv">Aktiv</span>'
            : '<span class="sp-badge-inaktiv">Inaktiv</span>';
    }

    /* ── Neue Position ── */
    document.getElementById('btn-create-save').addEventListener('click', function () {
        var catId = document.getElementById('create-category').value;
        var text  = document.getElementById('create-short-text').value.trim();
        var errEl = document.getElementById('create-error');
        errEl.style.display = 'none';

        if (!catId) { errEl.textContent = 'Bitte Gewerk wählen.'; errEl.style.display = ''; return; }
        if (!text)  { errEl.textContent = 'Kurztext ist Pflichtfeld.'; errEl.style.display = ''; return; }

        postForm('/pms/leistungspositionen/neu', {
            category_id:  catId,
            short_text:   text,
            search_term:  document.getElementById('create-search-term').value,
            fk_unit_id:   document.getElementById('create-unit').value,
            unit_price:   document.getElementById('create-unit-price').value,
            is_active:    document.getElementById('create-is-active').checked ? '1' : '0',
        }, function (data) {
            if (!data.success) { errEl.textContent = 'Fehler beim Anlegen.'; errEl.style.display = ''; return; }
            bootstrap.Modal.getInstance(document.getElementById('modal-create-pos')).hide();
            // Formular leeren
            document.getElementById('create-category').selectedIndex  = 0;
            document.getElementById('create-short-text').value        = '';
            document.getElementById('create-search-term').value       = '';
            document.getElementById('create-unit').value              = '';
            document.getElementById('create-unit-price').value        = '0';
            document.getElementById('create-is-active').checked       = true;
            // Liste neu laden
            load(1);
        });
    });

    /* ── Filter-Events ── */
    var st;
    document.getElementById('adm-q').addEventListener('input', function () { clearTimeout(st); st = setTimeout(function(){load(1);}, 400); });
    document.getElementById('adm-trade').addEventListener('change',  function () { load(1); });
    document.getElementById('adm-status').addEventListener('change', function () { load(1); });
    document.getElementById('adm-reset').addEventListener('click', function () {
        document.getElementById('adm-q').value = '';
        document.getElementById('adm-trade').selectedIndex  = 0;
        document.getElementById('adm-status').selectedIndex = 0;
        load(1);
    });

    /* ── Einheiten laden ── */
    function loadUnits() {
        fetch('/pms/einheiten/api', { headers: { 'Accept': 'application/json' } })
            .then(r => r.json())
            .then(function (units) {
                ['create-unit', 'edit-unit'].forEach(function (id) {
                    var sel = document.getElementById(id);
                    var cur = sel.value;
                    sel.innerHTML = '<option value="">—</option>';
                    units.forEach(function (u) {
                        var opt = document.createElement('option');
                        opt.value       = u.id;
                        opt.textContent = u.name;
                        sel.appendChild(opt);
                    });
                    sel.value = cur;
                });
            });
    }

    load(1);
    loadUnits();
})();
</script>

@endsection