@php
    use App\Classes\CamundaEntities;
    use Carbon\Carbon;
@endphp
@extends('layouts.base')
@section('heading')
    <span class="text-blue-400">
        {{ __('Process') }}: {{ $process->name }} - v{{ $process->version }}
    </span>
@endsection
@section('return-link')
    <div>
        <a href="{{ route('processes.show', ['process' => $process->id]) }}">BACK</a>
        {{-- <a href="{{ url()->previous() }}">BACK</a> --}}
    </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! -->
        <div class="text-sm text-blue-500 hover:text-blue-700"  @click="open = true">
            ADD A NEW PROCESS INSTANCE
        </div>
        <!-- Dialog (full screen) -->

        <div class="absolute top-0 left-0 flex items-center justify-center w-full h-full" style="background-color: rgba(0,0,0,.5);z-index:1" x-show="open">
            <!-- A basic modal dialog with title, body and one button to close -->
            <div class="h-auto p-4 mx-2 text-left bg-white 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-lg font-medium leading-6 text-gray-900 uppercase mb-2">
                        Add a business key to complete your task (optional)
                    </div>
                    <div>
                        <form action="{{ route('processes.newInstance', ['processDefinitionId' => $process->id]) }}" method="get">
                            @csrf
                                <div>
                                    <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>
                            <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">
                                    ADD PROCESS
                                </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">
            <div class="w-full mt-10 px-2">

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

                @include('app.processes.components.filter')

                @foreach ($process_history_for_instances as $history)
                {{-- @dump($history) --}}
                    {{-- @if (!is_null($process_instances_activity_history->id ?? null)) --}}
                    @if (!is_null($history->id ?? null))
                        <div class="p-2">
                            <div class="w-full sm:w-3/4 md:w-3/5 mx-auto">

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

                                @php
                                    $process_instances_activity_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>

                                                <b>
                                                    state: {{ Str::lower($history->state ?? 'none') }} <br>
                                                </b>
                                                {{-- 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' : ''">
                                                @if (!is_null($history->id ?? null))
                                                    @foreach ($process_instances_activity_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> --}}
                                                                <b>
                                                                    state: {{ $_history->endTime != null ? 'ended' : 'active' }} <br>
                                                                </b>
                                                            </div>
                                                            @php
                                                                $carbonated_time = Carbon::parse($_history->startTime)
                                                            @endphp
                                                            {{ $carbonated_time->toFormattedDateString() }}
                                                        </div>
                                                        <hr>
                                                    @endforeach
                                                @endif
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @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="https://unpkg.com/bpmn-js/dist/bpmn-viewer.development.js"></script>
    <script>
        // the diagram you are going to display
        const diagramContainer = document.getElementById('process-image');
        const bpmnXML = document.getElementById('rawXML').value;

        // console.log(bpmnXML);

        // BpmnJS is the BPMN viewer instance
        const viewer = new BpmnJS({ container: '#process-image', height: '100%', width: '100%' });

        // import a BPMN 2.0 diagram
        try {
            // we did well!
            viewer.importXML(bpmnXML);
            viewer.get('process-image').zoom('fit-viewport');

        } catch (err) {
            // import failed :-(
                // console.log(bpmnXML);
        }
        diagramContainer.childNodes[0].style.height = '300px';
    </script>
@endsection