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

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

    <div class="mb-4">
        <a href="{{ route('pms.material.index') }}" class="text-decoration-none text-muted small">
            <i class="bi bi-arrow-left me-1"></i> Zurück zum Materialkatalog
        </a>
        <h4 class="fw-bold mb-0 mt-1">
            <i class="bi bi-tags me-2 text-primary"></i>Material-Kategorien
        </h4>
        <small class="text-muted">PMS · Materialkatalog · Kategorien</small>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 d-flex align-items-center justify-content-between pt-3 pb-2 px-4">
            <span class="fw-semibold">{{ $categories->count() }} Kategorien</span>
            <button class="btn btn-primary btn-sm rounded-pill px-3" onclick="openCreate()">
                <i class="bi bi-plus me-1"></i>Neue Kategorie
            </button>
        </div>
        <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-4 py-2" style="width:70px; font-size:11px; letter-spacing:.04em;">CODE</th>
                        <th class="py-2" style="font-size:11px; letter-spacing:.04em;">NAME</th>
                        <th class="py-2 text-center" style="width:60px; font-size:11px; letter-spacing:.04em;">SORT</th>
                        <th class="py-2 text-center" style="width:80px; font-size:11px; letter-spacing:.04em;">ARTIKEL</th>
                        <th class="py-2 text-center" style="width:70px; font-size:11px; letter-spacing:.04em;">STATUS</th>
                        <th class="py-2 pe-4 text-center" style="width:80px;"></th>
                    </tr>
                </thead>
                <tbody id="cat-tbody">
                    @forelse($categories as $cat)
                    <tr data-id="{{ $cat->id }}">
                        <td class="px-4 py-2 font-monospace fw-semibold" style="font-size:13px;">{{ $cat->code }}</td>
                        <td class="py-2" style="font-size:13px;">{{ $cat->name }}</td>
                        <td class="py-2 text-center text-muted small">{{ $cat->sort }}</td>
                        <td class="py-2 text-center">
                            <span class="badge bg-secondary bg-opacity-10 text-secondary border">
                                {{ $cat->items()->where('is_deleted', 0)->count() }}
                            </span>
                        </td>
                        <td class="py-2 text-center">
                            @if($cat->is_active)
                                <span class="badge" style="background:#d1e7dd;color:#0a3622;font-size:10px;">Aktiv</span>
                            @else
                                <span class="badge" style="background:#fff3cd;color:#664d03;font-size:10px;">Inaktiv</span>
                            @endif
                        </td>
                        <td class="py-2 pe-4 text-center">
                            <button class="adm-action-btn edit"
                                data-id="{{ $cat->id }}"
                                data-code="{{ $cat->code }}"
                                data-name="{{ $cat->name }}"
                                data-sort="{{ $cat->sort }}"
                                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 }}"
                                title="Löschen">
                                <i class="bi bi-trash" style="font-size:13px;"></i>
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center text-muted py-5">Keine Kategorien vorhanden.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal: Neue Kategorie --}}
<div class="modal fade" id="modal-create-cat" 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 Kategorie</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-sm-4">
                        <label class="form-label small fw-semibold">Code <span class="text-danger">*</span></label>
                        <input type="text" id="c-code" class="form-control form-control-sm font-monospace text-uppercase" maxlength="10" placeholder="z.B. SAP">
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small fw-semibold">Sortierung</label>
                        <input type="number" id="c-sort" class="form-control form-control-sm" value="0" min="0">
                    </div>
                    <div class="col-sm-4 d-flex align-items-end pb-1">
                        <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 class="col-12">
                        <label class="form-label small fw-semibold">Name <span class="text-danger">*</span></label>
                        <input type="text" id="c-name" class="form-control form-control-sm" maxlength="100" placeholder="z.B. Sanitär — Keramik, WC & Waschtisch">
                    </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: Bearbeiten --}}
