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

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

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-0">Kategorien</h4>
            <small class="text-muted">
                <a href="{{ route('pms.service-positions.index') }}" class="text-muted text-decoration-none">
                    Leistungspositionen
                </a>
                <i class="bi bi-chevron-right mx-1" style="font-size:10px;"></i>Kategorien / Gewerke
            </small>
        </div>
        <button class="btn btn-sm btn-primary rounded-pill px-3"
                data-bs-toggle="modal" data-bs-target="#modal-create-cat">
            <i class="bi bi-plus me-1"></i>Neue Kategorie
        </button>
    </div>

    {{-- Tabelle --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            @if($categories->isEmpty())
                <div class="text-center text-muted py-5">
                    <i class="bi bi-inbox d-block fs-3 mb-2 opacity-25"></i>
                    Keine Kategorien vorhanden.
                </div>
            @else
                <table class="table table-sm table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th class="px-3 py-2" style="width:80px; font-size:11px; letter-spacing:.04em;">NR.</th>
                            <th class="py-2" style="font-size:11px; letter-spacing:.04em;">BEZEICHNUNG</th>
                            <th class="py-2 text-center" style="width:90px; font-size:11px; letter-spacing:.04em;">POSITIONEN</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="cat-tbody">
                        @foreach($categories as $cat)
                            <tr data-id="{{ $cat->id }}" class="{{ $cat->is_active ? '' : 'opacity-50' }}">
                                <td class="px-3 py-2">
                                    <span class="badge bg-light text-dark border fw-semibold" style="font-size:12px; font-family:monospace;">{{ $cat->trade_nr }}</span>
                                </td>
                                <td class="py-2" style="font-size:13px;">{{ $cat->name }}</td>
                                <td class="py-2 text-center" style="font-size:12px;">
                                    <span class="text-muted">{{ number_format($cat->active_count) }}</span>
                                    <span class="text-muted" style="font-size:10px;">/ {{ number_format($cat->total_count) }}</span>
                                </td>
                                <td class="py-2 text-center">
                                    @if($cat->is_active)
                                        <span class="sp-badge-aktiv">Aktiv</span>
                                    @else
                                        <span class="sp-badge-inaktiv">Inaktiv</span>
                                    @endif
                                </td>
                                <td class="py-2 text-center pe-2">
                                    <button class="adm-action-btn edit"
                                            data-id="{{ $cat->id }}"
                                            data-trade-nr="{{ $cat->trade_nr }}"
                                            data-name="{{ $cat->name }}"
                                            data-active="{{ $cat->is_active ? '1' : '0' }}"
                                            title="Bearbeiten">
                                        <i class="bi bi-pencil-square" style="font-size:13px;"></i>
                                    </button>
                                    <button class="adm-action-btn del"
                                            data-id="{{ $cat->id }}"
                                            data-name="{{ $cat->name }}"
                                            data-count="{{ $cat->total_count }}"
                                            title="Löschen">
                                        <i class="bi bi-trash" style="font-size:13px;"></i>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="px-3 py-2 border-top">
                    <small class="text-muted">{{ $categories->count() }} Kategorien</small>
                </div>
            @endif
        </div>
    </div>

</div>

{{-- ══ Modal: Neue Kategorie ══ --}}
<div class="modal fade" id="modal-create-cat" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <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 Kategorie
                </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-Nr. <span class="text-danger">*</span></label>
                    <input type="text" id="create-cat-nr" class="form-control form-control-sm"
                           maxlength="3" placeholder="z.B. 012" style="font-family:monospace;">
                    <div class="form-text">3 Zeichen, z.B. 012, 080</div>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Bezeichnung <span class="text-danger">*</span></label>
                    <input type="text" id="create-cat-name" class="form-control form-control-sm" maxlength="100">
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="create-cat-active" checked>
                    <label class="form-check-label small" for="create-cat-active">Aktiv</label>
                </div>
                <div id="create-cat-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-cat-save">
                    <i class="bi bi-check-lg me-1"></i>Anlegen
                </button>
            </div>
        </div>
    </div>
</div>

{{-- ══ Modal: Kategorie bearbeiten ══ --}}
<div class="modal fade" id="modal-edit-cat" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title fw-semibold">
                    <i class="bi bi-pencil me-2 text-primary"></i>Kategorie bearbeiten
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="edit-cat-id">
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Gewerk-Nr. <span class="text-danger">*</span></label>
                    <input type="text" id="edit-cat-nr" class="form-control form-control-sm"
                           maxlength="3" style="font-family:monospace;">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Bezeichnung <span class="text-danger">*</span></label>
                    <input type="text" id="edit-cat-name" class="form-control form-control-sm" maxlength="100">
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="edit-cat-active">
                    <label class="form-check-label small" for="edit-cat-active">Aktiv</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-cat-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() }}';

    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).catch(function(){ done({success:false, message:'Server-Fehler'}); });
    }

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

        var editBtn = e.target.closest('.adm-action-btn.edit');
        if (editBtn) {
            document.getElementById('edit-cat-id').value    = editBtn.dataset.id;
            document.getElementById('edit-cat-nr').value    = editBtn.dataset.tradeNr;
            document.getElementById('edit-cat-name').value  = editBtn.dataset.name;
            document.getElementById('edit-cat-active').checked = editBtn.dataset.active === '1';
            new bootstrap.Modal(document.getElementById('modal-edit-cat')).show();
            return;
        }

        var delBtn = e.target.closest('.adm-action-btn.del');
        if (delBtn) {
            var count = parseInt(delBtn.dataset.count);
            if (count > 0) {
                alert('Kategorie "' + delBtn.dataset.name + '" hat noch ' + count + ' Positionen und kann nicht gelöscht werden.\n\nBitte zuerst alle Positionen löschen oder einer anderen Kategorie zuweisen.');
                return;
            }
            if (!confirm('Kategorie "' + delBtn.dataset.name + '" wirklich löschen?')) return;

            postForm('/pms/leistungspositionen/kategorien/' + delBtn.dataset.id + '/loeschen', {}, function (data) {
                if (data.success) {
                    var row = document.querySelector('tr[data-id="' + delBtn.dataset.id + '"]');
                    if (row) row.remove();
                } else {
                    alert(data.message || 'Fehler beim Löschen.');
                }
            });
        }
    });

    /* ── Neue Kategorie ── */
    document.getElementById('btn-create-cat-save').addEventListener('click', function () {
        var nr   = document.getElementById('create-cat-nr').value.trim();
        var name = document.getElementById('create-cat-name').value.trim();
        var errEl = document.getElementById('create-cat-error');
        errEl.style.display = 'none';

        if (!nr)   { errEl.textContent = 'Gewerk-Nr. ist Pflichtfeld.'; errEl.style.display=''; return; }
        if (!name) { errEl.textContent = 'Bezeichnung ist Pflichtfeld.'; errEl.style.display=''; return; }

        postForm('/pms/leistungspositionen/kategorien/neu', {
            trade_nr:  nr,
            name:      name,
            is_active: document.getElementById('create-cat-active').checked ? '1' : '0',
        }, function (data) {
            if (!data.success) { errEl.textContent = data.message || 'Fehler.'; errEl.style.display=''; return; }

            bootstrap.Modal.getInstance(document.getElementById('modal-create-cat')).hide();
            document.getElementById('create-cat-nr').value   = '';
            document.getElementById('create-cat-name').value = '';
            document.getElementById('create-cat-active').checked = true;
            errEl.style.display = 'none';

            // Zeile einfügen
            var cat  = data.category;
            var tbody = document.getElementById('cat-tbody');
            var tr   = document.createElement('tr');
            tr.setAttribute('data-id', cat.id);
            tr.innerHTML =
                '<td class="px-3 py-2"><span class="badge bg-light text-dark border fw-semibold" style="font-size:12px; font-family:monospace;">' + cat.trade_nr + '</span></td>' +
                '<td class="py-2" style="font-size:13px;">' + cat.name + '</td>' +
                '<td class="py-2 text-center" style="font-size:12px;"><span class="text-muted">0</span> <span class="text-muted" style="font-size:10px;">/ 0</span></td>' +
                '<td class="py-2 text-center"><span class="sp-badge-aktiv">Aktiv</span></td>' +
                '<td class="py-2 text-center pe-2">' +
                    '<button class="adm-action-btn edit" data-id="' + cat.id + '" data-trade-nr="' + cat.trade_nr + '" data-name="' + cat.name + '" data-active="1" title="Bearbeiten"><i class="bi bi-pencil-square" style="font-size:13px;"></i></button>' +
                    '<button class="adm-action-btn del"  data-id="' + cat.id + '" data-name="' + cat.name + '" data-count="0" title="Löschen"><i class="bi bi-trash" style="font-size:13px;"></i></button>' +
                '</td>';
            tbody.appendChild(tr);
        });
    });

    /* ── Kategorie bearbeiten ── */
    document.getElementById('btn-edit-cat-save').addEventListener('click', function () {
        var id = document.getElementById('edit-cat-id').value;

        postForm('/pms/leistungspositionen/kategorien/' + id + '/update', {
            trade_nr:  document.getElementById('edit-cat-nr').value.trim(),
            name:      document.getElementById('edit-cat-name').value.trim(),
            is_active: document.getElementById('edit-cat-active').checked ? '1' : '0',
        }, function (data) {
            if (!data.success) return;
            var cat = data.category;
            bootstrap.Modal.getInstance(document.getElementById('modal-edit-cat')).hide();

            var row = document.querySelector('tr[data-id="' + id + '"]');
            if (!row) return;

            row.classList.toggle('opacity-50', !cat.is_active);
            row.cells[0].innerHTML = '<span class="badge bg-light text-dark border fw-semibold" style="font-size:12px; font-family:monospace;">' + cat.trade_nr + '</span>';
            row.cells[1].textContent = cat.name;
            row.cells[3].innerHTML   = cat.is_active
                ? '<span class="sp-badge-aktiv">Aktiv</span>'
                : '<span class="sp-badge-inaktiv">Inaktiv</span>';

            // Edit-Button data-attrs aktualisieren
            var editBtn = row.querySelector('.adm-action-btn.edit');
            if (editBtn) {
                editBtn.dataset.tradeNr = cat.trade_nr;
                editBtn.dataset.name    = cat.name;
                editBtn.dataset.active  = cat.is_active ? '1' : '0';
            }
        });
    });
})();
</script>

@endsection