@extends('layouts.base')
@section('heading')
    {{ __('Processes') }}
@endsection
@section('info')
    Your processes
@endsection
@section('return-link')
    <div>
        <a href="{{ route('dashboard') }}">
            HOME
        </a>
    </div>
@endsection
@section('center-focus-activity')
    {{-- MIDDLE ACTION --}}
@endsection
@section('seconday-activity')
<div class="inline">
    <form action="{{ route('processes.index') }}" method="get">
        <div class="inline-block mr-2">
            <input type="text" name="s" id="s" placeholder="process name" value="{{ $search_term ?? '' }}" class="rounded-lg h-7_">
        </div>
        <div class="inline-block mr-2">
            <button type="submit" class="w-full text-white rounded-lg py-2 px-3 bg-blue-500 hover:bg-blue-400">SEARCH</button>
        </div>
    </form>
</div>
@endsection
@section('focus_action')
    <form action="{{ route('processes.create') }}" method="get">
        @csrf
        <button type="submit" class="text-sm text-blue-500 hover:text-blue-700">
            ADD A NEW PROCESS +
        </button>
    </form>
@endsection
@section('body')
    <div>
        <div class="p-2 sm:grid sm:grid-cols-3 md:grid-cols-3_ gap-2">
            @php
                $n = 0;
            @endphp
            @foreach ($processes as $process)
                @php
                    $process = CamundaProcess::objCamundaProcess($process);

                    @endphp
                <div class="m-2_">
                    {{-- {{ $n++;}} --}}
                    {{-- @dump($process) --}}
                    <a href="{{ route('processes.show', $process->id) }}" class="group border-l-4_border-blue-500 text-black block max-w-xs_ mx-auto rounded-lg p-6 bg-white hover:bg-slate-50 ring-1 ring-slate-900/5 shadow-lg space-y-3 _hover:w-[105%] hover:ring-sky-500">
                        <div class="flex items-center_ space-x-3">
                            {{-- <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg> --}}
                            <h3 class="text-blue-500 _group-hover:text-white text-sm font-semibold">{{ $process->name ?? null }} v.{{ $process->version ?? null }}</h3>
                            {{-- {{ $process->id }} --}}
                        </div>
                        <p class="text-slate-500 _group-hover:text-white text-lg">Manage Documents for your {{ $process->name ?? null }} - <span class="text-blue-300">{{ $process->key ?? null }}</span></p>
                        {{-- @foreach ($process->tasks() as $task)

                            @php
                                dump($task);
                            @endphp

                        @endforeach --}}
                        <div class="text-xs">
                            {{ count(($process->tasks()) ?? []) }} tasks
                            <br>
                            {{-- {{ count(($process->instances()) ?? []) }} instances --}}
                            {{ $process->fetchProcessInstancesCount() ?? 0 }} instances
                        </div>

                    </a>
                </div>
            @endforeach

            @php
                $paginator = $paginator;
            @endphp
        </div>

        <div class="mx-auto">
            @include('app.components.paginator')
        </div>

    </div>
@endsection