@extends('layouts.admin')

@section('title', 'Compose Email Broadcast')
@section('page-title', 'Compose & Dispatch Broadcast Email')

@section('content')
<div style="margin-bottom: 1.5rem;">
  <a href="{{ route('admin.mail-centre.index') }}" class="btn btn-outline btn-sm" style="display: inline-flex; align-items: center; gap: 0.4rem;">
    <i class="fas fa-arrow-left"></i> Back to Mail Centre
  </a>
</div>

<div style="display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start;">

  <!-- Left: Campaign Composer Form -->
  <div class="admin-card">
    <div style="margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-light); padding-bottom: 1rem;">
      <h3 style="font-size: 1.25rem; font-family: var(--font-heading); color: var(--text-heading); margin: 0 0 0.35rem 0;">
        Broadcast Parameters & Content
      </h3>
      <p style="font-size: 0.85rem; color: var(--text-light); margin: 0;">
        Emails are dispatched asynchronously via background queue workers with automatic token personalization.
      </p>
    </div>

    @if ($errors->any())
      <div style="padding: 0.85rem 1.25rem; background: rgba(239, 68, 68, 0.12); border-left: 4px solid #ef4444; border-radius: var(--radius-sm); margin-bottom: 1.5rem; color: #ef4444; font-size: 0.9rem;">
        <ul style="list-style: none; margin: 0; padding: 0;">
          @foreach ($errors->all() as $error)
            <li><i class="fas fa-exclamation-circle" style="margin-right: 0.4rem;"></i> {{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <form id="broadcastForm" method="POST" action="{{ route('admin.mail-centre.store') }}" enctype="multipart/form-data" data-ajax="true">
      @csrf

      <!-- Load from Reusable Template -->
      @if($templates->count() > 0)
        <div style="margin-bottom: 1.25rem; background: var(--bg-surface); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-light);">
          <label style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text-heading);">
            <i class="fas fa-layer-group" style="color: var(--accent); margin-right: 0.3rem;"></i> Autofill from Reusable Template
          </label>
          <select id="templateSelector" class="filter-select" style="width: 100%; height: 40px;" onchange="applyTemplate(this.value)">
            <option value="">-- Choose a pre-configured template --</option>
            @foreach($templates as $tpl)
              <option value="{{ $tpl->id }}" data-subject="{{ $tpl->subject }}" data-body="{{ $tpl->body }}">
                [{{ $tpl->category }}] {{ $tpl->title }}
              </option>
            @endforeach
          </select>
        </div>
      @endif

      <!-- Target Segment Selection -->
      <div style="margin-bottom: 1.25rem;">
        <label for="target_type" style="display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text-heading);">
          Target Recipient Audience <span style="color: #ef4444;">*</span>
        </label>
        <select id="target_type" name="target_type" required class="filter-select" style="width: 100%; height: 42px;" onchange="handleTargetTypeChange(this.value)">
          <option value="all_jobseekers" {{ old('target_type') === 'all_jobseekers' ? 'selected' : '' }}>All Active Jobseekers</option>
          <option value="all_employers" {{ old('target_type') === 'all_employers' ? 'selected' : '' }}>All Verified Employers</option>
          <option value="unverified_users" {{ old('target_type') === 'unverified_users' ? 'selected' : '' }}>Unverified Accounts (Aadhaar / KYC Pending)</option>
          <option value="district" {{ old('target_type') === 'district' ? 'selected' : '' }}>Users by District</option>
          <option value="registered_after" {{ old('target_type') === 'registered_after' ? 'selected' : '' }}>Users Registered After Date</option>
          <option value="individual" {{ (old('target_type') === 'individual' || $targetUser) ? 'selected' : '' }}>Individual Account (Single Dispatch)</option>
        </select>
      </div>

      <!-- Conditional Field: District -->
      <div id="districtContainer" style="margin-bottom: 1.25rem; display: {{ old('target_type') === 'district' ? 'block' : 'none' }};">
        <label for="target_district" style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text-heading);">
          Select Target District <span style="color: #ef4444;">*</span>
        </label>
        <select id="target_district" name="target_district" class="filter-select" style="width: 100%; height: 40px;">
          @foreach($districts as $d)
            <option value="{{ $d->name }}" {{ old('target_district') === $d->name ? 'selected' : '' }}>{{ $d->name }}</option>
          @endforeach
        </select>
      </div>

      <!-- Conditional Field: Registered After -->
      <div id="dateContainer" style="margin-bottom: 1.25rem; display: {{ old('target_type') === 'registered_after' ? 'block' : 'none' }};">
        <label for="registered_after_date" style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text-heading);">
          Registered On or After <span style="color: #ef4444;">*</span>
        </label>
        <input type="date" id="registered_after_date" name="registered_after_date" value="{{ old('registered_after_date', now()->subDays(30)->format('Y-m-d')) }}"
               class="filter-select" style="width: 100%; height: 40px;">
      </div>

      <!-- Conditional Field: Individual Email -->
      <div id="individualContainer" style="margin-bottom: 1.25rem; display: {{ (old('target_type') === 'individual' || $targetUser) ? 'block' : 'none' }};">
        <label for="recipient_email" style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text-heading);">
          Individual Recipient Email <span style="color: #ef4444;">*</span>
        </label>
        <input type="email" id="recipient_email" name="recipient_email" value="{{ old('recipient_email', $targetUser?->email) }}"
               placeholder="recipient@example.com" class="filter-select" style="width: 100%; height: 40px;">
      </div>

      <!-- Subject -->
      <div style="margin-bottom: 1.25rem;">
        <label for="subject" style="display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text-heading);">
          Email Subject Line <span style="color: #ef4444;">*</span>
        </label>
        <input type="text" id="subject" name="subject" value="{{ old('subject') }}" required
               placeholder="Official Notice: Scheduled Employment Drive or Verification Advisory"
               class="filter-select" style="width: 100%; height: 44px; font-size: 0.95rem;">
      </div>

      <!-- Body -->
      <div style="margin-bottom: 1.25rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;">
          <label for="body" style="font-size: 0.9rem; font-weight: 600; color: var(--text-heading);">
            Email Message Content <span style="color: #ef4444;">*</span>
          </label>
          <span style="font-size: 0.78rem; color: var(--text-light);">
            Tokens will be personalized per recipient automatically
          </span>
        </div>
        <textarea id="body" name="body" rows="10" required
                  placeholder="Dear {name},&#10;&#10;We are writing to update you on your employment exchange registration (#{registration_id}).&#10;&#10;Please sign in to your dashboard at {dashboard_url} to review the latest requisitions."
                  class="filter-select" style="width: 100%; height: auto; padding: 0.85rem; font-family: inherit; font-size: 0.92rem; line-height: 1.6;"></textarea>
      </div>

      <!-- Attachment -->
      <div style="margin-bottom: 1.5rem;">
        <label for="attachment" style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text-heading);">
          Optional Attachment (PDF, DOCX, JPEG, PNG — Max 5MB)
        </label>
        <input type="file" id="attachment" name="attachment" accept=".pdf,.docx,.doc,.jpg,.jpeg,.png"
               class="filter-select" style="width: 100%; height: 42px; padding: 0.4rem;">
      </div>

      <!-- Save as Reusable Template Checkbox -->
      <div style="margin-bottom: 1.75rem; background: var(--bg-surface); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-light);">
        <label style="display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.88rem; cursor: pointer;">
          <input type="checkbox" id="save_as_template" name="save_as_template" value="1" onchange="toggleTemplateTitle(this.checked)">
          Save this message as a reusable template for future broadcasts
        </label>
        <div id="templateTitleContainer" style="margin-top: 0.75rem; display: none;">
          <input type="text" name="template_title" placeholder="Template Title (e.g. 2026 Mega Job Fair Notice)"
                 class="filter-select" style="width: 100%; height: 38px; font-size: 0.85rem;">
        </div>
      </div>

      <!-- Action Buttons -->
      <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
        <button type="button" onclick="sendTestPreview()" class="btn btn-outline" style="height: 44px; display: inline-flex; align-items: center; gap: 0.4rem;">
          <i class="fas fa-vial"></i> Send Test Preview to Me
        </button>

        <button type="submit" class="btn btn-primary" style="height: 44px; padding: 0 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600;">
          <i class="fas fa-paper-plane"></i> Dispatch Queued Broadcast
        </button>
      </div>

    </form>
  </div>

  <!-- Right: Token Guide & Best Practices -->
  <div style="display: flex; flex-direction: column; gap: 1.25rem;">

    <!-- Dynamic Tokens Reference -->
    <div class="admin-card">
      <h4 style="font-size: 0.95rem; font-family: var(--font-heading); margin: 0 0 0.75rem 0; color: var(--text-heading); display: flex; align-items: center; gap: 0.4rem;">
        <i class="fas fa-code" style="color: var(--accent);"></i> Dynamic Personalization Tokens
      </h4>
      <p style="font-size: 0.8rem; color: var(--text-light); margin: 0 0 1rem 0;">
        Click any token below to append it to your email body:
      </p>

      <div style="display: flex; flex-direction: column; gap: 0.5rem;">
        <button type="button" onclick="insertToken('{name}')" class="btn btn-outline btn-sm" style="text-align: left; justify-content: flex-start; font-family: monospace; font-size: 0.82rem;">
          <strong style="color: var(--accent);">{name}</strong> — Recipient's Full Name
        </button>
        <button type="button" onclick="insertToken('{email}')" class="btn btn-outline btn-sm" style="text-align: left; justify-content: flex-start; font-family: monospace; font-size: 0.82rem;">
          <strong style="color: var(--accent);">{email}</strong> — Recipient's Email
        </button>
        <button type="button" onclick="insertToken('{registration_id}')" class="btn btn-outline btn-sm" style="text-align: left; justify-content: flex-start; font-family: monospace; font-size: 0.82rem;">
          <strong style="color: var(--accent);">{registration_id}</strong> — Reg / Statutory ID
        </button>
        <button type="button" onclick="insertToken('{dashboard_url}')" class="btn btn-outline btn-sm" style="text-align: left; justify-content: flex-start; font-family: monospace; font-size: 0.82rem;">
          <strong style="color: var(--accent);">{dashboard_url}</strong> — Direct Portal URL
        </button>
        <button type="button" onclick="insertToken('{app_name}')" class="btn btn-outline btn-sm" style="text-align: left; justify-content: flex-start; font-family: monospace; font-size: 0.82rem;">
          <strong style="color: var(--accent);">{app_name}</strong> — Zhelhire Consultancy
        </button>
      </div>
    </div>

    <!-- Delivery SLA & Safety Notice -->
    <div class="admin-card" style="background: rgba(0, 102, 255, 0.05); border: 1px solid rgba(0, 102, 255, 0.2);">
      <h4 style="font-size: 0.9rem; margin: 0 0 0.5rem 0; color: var(--accent); display: flex; align-items: center; gap: 0.4rem;">
        <i class="fas fa-shield-alt"></i> Delivery & Queue Safety
      </h4>
      <ul style="font-size: 0.8rem; color: var(--text-body); margin: 0; padding-left: 1.2rem; line-height: 1.5;">
        <li>Broadcasts are processed via Laravel background queues without blocking HTTP web requests.</li>
        <li>Always click <strong>Send Test Preview</strong> to inspect formatting in your own inbox before broadcasting to thousands of users.</li>
        <li>Transmissions are rate-limited to preserve SMTP server sender reputation.</li>
      </ul>
    </div>

  </div>

</div>

<!-- Client script for interactivity -->
<script>
function handleTargetTypeChange(val) {
  document.getElementById('districtContainer').style.display = val === 'district' ? 'block' : 'none';
  document.getElementById('dateContainer').style.display = val === 'registered_after' ? 'block' : 'none';
  document.getElementById('individualContainer').style.display = val === 'individual' ? 'block' : 'none';
}

function toggleTemplateTitle(checked) {
  document.getElementById('templateTitleContainer').style.display = checked ? 'block' : 'none';
}

function insertToken(token) {
  const bodyField = document.getElementById('body');
  const start = bodyField.selectionStart;
  const end = bodyField.selectionEnd;
  const text = bodyField.value;
  bodyField.value = text.substring(0, start) + token + text.substring(end);
  bodyField.focus();
  bodyField.selectionStart = bodyField.selectionEnd = start + token.length;
}

function applyTemplate(templateId) {
  if (!templateId) return;
  const select = document.getElementById('templateSelector');
  const option = select.options[select.selectedIndex];
  if (option) {
    document.getElementById('subject').value = option.getAttribute('data-subject') || '';
    document.getElementById('body').value = option.getAttribute('data-body') || '';
  }
}

function sendTestPreview() {
  const subject = document.getElementById('subject').value.trim();
  const body = document.getElementById('body').value.trim();

  if (!subject || !body) {
    alert('Please provide both a Subject and Message Body before sending a test preview.');
    return;
  }

  const formData = new FormData();
  formData.append('_token', '{{ csrf_token() }}');
  formData.append('subject', subject);
  formData.append('body', body);

  fetch('{{ route("admin.mail-centre.test") }}', {
    method: 'POST',
    body: formData,
    headers: {
      'X-Requested-With': 'XMLHttpRequest'
    }
  })
  .then(res => res.json())
  .then(data => {
    if (data.success) {
      alert(data.message);
    } else {
      alert('Error: ' + data.message);
    }
  })
  .catch(err => {
    alert('Failed to dispatch test preview: ' + err.message);
  });
}
</script>
@endsection