@extends('layouts.app')
@section('title', $template?->exists ? 'Edit template' : 'New template')

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $template?->exists ? 'Edit template' : 'New template' }}</h1>
            @php $lb = '{{'; $rb = '}}'; @endphp
            <p>Wrap substitutions in <span class="mono">{{ $lb }} &hellip; {{ $rb }}</span>.
                Unknown placeholders are left visible rather than blanked.</p>
        </div>
        <div class="page-actions">
            @if ($template?->exists)
                <form method="POST" action="{{ route('settings.templates.preview', $template) }}">
                    @csrf
                    <button class="btn secondary" type="submit">Preview with live data</button>
                </form>
            @endif
            <a href="{{ route('settings.templates.index') }}" class="btn secondary">Back</a>
        </div>
    </div>

    <form method="POST"
          action="{{ $template?->exists ? route('settings.templates.update', $template) : route('settings.templates.store') }}">
        @csrf
        @if ($template?->exists) @method('PUT') @endif

        <div class="grid grid-2">
            <div class="card">
                <div class="card-head"><h3>Template</h3></div>
                <div class="card-body">
                    <div class="grid grid-2">
                        <div class="field">
                            <label>Code <span class="req">*</span></label>
                            <input type="text" name="code" class="mono" maxlength="60" required
                                   value="{{ old('code', $template?->code) }}" placeholder="SUSPENSION_NOTICE">
                            @error('code')<span class="err">{{ $message }}</span>@enderror
                        </div>
                        <div class="field">
                            <label>Type <span class="req">*</span></label>
                            <select name="type" required>
                                @foreach ($types as $t)
                                    <option value="{{ $t }}" @selected(old('type', $template?->type ?? 'email') === $t)>{{ title_case_words($t) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="field">
                        <label>Name <span class="req">*</span></label>
                        <input type="text" name="name" maxlength="160" required
                               value="{{ old('name', $template?->name) }}" placeholder="Service suspension notice">
                        @error('name')<span class="err">{{ $message }}</span>@enderror
                    </div>

                    <div class="field">
                        <label>Subject</label>
                        <input type="text" name="subject" maxlength="255"
                               value="{{ old('subject', $template?->subject) }}"
                               placeholder="Your service {{ $lb }}service.number{{ $rb }} has been suspended">
                        <span class="hint">Used for email templates. Placeholders work here too.</span>
                    </div>

                    <label class="check">
                        <input type="checkbox" name="is_active" value="1"
                               @checked(old('is_active', $template?->is_active ?? true))>
                        <span>Active and available to staff</span>
                    </label>
                </div>
                <div class="card-foot">
                    <button type="submit" class="btn">{{ $template?->exists ? 'Save changes' : 'Create template' }}</button>
                    <a href="{{ route('settings.templates.index') }}" class="btn secondary">Cancel</a>
                </div>
            </div>

            <div class="card">
                <div class="card-head"><h3>Available placeholders</h3></div>
                <div class="card-body" style="padding:0;max-height:520px;overflow:auto;">
                    <table class="data">
                        <thead><tr><th>Placeholder</th><th>Resolves to</th></tr></thead>
                        <tbody>
                        @foreach ($placeholders as $key => $description)
                            <tr>
                                <td class="mono small">{{ $lb.$key.$rb }}</td>
                                <td class="small">{{ $description }}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="card-foot">
                    <span class="tiny muted">Values come from the customer, their latest service, their latest
                        invoice and the organisation record.</span>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Body</h3></div>
            <div class="card-body">
                <div class="field">
                    <textarea name="body" rows="16" maxlength="200000" required
                              placeholder="Dear {{ $lb }}customer.name{{ $rb }}, …">{{ old('body', $template?->body) }}</textarea>
                    @error('body')<span class="err">{{ $message }}</span>@enderror
                </div>
            </div>
        </div>
    </form>
@endsection