<?php
/**
 * Admin — News Form (Create/Edit)
 */
$bp = defined('BASE_PATH') ? BASE_PATH : '/gmind';
$newsItem = $newsItem ?? null;
$isEdit = $newsItem !== null;
?>
<div class="admin-section">
    <div style="margin-bottom:20px;">
        <a href="<?= $bp ?>/admin/news" style="color:#4A6CF7; text-decoration:none; font-size:13px; display:inline-flex; align-items:center; gap:4px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
            Back to News
        </a>
    </div>

    <div class="admin-card" style="margin-bottom: 24px;">
        <div class="admin-card-header">
            <h2 class="admin-card-title"><?= $isEdit ? 'Edit News Article' : 'Add New News Article' ?></h2>
        </div>
        <div class="admin-card-body">
            <form method="POST" action="<?= $isEdit ? $bp . '/admin/news/' . (int)$newsItem['id'] : $bp . '/admin/news' ?>" enctype="multipart/form-data" class="admin-form" novalidate style="max-width:800px;">
                <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken ?? '', ENT_QUOTES, 'UTF-8') ?>">

                <!-- Title (English) -->
                <div class="admin-form-group">
                    <label for="title" class="admin-form-label">Title (English) <span class="admin-required">*</span></label>
                    <input type="text" id="title" name="title" class="admin-form-input" required
                           value="<?= htmlspecialchars($newsItem['title'] ?? '', ENT_QUOTES, 'UTF-8') ?>"
                           placeholder="Enter news title in English">
                </div>

                <!-- Title Hindi -->
                <div class="admin-form-group">
                    <label for="title_hi" class="admin-form-label">
                        Title (Hindi)
                        <span style="font-weight:400; color:#888; font-size:12px; margin-left:6px;">— optional</span>
                    </label>
                    <input type="text" id="title_hi" name="title_hi" class="admin-form-input"
                           value="<?= htmlspecialchars($newsItem['title_hi'] ?? '', ENT_QUOTES, 'UTF-8') ?>"
                           placeholder="हिंदी में शीर्षक दर्ज करें">
                </div>

                <!-- Branch -->
                <div class="admin-form-group">
                    <label for="branch_id" class="admin-form-label">
                        Branch
                        <span style="font-weight:400; color:#888; font-size:12px; margin-left:6px;">— leave blank for general institute news</span>
                    </label>
                    <select id="branch_id" name="branch_id" class="admin-form-input">
                        <option value="">— General (No Branch) —</option>
                        <?php foreach ($branches ?? [] as $b): ?>
                        <option value="<?= (int) $b['id'] ?>" <?= ($newsItem['branch_id'] ?? '') == $b['id'] ? 'selected' : '' ?>>
                            <?= htmlspecialchars($b['name'], ENT_QUOTES, 'UTF-8') ?>
                        </option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <!-- Slug (read-only, for reference) -->
                <?php if ($isEdit && !empty($newsItem['slug'])): ?>
                <div class="admin-form-group">
                    <label class="admin-form-label">Slug <span style="font-weight:400; color:#888; font-size:12px;">— auto-generated, changes when title is updated</span></label>
                    <input type="text" class="admin-form-input" value="<?= htmlspecialchars($newsItem['slug'], ENT_QUOTES, 'UTF-8') ?>" readonly
                        style="background:#f5f5f5; color:#888; cursor:default;">
                </div>
                <?php endif; ?>

                <!-- Content (English) -->
                <div class="admin-form-group">
                    <label for="content" class="admin-form-label">Content (English) <span class="admin-required">*</span></label>
                    <textarea id="content" name="content" class="admin-form-textarea" rows="8" required
                        placeholder="Enter news content in English (HTML allowed)"><?= htmlspecialchars($newsItem['content'] ?? '', ENT_QUOTES, 'UTF-8') ?></textarea>
                </div>

                <!-- Content Hindi -->
                <div class="admin-form-group">
                    <label for="content_hi" class="admin-form-label">
                        Content (Hindi)
                        <span style="font-weight:400; color:#888; font-size:12px; margin-left:6px;">— optional</span>
                    </label>
                    <textarea id="content_hi" name="content_hi" class="admin-form-textarea" rows="8"
                        placeholder="हिंदी में सामग्री दर्ज करें (HTML allowed)"><?= htmlspecialchars($newsItem['content_hi'] ?? '', ENT_QUOTES, 'UTF-8') ?></textarea>
                </div>

                <!-- Image Upload -->
                <div class="admin-form-group">
                    <label for="image" class="admin-form-label">Featured Image</label>
                    <input type="file" id="image" name="image" accept="image/jpeg,image/png,image/gif,image/webp"
                        class="admin-form-input" style="padding:8px;">
                    <p style="font-size:12px; color:#888; margin:4px 0 0;">JPG, PNG, GIF, or WebP. Max 5MB. <?= $isEdit ? 'Leave empty to keep current image.' : '' ?></p>

                    <?php if ($isEdit && !empty($newsItem['image'])): ?>
                    <div style="margin-top:12px;">
                        <p style="font-size:13px; font-weight:600; margin-bottom:6px;">Current Image:</p>
                        <img src="<?= $bp ?>/<?= htmlspecialchars(ltrim($newsItem['image'], '/'), ENT_QUOTES, 'UTF-8') ?>"
                             alt="Current featured image"
                             style="max-width:300px; max-height:200px; border-radius:8px; border:1px solid #ddd; object-fit:cover;"
                             onerror="this.style.display='none'; this.parentElement.innerHTML='<p style=\'color:#999; font-size:13px;\'>Image not found</p>';">
                    </div>
                    <?php endif; ?>
                </div>

                <!-- Image Preview (for new uploads) -->
                <div id="imagePreview" style="display:none; margin-top:-8px; margin-bottom:16px;">
                    <p style="font-size:13px; font-weight:600; margin-bottom:6px;">Preview:</p>
                    <img id="imagePreviewImg" src="" alt="Preview"
                         style="max-width:300px; max-height:200px; border-radius:8px; border:1px solid #ddd; object-fit:cover;">
                </div>

                <!-- Active -->
                <div class="admin-form-group">
                    <label class="admin-form-label">Status</label>
                    <label class="admin-toggle">
                        <input type="checkbox" name="active" value="1" <?= ($newsItem['active'] ?? 1) ? 'checked' : '' ?>>
                        <span class="admin-toggle-slider"></span>
                        <span class="admin-toggle-label">Active / Published</span>
                    </label>
                </div>

                <!-- Actions -->
                <div class="admin-form-actions">
                    <button type="submit" class="admin-btn admin-btn-primary"><?= $isEdit ? 'Update News' : 'Create News' ?></button>
                    <a href="<?= $bp ?>/admin/news" class="admin-btn admin-btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Image preview on file select
document.getElementById('image')?.addEventListener('change', function(e) {
    const file = e.target.files[0];
    const preview = document.getElementById('imagePreview');
    const previewImg = document.getElementById('imagePreviewImg');

    if (file && preview && previewImg) {
        const reader = new FileReader();
        reader.onload = function(ev) {
            previewImg.src = ev.target.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(file);
    } else if (preview) {
        preview.style.display = 'none';
    }
});
</script>
