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

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

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-0">Materialkatalog</h4>
            <small class="text-muted">PMS · Verwaltung</small>
        </div>
        <button class="btn btn-sm btn-primary rounded-pill px-3"
                onclick="openCreateModal()">
            <i class="bi bi-plus me-1"></i>Neuer Artikel
        </button>
    </div>

    {{-- Filter --}}
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body py-2 px-3">
            <div class="d-flex gap-2 flex-wrap align-items-center">
                <input type="text" id="filter-q" class="form-control form-control-sm"
                       style="max-width:280px;" placeholder="Suche (Bezeichnung, Artikelnr., Suchbegriff)">
                <select id="filter-unit" class="form-select form-select-sm" style="max-width:130px;">
                    <option value="">Alle Einheiten</option>
                    @foreach($units as $u)
                        <option value="{{ $u->id }}">{{ $u->name }}</option>
                    @endforeach
                </select>
                <div class="form-check mb-0 ms-1">
                    <input class="form-check-input" type="checkbox" id="filter-inactive">
                    <label class="form-check-label small" for="filter-inactive">Inaktive anzeigen</label>
                </div>
                <button class="btn btn-sm btn-outline-secondary rounded-pill px-3 ms-auto" onclick="loadItems(1)">
                    <i class="bi bi-search me-1"></i>Suchen
                </button>
            </div>
        </div>
    </div>

    {{-- Tabelle --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <table class="table table-sm table-hover mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th class="px-3 py-2" style="width:110px; font-size:11px; letter-spacing:.04em;">ART.-NR.</th>
                        <th class="py-2" style="font-size:11px; letter-spacing:.04em;">BEZEICHNUNG</th>
                        <th class="py-2" style="width:60px; font-size:11px; letter-spacing:.04em;">EH</th>
                        <th class="py-2 text-end" style="width:95px; font-size:11px; letter-spacing:.04em;">VK-PREIS €</th>
                        <th class="py-2 text-end" style="width:95px; font-size:11px; letter-spacing:.04em;">EK-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="mat-tbody">
                    <tr><td colspan="7" class="text-center text-muted py-4">Wird geladen…</td></tr>
                </tbody>
            </table>
            <div class="d-flex align-items-center justify-content-between px-3 py-2 border-top" id="mat-footer">
                <small class="text-muted" id="mat-count"></small>
                <div id="mat-pagination" class="d-flex gap-1"></div>
            </div>
        </div>
    </div>

</div>

{{-- Modal: Neuer Artikel --}}
<div class="modal fade" id="modal-create-mat" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <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>Neuer Artikel
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label small fw-semibold">Kurzbezeichnung <span class="text-danger">*</span></label>
                        <input type="text" id="c-short-text" class="form-control form-control-sm" maxlength="100">
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small fw-semibold">Artikelnummer</label>
                        <input type="text" id="c-article-nr" class="form-control form-control-sm" maxlength="30" style="font-family:monospace;">
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small fw-semibold">Einheit</label>
                        <select id="c-unit" class="form-select form-select-sm">
                            <option value="">— keine —</option>
                            @foreach($units as $u)
                                <option value="{{ $u->id }}">{{ $u->name }} – {{ $u->label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small fw-semibold">Lieferanten-Code</label>
                        <input type="text" id="c-supplier-code" class="form-control form-control-sm" maxlength="10" style="font-family:monospace;">
                    </div>
                    <div class="col-12">
                        <label class="form-label small fw-semibold">Suchbegriff</label>
                        <input type="text" id="c-search-term" class="form-control form-control-sm" maxlength="100" placeholder="Großbuchstaben für bessere Suche">
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small fw-semibold">VK-Preis €</label>
                        <input type="number" id="c-list-price" class="form-control form-control-sm text-end" step="0.01" value="0.00">
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small fw-semibold">EK-Preis €</label>
                        <input type="number" id="c-purchase-price" class="form-control form-control-sm text-end" step="0.01" value="0.00">
                    </div>
                    <div class="col-sm-4 d-flex align-items-end">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="c-active" checked>
                            <label class="form-check-label small" for="c-active">Aktiv</label>
                        </div>
                    </div>
                </div>
                <div id="c-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: Artikel bearbeiten --}}
<div class="modal fade" id="modal-edit-mat" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title fw-semibold">
                    <i class="bi bi-pencil me-2 text-primary"></i>Artikel bearbeiten
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="e-id">
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label small fw-semibold">Kurzbezeichnung <span class="text-danger">*</span></label>
                        <input type="text" id="e-short-text" class="form-control form-control-sm" maxlength="100">
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small fw-semibold">Artikelnummer</label>
                        <input type="text" id="e-article-nr" class="form-control form-control-sm" maxlength="30" style="font-family:monospace;">
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small fw-semibold">Einheit</label>
                        <select id="e-unit" class="form-select form-select-sm">
                            <option value="">— keine —</option>
                            @foreach($units as $u)
                                <option value="{{ $u->id }}">{{ $u->name }} – {{ $u->label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small fw-semibold">Lieferanten-Code</label>
                        <input type="text" id="e-supplier-code" class="form-control form-control-sm" maxlength="10" style="font-family:monospace;">
                    </div>
                    <div class="col-12">
                        <label class="form-label small fw-semibold">Suchbegriff</label>
                        <input type="text" id="e-search-term" class="form-control form-control-sm" maxlength="100">
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small fw-semibold">VK-Preis €</label>
                        <input type="number" id="e-list-price" class="form-control form-control-sm text-end" step="0.01">
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small fw-semibold">EK-Preis €</label>
                        <input type="number" id="e-purchase-price" class="form-control form-control-sm text-end" step="0.01">
                    </div>
                    <div class="col-sm-4 d-flex align-items-end">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="e-active">
                            <label class="form-check-label small" for="e-active">Aktiv</label>
                        </div>
                    </div>
                </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; }
    .sp-badge-inaktiv { background:#fff3cd; color:#664d03; font-size:10px; padding:2px 8px; border-radius:20px; }
</style>

<script>
(function () {
    var csrf = '{{ csrf_token() }}';
    var currentPage = 1;
    var lastTotal   = 0;

    function fmt(n) { return Number(n||0).toLocaleString('de-DE',{minimumFractionDigits:2,maximumFractionDigits:2}); }
    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] === null ? '' : data[k]);
        fetch(url, { method:'POST', headers:{'X-CSRF-TOKEN':csrf,'Accept':'application/json'}, body:fd })
            .then(r => r.json()).then(done).catch(function(){ done({success:false}); });
    }

    function rowHtml(it) {
        var badge  = it.is_active ? '<span class="sp-badge-aktiv">Aktiv</span>' : '<span class="sp-badge-inaktiv">Inaktiv</span>';
        var unitNm = it.unit ? esc(it.unit.name) : '–';
        return '<tr data-id="'+it.id+'" class="'+(it.is_active?'':'opacity-50')+'">' +
            '<td class="px-3 py-2" style="font-size:12px; font-family:monospace;">'+esc(it.article_nr||'–')+'</td>'+
            '<td class="py-2" style="font-size:13px;">'+esc(it.short_text)+'</td>'+
            '<td class="py-2" style="font-size:13px;">'+unitNm+'</td>'+
            '<td class="py-2 text-end" style="font-size:13px;">'+fmt(it.list_price)+'</td>'+
            '<td class="py-2 text-end" style="font-size:13px;">'+fmt(it.purchase_price)+'</td>'+
            '<td class="py-2 text-center">'+badge+'</td>'+
            '<td class="py-2 text-center pe-2">'+
                '<button class="adm-action-btn edit" data-item=\''+JSON.stringify(it).replace(/'/g,"&#39;")+'\' title="Bearbeiten"><i class="bi bi-pencil-square" style="font-size:13px;"></i></button>'+
                '<button class="adm-action-btn del" data-id="'+it.id+'" data-name="'+esc(it.short_text)+'" title="Löschen"><i class="bi bi-trash" style="font-size:13px;"></i></button>'+
            '</td>'+
        '</tr>';
    }

    window.loadItems = function (page) {
        currentPage = page || 1;
        var q       = document.getElementById('filter-q').value.trim();
        var unitId  = document.getElementById('filter-unit').value;
        var inact   = document.getElementById('filter-inactive').checked ? '1' : '';
        var url     = '/pms/material/api/suche?page='+currentPage+'&q='+encodeURIComponent(q)+'&fk_unit_id='+unitId+'&show_inactive='+inact;

        document.getElementById('mat-tbody').innerHTML = '<tr><td colspan="7" class="text-center text-muted py-3">Wird geladen…</td></tr>';
        fetch(url, {headers:{'Accept':'application/json','X-CSRF-TOKEN':csrf}})
            .then(r => r.json())
            .then(function(data) {
                lastTotal = data.total;
                var html = '';
                data.items.forEach(function(it){ html += rowHtml(it); });
                if (!html) html = '<tr><td colspan="7" class="text-center text-muted py-4">Keine Einträge gefunden.</td></tr>';
                document.getElementById('mat-tbody').innerHTML = html;
                document.getElementById('mat-count').textContent = data.total + ' Artikel';
                renderPagination(data.page, data.last_page);
            });
    };

    function renderPagination(page, lastPage) {
        var el = document.getElementById('mat-pagination');
        if (lastPage <= 1) { el.innerHTML = ''; return; }
        var html = '';
        var from = Math.max(1, page - 2);
        var to   = Math.min(lastPage, page + 2);
        if (from > 1) html += '<button class="btn btn-sm btn-outline-secondary rounded-pill px-2 py-0" onclick="loadItems(1)">1</button>';
        if (from > 2) html += '<span class="text-muted small px-1">…</span>';
        for (var i = from; i <= to; i++) {
            html += '<button class="btn btn-sm '+(i===page?'btn-primary':'btn-outline-secondary')+' rounded-pill px-2 py-0" onclick="loadItems('+i+')">'+i+'</button>';
        }
        if (to < lastPage - 1) html += '<span class="text-muted small px-1">…</span>';
        if (to < lastPage)     html += '<button class="btn btn-sm btn-outline-secondary rounded-pill px-2 py-0" onclick="loadItems('+lastPage+')">'+lastPage+'</button>';
        el.innerHTML = html;
    }

    /* ── Tabellen-Klick-Handler ── */
    document.getElementById('mat-tbody').addEventListener('click', function (e) {
        var editBtn = e.target.closest('.adm-action-btn.edit');
        if (editBtn) {
            var it = JSON.parse(editBtn.dataset.item);
            openEditModal(it);
            return;
        }
        var delBtn = e.target.closest('.adm-action-btn.del');
        if (delBtn) {
            if (!confirm('Artikel "'+delBtn.dataset.name+'" löschen?')) return;
            postForm('/pms/material/'+delBtn.dataset.id+'/loeschen', {}, function(data) {
                if (data.success) loadItems(currentPage);
            });
        }
    });

    /* ── Enter in Suchfeld ── */
    document.getElementById('filter-q').addEventListener('keydown', function(e){ if(e.key==='Enter') loadItems(1); });

    /* ── Neuen Artikel öffnen ── */
    window.openCreateModal = function() {
        document.getElementById('c-short-text').value    = '';
        document.getElementById('c-article-nr').value    = '';
        document.getElementById('c-unit').value          = '';
        document.getElementById('c-supplier-code').value = '';
        document.getElementById('c-search-term').value   = '';
        document.getElementById('c-list-price').value    = '0.00';
        document.getElementById('c-purchase-price').value= '0.00';
        document.getElementById('c-active').checked      = true;
        document.getElementById('c-error').style.display = 'none';
        new bootstrap.Modal(document.getElementById('modal-create-mat')).show();
    };

    document.getElementById('btn-create-save').addEventListener('click', function () {
        var short = document.getElementById('c-short-text').value.trim();
        var errEl = document.getElementById('c-error');
        errEl.style.display = 'none';
        if (!short) { errEl.textContent = 'Kurzbezeichnung ist Pflichtfeld.'; errEl.style.display=''; return; }

        postForm('/pms/material/neu', {
            short_text:     short,
            article_nr:     document.getElementById('c-article-nr').value.trim(),
            fk_unit_id:     document.getElementById('c-unit').value,
            supplier_code:  document.getElementById('c-supplier-code').value.trim(),
            search_term:    document.getElementById('c-search-term').value.trim(),
            list_price:     document.getElementById('c-list-price').value,
            purchase_price: document.getElementById('c-purchase-price').value,
            is_active:      document.getElementById('c-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-mat')).hide();
            loadItems(1);
        });
    });

    /* ── Artikel bearbeiten ── */
    function openEditModal(it) {
        document.getElementById('e-id').value           = it.id;
        document.getElementById('e-short-text').value   = it.short_text || '';
        document.getElementById('e-article-nr').value   = it.article_nr || '';
        document.getElementById('e-unit').value         = it.fk_unit_id || '';
        document.getElementById('e-supplier-code').value= it.supplier_code || '';
        document.getElementById('e-search-term').value  = it.search_term || '';
        document.getElementById('e-list-price').value   = it.list_price || '0.00';
        document.getElementById('e-purchase-price').value = it.purchase_price || '0.00';
        document.getElementById('e-active').checked     = !!it.is_active;
        new bootstrap.Modal(document.getElementById('modal-edit-mat')).show();
    }

    document.getElementById('btn-edit-save').addEventListener('click', function () {
        var id = document.getElementById('e-id').value;
        postForm('/pms/material/'+id+'/update', {
            short_text:     document.getElementById('e-short-text').value.trim(),
            article_nr:     document.getElementById('e-article-nr').value.trim(),
            fk_unit_id:     document.getElementById('e-unit').value,
            supplier_code:  document.getElementById('e-supplier-code').value.trim(),
            search_term:    document.getElementById('e-search-term').value.trim(),
            list_price:     document.getElementById('e-list-price').value,
            purchase_price: document.getElementById('e-purchase-price').value,
            is_active:      document.getElementById('e-active').checked ? '1' : '0',
        }, function(data) {
            if (!data.success) return;
            bootstrap.Modal.getInstance(document.getElementById('modal-edit-mat')).hide();
            loadItems(currentPage);
        });
    });

    /* ── Initial laden ── */
    loadItems(1);
})();
</script>

@endsection