@extends('layouts.app')

@section('title', 'Email Templates')
@section('page-title', 'Email Templates')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tinymce@5.10.9/skins/ui/oxide/skin.min.css">
@endpush

@section('content')

{{-- Global Email Settings --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white py-3">
        <h6 class="mb-0 fw-semibold"><i class="bi bi-gear me-2 text-primary"></i>Global Email Settings</h6>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('admin.settings.email-templates.global') }}">
            @csrf @method('PATCH')
            <div class="row g-3 align-items-end">
                <div class="col-md-4">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="email_enabled" id="email_enabled"
                               value="1" {{ $emailEnabled ? 'checked' : '' }}>
                        <label class="form-check-label fw-medium" for="email_enabled">
                            Enable Automated Emails
                        </label>
                    </div>
                    <div class="form-text">When disabled, no automated emails are sent.</div>
                </div>
                <div class="col-md-3">
                    <label class="form-label small fw-medium mb-1">Rental Expiry Alert (days before)</label>
                    <input type="number" name="rental_expiry_reminder_days" class="form-control form-control-sm"
                           value="{{ $expiryDays }}" min="1" max="90">
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="bi bi-check-lg me-1"></i>Save Settings
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Send Test Email --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white py-3">
        <h6 class="mb-0 fw-semibold"><i class="bi bi-send me-2 text-primary"></i>Send Test Email</h6>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('admin.settings.email-templates.test') }}">
            @csrf
            <div class="row g-2 align-items-end">
                <div class="col-md-4">
                    <label class="form-label small fw-medium mb-1">Recipient Email</label>
                    <input type="email" name="test_email" class="form-control form-control-sm"
                           placeholder="test@example.com" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label small fw-medium mb-1">Template</label>
                    <select name="template_key" class="form-select form-select-sm" required>
                        @foreach($templates as $tpl)
                            <option value="{{ $tpl->key }}">{{ $tpl->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-send me-1"></i>Send Test
                    </button>
                </div>
            </div>
            <div class="form-text mt-1">Placeholders will be filled with sample values like [placeholder_name].</div>
        </form>
    </div>
</div>

{{-- Templates --}}
<div class="mb-3">
    <h6 class="fw-semibold mb-0">Email Templates</h6>
    <p class="text-muted small mb-0">Edit subject and body. Use <code>@{{token_name}}</code> tokens shown in each template.</p>
</div>

@foreach($templates as $tpl)
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white py-3 d-flex align-items-center justify-content-between">
        <div>
            <span class="fw-semibold">{{ $tpl->name }}</span>
            @php $badgeClass = $tpl->is_active ? 'bg-success bg-opacity-10 text-success' : 'bg-secondary bg-opacity-10 text-secondary'; @endphp
            <span class="badge ms-2 {{ $badgeClass }} small">
                {{ $tpl->is_active ? 'Active' : 'Inactive' }}
            </span>
        </div>
        <form method="POST" action="{{ route('admin.settings.email-templates.toggle', $tpl->key) }}">
            @csrf @method('PATCH')
            <button type="submit" class="btn btn-sm btn-light">
                {{ $tpl->is_active ? 'Disable' : 'Enable' }}
            </button>
        </form>
    </div>
    <div class="card-body">
        @if($tpl->placeholders && count($tpl->placeholders))
        <div class="mb-3 p-3 rounded" style="background:#f8f9fa;border:1px dashed #dee2e6">
            <div class="small fw-semibold text-muted mb-2">
                <i class="bi bi-braces me-1"></i>Available Placeholders
                <span class="fw-normal text-muted ms-1">— click any token to copy it</span>
            </div>
            <div class="d-flex flex-wrap gap-2">
                @foreach($tpl->placeholders as $token)
                @php $tokenText = '{{' . $token . '}}'; @endphp
                <button type="button"
                        class="btn btn-sm copy-token"
                        style="font-family:monospace;font-size:0.8rem;background:#e8f0fe;border:1px solid #c5d5f7;color:#1a3c8f;padding:2px 8px"
                        data-token="{{ $tokenText }}"
                        title="Click to copy">
                    {{ $tokenText }}
                </button>
                @endforeach
            </div>
        </div>
        @endif

        <form method="POST" action="{{ route('admin.settings.email-templates.update', $tpl->key) }}">
            @csrf @method('PATCH')
            <div class="mb-3">
                <label class="form-label small fw-medium mb-1">Subject</label>
                <input type="text" name="subject" class="form-control form-control-sm"
                       value="{{ old('subject_' . $tpl->key, $tpl->subject) }}" required>
            </div>
            <div class="mb-3">
                <label class="form-label small fw-medium mb-1">Body</label>
                <textarea name="body_html"
                          id="editor-{{ $tpl->key }}"
                          class="form-control wysiwyg-editor">{{ old('body_html_' . $tpl->key, $tpl->body_html) }}</textarea>
            </div>
            <button type="submit" class="btn btn-primary btn-sm">
                <i class="bi bi-check-lg me-1"></i>Save Template
            </button>
        </form>
    </div>
</div>
@endforeach

{{-- Recent Email Log --}}
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white py-3">
        <h6 class="mb-0 fw-semibold"><i class="bi bi-clock-history me-2 text-primary"></i>Recent Email Log</h6>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle small">
            <thead class="table-light">
                <tr>
                    <th>Recipient</th>
                    <th>Template</th>
                    <th>Subject</th>
                    <th>Status</th>
                    <th>Sent At</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentLogs as $log)
                <tr>
                    <td>{{ $log->recipient_email }}</td>
                    <td>{{ $templateNames[$log->template_key] ?? $log->template_key }}</td>
                    <td class="text-truncate" style="max-width:250px">{{ $log->subject }}</td>
                    <td>
                        @if($log->status === 'sent')
                            <span class="badge bg-success bg-opacity-10 text-success">Sent</span>
                        @else
                            <span class="badge bg-danger bg-opacity-10 text-danger" title="{{ $log->error_message }}">Failed</span>
                        @endif
                    </td>
                    <td class="text-muted text-nowrap">{{ $log->sent_at->format('d M Y, h:i A') }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center text-muted py-4">No emails sent yet.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tinymce@5.10.9/tinymce.min.js"></script>
<script>
function copyTokenFallback(text, callback) {
    var ta = document.createElement('textarea');
    ta.value = text;
    ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none';
    document.body.appendChild(ta);
    ta.focus();
    ta.select();
    try { document.execCommand('copy'); callback(); } catch (e) {}
    document.body.removeChild(ta);
}

document.querySelectorAll('.copy-token').forEach(function (btn) {
    btn.addEventListener('click', function () {
        var token       = btn.getAttribute('data-token');
        var originalText = btn.textContent.trim();

        function showCopied() {
            btn.textContent        = 'Copied!';
            btn.style.background   = '#d4edda';
            btn.style.borderColor  = '#a3d5b0';
            btn.style.color        = '#155724';
            setTimeout(function () {
                btn.textContent        = originalText;
                btn.style.background   = '#e8f0fe';
                btn.style.borderColor  = '#c5d5f7';
                btn.style.color        = '#1a3c8f';
            }, 1500);
        }

        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(token).then(showCopied).catch(function () {
                copyTokenFallback(token, showCopied);
            });
        } else {
            copyTokenFallback(token, showCopied);
        }
    });
});

tinymce.init({
    selector: '.wysiwyg-editor',
    base_url: 'https://cdn.jsdelivr.net/npm/tinymce@5.10.9',
    suffix: '.min',
    height: 450,
    menubar: false,
    branding: false,
    plugins: 'advlist autolink lists link charmap searchreplace code table paste wordcount',
    toolbar:
        'undo redo | formatselect | bold italic underline strikethrough | ' +
        'forecolor backcolor | alignleft aligncenter alignright | ' +
        'bullist numlist | link table | code | removeformat',
    fontsize_formats: '10px 12px 13px 14px 15px 16px 18px 20px 24px',
    content_style: 'body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; }',
    paste_as_text: false,
    paste_retain_style_properties: 'all',
    setup: function (editor) {
        // Keep the underlying textarea in sync as the user types
        editor.on('change input undo redo', function () {
            editor.save();
        });
    }
});
</script>
@endpush