@extends('layouts.app', ['title' => 'PMS | Status verwalten'])
@section('content')

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

    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-0">PMS Status verwalten</h4>
            <small class="text-muted">Angebot-, Auftrags- und Abteilungs-Status bearbeiten</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

    <div class="row g-4">

        @foreach([
            ['offer', 'Angebot-Status',    'primary',   'file-earmark-text', $offer_statuses],
            ['order', 'Auftrags-Status',   'success',   'clipboard-check',   $order_statuses],
            ['dept',  'Abteilungs-Status', 'secondary', 'diagram-3',         $dept_statuses],
        ] as [$type, $title, $color, $icon, $statuses])
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header border-0 bg-white pt-3 pb-2 px-4">
                    <div class="d-flex align-items-center justify-content-between">
                        <span class="badge bg-{{ $color }} bg-opacity-10 text-{{ $color }} px-2 py-1 rounded-pill small fw-semibold">
                            <i class="bi bi-{{ $icon }} me-1"></i>{{ $title }}
                        </span>
                        <button class="btn btn-sm btn-{{ $color }} rounded-pill px-3"
                                data-bs-toggle="modal" data-bs-target="#addModal-{{ $type }}">
                            <i class="bi bi-plus me-1"></i>Neu
                        </button>
                    </div>
                    <div class="mt-2">
                        <small class="text-muted">{{ $statuses->count() }} Einträge</small>
                    </div>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @forelse($statuses as $s)
                            <li class="list-group-item border-0 px-3 py-2">
                                <div class="d-flex align-items-center gap-2">
                                    {{-- ID / Sort --}}
                                    <span class="text-muted flex-shrink-0" style="font-size:11px; width:20px;">{{ $s->sort }}</span>

                                    {{-- Name --}}
                                    <span class="small fw-medium flex-grow-1">{{ $s->name }}</span>

                                    {{-- Farb-Badge --}}
                                    <span class="badge bg-{{ $s->color }} rounded-pill px-2 flex-shrink-0" style="font-size:11px;">
                                        {{ $s->color }}
                                    </span>

                                    {{-- Actions --}}
                                    <button type="button"
                                            class="btn btn-light btn-sm border-0 rounded-circle p-0 flex-shrink-0"
                                            style="width:26px;height:26px;"
                                            onclick="openEdit({{ $s->id }}, '{{ addslashes($s->name) }}', '{{ $s->color }}', {{ $s->sort }})">
                                        <i class="bi bi-pencil" style="font-size:11px;"></i>
                                    </button>
                                    <form method="POST" action="{{ route('system.pms.status.destroy', $s->id) }}"
                                          class="d-inline flex-shrink-0" onsubmit="return confirm('Status löschen?')">
                                        @csrf @method('DELETE')
                                        <button type="submit"
                                                class="btn btn-light btn-sm border-0 rounded-circle p-0 text-danger"
                                                style="width:26px;height:26px;">
                                            <i class="bi bi-trash" style="font-size:11px;"></i>
                                        </button>
                                    </form>
                                </div>
                            </li>
                        @empty
                            <li class="list-group-item border-0 text-center text-muted py-4 small">
                                <i class="bi bi-inbox d-block fs-4 mb-1 opacity-25"></i>Keine Einträge
                            </li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
        @endforeach

    </div>
</div>

{{-- Edit Modal --}}
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form id="editForm" method="POST">
                @csrf @method('PUT')
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title fw-bold">Status 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 text-muted">Name</label>
                        <input type="text" name="name" id="edit-name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-muted">Farbe</label>
                        <div class="d-flex flex-wrap gap-2 mt-1" id="edit-color-picker">
                            @foreach(['secondary','primary','success','danger','warning','info','dark'] as $c)
                                <label class="color-swatch" title="{{ $c }}">
                                    <input type="radio" name="color" value="{{ $c }}" class="d-none">
                                    <span class="badge bg-{{ $c }} rounded-pill px-3 py-2 cursor-pointer"
                                          style="font-size:12px; opacity:0.7;">{{ $c }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <div class="mb-1">
                        <label class="form-label small fw-semibold text-muted">Reihenfolge</label>
                        <input type="number" name="sort" id="edit-sort" class="form-control">
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-check-lg me-1"></i>Speichern
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Add Modals --}}
@foreach([
    ['offer', 'Angebot-Status',    'primary'],
    ['order', 'Auftrags-Status',   'success'],
    ['dept',  'Abteilungs-Status', 'secondary'],
] as [$type, $label, $btnColor])
<div class="modal fade" id="addModal-{{ $type }}" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form method="POST" action="{{ route('system.pms.status.store') }}">
                @csrf
                <input type="hidden" name="type" value="{{ $type }}">
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title fw-bold">Neuer {{ $label }}</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 text-muted">Name</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-muted">Farbe</label>
                        <div class="d-flex flex-wrap gap-2 mt-1">
                            @foreach(['secondary','primary','success','danger','warning','info','dark'] as $c)
                                <label class="color-swatch" title="{{ $c }}">
                                    <input type="radio" name="color" value="{{ $c }}" class="d-none"
                                           {{ $c === 'secondary' ? 'checked' : '' }}>
                                    <span class="badge bg-{{ $c }} rounded-pill px-3 py-2"
                                          style="font-size:12px; opacity:0.7; cursor:pointer;">{{ $c }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <div class="mb-1">
                        <label class="form-label small fw-semibold text-muted">Reihenfolge</label>
                        <input type="number" name="sort" class="form-control" value="99">
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="submit" class="btn btn-{{ $btnColor }} w-100">
                        <i class="bi bi-plus-lg me-1"></i>Anlegen
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach

<style>
    .color-swatch input:checked + span {
        opacity: 1 !important;
        outline: 3px solid rgba(0,0,0,0.3);
        outline-offset: 2px;
    }
    .color-swatch span:hover {
        opacity: 1 !important;
        cursor: pointer;
    }
</style>

<script>
    function openEdit(id, name, color, sort) {
        document.getElementById('edit-name').value = name;
        document.getElementById('edit-sort').value = sort;
        // Farb-Radio setzen
        document.querySelectorAll('#editModal input[name="color"]').forEach(r => {
            r.checked = r.value === color;
        });
        document.getElementById('editForm').action = '/system/pms/status/' + id;
        new bootstrap.Modal(document.getElementById('editModal')).show();
    }
</script>

@endsection