{{-- resources/views/email-bulk/index.blade.php --}}
@extends('layout.mainlayout')

@section('content')
<div class="page-wrapper cardhead">
    <div class="content container-fluid">
        @component('components.breadcrumb')
            @slot('title') Bulk Emails @endslot
        @endcomponent

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="card-title mb-0">Create Bulk Email</h5>
                        <div class="small text-muted">
                            Use placeholders:
                            <code>{{ '{' }}{name}{{ '}' }}</code>,
                            <code>{{ '{' }}{designation}{{ '}' }}</code>,
                            <code>{{ '{' }}{department}{{ '}' }}</code>,
                        </div>
                    </div>

                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success">{{ session('status') }}</div>
                        @elseif(session('error'))
                            <div class="alert alert-danger">{{ session('error') }}</div>
                        @endif

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form method="POST" action="{{ route('email-bulk.store') }}" id="bulkEmailForm">
                            @csrf

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Internal Title</label>
                                    <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Email Subject</label>
                                    <input type="text" name="subject" class="form-control" value="{{ old('subject') }}" required>
                                </div>
                            </div>

                            <div class="row g-3 mt-1">
                                <div class="col-md-6">
                                    <label class="form-label">Departments</label>
                                    <select name="filter[department_id][]" class="form-select" multiple>
                                        @foreach($departments as $d)
                                            <option value="{{ $d->id }}">{{ $d->name }}</option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">Leave empty for all.</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Designations</label>
                                    <select name="filter[designation_id][]" class="form-select" multiple>
                                        @foreach($designations as $d)
                                            <option value="{{ $d->id }}">{{ $d->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                               
                            </div>

                            <div class="mt-3">
                                <label class="form-label d-flex align-items-center gap-2">
                                    Email Body (TinyMCE)
                                    <span class="badge bg-light text-dark">supports &lt;style&gt;…&lt;/style&gt; and will be inlined</span>
                                </label>
                                <textarea id="editor" name="html_body" rows="14">{{ old('html_body') }}</textarea>
                            </div>

                            <div class="mt-3">
                                <label class="form-label">Extra CSS (optional)</label>
                                <textarea name="inline_css" rows="5" class="form-control" placeholder="/* e.g. .btn { padding: 12px } */">{{ old('inline_css') }}</textarea>
                            </div>

                            <div class="d-flex gap-2 mt-4">
                                <button type="submit" class="btn btn-primary">
                                    Queue Emails
                                </button>
                                <button type="button" id="previewBtn" class="btn btn-outline-secondary">
                                    Preview Merge (sample)
                                </button>
                            </div>
                        </form>

                        {{-- Simple preview area --}}
                        <div id="previewWrap" class="mt-4 d-none">
                            <h6 class="mb-2">Preview (Sample Data)</h6>
                            <div class="border rounded p-3" id="previewHtml"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Batches list --}}
        <div class="row mt-5">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Previous Email Batches</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="emailBatchesTable" class="table table-bordered table-striped align-middle">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Title</th>
                                        <th>Subject</th>
                                        <th>Filters</th>
                                        <th>Queued</th>
                                        <th>Completed</th>
                                        <th>Recipients</th>
                                        <th>Sent</th>
                                        <th>Failed</th>
                                        <th>Created By</th>
                                        <th>Created At</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($batches as $b)
                                        @php
                                            $sent = $b->recipients_sent_count ?? ($b->recipients->where('status','sent')->count() ?? 0);
                                            $failed = $b->recipients_failed_count ?? ($b->recipients->where('status','failed')->count() ?? 0);
                                            $total = $b->recipients_total_count ?? ($b->recipients->count() ?? 0);
                                        @endphp
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $b->title }}</td>
                                            <td>{{ $b->subject }}</td>
                                            <td>
                                                @if(empty($b->filters))
                                                    <span class="badge bg-secondary">All Users</span>
                                                @else
                                                    <code class="small">{{ json_encode($b->filters) }}</code>
                                                @endif
                                            </td>
                                            <td>{{ $b->queued_at ? $b->queued_at->format('d M Y, h:i A') : '-' }}</td>
                                            <td>{{ $b->completed_at ? $b->completed_at->format('d M Y, h:i A') : '-' }}</td>
                                            <td>{{ $total }}</td>
                                            <td class="text-success">{{ $sent }}</td>
                                            <td class="text-danger">{{ $failed }}</td>
                                            <td>{{ optional($b->creator)->name ?? 'N/A' }}</td>
                                            <td>{{ $b->created_at->format('d M Y, h:i A') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
@verbatim

{{-- TinyMCE --}}
<script src="https://cdn.tiny.cloud/1/pl597gijwzhagvi6wnpj4v67z9fqq9tbuvj2x433hcbl0yhn/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
<script>
tinymce.init({
  selector:'#editor',
  height: 520,
  menubar: true,
  plugins: 'link lists table code image hr fullscreen',
  toolbar: 'undo redo | styles | bold italic underline | alignleft aligncenter alignright | bullist numlist | link image table | hr | fullscreen | code',
  valid_children: '+body[style]',
  content_style: 'body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; }'
});

// Lightweight client-side preview (no CSS inlining here — server will inline when sending)
document.getElementById('previewBtn').addEventListener('click', function () {
  let html = tinymce.get('editor').getContent() || '';

  const samples = {
    name: 'Rahul Kumar',
    designation: 'Senior Engineer',
    department: 'R&D',
    team: 'Platform',
    project: 'HivePost'
  };

  // Replace {{name}}, {{designation}}, etc. (case-insensitive, allows spaces)
  const placeholders = ['name','designation','department','team','project'];
  placeholders.forEach((p) => {
    const re = new RegExp('\\{\\{\\s*' + p + '\\s*\\}\\}', 'gi');
    html = html.replace(re, samples[p] || '');
  });

  const wrap = document.getElementById('previewWrap');
  const out = document.getElementById('previewHtml');
  out.innerHTML = html || '<em class="text-muted">Nothing to preview.</em>';
  wrap.classList.remove('d-none');
});
</script>

<script>
    $(function () {
        $('#emailBatchesTable').DataTable({
            order: [[10,'desc']],
            pageLength: 25,
        });
    });
</script>
@endverbatim
@endpush