@extends('layouts/contentLayoutMaster')

@section('title', __('locale.workflows.flow_builder').' — '.$workflow->name)

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/drawflow/drawflow.min.css')) }}">
@endsection

@section('page-style')
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/workflows-flow-builder.css')) }}">
@endsection

@section('content')
    <section id="workflow-flow-builder" class="workflow-flow-builder workflow-flow-builder--redesign">
        {{-- Top bar --}}
        <header class="wf-topbar">
            <div class="wf-topbar__left">
                <a href="{{ route('customer.workflows.index') }}" class="wf-topbar__back" title="{{ __('locale.buttons.back') }}">
                    <i data-feather="arrow-left"></i>
                </a>
                <div class="wf-topbar__meta">
                    <nav class="wf-breadcrumb" aria-label="breadcrumb">
                        <a href="{{ route('customer.workflows.index') }}">{{ __('locale.menu.Workflows') }}</a>
                        <span class="wf-breadcrumb__sep">/</span>
                        <span>{{ __('locale.workflows.flow_builder') }}</span>
                    </nav>
                    <div class="wf-topbar__title-row">
                        <input type="text"
                               id="workflow-name"
                               class="wf-title-input"
                               value="{{ $workflow->name }}"
                               placeholder="{{ __('locale.labels.name') }}"
                               aria-label="{{ __('locale.labels.name') }}">
                        <span id="workflow-status-badge"
                              class="wf-status-badge wf-status-badge--{{ $workflow->status }}"
                              data-status="{{ $workflow->status }}">
                            {{ strtoupper(__('locale.workflows.status_'.$workflow->status)) }}
                        </span>
                        <span id="workflow-saved-indicator" class="wf-saved-indicator" data-updated-at="{{ optional($workflow->updated_at)?->toIso8601String() }}">
                            {{ __('locale.workflows.saved_just_now') }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="wf-topbar__right">
                <button type="button" class="btn btn-outline-secondary wf-btn-test" id="workflow-test-flow">
                    <i data-feather="eye"></i>
                    <span>{{ __('locale.workflows.test_flow') }}</span>
                </button>
                <div class="btn-group">
                    <button type="button" class="btn btn-primary workflow-btn-accent" id="workflow-publish">
                        <i data-feather="send"></i>
                        <span>{{ __('locale.workflows.publish_campaign') }}</span>
                    </button>
                    <button type="button"
                            class="btn btn-primary workflow-btn-accent dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false">
                        <span class="visually-hidden">Toggle</span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li>
                            <button type="button" class="dropdown-item" id="workflow-publish-now">
                                {{ __('locale.workflows.publish_now') }}
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item" id="workflow-save-draft">
                                {{ __('locale.workflows.save_as_draft') }}
                            </button>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <button type="button" class="dropdown-item" id="workflow-unpublish">
                                {{ __('locale.workflows.unpublish') }}
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <div id="workflow-builder-errors" class="alert alert-danger d-none mb-1"></div>

        <div class="workflow-builder-layout">
            {{-- Left palette --}}
            <aside class="workflow-builder-palette wf-palette">
                <div class="wf-palette__search">
                    <i data-feather="search" class="wf-palette__search-icon"></i>
                    <input type="search"
                           id="workflow-palette-search"
                           class="form-control"
                           placeholder="{{ __('locale.workflows.search_node_templates') }}"
                           autocomplete="off">
                </div>

                <div class="wf-palette__groups" id="workflow-palette-groups">
                    <section class="wf-palette-group" data-group="triggers">
                        <h6 class="wf-palette-group__title">
                            <span class="wf-palette-group__num">1</span>
                            {{ __('locale.workflows.palette_start_triggers') }}
                        </h6>
                        <button type="button"
                                class="palette-node palette-node-trigger"
                                draggable="true"
                                data-node-type="trigger"
                                data-preset="group_join"
                                data-search="contact joined group trigger">
                            <span class="palette-node-icon"><i data-feather="user-plus"></i></span>
                            <span class="palette-node-copy">
                                <strong>{{ __('locale.workflows.palette_contact_joined') }}</strong>
                                <small>{{ __('locale.workflows.palette_contact_joined_desc') }}</small>
                            </span>
                            <span class="badge bg-light-primary">{{ __('locale.workflows.badge_popular') }}</span>
                        </button>
                        <button type="button"
                                class="palette-node palette-node-trigger"
                                draggable="true"
                                data-node-type="trigger"
                                data-preset="keyword_received"
                                data-search="tag applied keyword trigger">
                            <span class="palette-node-icon"><i data-feather="tag"></i></span>
                            <span class="palette-node-copy">
                                <strong>{{ __('locale.workflows.palette_tag_applied') }}</strong>
                                <small>{{ __('locale.workflows.palette_tag_applied_desc') }}</small>
                            </span>
                        </button>
                        <button type="button"
                                class="palette-node palette-node-trigger"
                                draggable="true"
                                data-node-type="trigger"
                                data-preset="campaign_delivered"
                                data-search="webhook event campaign delivered trigger">
                            <span class="palette-node-icon"><i data-feather="radio"></i></span>
                            <span class="palette-node-copy">
                                <strong>{{ __('locale.workflows.palette_webhook_event') }}</strong>
                                <small>{{ __('locale.workflows.palette_webhook_event_desc') }}</small>
                            </span>
                        </button>
                    </section>

                    <section class="wf-palette-group" data-group="actions">
                        <h6 class="wf-palette-group__title">
                            <span class="wf-palette-group__num">2</span>
                            {{ __('locale.workflows.palette_action_steps') }}
                        </h6>
                        <button type="button"
                                class="palette-node palette-node-action"
                                draggable="true"
                                data-node-type="action"
                                data-preset="send_sms"
                                data-search="send sms action">
                            <span class="palette-node-icon"><i data-feather="message-square"></i></span>
                            <span class="palette-node-copy">
                                <strong>{{ __('locale.workflows.palette_send_sms') }}</strong>
                                <small>{{ __('locale.workflows.palette_send_sms_desc') }}</small>
                            </span>
                            <span class="badge bg-light-success">{{ __('locale.workflows.badge_core') }}</span>
                        </button>
                        <button type="button"
                                class="palette-node palette-node-action"
                                draggable="true"
                                data-node-type="action"
                                data-preset="send_template"
                                data-search="update contact template action">
                            <span class="palette-node-icon"><i data-feather="edit-3"></i></span>
                            <span class="palette-node-copy">
                                <strong>{{ __('locale.workflows.palette_update_contact') }}</strong>
                                <small>{{ __('locale.workflows.palette_update_contact_desc') }}</small>
                            </span>
                        </button>
                        <button type="button"
                                class="palette-node palette-node-action"
                                draggable="true"
                                data-node-type="action"
                                data-preset="add_to_group"
                                data-search="add to list group action">
                            <span class="palette-node-icon"><i data-feather="list"></i></span>
                            <span class="palette-node-copy">
                                <strong>{{ __('locale.workflows.palette_add_to_list') }}</strong>
                                <small>{{ __('locale.workflows.palette_add_to_list_desc') }}</small>
                            </span>
                        </button>
                    </section>

                    <section class="wf-palette-group" data-group="controls">
                        <h6 class="wf-palette-group__title">
                            <span class="wf-palette-group__num">3</span>
                            {{ __('locale.workflows.palette_delays_controls') }}
                        </h6>
                        <button type="button"
                                class="palette-node palette-node-delay"
                                draggable="true"
                                data-node-type="delay"
                                data-preset="wait"
                                data-search="wait delay timer">
                            <span class="palette-node-icon"><i data-feather="clock"></i></span>
                            <span class="palette-node-copy">
                                <strong>{{ __('locale.workflows.palette_wait_delay') }}</strong>
                                <small>{{ __('locale.workflows.palette_wait_delay_desc') }}</small>
                            </span>
                        </button>
                        <button type="button"
                                class="palette-node palette-node-condition"
                                draggable="true"
                                data-node-type="condition"
                                data-preset="contact_field"
                                data-search="condition split filter">
                            <span class="palette-node-icon"><i data-feather="git-branch"></i></span>
                            <span class="palette-node-copy">
                                <strong>{{ __('locale.workflows.palette_condition_split') }}</strong>
                                <small>{{ __('locale.workflows.palette_condition_split_desc') }}</small>
                            </span>
                        </button>
                    </section>
                </div>

                <p class="wf-palette__hint">{{ __('locale.workflows.drag_drop_hint') }}</p>
            </aside>

            {{-- Center canvas --}}
            <div class="workflow-builder-canvas wf-canvas">
                <div class="wf-zoom-controls" role="group" aria-label="Zoom">
                    <span id="workflow-zoom-label" class="wf-zoom-label">100%</span>
                    <button type="button" class="btn btn-sm" id="workflow-zoom-out" title="-"><i data-feather="minus"></i></button>
                    <button type="button" class="btn btn-sm" id="workflow-zoom-in" title="+"><i data-feather="plus"></i></button>
                    <button type="button" class="btn btn-sm" id="workflow-zoom-reset" title="{{ __('locale.workflows.fit_to_screen') }}">
                        <i data-feather="maximize"></i>
                    </button>
                </div>
                <div id="drawflow" class="drawflow-canvas"></div>
                <div class="wf-canvas-legend">
                    <span><i class="wf-legend-dot wf-legend-dot--trigger"></i> {{ __('locale.workflows.legend_trigger') }}</span>
                    <span><i class="wf-legend-dot wf-legend-dot--delay"></i> {{ __('locale.workflows.legend_delay') }}</span>
                    <span><i class="wf-legend-dot wf-legend-dot--action"></i> {{ __('locale.workflows.legend_action') }}</span>
                </div>
                <button type="button" class="wf-add-next" id="workflow-add-next" title="{{ __('locale.workflows.add_next_node') }}">
                    <i data-feather="plus"></i>
                </button>
            </div>

            {{-- Right settings panel --}}
            <aside class="workflow-builder-properties wf-properties">
                <div class="wf-properties__header" id="workflow-properties-header">
                    <div class="wf-properties__header-icon wf-properties__header-icon--muted">
                        <i data-feather="sliders"></i>
                    </div>
                    <div class="wf-properties__header-text">
                        <h5 class="mb-0">{{ __('locale.workflows.edit_node_settings') }}</h5>
                        <code class="wf-node-id" id="workflow-selected-node-id">—</code>
                    </div>
                    <div class="dropdown">
                        <button type="button" class="btn btn-sm btn-icon" data-bs-toggle="dropdown" aria-expanded="false">
                            <i data-feather="more-horizontal"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                                <button type="button" class="dropdown-item text-danger" id="workflow-delete-node-menu">
                                    {{ __('locale.buttons.delete') }}
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="wf-properties__body" id="workflow-node-properties">
                    <p class="text-muted small mb-0">{{ __('locale.workflows.flow_select_node') }}</p>
                </div>
                <div class="wf-properties__footer d-none" id="workflow-properties-footer">
                    <button type="button" class="btn btn-primary workflow-btn-accent flex-grow-1" id="workflow-apply-settings">
                        {{ __('locale.workflows.apply_settings') }}
                    </button>
                    <button type="button" class="btn btn-outline-danger btn-icon" id="workflow-delete-node" title="{{ __('locale.buttons.delete') }}">
                        <i data-feather="trash-2"></i>
                    </button>
                </div>
            </aside>
        </div>

        {{-- Hidden status for publish/draft --}}
        <input type="hidden" id="workflow-status" value="{{ $workflow->status }}">
    </section>
@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/drawflow/drawflow.min.js')) }}"></script>
@endsection

@section('page-script')
    <script>
        window.workflowBuilder = {
            workflow: {
                uid: @json($workflow->uid),
                name: @json($workflow->name),
                timezone: @json($workflow->timezone),
                status: @json($workflow->status),
                updated_at: @json(optional($workflow->updated_at)?->toIso8601String()),
                published_at: @json(optional($workflow->published_at)?->toIso8601String()),
            },
            flow: @json($flow),
            routes: {
                save: @json(route('customer.workflows.flow.save', $workflow->uid)),
                autosave: @json(route('customer.workflows.flow.autosave', $workflow->uid)),
                publish: @json(route('customer.workflows.publish', $workflow->uid)),
                testSms: @json(route('customer.workflows.test_sms', $workflow->uid)),
                show: @json(route('customer.workflows.show', $workflow->uid)),
            },
            variables: @json(collect($merge_variables ?? [])->map(fn ($label, $token) => ['token' => $token, 'label' => $label])->values()),
            options: {
                contact_groups: @json($contact_groups->map(fn ($g) => ['id' => $g->id, 'name' => $g->name])->values()),
                keywords: @json($keywords->map(fn ($k) => ['id' => $k->id, 'name' => $k->keyword_name])->values()),
                campaigns: @json($campaigns->map(fn ($c) => ['id' => $c->id, 'name' => $c->campaign_name])->values()),
                templates: @json($templates->map(fn ($t) => ['id' => $t->id, 'name' => $t->name])->values()),
                sender_ids: @json($sender_ids->map(fn ($s) => ['id' => $s->sender_id, 'name' => $s->sender_id])->values()),
                sending_servers: @json($sending_servers->map(fn ($s) => ['id' => $s->sending_server, 'name' => $s->sendingServer?->name ?? ('#'.$s->sending_server)])->values()),
                phone_numbers: @json($phone_numbers->map(fn ($n) => ['id' => $n->senderIdentifier(), 'name' => $n->displayLabel().($n->isSimOnly() ? ' ('.__('locale.phone_numbers.sim_route').')' : '')])->values()),
                permissions: @json($originator_permissions),
                date_fields: @json($date_fields->map(fn ($f) => ['uid' => $f->uid, 'label' => ($f->contactGroup?->name ? $f->contactGroup->name.' — ' : '').$f->label])->values()),
            },
            labels: {
                trigger: @json(__('locale.workflows.trigger')),
                condition: @json(__('locale.workflows.node_condition')),
                action: @json(__('locale.workflows.node_action')),
                delay: @json(__('locale.workflows.node_delay')),
                selectNode: @json(__('locale.workflows.flow_select_node')),
                triggerExists: @json(__('locale.workflows.flow_trigger_exists')),
                saved: @json(__('locale.workflows.flow_saved')),
                autosaved: @json(__('locale.workflows.flow_autosaved')),
                saveFailed: @json(__('locale.workflows.flow_save_failed')),
                applySettings: @json(__('locale.workflows.apply_settings')),
                settingsApplied: @json(__('locale.workflows.settings_applied')),
                deleteConfirm: @json(__('locale.workflows.delete_node_confirm')),
                testSmsSent: @json(__('locale.workflows.test_sms_sent')),
                testSmsFailed: @json(__('locale.workflows.test_sms_failed')),
                published: @json(__('locale.workflows.published')),
                draftSaved: @json(__('locale.workflows.draft_saved')),
                unpublished: @json(__('locale.workflows.unpublished')),
                insertVariable: @json(__('locale.workflows.insert_variable')),
                nodeDisplayName: @json(__('locale.workflows.node_display_name')),
                smsGateway: @json(__('locale.workflows.sms_gateway')),
                senderIdHelp: @json(__('locale.workflows.sender_id_help')),
                messageTemplate: @json(__('locale.workflows.message_template')),
                testSmsNode: @json(__('locale.workflows.test_sms_node')),
                testSmsHelp: @json(__('locale.workflows.test_sms_help')),
                sendTest: @json(__('locale.workflows.send_test')),
                phonePlaceholder: @json(__('locale.workflows.test_phone_placeholder')),
                characters: @json(__('locale.workflows.characters')),
                segment: @json(__('locale.workflows.segment')),
                encoding: @json(__('locale.workflows.encoding')),
                savedAgo: @json(__('locale.workflows.saved_ago')),
                savedJustNow: @json(__('locale.workflows.saved_just_now')),
                saving: @json(__('locale.workflows.saving')),
                chipTrigger: @json(__('locale.workflows.chip_trigger')),
                chipDelay: @json(__('locale.workflows.chip_delay')),
                chipAction: @json(__('locale.workflows.chip_action')),
                chipCondition: @json(__('locale.workflows.chip_condition')),
                holdStepFlow: @json(__('locale.workflows.hold_step_flow')),
                triggerTypes: @json(collect(\App\Models\WorkflowTrigger::types())->mapWithKeys(fn ($t) => [$t => __('locale.workflows.trigger_'.$t)])->all()),
                actionTypes: @json(collect(\App\Models\WorkflowAction::types())->reject(fn ($t) => $t === 'wait')->mapWithKeys(fn ($t) => [$t => __('locale.workflows.action_'.$t)])->all()),
                conditionTypes: {
                    contact_field: @json(__('locale.workflows.condition_contact_field')),
                    group_membership: @json(__('locale.workflows.condition_group_membership')),
                    sms_status: @json(__('locale.workflows.condition_sms_status')),
                },
                operators: {
                    equals: @json(__('locale.workflows.operator_equals')),
                    not_equals: @json(__('locale.workflows.operator_not_equals')),
                    contains: @json(__('locale.workflows.operator_contains')),
                    is_empty: @json(__('locale.workflows.operator_is_empty')),
                    not_empty: @json(__('locale.workflows.operator_not_empty')),
                    in: @json(__('locale.workflows.operator_in')),
                    not_in: @json(__('locale.workflows.operator_not_in')),
                },
                anyGroup: @json(__('locale.workflows.any_group')),
                anyCampaign: @json(__('locale.workflows.any_campaign')),
                senderId: @json(__('locale.labels.sender_id')),
                sendingServer: @json(__('locale.labels.sending_server')),
                originator: @json(__('locale.labels.originator')),
                phoneNumbers: @json(__('locale.menu.Phone Numbers')),
                requestNew: @json(__('locale.labels.request_new')),
                selectOrInsertSender: @json(__('locale.labels.select_one_or_insert_your_own')),
                senderIdRequestUrl: @json(route('customer.senderid.request')),
                numbersBuyUrl: @json(route('customer.numbers.buy')),
                message: @json(__('locale.labels.message')),
                delayUnits: {
                    minutes: @json(__('locale.labels.minutes')),
                    hours: @json(__('locale.labels.hours')),
                    days: @json(__('locale.labels.days')),
                },
            },
        };
    </script>
    <script src="{{ asset(mix('js/scripts/sms-counter.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/workflows-flow-builder.js')) }}"></script>
@endsection