@extends('layouts.dashboard.inface', ['section' => 'prospect_workflows'])

@section('navbar-buttons')
    <a href="{{ route('realEstate.settings.prospectWorkflows.create') }}"
        class="flex h-10 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-white shadow-sm hover:bg-blue-600">
        <span class="material-symbols-outlined text-[20px]">add</span> Nuevo flujo
    </a>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto bg-background-light p-6 dark:bg-background-dark lg:p-10">
        <div class="mx-auto max-w-7xl space-y-6">
            <div>
                <nav class="mb-2 flex items-center gap-2 text-sm text-slate-500">
                    <a class="hover:text-primary" href="{{ route('realEstate.dashboard') }}">Inicio</a><span>/</span>
                    <span class="font-medium text-primary">Flujos de seguimiento</span>
                </nav>
                <h1 class="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Flujos de seguimiento</h1>
                <p class="mt-1 max-w-3xl text-sm text-slate-500 dark:text-slate-400">
                    Diseña el recorrido comercial de los vendedores y sus alternativas según el resultado de cada actividad.
                </p>
            </div>

            @if (session('success'))
                <div class="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700">{{ session('success') }}</div>
            @endif
            @if ($errors->any())
                <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ $errors->first() }}</div>
            @endif

            <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                @forelse ($items as $workflow)
                    <article class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <div class="mb-2 flex items-center gap-2">
                                    @if ($workflow->is_active)
                                        <span class="rounded-full bg-green-100 px-2.5 py-1 text-xs font-bold text-green-700">Publicado</span>
                                    @else
                                        <span class="rounded-full bg-amber-100 px-2.5 py-1 text-xs font-bold text-amber-700">Borrador</span>
                                    @endif
                                </div>
                                <h2 class="text-lg font-bold text-slate-900 dark:text-white">{{ $workflow->name }}</h2>
                                <p class="mt-1 text-xs font-medium text-slate-500">{{ $workflow->agency->name }}</p>
                            </div>
                            <span class="material-symbols-outlined rounded-lg bg-primary/10 p-2 text-primary">account_tree</span>
                        </div>
                        <p class="mt-4 min-h-10 text-sm text-slate-500 dark:text-slate-400">
                            {{ $workflow->description ?: 'Sin descripción.' }}
                        </p>
                        <div class="mt-4 flex gap-4 border-y border-slate-100 py-3 text-xs font-semibold text-slate-500 dark:border-slate-800">
                            <span>{{ $workflow->nodes_count }} nodos</span><span>{{ $workflow->transitions_count }} conexiones</span>
                        </div>
                        <div class="mt-4 flex items-center justify-end gap-2">
                            @unless ($workflow->is_active)
                                <form method="POST" action="{{ route('realEstate.settings.prospectWorkflows.publish', $workflow) }}">
                                    @csrf
                                    <button class="rounded-lg border border-green-200 px-3 py-2 text-xs font-bold text-green-700 hover:bg-green-50">Publicar</button>
                                </form>
                            @endunless
                            <a href="{{ route('realEstate.settings.prospectWorkflows.edit', $workflow) }}"
                                class="rounded-lg bg-primary px-3 py-2 text-xs font-bold text-white hover:bg-blue-600">Editar diagrama</a>
                            <form method="POST" action="{{ route('realEstate.settings.prospectWorkflows.destroy', $workflow) }}"
                                onsubmit="return confirm('¿Deseas eliminar este flujo?');">
                                @csrf @method('DELETE')
                                <button aria-label="Eliminar" class="rounded-lg p-2 text-slate-400 hover:bg-red-50 hover:text-red-600">
                                    <span class="material-symbols-outlined text-[19px]">delete</span>
                                </button>
                            </form>
                        </div>
                    </article>
                @empty
                    <div class="col-span-full rounded-xl border border-dashed border-slate-300 bg-white px-6 py-16 text-center dark:border-slate-700 dark:bg-slate-900">
                        <span class="material-symbols-outlined text-5xl text-slate-300">account_tree</span>
                        <h2 class="mt-3 text-lg font-bold text-slate-800 dark:text-white">Aún no hay flujos configurados</h2>
                        <p class="mt-1 text-sm text-slate-500">Crea el primer diagrama de seguimiento para tus vendedores.</p>
                    </div>
                @endforelse
            </div>
            {{ $items->links() }}
        </div>
    </div>
@endsection