@php
    use App\Classes\CamundaEntities;
@endphp
@extends('layouts.base')
@section('heading')
    {{ __('Process') }}: {{ $process->name }} - v{{ $process->version }}
@endsection

@section('return-link')
    <div>
        <a href="{{ route('processes.index') }}">
            PROCESSES
        </a>
    </div>
@endsection
@section('center-focus-activity')
    <a class="animate-pulse text-blue-500 hover:text-blue-600" href="{{ route('processes.history', ['process' => $process->id]) }}">
        HISTORY
    </a>
@endsection
@section('seconday-activity')
<div class="inline">
    <form action="{{ route('processes.show', ['process' => $process->id]) }}" method="get">
        <div class="inline-block mr-2">
            <input type="text" name="s" id="s" placeholder="business key" value="{{ $_GET['s'] ?? '' }}" 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('info')
        <span class="text-blue-400">
            {{ $process->id }}
        </span>
@endsection
@section('focus_action')
<span>
    <div class="mt-6_"  x-data="{ open: false }">
        <!-- Button (blue), duh! -->
        <button class="text-sm text-gray-500 hover:text-blue-300"  @click="open = true">
            ADD A NEW PROCESS INSTANCE
        </button>
        <!-- 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('processes.newInstance', ['processDefinitionId' => $process->id]) }}" method="get">
                            @csrf

                            <div class="flex items-center space-x-3">
                                <label for="business_key" class="block">Business Key: </label>
                                <input type="text" id="business_key" name="business_key" placeholder="Enter a business key" required="required">
                            </div>
                            <div class="mt-3 text-left text-md uppercase_ p-2">
                                Add any required Variables
                            </div>
                            <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">
                            {{-- <button type="submit" class="text-sm text-blue-500 hover:text-blue-700"> --}}
                            <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">
                                    START INSTANCE
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</span>
@endsection
@section('body')
    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@9.2.2/dist/assets/bpmn-js.css" />
    <div class="m-auto py-6 grid place-content-center_">

        {{-- <div class="w-full">
            @foreach ($process->tasks() as $task)
            <div>
                {{ $task->name }}
            </div>
            <div>
                {{ $task->id }}
            </div>
            @endforeach
        </div> --}}
        <div class="w-full">
            <div class="canvas overflow-scroll_ border border-gray-200 mb-2" id="canvas">
                <div id="process-image" class="h-full_ w-full_ absolute_ flex flex-col min-h-screen_ overflow-scroll_" style=""></div>
            </div>
            <div class="p-2_">
                <!-- BPMN diagram container -->
                <input id="rawXML" type="hidden" name="rawXML" value="{{ $process->image()['bpmn20Xml'] }}" style="display:none">
                <!-- replace CDN url with local bpmn-js path -->
            </div>
            @php
                $parameter_name = "pdPiPage";
                $page_number = $_GET[$parameter_name] ?? 1;
                $search_term = $_GET['s'] ?? "";
                $search_term = "%" . $search_term . "%";
                $init_request = $process->definePagination($page_number, 2, $parameter_name);
                $process_instances = $init_request->add_parameters('businessKeyLike', $search_term)->instances();
                $paginator = $init_request->paginator;
            @endphp
            @include('app.processes.templates.instances_table')
            <div class="mx-auto">
                @include('app.components.paginator')
            </div>
            {{-- @foreach ($process->instances() as $instance)
                <div>
                    {{ $instance->id }}
                </div>
            @endforeach --}}
            <div class="w-full mt-10 px-2">

                <div class="w-full text-center text-lg font-bold">
                    Process Instances History
                </div>

                @php
                    $parameter_name = 'pIHistPage'; // corresponds with the name set int he class method
                $page_number = $request->$parameter_name ?? 1;

                $history_resource = $process->definePagination($page_number, 5, $parameter_name)->forInstance()->byDefinition();

                $process_history_for_instances = $history_resource->fetchHistory();

                $paginator = $history_resource->paginator;
                @endphp

                @foreach ($process_history_for_instances as $history)
                    <div class="p-2 my-1">
                        <div class="w-full sm:w-3/4 md:w-3/5 mx-auto">

                            {{-- @dump($history) --}}

                            @php
                                $process_instances_history = CamundaEntities::initHistory()->forActivityInstance()->byInstance($history->id)->fetchHistory();
                            @endphp
                            <div>
                                <div x-data="{selected:null}">
                                        <div type="button" class="p-4 underline_ hover:bg-gray-200 border-l-4 border-gray-200"  @click="selected !== 2 ? selected = 2 : selected = null">
                                            <b>
                                                Business Key: {{ $history->businessKey ?? null }} <br>
                                            </b>
                                            Id: <a class="hover:text-blue-500" href="{{ route('instances.show', $history->id) }}">
                                                    {{ $history->id }}
                                                </a>
                                                <br>
                                            {{-- Name: {{ $history->name }} <br> --}}
                                            {{-- deleteReason: {{ $history->deleteReason ?? 'none' }} <br> --}}

                                            time duration: {{ $history->durationInMillis != null ? date('H:i:s', $history->durationInMillis) : '' }} <br>

                                            state: {{ Str::lower($history->state ?? 'none') }} <br>
                                            {{-- Activity Instances --}}
                                        </div>
                                        <div class="relative overflow-hidden transition-all max-h-0 duration-700 px-2 bg-white" x-ref="container2" x-bind:style="selected == 2 ? 'max-height: ' + $refs.container2.scrollHeight + 'px' : ''">
                                            @foreach ($process_instances_history->sortBy(['startTime', 'asc'], ['endTime', 'asc']) as $_history)
                                                <div class="p-2">
                                                    <div class="w-full sm:w-3/4_md:w-3/5_ mx-auto">

                                                        {{-- @dump($_history) --}}
                                                        <b>
                                                            Type: {{ $_history->activityType ?? null }} <br>
                                                        </b>
                                                        {{-- Process Instance: {{ $_history->processInstanceId ?? null }} <br> --}}
                                                        Id: {{ $_history->id ?? null }} <br>
                                                        Name: {{ $_history->activityName ?? 'none' }} <br>
                                                        Type: {{ $_history->activityType ?? null }} <br>
                                                        Description: {{ $_history->description ?? 'empty' }} <br>
                                                        TaskId: {{ $_history->taskId ?? 'empty' }} <br>
                                                        Assignee: {{ $_history->assignee ?? 'none' }} <br>
                                                        deleteReason: {{ $_history->deleteReason ?? 'null' }} <br>
                                                        started: {{ $_history->startTime ?? 'none' }} <br>
                                                        ended: {{ $_history->endTime ?? 'null' }} <br>
                                                        {{-- completed: {{ $_history->completeScope ? 'true' : 'false' }} <br>
                                                        canceled: {{ ($_history->canceled ? 'true' : 'false') ?? '' }} <br> --}}
                                                        state: {{ $_history->endTime != null ? 'ended' : 'active' }} <br>
                                                    </div>
                                                </div>
                                                <hr>
                                            @endforeach
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                @php
                    // $paginator = array();
                    // $paginator['match'] = 'pageNumber';
                    // $paginator['parameter_name'] = 'pageNumber';
                    // $paginator['total_pages'] = $history_resource->total_pages;
                    // $paginator['total_pages'] = $history_resource->fetchHistoryCount();
                    // dump($paginator);
                @endphp
                <div class="mx-auto">
                    @include('app.components.paginator')
                </div>
                @if ((count($process_history_for_instances ?? [])) < 1)
                    <div class="content-center text-center p-2">
                        No previous instances yet
                    </div>
                @endif
                {{-- @foreach ($process->forActivityInstance()->byDefinition()->fetchHistory()->sortBy(['startTime', 'asc'], ['endTime', 'asc']) as $_history)
                    <div class="p-2">
                        <div class="w-full sm:w-3/4 md:w-3/5 mx-auto">

                            @dump($_history)
                            <b>
                                Business Key: {{ $_history->businessKey ?? null }} <br>
                            </b>
                            Process Instance: {{ $_history->processInstanceId ?? null }} <br>
                            Id: {{ $_history->id ?? null }} <br>
                            Name: {{ $_history->activityName ?? 'none' }} <br>
                            Type: {{ $_history->activityType ?? null }} <br>
                            Description: {{ $_history->description ?? 'empty' }} <br>
                            <b>
                                Type: {{ $_history->activityType ?? null }} <br>
                            </b>
                            TaskId: {{ $_history->taskId ?? 'empty' }} <br>
                            Assignee: {{ $_history->assignee ?? 'none' }} <br>
                            deleteReason: {{ $_history->deleteReason ?? 'none' }} <br>
                            started: {{ $_history->startTime ?? 'none' }} <br>
                            ended: {{ $_history->endTime ?? 'none' }} <br>
                            completed: {{ $_history->completeScope ? 'true' : 'false' }} <br>
                            canceled: {{ ($_history->canceled ? 'true' : 'false') ?? '' }} <br>
                            state: {{ $_history->endTime != null ? 'ended' : 'active' }} <br>
                        </div>
                    </div>
                    <hr>
                @endforeach --}}

                {{-- @dump($process->image()['bpmn20Xml']) --}}
                <img src="http://wfm.sensytouch.ro:8080/engine-rest/process-definition/{{ $process->id }}/diagram" alt="" srcset="">
            </div>
        </div>
    </div>
    <script src="{{ asset("js/variableCompiler.js") }}"></script>
    <script type="module" src="{{ asset('js/BpmnViewer.js') }}"></script>

@endsection