@extends('layouts.app')

@section('title', 'Approval Hierarchy · ' . config('app.name'))
@section('page-title', 'Approval Hierarchy')

@section('content')
    <div class="card mb-3">
        <div class="card-header bg-white d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <span class="fw-semibold">Approval Hierarchy</span>
                <div class="text-secondary small">The draft &rarr; sign-off chain a document follows for this department.</div>
            </div>
            <div class="d-flex gap-2 align-items-center">
                @if($departments->isNotEmpty())
                    <form method="GET" class="d-flex gap-2">
                        <select name="department_id" class="form-select form-select-sm" onchange="this.form.submit()">
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}" @selected($department && $department->id === $dept->id)>{{ $dept->name }}</option>
                            @endforeach
                        </select>
                    </form>
                @endif
                @if($department)
                    <a href="{{ route('admin.workflow-stages.create', ['department_id' => $department->id]) }}" class="btn btn-sm btn-primary">
                        <i class="bi bi-plus-lg"></i> Add Stage
                    </a>
                @endif
            </div>
        </div>
        <div class="card-body">
            @if(! $department)
                <p class="text-secondary small mb-0">No department to show yet.</p>
            @elseif($stages->isEmpty())
                <p class="text-secondary small mb-0">No hierarchy configured for {{ $department->name }} yet. Add the first stage (e.g. the person who drafts the document) to get started.</p>
            @else
                <div class="d-flex flex-column align-items-start gap-2">
                    @foreach($stages as $stage)
                        <div class="border rounded p-2" style="min-width: 260px;">
                            <div class="d-flex justify-content-between align-items-start gap-2 mb-1">
                                <div>
                                    <span class="badge bg-secondary-subtle text-secondary">Stage {{ $loop->iteration }}</span>
                                    <div class="fw-semibold small mt-1">{{ $stage->name }}</div>
                                </div>
                            </div>
                            <div class="d-flex flex-wrap gap-1 mb-2">
                                @foreach($stage->designations as $designation)
                                    <span class="badge bg-primary-subtle text-primary">{{ $designation->name }}</span>
                                @endforeach
                            </div>
                            <div class="d-flex gap-1">
                                <a href="{{ route('admin.workflow-stages.edit', $stage) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-pencil"></i></a>
                                <form method="POST" action="{{ route('admin.workflow-stages.destroy', $stage) }}" onsubmit="return confirm('Remove this stage?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                </form>
                            </div>
                        </div>
                        @unless($loop->last)
                            <div class="d-flex justify-content-center text-secondary fs-4" style="width: 260px;">
                                <i class="bi bi-arrow-down"></i>
                            </div>
                        @endunless
                    @endforeach
                </div>
            @endif
        </div>
    </div>

    @if($department)
        <p class="text-secondary small">
            This is used on the Upload Document page: staff holding one of a stage's designations are grouped and shown in this order, with a checkbox to pick who fills that stage for a given document.
        </p>
    @endif
@endsection