<div class="modal fade" id="modal-edit-cat" 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>Kategorie 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-sm-4">
                        <label class="form-label small fw-semibold">Code <span class="text-danger">*</span></label>
                        <input type="text" id="e-code" class="form-control form-control-sm font-monospace text-uppercase" maxlength="10">
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label small fw-semibold">Sortierung</label>
                        <input type="number" id="e-sort" class="form-control form-control-sm" min="0">
                    </div>
                    <div class="col-sm-4 d-flex align-items-end pb-1">
                        <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 class="col-12">
                        <label class="form-label small fw-semibold">Name <span class="text-danger">*</span></label>
                        <input type="text" id="e-name" class="form-control form-control-sm" maxlength="100">
                    </div>
                </div>
                <div id="e-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-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; }
</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] === 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, message: 'Netzwerkfehler.' }); });
    }

    // Anlegen
    window.openCreate = function () {
        document.getElementById('c-code').value  = '';
        document.getElementById('c-name').value  = '';
        document.getElementById('c-sort').value  = '0';
        document.getElementById('c-active').checked = true;
        document.getElementById('c-error').style.display = 'none';
        new bootstrap.Modal(document.getElementById('modal-create-cat')).show();
    };

    document.getElementById('btn-create-save').addEventListener('click', function () {
        var errEl = document.getElementById('c-error');
        errEl.style.display = 'none';
        postForm('{{ route('pms.material.categories.store') }}', {
            code:      document.getElementById('c-code').value.trim(),
            name:      document.getElementById('c-name').value.trim(),
            sort:      document.getElementById('c-sort').value,
            is_active: document.getElementById('c-active').checked ? '1' : '0',
        }, function (data) {
            if (!data.success) {
                errEl.textContent = data.message || 'Fehler beim Anlegen.';
                errEl.style.display = '';
                return;
            }
            bootstrap.Modal.getInstance(document.getElementById('modal-create-cat')).hide();
            location.reload();
        });
    });

    // Bearbeiten
    document.getElementById('cat-tbody').addEventListener('click', function (e) {
        var editBtn = e.target.closest('.adm-action-btn.edit');
        if (editBtn) {
            document.getElementById('e-id').value    = editBtn.dataset.id;
            document.getElementById('e-code').value  = editBtn.dataset.code;
            document.getElementById('e-name').value  = editBtn.dataset.name;
            document.getElementById('e-sort').value  = editBtn.dataset.sort;
            document.getElementById('e-active').checked = editBtn.dataset.active === '1';
            document.getElementById('e-error').style.display = 'none';
            new bootstrap.Modal(document.getElementById('modal-edit-cat')).show();
            return;
        }

        var delBtn = e.target.closest('.adm-action-btn.del');
        if (delBtn) {
            if (!confirm('Kategorie "' + delBtn.dataset.name + '" wirklich löschen?')) return;
            postForm('/pms/material/kategorien/' + delBtn.dataset.id + '/loeschen', {}, function (data) {
                if (!data.success) {
                    alert(data.message || 'Löschen nicht möglich.');
                    return;
                }
                delBtn.closest('tr').remove();
            });
        }
    });

    document.getElementById('btn-edit-save').addEventListener('click', function () {
        var id    = document.getElementById('e-id').value;
        var errEl = document.getElementById('e-error');
        errEl.style.display = 'none';
        postForm('/pms/material/kategorien/' + id + '/update', {
            code:      document.getElementById('e-code').value.trim(),
            name:      document.getElementById('e-name').value.trim(),
            sort:      document.getElementById('e-sort').value,
            is_active: document.getElementById('e-active').checked ? '1' : '0',
        }, function (data) {
            if (!data.success) {
                errEl.textContent = data.message || 'Fehler beim Speichern.';
                errEl.style.display = '';
                return;
            }
            bootstrap.Modal.getInstance(document.getElementById('modal-edit-cat')).hide();
            location.reload();
        });
    });
})();
</script>

@endsection