<?php
/**
 * Admin Resource Create/Edit Form
 * Supports all resource types: PDF upload, Video embed, Article/Guide content.
 */
$isEdit = !empty($resource['id']);
?>
<div class="container-fluid py-4 px-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold font-outfit text-dark m-0">
                <i class="fa-solid fa-book text-info me-2"></i>
                <?= $isEdit ? 'Edit Resource' : 'Upload New Resource' ?>
            </h2>
        </div>
        <a href="<?= APP_URL ?>/admin/resources" class="btn btn-outline-secondary rounded-pill px-4 font-outfit fw-bold">
            <i class="fa-solid fa-arrow-left me-2"></i>Back
        </a>
    </div>

    <form action="<?= APP_URL ?>/admin/resources<?= $isEdit ? '/' . $resource['id'] . '/edit' : '/create' ?>" method="POST" enctype="multipart/form-data" id="resource-form">
        <?= csrf_field() ?>

        <div class="row g-4">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold font-outfit text-dark mb-4"><i class="fa-solid fa-info-circle text-info me-2"></i>Resource Details</h5>
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-bold font-outfit text-sm">Title <span class="text-danger">*</span></label>
                                <input type="text" name="title" class="form-control" required value="<?= htmlspecialchars($resource['title'] ?? '') ?>" placeholder="e.g. WASSCE Past Questions 2023 – Mathematics">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold font-outfit text-sm">Resource Category <span class="text-danger">*</span></label>
                                <select name="category" class="form-select" id="resource-type" required>
                                    <option value="">Select category</option>
                                    <?php foreach (['pdf' => 'PDF', 'video' => 'Video', 'article' => 'Article', 'guide' => 'Guide', 'checklist' => 'Checklist', 'template' => 'Template', 'tip' => 'Tip'] as $val => $label): ?>
                                        <option value="<?= $val ?>" <?= ($resource['category'] ?? '') === $val ? 'selected' : '' ?>><?= $label ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold font-outfit text-sm">Module</label>
                                <select name="module" class="form-select">
                                    <?php foreach (['general' => 'General', 'transition' => 'Transition', 'career' => 'Career', 'scholarship' => 'Scholarship', 'admission' => 'Admission', 'study_skills' => 'Study Skills'] as $val => $label): ?>
                                        <option value="<?= $val ?>" <?= ($resource['module'] ?? 'general') === $val ? 'selected' : '' ?>><?= $label ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold font-outfit text-sm">Description <span class="text-danger">*</span></label>
                                <textarea name="description" class="form-control" rows="3" required><?= htmlspecialchars($resource['description'] ?? '') ?></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Dynamic content section based on type -->
                <div class="card border-0 shadow-sm mb-4" id="content-section">
                    <div class="card-body p-4">
                        <h5 class="fw-bold font-outfit text-dark mb-4"><i class="fa-solid fa-file text-warning me-2"></i>Resource Content</h5>

                        <!-- PDF Upload -->
                        <div class="resource-content-panel d-none" id="panel-file">
                            <label class="form-label fw-bold font-outfit text-sm">Upload File (PDF/Document)</label>
                            <?php if (!empty($resource['file_path'])): ?>
                                <div class="alert alert-success-subtle border rounded-3 d-flex align-items-center gap-2 mb-3">
                                    <i class="fa-solid fa-file-pdf text-danger"></i>
                                    <span class="text-sm">Current file: <strong><?= htmlspecialchars($resource['file_path']) ?></strong></span>
                                </div>
                            <?php endif; ?>
                            <input type="file" name="file" class="form-control" accept=".pdf,.epub,.docx">
                            <small class="text-muted">Max file size: 50MB</small>
                        </div>

                        <!-- Video Embed -->
                        <div class="resource-content-panel d-none" id="panel-video">
                            <label class="form-label fw-bold font-outfit text-sm">Video URL (YouTube / Vimeo)</label>
                            <input type="url" name="external_url" class="form-control" value="<?= htmlspecialchars($resource['external_url'] ?? '') ?>" placeholder="https://www.youtube.com/watch?v=...">
                            <small class="text-muted">YouTube and Vimeo URLs are supported.</small>
                        </div>

                        <!-- Article / Guide Content -->
                        <div class="resource-content-panel d-none" id="panel-article">
                            <label class="form-label fw-bold font-outfit text-sm">Article / Guide Content</label>
                            <textarea name="content" class="form-control" rows="10" id="content-editor"><?= htmlspecialchars($resource['content'] ?? '') ?></textarea>
                            <small class="text-muted">Supports HTML formatting.</small>
                        </div>

                        <div id="no-type-selected" class="text-center text-muted py-4">
                            <i class="fa-solid fa-arrow-up text-muted mb-2 d-block"></i>
                            Select a resource category above to see the content upload options.
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right: Sidebar -->
            <div class="col-lg-4">
                <!-- Thumbnail -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h6 class="fw-bold font-outfit text-dark mb-3"><i class="fa-solid fa-image text-primary me-2"></i>Thumbnail</h6>
                        <?php if (!empty($resource['thumbnail'])): ?>
                            <img src="<?= UPLOAD_URL ?>/thumbnails/<?= htmlspecialchars($resource['thumbnail']) ?>" alt="Thumbnail" class="rounded-2 mb-2 w-100" style="height:120px;object-fit:cover;">
                        <?php endif; ?>
                        <input type="file" name="thumbnail" class="form-control" accept="image/*">
                    </div>
                </div>

                <!-- Settings -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h6 class="fw-bold font-outfit text-dark mb-3"><i class="fa-solid fa-toggle-on text-warning me-2"></i>Settings</h6>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" name="is_published" id="is_published" value="1" <?= ($resource['is_published'] ?? 1) ? 'checked' : '' ?>>
                            <label class="form-check-label font-outfit fw-bold" for="is_published">Publish (visible to users)</label>
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" name="is_featured" id="is_featured" value="1" <?= !empty($resource['is_featured']) ? 'checked' : '' ?>>
                            <label class="form-check-label font-outfit fw-bold" for="is_featured">Feature on homepage</label>
                        </div>
                    </div>
                </div>

                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-info rounded-pill py-2 font-outfit fw-bold text-white">
                        <i class="fa-solid fa-floppy-disk me-2"></i><?= $isEdit ? 'Update Resource' : 'Publish Resource' ?>
                    </button>
                    <a href="<?= APP_URL ?>/admin/resources" class="btn btn-outline-secondary rounded-pill py-2 font-outfit fw-bold">Cancel</a>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const typeSelect = document.getElementById('resource-type');
    const panels = document.querySelectorAll('.resource-content-panel');
    const noType = document.getElementById('no-type-selected');

    const panelMap = {
        'pdf': 'panel-file',
        'template': 'panel-file',
        'checklist': 'panel-file',
        'video': 'panel-video',
        'article': 'panel-article',
        'guide': 'panel-article',
        'tip': 'panel-article',
    };

    function updatePanel() {
        panels.forEach(p => p.classList.add('d-none'));
        const val = typeSelect.value;
        if (panelMap[val]) {
            document.getElementById(panelMap[val]).classList.remove('d-none');
            noType.classList.add('d-none');
        } else {
            noType.classList.remove('d-none');
        }
    }

    typeSelect.addEventListener('change', updatePanel);
    updatePanel(); // init on page load for edit mode
});
</script>
