@extends('setting.nav')

@section('title', $template->exists ? 'Edit Template' : 'New Template')

@section('content')
    <div class="container-fluid mt-4">
        @include('auto_reply._tabs')

        @php
            $action = $template->exists
                ? route('auto_reply.templates.update', $template->id)
                : route('auto_reply.templates.store');

            // Built here rather than inline: a literal {{token}} inside a Blade
            // echo would be swallowed by Blade's own parser.
            $token = fn($name) => '{{' . $name . '}}';

            $subjectValue = old('subject', $template->subject ?: 'Re: ' . $token('original_subject'));

            $starterBody = "<p>Dear " . $token('customer_name') . ",</p>\n"
                . "<p>Thank you for contacting " . $token('company_name') . ". We have received your enquiry about "
                . $token('product_name') . " and our team is reviewing it.</p>\n"
                . "<p>One of our specialists will get back to you shortly with the details you asked for.</p>\n"
                . "<p>Warm regards,<br>" . $token('signature_name') . "<br>" . $token('company_name') . "</p>";

            $bodyValue = old('body', $template->body ?: ($template->exists ? '' : $starterBody));
        @endphp

        <div class="row g-4">
            <div class="col-lg-8">
                <form action="{{ $action }}" method="POST" id="templateForm">
                    @csrf
                    @if ($template->exists)
                        @method('PUT')
                    @endif

                    <div class="card shadow-sm">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h6 class="mb-0">{{ $template->exists ? 'Edit template' : 'New template' }}</h6>
                            @if ($template->exists)
                                <span
                                    class="badge bg-{{ $template->status === \App\Models\EmailTemplate::STATUS_APPROVED ? 'success' : ($template->status === \App\Models\EmailTemplate::STATUS_DRAFT ? 'warning text-dark' : 'secondary') }}">
                                    {{ $template->statusLabel() }}
                                </span>
                            @endif
                        </div>
                        <div class="card-body">

                            <div class="mb-3">
                                <label for="name" class="form-label">Template name</label>
                                <input type="text" class="form-control" id="name" name="name"
                                    value="{{ old('name', $template->name) }}" required maxlength="150"
                                    placeholder="Product enquiry acknowledgement">
                            </div>

                            <div class="mb-3">
                                <label for="category_id" class="form-label">Category</label>
                                <select class="form-select" id="category_id" name="category_id">
                                    <option value="">— not tied to a category —</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}"
                                            @selected(old('category_id', $template->category_id) == $category->id)>
                                            {{ $category->name }} ({{ $category->code }})
                                        </option>
                                    @endforeach
                                </select>
                                <div class="form-text">
                                    This is a label. What actually decides which template is used is the template
                                    assigned on the <a href="{{ route('auto_reply.categories') }}">category</a> itself.
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="subject" class="form-label">Subject</label>
                                <input type="text" class="form-control" id="subject" name="subject"
                                    value="{{ $subjectValue }}" required maxlength="500">
                                <div class="form-text">
                                    Keeping <code>Re: {{ $token('original_subject') }}</code> makes the acknowledgement
                                    thread under the customer's own mail.
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="body" class="form-label">Email body</label>
                                <textarea class="form-control font-monospace" id="body" name="body" rows="14" required
                                    style="font-size:.875rem;">{{ $bodyValue }}</textarea>
                                <div class="form-text">HTML is allowed. Placeholders are filled in when the mail is sent.</div>
                            </div>

                            <div class="d-flex flex-wrap gap-2">
                                <button type="submit" class="btn btn-primary">
                                    {{ $template->exists ? 'Save changes' : 'Save as draft' }}
                                </button>
                                <a href="{{ route('auto_reply.templates') }}" class="btn btn-outline-secondary">Cancel</a>
                                @if ($template->exists)
                                    <button type="button" class="btn btn-outline-info ms-auto" id="previewBtn">
                                        <i class="bi bi-eye me-1"></i>Preview
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </form>

                @if ($template->exists)
                    <div class="card shadow-sm mt-4">
                        <div class="card-header">
                            <h6 class="mb-0">Approval</h6>
                        </div>
                        <div class="card-body">
                            <p class="text-muted" style="font-size:.875rem;">
                                Only an <strong>approved</strong> template is ever sent automatically. Changing the
                                subject or body of an approved template returns it to draft, so nobody's edit goes out
                                unread.
                            </p>

                            @if ($template->approved_at)
                                <p class="text-muted" style="font-size:.8125rem;">
                                    Last approved {{ $template->approved_at->format('d M Y, H:i') }}.
                                </p>
                            @endif

                            <div class="d-flex flex-wrap gap-2">
                                @foreach (\App\Models\EmailTemplate::STATUSES as $key => $label)
                                    @continue($key === $template->status)
                                    <form action="{{ route('auto_reply.templates.status', $template->id) }}"
                                        method="POST">
                                        @csrf
                                        <input type="hidden" name="status" value="{{ $key }}">
                                        <button type="submit"
                                            class="btn btn-sm {{ $key === 'approved' ? 'btn-success' : 'btn-outline-secondary' }}">
                                            Mark as {{ $label }}
                                        </button>
                                    </form>
                                @endforeach

                                <form action="{{ route('auto_reply.templates.destroy', $template->id) }}" method="POST"
                                    class="ms-auto"
                                    onsubmit="return confirm('Delete this template? Any category using it will be switched off.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger">Delete template</button>
                                </form>
                            </div>

                            @if (!empty($usedBy) && $usedBy->isNotEmpty())
                                <div class="alert alert-info mt-3 mb-0" style="font-size:.8125rem;">
                                    Used by:
                                    @foreach ($usedBy as $category)
                                        <span class="badge bg-light text-dark border">{{ $category->name }}</span>
                                    @endforeach
                                    — those categories stop replying while this template is not approved.
                                </div>
                            @endif
                        </div>
                    </div>
                @endif
            </div>

            <div class="col-lg-4">
                <div class="card shadow-sm">
                    <div class="card-header">
                        <h6 class="mb-0">Available placeholders</h6>
                    </div>
                    <div class="card-body">
                        <p class="text-muted" style="font-size:.8125rem;">
                            Click one to insert it at the cursor.
                        </p>
                        <div class="d-grid gap-2">
                            @foreach ($variables as $name => $description)
                                <button type="button" class="btn btn-sm btn-outline-secondary text-start ar-var"
                                    data-var="{{ $token($name) }}">
                                    <code>{{ $token($name) }}</code>
                                    <div class="text-muted" style="font-size:.75rem;">{{ $description }}</div>
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Preview with sample values</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-2"><strong>Subject:</strong> <span id="previewSubject"></span></div>
                        <hr>
                        <div id="previewBody" class="border rounded p-3 bg-white"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        (function() {
            var body = document.getElementById('body');
            var subject = document.getElementById('subject');

            // Insert a placeholder wherever the caret last was — in the body by
            // default, or the subject when that is the focused field.
            var lastFocused = body;
            [body, subject].forEach(function(field) {
                if (field) field.addEventListener('focus', function() {
                    lastFocused = field;
                });
            });

            document.querySelectorAll('.ar-var').forEach(function(button) {
                button.addEventListener('click', function() {
                    var token = button.getAttribute('data-var');
                    var field = lastFocused || body;
                    if (!field) return;

                    var start = field.selectionStart || 0;
                    var end = field.selectionEnd || 0;
                    field.value = field.value.slice(0, start) + token + field.value.slice(end);
                    field.focus();
                    field.selectionStart = field.selectionEnd = start + token.length;
                });
            });

            var previewBtn = document.getElementById('previewBtn');
            if (previewBtn) {
                previewBtn.addEventListener('click', function() {
                    fetch('{{ $template->exists ? route('auto_reply.templates.preview', $template->id) : '' }}')
                        .then(function(response) {
                            return response.json();
                        })
                        .then(function(data) {
                            document.getElementById('previewSubject').textContent = data.subject || '';
                            document.getElementById('previewBody').innerHTML = data.body || '';
                            new bootstrap.Modal(document.getElementById('previewModal')).show();
                        })
                        .catch(function() {
                            alert('Could not load the preview.');
                        });
                });
            }
        })();
    </script>
@endsection