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

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

    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-0">Projektarten</h4>
            <small class="text-muted">PMS · Einstellungen</small>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm py-2 mb-3">
            <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Neue Projektart anlegen --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white border-0 pt-3 pb-1 px-4">
            <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em;">
                <i class="bi bi-plus-circle me-1"></i>Neue Projektart
            </span>
        </div>
        <div class="card-body px-4 pb-3">
            <form action="{{ route('pms.project-types.store') }}" method="POST">
                @csrf
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">Kategorie <span class="text-danger">*</span></label>
                        <select name="fk_category_id" class="form-select" required>
                            <option value="">— wählen —</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->nr_prefix }} – {{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" placeholder="z.B. Wartung" required>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small fw-semibold">Hat LV</label>
                        <div class="form-check form-switch mt-1">
                            <input class="form-check-input" type="checkbox" name="has_lv" value="1">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-plus-lg me-1"></i>Anlegen
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Liste nach Kategorie gruppiert --}}
    @foreach($categories as $cat)
        @php $catTypes = $types->where('fk_category_id', $cat->id); @endphp
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white border-0 pt-3 pb-1 px-4 d-flex align-items-center gap-2">
                <span class="badge bg-primary bg-opacity-10 text-primary rounded-pill px-2">{{ $cat->nr_prefix }}</span>
                <span class="fw-semibold small">{{ $cat->name }}</span>
                <span class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill ms-auto">{{ $catTypes->count() }}</span>
            </div>
            <div class="card-body p-0">
                @if($catTypes->isEmpty())
                    <div class="text-muted small px-4 py-3">Keine Projektarten vorhanden.</div>
                @else
                <table class="table table-hover align-middle mb-0" style="font-size:13.5px;">
                    <thead>
                        <tr style="background:#f8f9fb;">
                            <th class="px-4 py-2 border-0 text-muted fw-semibold" style="font-size:11px;">NAME</th>
                            <th class="py-2 border-0 text-muted fw-semibold text-center" style="font-size:11px; width:80px;">HAT LV</th>
                            <th class="py-2 border-0 text-muted fw-semibold pe-4 text-end" style="font-size:11px; width:100px;">AKTIONEN</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($catTypes->sortBy('sort') as $type)
                        <tr id="row-{{ $type->id }}">
                            <td class="px-4">
                                <span class="type-name-{{ $type->id }}">{{ $type->name }}</span>
                            </td>
                            <td class="text-center" id="lv-cell-{{ $type->id }}">
                                @if($type->has_lv)
                                    <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-2" style="font-size:11px;">Ja</span>
                                @else
                                    <span class="text-muted small">—</span>
                                @endif
                            </td>
                            <td class="pe-4 text-end">
                                <div class="d-flex gap-1 justify-content-end">
                                    <button class="btn btn-light btn-sm rounded-pill border px-2"
                                            onclick="editType({{ $type->id }}, '{{ addslashes($type->name) }}', {{ $type->has_lv ? 1 : 0 }})"
                                            title="Bearbeiten">
                                        <i class="bi bi-pencil" style="font-size:12px;"></i>
                                    </button>
                                    <button class="btn btn-light btn-sm rounded-pill border px-2 text-danger"
                                            onclick="deleteType({{ $type->id }}, '{{ addslashes($type->name) }}')"
                                            title="Löschen">
                                        <i class="bi bi-trash" style="font-size:12px;"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @endif
            </div>
        </div>
    @endforeach
</div>

{{-- Edit Modal --}}
<div class="modal fade" id="edit-modal" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-bold"><i class="bi bi-pencil me-2 text-warning"></i>Projektart bearbeiten</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-2">
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Name <span class="text-danger">*</span></label>
                    <input type="text" id="edit-name" class="form-control">
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="edit-has-lv">
                    <label class="form-check-label small">Hat LV</label>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary rounded-pill px-4" id="edit-save-btn">
                    <i class="bi bi-check-lg me-1"></i>Speichern
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Delete Confirm Modal --}}
<div class="modal fade" id="delete-modal" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-bold text-danger"><i class="bi bi-trash me-2"></i>Projektart löschen</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-2">
                <p class="text-muted small mb-0">„<strong id="delete-name"></strong>" wird gelöscht.</p>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-danger rounded-pill px-4" id="delete-confirm-btn">
                    <i class="bi bi-trash me-1"></i>Löschen
                </button>
            </div>
        </div>
    </div>
</div>

<script>
var currentId = null;

function editType(id, name, hasLv) {
    currentId = id;
    document.getElementById('edit-name').value = name;
    document.getElementById('edit-has-lv').checked = hasLv == 1;
    new bootstrap.Modal(document.getElementById('edit-modal')).show();
}

document.getElementById('edit-save-btn').addEventListener('click', function () {
    var name = document.getElementById('edit-name').value.trim();
    if (!name) return;
    fetch('{{ url('pms/projektarten') }}/' + currentId, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({
            name:   name,
            has_lv: document.getElementById('edit-has-lv').checked ? 1 : 0,
        })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            document.querySelector('.type-name-' + currentId).textContent = data.name;
            var lvCell = document.getElementById('lv-cell-' + currentId);
            lvCell.innerHTML = data.has_lv
                ? '<span class="badge bg-success bg-opacity-10 text-success rounded-pill px-2" style="font-size:11px;">Ja</span>'
                : '<span class="text-muted small">—</span>';
            bootstrap.Modal.getInstance(document.getElementById('edit-modal')).hide();
        }
    });
});

function deleteType(id, name) {
    currentId = id;
    document.getElementById('delete-name').textContent = name;
    new bootstrap.Modal(document.getElementById('delete-modal')).show();
}

document.getElementById('delete-confirm-btn').addEventListener('click', function () {
    fetch('{{ url('pms/projektarten') }}/' + currentId, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            document.getElementById('row-' + currentId).remove();
            bootstrap.Modal.getInstance(document.getElementById('delete-modal')).hide();
        }
    });
});
</script>

@endsection