@php
    use App\Classes\CamundaEntities;
@endphp
@extends('layouts.base')
@section('heading')
    {{ __('Task') }}: {{ ($task['name'] ?? $task->name) ?? 'not found or already completed' }}
@endsection
@section('info')
        Id: {{ ($task['id'] ?? $task->id) ?? 'not found' }}
@endsection
@section('focus_action')
    @if (($found ?? false) && !($finished ?? false))
        <div>
            <div class="mt-6_" x-data="{ open: false }">

                <!-- Button (blue), duh! -->
                <div class="text-sm text-blue-500 hover:text-blue-700"  @click="open = true">
                    COMPLETE TASK
                </div>
                <!-- Dialog (full screen) -->
                <div class="fixed top-0 left-0 flex items-center justify-center w-full h-screen z-[100]" style="background-color: rgba(0,0,0,.5);" x-show="open"  >
                    <!-- A basic modal dialog with title, body and one button to close -->
                    <div class="h-auto p-4 sm:p-6 mx-2 text-left bg-white max-w-5xl w-full rounded shadow-xl m-auto" @click.away="open = false">
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4_ sm:text-left">
                            <div class="text-xl font-semibold leading-6 text-center text-gray-300 uppercase mb-2 p-4">
                                Add variables to complete your task (optional)
                            </div>

                            <div>
                                <form action="{{ route('tasks.complete', ['task' => $task->id]) }}" method="get">
                                    @csrf
                                    <div class="" x-data="handler()">
                                        <div class="">
                                            <table class="max-w-5xl w-full bg-white">
                                            <thead class="bg-gray-800_ border-b-2 text-white_ uppercase font-semibold text-sm">
                                                <tr>
                                                    <th class="text-center p-1">#</th>
                                                    <th class="text-left py-2 px-2">variable name</th>
                                                    <th class="text-left py-2 px-2">variable value</th>
                                                    <th class="text-left py-2 px-2"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <template x-for="(field, index) in fields" :key="index">
                                                    <tr class="variable-row">
                                                        <td x-text="index + 1" class="text-left p-1 w-max">

                                                        </td>
                                                        <td class="text-center py-1 px-2">
                                                            <input x-model="field.txt1" type="text" name="txt1[]" class="w3-full_ variable-name border-0 border-b w-full" oninput="compileVariables()">
                                                        </td>
                                                        <td class="text-left py-1 px-2">
                                                            <input x-model="field.txt2" type="text" name="txt2[]" class="w3-full_ variable-value border-0 border-b w-full" oninput="compileVariables()">
                                                        </td>
                                                        <td class="text-left py-1 px-2">
                                                            <button type="button" class="p-3_ text-red-700 font-bold text-xl" @click="removeField(index)">delete</button>
                                                        </td>
                                                    </tr>
                                                </template>
                                            </tbody>
                                            <tfoot class="">
                                                <tr>
                                                    <td class="flex flex-right p-1 mt-2">
                                                        <button type="button" class="text-right p-3 py-2 bg-gray-300 hover:bg-gray-400 text-white rounded-sm" @click="addNewField()">
                                                            + Add Row
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                    <input type="hidden" name="variables" id="variables">
                                    <div class="mt-4">

                                        <button formaction="{{ route('tasks.resolve', ['task' => $task->id]) }}" type="submit" class="inline-flex justify-center w-full px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700">
                                            RESOLVE TASK
                                        </button>
                                    </div>
                                    <div class="mt-4">

                                        <button type="submit" class="inline-flex justify-center w-full px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700">
                                            COMPLETE TASK
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    @elseif(isset($history['processInstanceId']))
        <a href="{{ route('instances.show', $history['processInstanceId']) }}" class="text-blue-500 hover:underline hover:underline-offset-2">
            Back to Instance
        </a>
    @endif
@endsection
@section('body')
    <div class="m-auto py-6 grid place-content-center_">
        <div class="w-full">

            @if (($found ?? false) && (!$finished ?? false))
                <div class="mb-4 p-2 bg-white">
                    <div class="w-full p-4">
                        <div class="text-xl text-gray-400">
                            Process Definition: {{ $task->definition()->name }}
                        </div>
                        <div class="text-lg font-semibold mb-4">
                            Task Attributes:
                        </div>
                        <div class=" columns-2">

                            {{-- {{ dump($task) }} --}}
                            @foreach ($task->CamundaTask as $key => $item)
                            <div class="py-1">
                                <span class="font-semibold py-1 px-2  bg-gray-100">{{ $key }}</span>
                                @if (is_array($item) || is_object($item))
                                    @dump($item)
                                @else
                                    - {{ $item }}
                                @endif
                                 <br/>
                            </div>
                            @endforeach
                            {{-- {{ dump($task->definition()) }} --}}
                        </div>
                    </div>
                    {{-- <div class="w-full">
                        {{ $task->instance()->id }}
                    </div> --}}

                    <div class="p-4 my-2 bg-slate-200">
                        <div class="text-lg font-semibold mb-4">
                            Variables: {{ count($task->variables()) }} variables
                        </div>
                        @foreach ($task->variables() as $variable => $variableData)
                            <div class="p-2 m-2 border border-gray-500">
                                <div class="p-1 px-2 mb-1 bg-gray-100 w-max text-gray-600 font-bold">{{ $variable }}</div>
                                <div>
                                    @dump($variableData)
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div>
                        <div class="w-full p-2 bg-white">
                            <div class="text-xl font-semibold leading-6 text-gray-900 uppercase_ mb-2 p-4">
                                Assign Task to a user
                            </div>

                            @php
                                $users = CamundaEntities::users();
                            @endphp
                            <form action="{{ route('tasks.assign', ['task' => $task->id]) }}" method="get">
                                <div class="m-2 p-2">
                                    <select name="assignee_id" id="assignee_id">
                                        @foreach ($users as $user)
                                            <option value="">  - </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="flex space-x-2 m-2">
                                    <div class="p-2">
                                        <button class="py-2 px-3 bg-gray-100 shadow-sm">
                                            Assign
                                        </button>
                                    </div>
                                    <div class="p-2">
                                        <button class="py-2 px-3 bg-gray-100 shadow-sm" formaction="{{ route('tasks.delegate', ['task' => $task->id]) }}">
                                            Delegate
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @php
                    // dd($task->instance());
                @endphp
            @endif

            <div class="w-full mt-6 px-2">

                <div class="w-full text-center text-lg font-bold">
                    Entity History
                </div>
                <div class=" hover:bg-gray-200 border-l-4 border-gray-200 p-4">
                    @foreach ($history as $key => $_history)
                        @if (is_array($_history)) {
                            <div class="p-1">
                                <li class="w-full sm:w-3/4 md:w-3/5 mx-auto">
                                    {{ $key }} : @dump($_history)
                                </li>
                            </div>
                        }
                        @elseif ($_history != (null || ''))
                            <div class="p-1">
                                <li class="w-full sm:w-3/4 md:w-3/5 mx-auto">
                                    {{ $key }} : {{ $_history }}
                                </li>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>

        </div>
    </div>
@endsection

<script src="{{ asset("js/variableCompiler.js") }}"></script>