@extends('layouts.app', ['title' => 'Dienstleistungen / Workflow'])
@section('content')

{{-- Neue Station Modal (dynamisch befüllt per JS) --}}
<div class="modal fade" id="station-modal" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="station-form" method="POST">
                @csrf
                <input type="hidden" name="fk_workflow_id" id="sm-workflow-id">
                <input type="hidden" name="id" id="sm-station-id">
                <div class="modal-header">
                    <h5 class="modal-title" id="sm-title">Station hinzufügen</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Abteilung</label>
                        <select name="fk_department_id" id="sm-dept" class="form-select" required>
                            <option value="">-- wählen --</option>
                            @foreach ($departments as $dept)
                                <option value="{{ $dept->department_id }}">{{ $dept->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Aufgabe / Beschreibung</label>
                        <textarea name="aufgabe" id="sm-aufgabe" class="form-control" rows="3"
                            placeholder="Was soll diese Abteilung tun?"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>Speichern</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Neuer Workflow Modal --}}
<div class="modal fade" id="workflow-modal" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ route('system.workflow.new') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Neuer Workflow</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Name</label>
                        <input type="text" name="name" class="form-control" placeholder="z.B. Angebot Standard" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Typ</label>
                        <select name="type" class="form-select" required>
                            <option value="angebot">Angebot</option>
                            <option value="auftrag">Auftrag</option>
                            <option value="rechnung_ein">Rechnung Eingang</option>
                            <option value="rechnung_aus">Rechnung Ausgang</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-success"><i class="bi bi-plus-square me-1"></i>Erstellen</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Header --}}
<div class="row mb-3 align-items-center">
    <div class="col">
        @include('layouts.breadcrumb', ['crumbs' => ['System', 'Dienstleistungen']])
    </div>
    <div class="col-auto">
        <button class="btn btn-success shadow" data-bs-toggle="modal" data-bs-target="#workflow-modal">
            <i class="bi bi-plus-square"></i> Neuer Workflow
        </button>
    </div>
</div>

@if (session('msg'))
    <div class="alert alert-success alert-dismissible" id="success-alert">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <p class="text-center mb-0">{{ session('msg') }}</p>
    </div>
@endif

{{-- Typ-Labels --}}
@php
$typeLabels = [
    'angebot'      => ['label' => 'Angebot',           'color' => 'primary'],
    'auftrag'      => ['label' => 'Auftrag',            'color' => 'warning'],
    'rechnung_ein' => ['label' => 'Rechnung Eingang',   'color' => 'success'],
    'rechnung_aus' => ['label' => 'Rechnung Ausgang',   'color' => 'danger'],
];
@endphp

