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

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

    <div class="mb-4">
        <small class="text-muted">PMS · Stammdaten</small>
        <h4 class="fw-bold mb-0 mt-1">
            <i class="bi bi-three-dots me-2 text-primary"></i>Sonstige Positionen
        </h4>
        <small class="text-muted">An-/Abfahrt, Entsorgung, Genehmigungen und sonstige Kosten</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">{{ $items->count() }} Positionen</span>
            <button class="btn btn-primary btn-sm rounded-pill px-3" onclick="openCreate()">
                <i class="bi bi-plus me-1"></i>Neue Position
            </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" style="font-size:11px; letter-spacing:.04em;">BESCHREIBUNG</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: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="items-tbody">
                    @forelse($items as $item)
                    <tr data-id="{{ $item->id }}">
                        <td class="px-4 py-2 font-monospace fw-semibold" style="font-size:13px;">{{ $item->code }}</td>
                        <td class="py-2" style="font-size:13px;">{{ $item->name }}</td>
                        <td class="py-2 text-muted small">{{ $item->description }}</td>
                        <td class="py-2 text-center text-muted small">{{ $item->sort }}</td>
                        <td class="py-2 text-center">
                            @if($item->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="{{ $item->id }}"
                                data-code="{{ $item->code }}"
                                data-name="{{ $item->name }}"
                                data-description="{{ $item->description }}"
                                data-sort="{{ $item->sort }}"
                                data-active="{{ $item->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="{{ $item->id }}"
                                data-name="{{ $item->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 sonstigen Positionen vorhanden.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal: Neu --}}
<div class="modal fade" id="modal-create" 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 sonstige Position</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. 001">
                    </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. An- und Abfahrt">
                    </div>
                    <div class="col-12">
                        <label class="form-label small fw-semibold">Beschreibung</label>
                        <input type="text" id="c-description" class="form-control form-control-sm" maxlength="200">
                    </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" 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="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 class="col-12">
                        <label class="form-label small fw-semibold">Beschreibung</label>
                        <input type="text" id="e-description" class="form-control form-control-sm" maxlength="200">
                    </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.' }); });
    }

    window.openCreate = function () {
        ['c-code','c-name','c-description'].forEach(function(id){ document.getElementById(id).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')).show();
    };

    document.getElementById('btn-create-save').addEventListener('click', function () {
        var errEl = document.getElementById('c-error');
        errEl.style.display = 'none';
        postForm('{{ route("pms.misc-items.store") }}', {
            code:        document.getElementById('c-code').value.trim(),
            name:        document.getElementById('c-name').value.trim(),
            description: document.getElementById('c-description').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.'; errEl.style.display = ''; return; }
            bootstrap.Modal.getInstance(document.getElementById('modal-create')).hide();
            location.reload();
        });
    });

    document.getElementById('items-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-description').value = editBtn.dataset.description;
            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')).show();
            return;
        }
        var delBtn = e.target.closest('.adm-action-btn.del');
        if (delBtn) {
            if (!confirm('Position "' + delBtn.dataset.name + '" wirklich löschen?')) return;
            postForm('/pms/stammdaten/sonstiges/' + 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/stammdaten/sonstiges/' + id + '/update', {
            code:        document.getElementById('e-code').value.trim(),
            name:        document.getElementById('e-name').value.trim(),
            description: document.getElementById('e-description').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.'; errEl.style.display = ''; return; }
            bootstrap.Modal.getInstance(document.getElementById('modal-edit')).hide();
            location.reload();
        });
    });
})();
</script>

@endsection