@extends('layouts.dashboard')

@section('content')
@php
/**
 * Admin → Automated drips → one sequence's steps: the ordered messages and the wait before each.
 *
 * The step names a template key, so the words themselves are written in the Email templates
 * editor. A step whose template is switched off is called out here, because that is the one
 * misconfiguration that makes a live sequence queue nothing while looking healthy.
 *
 * @var array $seq       the sequence being edited
 * @var array $steps     its steps, in order, with the template's name + is_active
 * @var array $templates every email template, for the picker
 */
$seq       = $seq ?? [];
$steps     = $steps ?? [];
$templates = $templates ?? [];
$seqId     = (int) ($seq['id'] ?? 0);
$nextOrder = $steps ? ((int) end($steps)['step_order'] + 1) : 1;
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
<div class="qm-ops-head">
    <div>
        <h2 class="mb-0">{{ t_raw('admin.drip.steps_heading') }}</h2>
        <p class="qm-ops-sub mb-0">{{ t_raw('admin.drip.trigger_' . e((string) ($seq['trigger_type'] ?? 'lapsed'))) }} &middot; {{ t_raw('admin.drip.trigger_days_cell', [':days' => (int) ($seq['trigger_days'] ?? 0)]) }}</p>
    </div>
    <a href="{{ route('admin.drip') }}" class="qm-btn qm-btn-outline"><i class="fas fa-arrow-left me-1" aria-hidden="true"></i> {{ t_raw('common.back') }}</a>
</div>

<div class="qm-card">
    <div class="table-responsive">
    <table class="qm-table">
        <caption class="visually-hidden">{{ t_raw('admin.drip.steps_heading') }}</caption>
        <thead><tr>
            <th scope="col">{{ t_raw('admin.drip.col_step') }}</th>
            <th scope="col">{{ t_raw('admin.drip.col_wait') }}</th>
            <th scope="col">{{ t_raw('admin.drip.col_message') }}</th>
            <th class="text-end" scope="col">{{ t_raw('common.actions') }}</th>
        </tr></thead>
        <tbody>
            @if ($steps)
            @foreach ($steps as $st)
@php $order = (int) $st['step_order']; @endphp
            <tr>
                <td><strong>{{ $order }}</strong></td>
                <td>{!! (int) $st['delay_days'] === 0 ? t('admin.drip.wait_immediate') : t('admin.drip.wait_days', [':days' => (int) $st['delay_days']]) !!}</td>
                <td>
                    @if (!empty($st['template_name']))
                    <a href="{!! url('/admin/email-templates/' . e((string) $st['template_key']) . '/edit') !!}">{{ (string) $st['template_name'] }}</a>
                    @if ((int) ($st['template_active'] ?? 0) !== 1)<div class="qm-cell-sub">{{ t_raw('admin.drip.warn_template_off') }}</div>@endif
                    @else
                    <code>{{ (string) $st['template_key'] }}</code>
                    <div class="qm-cell-sub">{{ t_raw('admin.drip.warn_template_missing') }}</div>
                    @endif
                </td>
                <td class="qm-actions-cell">
                    <button type="button" class="qm-icon-btn" data-step-edit
                        data-id="{{ (int) $st['id'] }}" data-order="{{ $order }}" data-delay="{{ (int) $st['delay_days'] }}" data-key="{{ (string) $st['template_key'] }}"
                        aria-label="{{ t_raw('common.edit') }}" title="{{ t_raw('common.edit') }}"><i class="fas fa-pen" aria-hidden="true"></i></button>
                    <form method="post" action="{{ route('admin.drip.steps.delete') }}" class="d-inline" data-confirm="{{ t_raw('admin.drip.confirm_step_delete') }}">@csrf<input type="hidden" name="sequence_id" value="{{ $seqId }}"><input type="hidden" name="id" value="{{ (int) $st['id'] }}"><button type="submit" class="qm-icon-btn danger" aria-label="{{ t_raw('common.delete') }}" title="{{ t_raw('common.delete') }}"><i class="fas fa-trash-alt" aria-hidden="true"></i></button></form>
                </td>
            </tr>
            @endforeach
            @else
            @partial('table-empty', ['colspan' => 4, 'icon' => 'fa-list-ol', 'msg' => t('admin.drip.steps_empty')])
            @endif
        </tbody>
    </table>
    </div>
</div>

<div class="qm-card">
    <h2 class="mb-3" id="drip-step-form-title">{{ t_raw('admin.drip.step_add_heading') }}</h2>
    <form method="post" action="{{ route('admin.drip.steps.post') }}">
        @csrf
        <input type="hidden" name="sequence_id" value="{{ $seqId }}">
        <input type="hidden" name="id" id="step-id">
        <div class="qm-form-grid">
            <div class="mb-3"><label class="form-label" for="step-order">{{ t_raw('admin.drip.col_step') }}</label><input type="number" step="1" min="1" max="255" id="step-order" name="step_order" class="form-control" value="{{ $nextOrder }}"></div>
            <div class="mb-3"><label class="form-label" for="step-delay">{{ t_raw('admin.drip.col_wait') }}</label><input type="number" step="1" min="0" max="3650" id="step-delay" name="delay_days" class="form-control" value="{{ $nextOrder > 1 ? 7 : 0 }}"></div>
            <div class="mb-3">
                <label class="form-label" for="step-key">{{ t_raw('admin.drip.col_message') }}</label>
                <select id="step-key" name="template_key" class="form-select">
                    @foreach ($templates as $t)
                    <option value="{{ (string) $t['key'] }}">{{ (string) $t['name'] }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="d-flex gap-2 justify-content-end">
            <button type="button" class="qm-btn qm-btn-outline" id="step-reset" hidden>{{ t_raw('common.cancel') }}</button>
            <button type="submit" class="qm-btn">{{ t_raw('common.save') }}</button>
        </div>
    </form>
</div>

<script>
/* Editing a step loads it into the same form below the table, rather than a second surface. */
(function () {
    var title = document.getElementById('drip-step-form-title');
    var reset = document.getElementById('step-reset');
    var addLabel = title ? title.textContent : '';
    function set(id, value) { var el = document.getElementById(id); if (el) { el.value = value; } }

    document.addEventListener('click', function (e) {
        var b = e.target.closest('[data-step-edit]');
        if (b) {
            set('step-id', b.getAttribute('data-id') || '');
            set('step-order', b.getAttribute('data-order') || '1');
            set('step-delay', b.getAttribute('data-delay') || '0');
            set('step-key', b.getAttribute('data-key') || '');
            if (reset) { reset.hidden = false; }
            var form = document.getElementById('step-id');
            if (form) { form.closest('.qm-card').scrollIntoView({ block: 'center' }); }
            return;
        }
        if (e.target.closest('#step-reset')) {
            set('step-id', '');
            if (reset) { reset.hidden = true; }
            if (title) { title.textContent = addLabel; }
        }
    });
})();
</script>

</div>@php /* /.qm-d2 */
@endphp
@endsection