{{-- Workflow-Gruppen --}}
@foreach ($typeLabels as $type => $info)
    @php $group = $workflows->where('type', $type); @endphp

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white border-bottom d-flex align-items-center gap-2 py-2">
            <span class="badge bg-{{ $info['color'] }}">{{ $info['label'] }}</span>
            <span class="fw-semibold">Workflows</span>
            <span class="badge bg-secondary ms-1">{{ $group->count() }}</span>
        </div>
        <div class="card-body p-0">
            @if ($group->isEmpty())
                <p class="text-muted text-center py-3 mb-0 small">Noch kein Workflow vorhanden</p>
            @else
                <div class="accordion accordion-flush" id="acc-{{ $type }}">
                    @foreach ($group as $wf)
                        <div class="accordion-item border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed fw-semibold" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#wf-{{ $wf->id }}">
                                    <i class="bi bi-diagram-3 me-2 text-{{ $info['color'] }}"></i>
                                    {{ $wf->name }}
                                    <span class="badge bg-secondary ms-2">{{ $wf->stations->count() }} Stationen</span>
                                </button>
                            </h2>
                            <div id="wf-{{ $wf->id }}" class="accordion-collapse collapse">
                                <div class="accordion-body p-3">

                                    {{-- Stationen --}}
                                    @if ($wf->stations->isEmpty())
                                        <p class="text-muted small mb-2">Noch keine Stationen definiert.</p>
                                    @else
                                        @php $stations = $wf->stations; @endphp
                                        <div class="d-flex flex-column mb-3">
                                            @foreach ($stations as $i => $station)
                                                @php
                                                    $prev = $i > 0 ? $stations[$i - 1] : null;
                                                    $next = $i < $stations->count() - 1 ? $stations[$i + 1] : null;
                                                @endphp

                                                {{-- Station Card --}}
                                                <div class="d-flex align-items-stretch gap-2">

                                                    {{-- Sort Controls --}}
                                                    <div class="d-flex flex-column align-items-center justify-content-center gap-1 flex-shrink-0 py-2">
                                                        <form action="{{ route('system.workflow.station.sort') }}" method="POST">
                                                            @csrf
                                                            <input type="hidden" name="id" value="{{ $station->id }}">
                                                            <input type="hidden" name="direction" value="up">
                                                            <button class="btn btn-sm p-0 text-muted" {{ $loop->first ? 'disabled' : '' }}>
                                                                <i class="bi bi-chevron-up"></i>
                                                            </button>
                                                        </form>
                                                        <span class="badge rounded-pill fw-bold" style="background:#4a9eff;min-width:26px;">{{ $station->sort_order }}</span>
                                                        <form action="{{ route('system.workflow.station.sort') }}" method="POST">
                                                            @csrf
                                                            <input type="hidden" name="id" value="{{ $station->id }}">
                                                            <input type="hidden" name="direction" value="down">
                                                            <button class="btn btn-sm p-0 text-muted" {{ $loop->last ? 'disabled' : '' }}>
                                                                <i class="bi bi-chevron-down"></i>
                                                            </button>
                                                        </form>
                                                    </div>

                                                    {{-- Card --}}
                                                    <div class="flex-grow-1 border rounded p-2 bg-white shadow-sm">
                                                        {{-- Davor --}}
                                                        <div class="text-muted small mb-1">
                                                            @if ($prev)
                                                                <i class="bi bi-arrow-up-circle text-secondary me-1"></i>
                                                                <span>Davor: <b>{{ $prev->department->name ?? '—' }}</b></span>
                                                            @else
                                                                <i class="bi bi-flag text-success me-1"></i>
                                                                <span class="text-success fw-semibold">Start</span>
                                                            @endif
                                                        </div>

                                                        {{-- Aktuelle Station --}}
                                                        <div class="d-flex align-items-center gap-2 my-1">
                                                            <i class="bi bi-building fs-5 text-primary"></i>
                                                            <span class="fw-semibold">{{ $station->department->name ?? '—' }}</span>
                                                            <div class="ms-auto d-flex gap-1">
                                                                <button class="btn btn-sm btn-outline-secondary"
                                                                    onclick="editStation({{ $station->id }}, {{ $station->fk_department_id }}, {{ json_encode($station->aufgabe) }}, {{ $wf->id }})">
                                                                    <i class="bi bi-pencil"></i>
                                                                </button>
                                                                <form action="{{ route('system.workflow.station.delete') }}" method="POST"
                                                                    onsubmit="return confirm('Station löschen?')">
                                                                    @csrf
                                                                    <input type="hidden" name="id" value="{{ $station->id }}">
                                                                    <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                                                </form>
                                                            </div>
                                                        </div>
                                                        @if ($station->aufgabe)
                                                            <div class="text-muted small px-1 mb-1">
                                                                <i class="bi bi-card-text me-1"></i>{{ $station->aufgabe }}
                                                            </div>
                                                        @endif

                                                        {{-- Danach --}}
                                                        <div class="text-muted small mt-1">
                                                            @if ($next)
                                                                <i class="bi bi-arrow-down-circle text-secondary me-1"></i>
                                                                <span>Danach: <b>{{ $next->department->name ?? '—' }}</b></span>
                                                            @else
                                                                <i class="bi bi-check-circle text-success me-1"></i>
                                                                <span class="text-success fw-semibold">Ende</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- Pfeil zwischen Stationen --}}
                                                @if (!$loop->last)
                                                    <div class="text-center py-1" style="margin-left:38px;">
                                                        <i class="bi bi-arrow-down fs-5" style="color:#4a9eff;"></i>
                                                    </div>
                                                @endif

                                            @endforeach
                                        </div>
                                    @endif

                                    {{-- Station hinzufügen --}}
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-sm btn-outline-primary"
                                            onclick="addStation({{ $wf->id }})">
                                            <i class="bi bi-plus-circle me-1"></i> Station hinzufügen
                                        </button>
                                        <form action="{{ route('system.workflow.delete') }}" method="POST"
                                            onsubmit="return confirm('Workflow löschen?')">
                                            @csrf
                                            <input type="hidden" name="id" value="{{ $wf->id }}">
                                            <button class="btn btn-sm btn-outline-danger">
                                                <i class="bi bi-trash me-1"></i> Workflow löschen
                                            </button>
                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
@endforeach

<script>
    function addStation(workflowId) {
        document.getElementById('sm-title').innerText = 'Station hinzufügen';
        document.getElementById('sm-workflow-id').value = workflowId;
        document.getElementById('sm-station-id').value = '';
        document.getElementById('sm-dept').value = '';
        document.getElementById('sm-aufgabe').value = '';
        document.getElementById('station-form').action = '{{ route('system.workflow.station.new') }}';
        new bootstrap.Modal(document.getElementById('station-modal')).show();
    }

    function editStation(stationId, deptId, aufgabe, workflowId) {
        document.getElementById('sm-title').innerText = 'Station bearbeiten';
        document.getElementById('sm-workflow-id').value = workflowId;
        document.getElementById('sm-station-id').value = stationId;
        document.getElementById('sm-dept').value = deptId;
        document.getElementById('sm-aufgabe').value = aufgabe || '';
        document.getElementById('station-form').action = '{{ route('system.workflow.station.update') }}';
        new bootstrap.Modal(document.getElementById('station-modal')).show();
    }

    setTimeout(() => {
        const alert = document.getElementById('success-alert');
        if (alert) alert.style.display = 'none';
    }, 3000);
</script>

@endsection