@extends('layouts.app')

@section('title', 'Workflow Kanban Board')

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-white">Workflow Stage Kanban Board</h1>
            <p class="text-xs text-slate-500">Visual application movement across workflow processing stages.</p>
        </div>

        <a href="{{ route('app.applications.index') }}" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold text-xs rounded-xl">Application Directory</a>
    </div>

    <!-- Kanban Stage Columns (Requirement 90) -->
    <div class="flex space-x-4 rtl:space-x-reverse overflow-x-auto pb-6 text-xs">
        @foreach($stages as $stg)
            @php $stgApps = $applications->get($stg->id, collect()); @endphp
            <div class="w-80 flex-shrink-0 bg-slate-100 dark:bg-slate-900 rounded-3xl p-4 space-y-4 border border-slate-200 dark:border-slate-800">
                <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 pb-2">
                    <span class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-[11px]">{{ $stg->stage_name_en }}</span>
                    <span class="px-2 py-0.5 rounded-full bg-sky-100 text-sky-700 font-bold font-mono text-[10px]">{{ $stgApps->count() }}</span>
                </div>

                <div class="space-y-3">
                    @foreach($stgApps as $app)
                        <div class="bg-white dark:bg-slate-800 rounded-2xl p-4 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-2">
                            <div class="flex justify-between items-center">
                                <a href="{{ route('app.applications.show', $app->id) }}" class="font-mono font-extrabold text-sky-600 hover:underline text-xs">{{ $app->application_number }}</a>
                                <span class="px-2 py-0.5 rounded text-[9px] uppercase font-bold {{ $app->priority === 'urgent' ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-600' }}">{{ $app->priority }}</span>
                            </div>
                            <span class="font-bold text-slate-900 dark:text-white block">{{ $app->customer ? $app->customer->full_name_en : 'N/A' }}</span>
                            <span class="text-[10px] text-slate-400 font-bold block">{{ $app->service ? $app->service->name_en : 'Service' }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection