<?php
/**
 * Admin — Compose Newsletter Email
 *
 * @var int $activeCount
 * @var bool $mailerAvailable
 * @var bool $smtpConfigured
 */
$bp = defined('BASE_PATH') ? BASE_PATH : '/gmind';
$csrf = htmlspecialchars($csrfToken ?? '', ENT_QUOTES, 'UTF-8');
?>
 
<div class="admin-toolbar">
    <div class="admin-toolbar-left">
        <a href="<?= $bp ?>/admin/newsletter" class="admin-btn admin-btn-secondary">
            <svg class="admin-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
            Back to Subscribers
        </a>
    </div>
    <div class="admin-toolbar-right">
        <span class="admin-badge admin-badge-success">Active Subscribers: <?= (int) $activeCount ?></span>
    </div>
</div>

<?php if (!$mailerAvailable): ?>
<div class="admin-card" style="margin-bottom:1.5rem;">
    <div class="admin-card-body" style="background:#fff3f3;border-left:4px solid #ef4444;">
        <strong style="color:#ef4444;">PHPMailer Not Found</strong>
        <p style="margin:0.5rem 0 0;">The PHPMailer library is not installed. Please install it in the <code>/phpmailer/</code> directory to send newsletters.</p>
    </div>
</div>
<?php elseif (!$smtpConfigured): ?>
<div class="admin-card" style="margin-bottom:1.5rem;">
    <div class="admin-card-body" style="background:#fffbeb;border-left:4px solid #f59e0b;">
        <strong style="color:#f59e0b;">SMTP Not Configured</strong>
        <p style="margin:0.5rem 0 0;">SMTP settings are not configured. Please <a href="<?= $bp ?>/admin/smtp-settings" style="color:#f59e0b;text-decoration:underline;">configure SMTP settings</a> first before sending newsletters.</p>
    </div>
</div>
<?php endif; ?>

<!-- Quick Templates -->
<div class="admin-card" style="margin-bottom:1.5rem;">
    <div class="admin-card-header">
        <h3 class="admin-card-title">Quick Templates</h3>
    </div>
    <div class="admin-card-body">
        <p style="font-size:0.9rem;color:#666;margin-bottom:1rem;">Click a template to auto-fill the email subject and body. You can then edit before sending.</p>
        <div style="display:flex;gap:0.75rem;flex-wrap:wrap;">
            <button type="button" class="admin-btn admin-btn-primary" onclick="loadTemplate('prepaid_design')">
                <svg class="admin-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
                Prepaid Design Course Offer
            </button>
            <button type="button" class="admin-btn admin-btn-secondary" onclick="loadTemplate('admission_open')">
                <svg class="admin-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
                Admission Open Notice
            </button>
            <button type="button" class="admin-btn admin-btn-outline" onclick="loadTemplate('general')">
                <svg class="admin-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                General Newsletter
            </button>
        </div>
    </div>
</div>

<div class="admin-card">
    <div class="admin-card-header">
        <h3 class="admin-card-title">Compose Newsletter</h3>
    </div>
    <div class="admin-card-body">
        <form method="POST" action="<?= $bp ?>/admin/newsletter/send" id="composeForm">
            <input type="hidden" name="csrf_token" value="<?= $csrf ?>">

            <div class="admin-form-group">
                <label for="subject">Email Subject *</label>
                <input type="text" id="subject" name="subject" class="admin-form-control" placeholder="Enter email subject..." required>
            </div>

            <div class="admin-form-group">
                <label for="body_html">Email Body (HTML) *</label>
                <textarea id="body_html" name="body_html" class="admin-form-control" rows="16" placeholder="Write your newsletter content here... You can use HTML." required style="font-family:monospace;font-size:0.85rem;"></textarea>
                <small class="admin-form-help">You can use HTML tags for formatting. Use {{name}} for subscriber name, {{email}} for subscriber email. An unsubscribe link will be appended automatically.</small>
            </div>

            <div class="admin-form-group">
                <label for="body_text">Plain Text Version (optional)</label>
                <textarea id="body_text" name="body_text" class="admin-form-control" rows="6" placeholder="Plain text version of the email (optional)..." style="font-family:monospace;font-size:0.9rem;"></textarea>
            </div>

            <hr style="margin:1.5rem 0;">

            <!-- Test Mode -->
            <div class="admin-form-group" style="background:#f0f9ff;padding:1rem;border-radius:8px;border:1px solid #bae6fd;">
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                    <input type="checkbox" name="test_mode" value="1" id="testModeCheckbox" style="width:18px;height:18px;">
                    <strong>Send Test Email Only</strong>
                </label>
                <div id="testEmailField" style="margin-top:0.75rem;display:none;">
                    <label for="test_email">Test Email Address</label>
                    <input type="email" id="test_email" name="test_email" class="admin-form-control" placeholder="Enter test email address...">
                </div>
            </div>

            <div style="margin-top:1.5rem;display:flex;gap:1rem;">
                <button type="submit" class="admin-btn admin-btn-primary" <?= (!$mailerAvailable || !$smtpConfigured) ? 'disabled' : '' ?>>
                    <svg class="admin-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                    Send Newsletter
                </button>
                <a href="<?= $bp ?>/admin/newsletter" class="admin-btn admin-btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<script>
document.getElementById('testModeCheckbox').addEventListener('change', function() {
    document.getElementById('testEmailField').style.display = this.checked ? 'block' : 'none';
});

function loadTemplate(templateName) {
    var templates = {
        'prepaid_design': {
            subject: 'Design Your Future — Prepaid Design Course at Gmind Institute | Limited Seats!',
            body: `<div style="font-family:'Segoe UI',Arial,sans-serif;max-width:640px;margin:0 auto;background:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.10);">

<!-- Header Banner -->
<div style="background:linear-gradient(135deg,#1a237e 0%,#283593 40%,#3949ab 100%);padding:40px 30px;text-align:center;position:relative;">
  <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><circle cx=%2220%22 cy=%2230%22 r=%2240%22 fill=%22rgba(255,255,255,0.04)%22/><circle cx=%2280%22 cy=%2270%22 r=%2230%22 fill=%22rgba(255,255,255,0.03)%22/></svg>');background-size:cover;"></div>
  <h1 style="color:#ffffff;font-size:28px;font-weight:800;margin:0 0 8px;position:relative;text-transform:uppercase;letter-spacing:1px;">Design Your Future</h1>
  <p style="color:#bbdefb;font-size:16px;margin:0;position:relative;">Prepaid Design Course — Now Open for Admission</p>
  <div style="margin-top:20px;display:inline-block;background:#ff6d00;color:#fff;padding:8px 24px;border-radius:50px;font-size:14px;font-weight:700;position:relative;">LIMITED SEATS AVAILABLE</div>
</div>

<!-- Greeting -->
<div style="padding:30px 30px 10px;">
  <p style="font-size:16px;color:#333;margin:0;">Dear <strong>{{name}}</strong>,</p>
  <p style="font-size:15px;color:#555;margin:15px 0 0;line-height:1.7;">Are you ready to turn your creativity into a career? <strong>Gmind Institute</strong> is thrilled to announce our <strong>Prepaid Design Course</strong> — a comprehensive program designed to transform beginners into professional designers.</p>
</div>

<!-- Course Highlights -->
<div style="padding:10px 30px 20px;">
  <h2 style="font-size:20px;color:#1a237e;margin:20px 0 15px;padding-bottom:8px;border-bottom:3px solid #ff6d00;display:inline-block;">What You Will Learn</h2>
  <table style="width:100%;border-collapse:separate;border-spacing:0 10px;">
    <tr>
      <td style="background:#e8eaf6;padding:14px 18px;border-radius:8px 0 0 8px;width:40px;text-align:center;font-size:20px;">🎨</td>
      <td style="background:#e8eaf6;padding:14px 18px;border-radius:0 8px 8px 0;"><strong style="color:#1a237e;">Graphic Design Fundamentals</strong><br><span style="font-size:13px;color:#555;">Color theory, typography, layout principles & composition</span></td>
    </tr>
    <tr>
      <td style="background:#e8eaf6;padding:14px 18px;border-radius:8px 0 0 8px;width:40px;text-align:center;font-size:20px;">💻</td>
      <td style="background:#e8eaf6;padding:14px 18px;border-radius:0 8px 8px 0;"><strong style="color:#1a237e;">Industry Tools Mastery</strong><br><span style="font-size:13px;color:#555;">Adobe Photoshop, Illustrator, CorelDRAW & Canva Pro</span></td>
    </tr>
    <tr>
      <td style="background:#e8eaf6;padding:14px 18px;border-radius:8px 0 0 8px;width:40px;text-align:center;font-size:20px;">📱</td>
      <td style="background:#e8eaf6;padding:14px 18px;border-radius:0 8px 8px 0;"><strong style="color:#1a237e;">UI/UX Design Basics</strong><br><span style="font-size:13px;color:#555;">Mobile app design, wireframing, user experience principles</span></td>
    </tr>
    <tr>
      <td style="background:#e8eaf6;padding:14px 18px;border-radius:8px 0 0 8px;width:40px;text-align:center;font-size:20px;">🎬</td>
      <td style="background:#e8eaf6;padding:14px 18px;border-radius:0 8px 8px 0;"><strong style="color:#1a237e;">Video Editing & Motion Graphics</strong><br><span style="font-size:13px;color:#555;">Premiere Pro, After Effects basics for social media content</span></td>
    </tr>
    <tr>
      <td style="background:#e8eaf6;padding:14px 18px;border-radius:8px 0 0 8px;width:40px;text-align:center;font-size:20px;">🚀</td>
      <td style="background:#e8eaf6;padding:14px 18px;border-radius:0 8px 8px 0;"><strong style="color:#1a237e;">Portfolio & Freelancing</strong><br><span style="font-size:13px;color:#555;">Build your professional portfolio, freelance tips & client management</span></td>
    </tr>
  </table>
</div>

<!-- Pricing / Offer Box -->
<div style="margin:10px 30px 20px;background:linear-gradient(135deg,#fff3e0,#ffe0b2);border:2px solid #ff6d00;border-radius:12px;padding:25px;text-align:center;">
  <p style="font-size:13px;color:#e65100;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin:0 0 8px;">Prepaid Offer — Save Big!</p>
  <p style="font-size:32px;font-weight:800;color:#1a237e;margin:0 0 5px;">Special Discounted Fee</p>
  <p style="font-size:15px;color:#555;margin:5px 0 15px;">Pay upfront and get <strong style="color:#ff6d00;">20% OFF</strong> the regular course fee</p>
  <table style="margin:0 auto;border-collapse:collapse;">
    <tr>
      <td style="padding:10px 20px;background:#fff;border-radius:8px 0 0 8px;border:1px solid #e0e0e0;text-align:center;">
        <span style="font-size:13px;color:#999;text-decoration:line-through;">Regular Fee</span><br>
        <span style="font-size:18px;color:#999;font-weight:600;">₹15,000</span>
      </td>
      <td style="padding:10px 15px;text-align:center;font-size:24px;color:#ff6d00;font-weight:800;">→</td>
      <td style="padding:10px 20px;background:#1a237e;border-radius:0 8px 8px 0;text-align:center;">
        <span style="font-size:13px;color:#bbdefb;">Prepaid Fee</span><br>
        <span style="font-size:22px;color:#ffffff;font-weight:800;">₹12,000</span>
      </td>
    </tr>
  </table>
  <p style="font-size:12px;color:#777;margin:12px 0 0;">*EMI options also available | *Limited period offer</p>
</div>

<!-- Course Details -->
<div style="padding:10px 30px 20px;">
  <h2 style="font-size:20px;color:#1a237e;margin:20px 0 15px;padding-bottom:8px;border-bottom:3px solid #ff6d00;display:inline-block;">Course Details</h2>
  <table style="width:100%;border-collapse:collapse;font-size:14px;">
    <tr style="background:#f5f5f5;"><td style="padding:10px 15px;font-weight:600;border:1px solid #e0e0e0;width:40%;">Duration</td><td style="padding:10px 15px;border:1px solid #e0e0e0;">6 Months (Weekday & Weekend Batches)</td></tr>
    <tr><td style="padding:10px 15px;font-weight:600;border:1px solid #e0e0e0;">Mode</td><td style="padding:10px 15px;border:1px solid #e0e0e0;">Offline (Classroom) + Online Live Sessions</td></tr>
    <tr style="background:#f5f5f5;"><td style="padding:10px 15px;font-weight:600;border:1px solid #e0e0e0;">Eligibility</td><td style="padding:10px 15px;border:1px solid #e0e0e0;">10th Pass / 12th / Graduate — Anyone with a passion for design</td></tr>
    <tr><td style="padding:10px 15px;font-weight:600;border:1px solid #e0e0e0;">Certificate</td><td style="padding:10px 15px;border:1px solid #e0e0e0;">Industry-recognized certificate upon completion</td></tr>
    <tr style="background:#f5f5f5;"><td style="padding:10px 15px;font-weight:600;border:1px solid #e0e0e0;">Batch Starting</td><td style="padding:10px 15px;border:1px solid #e0e0e0;">New batch starting soon — Enroll Now!</td></tr>
    <tr><td style="padding:10px 15px;font-weight:600;border:1px solid #e0e0e0;">Placement</td><td style="padding:10px 15px;border:1px solid #e0e0e0;">100% Placement Assistance after course completion</td></tr>
  </table>
</div>

<!-- CTA Button -->
<div style="padding:10px 30px 30px;text-align:center;">
  <a href="https://advaysingh.co.in/gmind/admission" style="display:inline-block;background:linear-gradient(135deg,#ff6d00,#e65100);color:#ffffff;text-decoration:none;padding:16px 40px;border-radius:50px;font-size:18px;font-weight:700;letter-spacing:0.5px;box-shadow:0 4px 15px rgba(255,109,0,0.4);">ENROLL NOW — Reserve Your Seat</a>
  <p style="font-size:13px;color:#888;margin:12px 0 0;">or call us at <strong>+91-XXXXXXXXXX</strong> for more details</p>
</div>

<!-- Why Gmind -->
<div style="padding:0 30px 20px;">
  <h2 style="font-size:20px;color:#1a237e;margin:20px 0 15px;padding-bottom:8px;border-bottom:3px solid #ff6d00;display:inline-block;">Why Choose Gmind Institute?</h2>
  <table style="width:100%;border-collapse:separate;border-spacing:0 8px;">
    <tr><td style="padding:10px 15px;background:#e8f5e9;border-radius:6px;font-size:14px;color:#2e7d32;">✅ Experienced faculty with 10+ years industry experience</td></tr>
    <tr><td style="padding:10px 15px;background:#e8f5e9;border-radius:6px;font-size:14px;color:#2e7d32;">✅ Hands-on practical training with real projects</td></tr>
    <tr><td style="padding:10px 15px;background:#e8f5e9;border-radius:6px;font-size:14px;color:#2e7d32;">✅ Small batch size — Personal attention to every student</td></tr>
    <tr><td style="padding:10px 15px;background:#e8f5e9;border-radius:6px;font-size:14px;color:#2e7d32;">✅ 100% Placement Assistance & Interview Preparation</td></tr>
    <tr><td style="padding:10px 15px;background:#e8f5e9;border-radius:6px;font-size:14px;color:#2e7d32;">✅ State-of-the-art computer lab with latest design software</td></tr>
  </table>
</div>

<!-- Footer -->
<div style="background:#1a237e;padding:25px 30px;text-align:center;">
  <p style="color:#ffffff;font-size:18px;font-weight:700;margin:0 0 5px;">Gmind Institute</p>
  <p style="color:#bbdefb;font-size:13px;margin:0 0 15px;">Empowering Students with Quality Education & Career Skills</p>
  <p style="color:#90caf9;font-size:12px;margin:0;">Visit: advaysingh.co.in/gmind</p>
</div>

</div>`
        },
        'admission_open': {
            subject: 'Admissions Open 2025-26 — Join Gmind Institute Today!',
            body: `<div style="font-family:'Segoe UI',Arial,sans-serif;max-width:640px;margin:0 auto;background:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.10);">

<div style="background:linear-gradient(135deg,#0d47a1,#1565c0);padding:35px 30px;text-align:center;">
  <h1 style="color:#ffffff;font-size:26px;font-weight:800;margin:0 0 8px;">Admissions Open 2025-26</h1>
  <p style="color:#bbdefb;font-size:16px;margin:0;">Gmind Institute — Your Gateway to Success</p>
</div>

<div style="padding:30px;">
  <p style="font-size:16px;color:#333;margin:0;">Dear <strong>{{name}}</strong>,</p>
  <p style="font-size:15px;color:#555;margin:15px 0;line-height:1.7;">We are excited to announce that admissions are now open for the 2025-26 session at <strong>Gmind Institute</strong>. Whether you are a school student, graduate, or working professional, we have the right course for you.</p>

  <h2 style="font-size:20px;color:#0d47a1;margin:25px 0 15px;">Courses Available</h2>
  <table style="width:100%;border-collapse:collapse;font-size:14px;">
    <tr style="background:#e3f2fd;"><td style="padding:10px 15px;border:1px solid #bbdefb;font-weight:600;">💻 Computer Courses</td><td style="padding:10px 15px;border:1px solid #bbdefb;">Basic to Advanced, Tally, MS Office, DCA, ADCA, PGDCA</td></tr>
    <tr><td style="padding:10px 15px;border:1px solid #e0e0e0;font-weight:600;">🎨 Design Courses</td><td style="padding:10px 15px;border:1px solid #e0e0e0;">Graphic Design, UI/UX, Video Editing, Web Design</td></tr>
    <tr style="background:#e3f2fd;"><td style="padding:10px 15px;border:1px solid #bbdefb;font-weight:600;">📱 Programming</td><td style="padding:10px 15px;border:1px solid #bbdefb;">Python, Java, Web Development, App Development</td></tr>
    <tr><td style="padding:10px 15px;border:1px solid #e0e0e0;font-weight:600;">📚 Exam Preparation</td><td style="padding:10px 15px;border:1px solid #e0e0e0;">Competitive Exams, Practice Tests, Mock Interviews</td></tr>
  </table>

  <div style="margin:25px 0;text-align:center;">
    <a href="https://advaysingh.co.in/gmind/admission" style="display:inline-block;background:#0d47a1;color:#ffffff;text-decoration:none;padding:14px 36px;border-radius:50px;font-size:16px;font-weight:700;">Apply for Admission</a>
  </div>

  <p style="font-size:14px;color:#666;text-align:center;margin:20px 0 0;">For queries: Call <strong>+91-XXXXXXXXXX</strong> or visit our institute</p>
</div>

<div style="background:#0d47a1;padding:20px 30px;text-align:center;">
  <p style="color:#ffffff;font-size:16px;font-weight:700;margin:0 0 5px;">Gmind Institute</p>
  <p style="color:#bbdefb;font-size:12px;margin:0;">advaysingh.co.in/gmind</p>
</div>

</div>`
        },
        'general': {
            subject: 'Latest Updates from Gmind Institute',
            body: `<div style="font-family:'Segoe UI',Arial,sans-serif;max-width:640px;margin:0 auto;background:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.10);">

<div style="background:linear-gradient(135deg,#1a237e,#0d47a1);padding:35px 30px;text-align:center;">
  <h1 style="color:#ffffff;font-size:24px;font-weight:800;margin:0;">Updates from Gmind Institute</h1>
</div>

<div style="padding:30px;">
  <p style="font-size:16px;color:#333;margin:0;">Dear <strong>{{name}}</strong>,</p>
  <p style="font-size:15px;color:#555;margin:15px 0;line-height:1.7;">Write your newsletter content here. You can use HTML to format your email with images, links, and styled text.</p>
  
  <p style="font-size:15px;color:#555;line-height:1.7;">Replace this content with your actual newsletter message.</p>
</div>

<div style="background:#1a237e;padding:20px 30px;text-align:center;">
  <p style="color:#ffffff;font-size:16px;font-weight:700;margin:0 0 5px;">Gmind Institute</p>
  <p style="color:#bbdefb;font-size:12px;margin:0;">advaysingh.co.in/gmind</p>
</div>

</div>`
        }
    };

    var tpl = templates[templateName];
    if (!tpl) return;

    document.getElementById('subject').value = tpl.subject;
    document.getElementById('body_html').value = tpl.body;

    // Scroll to compose form
    document.getElementById('subject').scrollIntoView({ behavior: 'smooth', block: 'center' });
}
</script>
