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

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

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-0">Mengeneinheiten</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>Einheiten
            </small>
        </div>
        <button class="btn btn-sm btn-primary rounded-pill px-3"
                data-bs-toggle="modal" data-bs-target="#modal-create-unit">
            <i class="bi bi-plus me-1"></i>Neue Einheit
        </button>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <table class="table table-sm table-hover mb-0 align-middle" id="units-table">
                <thead class="table-light">
                    <tr>
                        <th class="px-3 py-2" style="width:50px; font-size:11px; letter-spacing:.04em;">SORT</th>
                        <th class="py-2" style="width:90px; font-size:11px; letter-spacing:.04em;">KÜRZEL</th>
                        <th class="py-2" style="font-size:11px; letter-spacing:.04em;">BEZEICHNUNG</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="units-tbody">
                    @foreach($units as $unit)
                        <tr data-id="{{ $unit->id }}" class="{{ $unit->is_active ? '' : 'opacity-50' }}">
                            <td class="px-3 py-2 text-muted" style="font-size:12px;">{{ $unit->sort }}</td>
                            <td class="py-2">
                                <span class="badge bg-light text-dark border fw-semibold" style="font-size:13px; font-family:monospace; padding:3px 10px;">{{ $unit->name }}</span>
                            </td>
                            <td class="py-2" style="font-size:13px;">{{ $unit->label ?? '–' }}</td>
                            <td class="py-2 text-center">
                                @if($unit->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="{{ $unit->id }}"
                                        data-name="{{ $unit->name }}"
                                        data-label="{{ $unit->label }}"
                                        data-sort="{{ $unit->sort }}"
                                        data-active="{{ $unit->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="{{ $unit->id }}"
                                        data-name="{{ $unit->name }}"
                                        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">{{ $units->count() }} Einheiten</small>
            </div>
        </div>
    </div>

</div>

{{-- Modal: Neue Einheit --}}
<div class="modal fade" id="modal-create-unit" 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 Einheit
                </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">Kürzel <span class="text-danger">*</span></label>
                    <input type="text" id="create-unit-name" class="form-control form-control-sm"
                           maxlength="20" placeholder="z.B. m², Stk, h" style="font-family:monospace; font-size:14px;">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Bezeichnung</label>
                    <input type="text" id="create-unit-label" class="form-control form-control-sm"
                           maxlength="50" placeholder="z.B. Quadratmeter">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Sortierung</label>
                    <input type="number" id="create-unit-sort" class="form-control form-control-sm" value="99" min="0">
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="create-unit-active" checked>
                    <label class="form-check-label small" for="create-unit-active">Aktiv</label>
                </div>
                <div id="create-unit-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-unit-save">
                    <i class="bi bi-check-lg me-1"></i>Anlegen
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal: Einheit bearbeiten --}}
<div class="modal fade" id="modal-edit-unit" 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>Einheit bearbeiten
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="edit-unit-id">
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Kürzel <span class="text-danger">*</span></label>
                    <input type="text" id="edit-unit-name" class="form-control form-control-sm"
                           maxlength="20" style="font-family:monospace; font-size:14px;">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Bezeichnung</label>
                    <input type="text" id="edit-unit-label" class="form-control form-control-sm" maxlength="50">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Sortierung</label>
                    <input type="number" id="edit-unit-sort" class="form-control form-control-sm" min="0">
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="edit-unit-active">
                    <label class="form-check-label small" for="edit-unit-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-unit-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}); });
    }

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

    /* ── Klick-Handler ── */
    document.getElementById('units-tbody').addEventListener('click', function (e) {

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

        var delBtn = e.target.closest('.adm-action-btn.del');
        if (delBtn) {
            if (!confirm('Einheit "' + delBtn.dataset.name + '" löschen?\n\nAchtung: Bereits verwendete Positionen behalten den alten Wert als Text.')) return;
            postForm('/pms/einheiten/' + delBtn.dataset.id + '/loeschen', {}, function (data) {
                if (data.success) {
                    var row = document.querySelector('tr[data-id="' + delBtn.dataset.id + '"]');
                    if (row) row.remove();
                }
            });
        }
    });

    /* ── Neue Einheit ── */
    document.getElementById('btn-create-unit-save').addEventListener('click', function () {
        var name  = document.getElementById('create-unit-name').value.trim();
        var errEl = document.getElementById('create-unit-error');
        errEl.style.display = 'none';
        if (!name) { errEl.textContent = 'Kürzel ist Pflichtfeld.'; errEl.style.display = ''; return; }

        postForm('/pms/einheiten/neu', {
            name:      name,
            label:     document.getElementById('create-unit-label').value.trim(),
            sort:      document.getElementById('create-unit-sort').value,
            is_active: document.getElementById('create-unit-active').checked ? '1' : '0',
        }, function (data) {
            if (!data.success) { errEl.textContent = 'Fehler (Kürzel evtl. bereits vorhanden).'; errEl.style.display=''; return; }
            bootstrap.Modal.getInstance(document.getElementById('modal-create-unit')).hide();
            document.getElementById('create-unit-name').value  = '';
            document.getElementById('create-unit-label').value = '';
            document.getElementById('create-unit-sort').value  = '99';
            document.getElementById('create-unit-active').checked = true;

            var u = data.unit;
            var tr = document.createElement('tr');
            tr.setAttribute('data-id', u.id);
            tr.innerHTML =
                '<td class="px-3 py-2 text-muted" style="font-size:12px;">' + u.sort + '</td>' +
                '<td class="py-2"><span class="badge bg-light text-dark border fw-semibold" style="font-size:13px; font-family:monospace; padding:3px 10px;">' + esc(u.name) + '</span></td>' +
                '<td class="py-2" style="font-size:13px;">' + esc(u.label || '–') + '</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="'+u.id+'" data-name="'+esc(u.name)+'" data-label="'+esc(u.label||'')+'" data-sort="'+u.sort+'" 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="'+u.id+'" data-name="'+esc(u.name)+'" title="Löschen"><i class="bi bi-trash" style="font-size:13px;"></i></button>' +
                '</td>';
            document.getElementById('units-tbody').appendChild(tr);
        });
    });

    /* ── Einheit bearbeiten ── */
    document.getElementById('btn-edit-unit-save').addEventListener('click', function () {
        var id = document.getElementById('edit-unit-id').value;
        postForm('/pms/einheiten/' + id + '/update', {
            name:      document.getElementById('edit-unit-name').value.trim(),
            label:     document.getElementById('edit-unit-label').value.trim(),
            sort:      document.getElementById('edit-unit-sort').value,
            is_active: document.getElementById('edit-unit-active').checked ? '1' : '0',
        }, function (data) {
            if (!data.success) return;
            var u   = data.unit;
            var row = document.querySelector('tr[data-id="' + id + '"]');
            if (!row) return;
            bootstrap.Modal.getInstance(document.getElementById('modal-edit-unit')).hide();
            row.classList.toggle('opacity-50', !u.is_active);
            row.cells[0].textContent = u.sort;
            row.cells[1].innerHTML   = '<span class="badge bg-light text-dark border fw-semibold" style="font-size:13px; font-family:monospace; padding:3px 10px;">' + esc(u.name) + '</span>';
            row.cells[2].textContent = u.label || '–';
            row.cells[3].innerHTML   = u.is_active ? '<span class="sp-badge-aktiv">Aktiv</span>' : '<span class="sp-badge-inaktiv">Inaktiv</span>';
            var eb = row.querySelector('.adm-action-btn.edit');
            if (eb) { eb.dataset.name=u.name; eb.dataset.label=u.label||''; eb.dataset.sort=u.sort; eb.dataset.active=u.is_active?'1':'0'; }
        });
    });
})();
</script>

@endsection