<?php
require_once __DIR__ . '/../functions.php';
ensure_role(['Admin']);

$siteName = get_setting('site_name');
$logo = get_setting('site_logo');
$whatsapp = get_setting('site_whatsapp');
$phone = get_setting('site_phone');
$email = get_setting('site_email');
$footer = get_setting('site_footer');
$copyright = get_setting('site_copyright', '© Tumaini Cyber ' . date('Y'));
$about = get_setting('site_about');
$facebook = get_setting('social_facebook');
$twitter = get_setting('social_twitter');
$linkedin = get_setting('social_linkedin');
$heroSlides = pdo()->query('SELECT * FROM hero_slides ORDER BY sort_order, id')->fetchAll();
$teamMembers = pdo()->query('SELECT * FROM team_members ORDER BY sort_order, id')->fetchAll();
$services = table_exists('services') ? pdo()->query('SELECT * FROM services ORDER BY sort_order, id')->fetchAll() : [];
$siteFavicon = get_setting('site_favicon');
$mailFromName = get_setting('mail_from_name', $siteName);
$mailFromAddress = get_setting('mail_from_address', $email);
$mailHost = get_setting('mail_host');
$mailPort = get_setting('mail_port');
$mailUsername = get_setting('mail_username');
$mailEncryption = get_setting('mail_encryption');
?>
<?php include __DIR__ . '/includes/header.php'; ?>
    <section class="panel">
        <header>
            <h2>CMS Settings</h2>
        </header>
        <form method="post" action="actions.php" enctype="multipart/form-data" class="settings-form">
            <input type="hidden" name="csrf" value="<?= csrf_token() ?>">
            <input type="hidden" name="action" value="save_settings">
            <div class="form-grid">
                <div>
                    <label>Website Name</label>
                    <input type="text" name="site_name" value="<?= clean($siteName) ?>" placeholder="Tumaini Cyber">
                    <label>Website Logo</label>
                    <?php if ($logo): ?>
                        <img src="<?= BASE_URL . UPLOAD_URL . '/' . clean($logo) ?>" alt="Logo preview" class="image-preview">
                    <?php endif; ?>
                    <input type="file" name="logo" accept="image/*,image/svg+xml">
                    <label>Favicon</label>
                    <?php if ($siteFavicon): ?>
                        <img src="<?= BASE_URL . UPLOAD_URL . '/' . clean($siteFavicon) ?>" alt="Favicon preview" class="image-preview" style="width:48px;height:48px;">
                    <?php endif; ?>
                    <input type="file" name="favicon" accept="image/*,image/svg+xml">
                </div>
                <div>
                    <label>Phone</label>
                    <input type="text" name="phone" value="<?= clean($phone) ?>">
                    <label>WhatsApp Number</label>
                    <input type="text" name="whatsapp" value="<?= clean($whatsapp) ?>" placeholder="+254701234567">
                    <label>Email</label>
                    <input type="email" name="email" value="<?= clean($email) ?>">
                    <label>Footer Text</label>
                    <textarea name="footer" rows="3"><?= clean($footer) ?></textarea>
                    <label>Copyright Text</label>
                    <input type="text" name="copyright" value="<?= clean($copyright) ?>" placeholder="© Tumaini Cyber 2027">
                </div>
                <div>
                    <label>Homepage About</label>
                    <textarea name="about" rows="5"><?= clean($about) ?></textarea>
                    <label>Facebook</label>
                    <input type="text" name="facebook" value="<?= clean($facebook) ?>">
                    <label>Twitter</label>
                    <input type="text" name="twitter" value="<?= clean($twitter) ?>">
                    <label>LinkedIn</label>
                    <input type="text" name="linkedin" value="<?= clean($linkedin) ?>">
                </div>
                <div>
                    <label>Email From Name</label>
                    <input type="text" name="mail_from_name" value="<?= clean($mailFromName) ?>">
                    <label>Email From Address</label>
                    <input type="email" name="mail_from_address" value="<?= clean($mailFromAddress) ?>" placeholder="noreply@example.com">
                    <label>SMTP Host</label>
                    <input type="text" name="mail_host" value="<?= clean($mailHost) ?>" placeholder="smtp.example.com">
                    <label>SMTP Port</label>
                    <input type="text" name="mail_port" value="<?= clean($mailPort) ?>" placeholder="25">
                    <label>SMTP Username</label>
                    <input type="text" name="mail_username" value="<?= clean($mailUsername) ?>">
                    <label>SMTP Password</label>
                    <input type="password" name="mail_password" placeholder="Leave blank to keep existing">
                    <label>SMTP Encryption</label>
                    <select name="mail_encryption">
                        <option value="" <?= $mailEncryption === '' ? 'selected' : '' ?>>None</option>
                        <option value="tls" <?= $mailEncryption === 'tls' ? 'selected' : '' ?>>TLS</option>
                        <option value="ssl" <?= $mailEncryption === 'ssl' ? 'selected' : '' ?>>SSL</option>
                    </select>
                </div>
            </div>
            <div class="panel">
                <header><h3>Hero Slider Images</h3></header>
                <p>Upload one or more images for the homepage hero slider.</p>
                <input type="file" name="hero_images[]" accept="image/*" multiple>
                <?php if (!empty($heroSlides)): ?>
                    <div class="slide-editor-grid">
                        <?php foreach ($heroSlides as $slide): ?>
                            <div class="hero-slide-card">
                                <div class="hero-thumb">
                                    <img src="<?= BASE_URL . UPLOAD_URL . '/' . clean($slide['path']) ?>" alt="Hero slide">
                                    <button type="button" class="btn btn-danger small" onclick="deleteItem('delete_hero_slide', <?= $slide['id'] ?>, 'admin/settings.php')">Remove</button>
                                </div>
                                <label>Slide title</label>
                                <input type="text" name="slide_title[<?= $slide['id'] ?>]" value="<?= clean($slide['title']) ?>" placeholder="Main heading for this slide">
                                <label>Slide caption</label>
                                <textarea name="slide_caption[<?= $slide['id'] ?>]" rows="3" placeholder="Short supporting description"><?= clean($slide['caption']) ?></textarea>
                                <label>Title font size</label>
                                <input type="text" name="slide_title_font_size[<?= $slide['id'] ?>]" value="<?= clean($slide['title_font_size'] ?? '3rem') ?>" placeholder="3rem">
                                <label>Title color</label>
                                <input type="color" name="slide_title_color[<?= $slide['id'] ?>]" value="<?= clean($slide['title_color'] ?? '#ffffff') ?>">
                                <label>Title position</label>
                                <select name="slide_title_position[<?= $slide['id'] ?>]">
                                    <option value="top-left" <?= ($slide['title_position'] ?? '') === 'top-left' ? 'selected' : '' ?>>Top left</option>
                                    <option value="top-right" <?= ($slide['title_position'] ?? '') === 'top-right' ? 'selected' : '' ?>>Top right</option>
                                    <option value="center-left" <?= ($slide['title_position'] ?? '') === 'center-left' ? 'selected' : '' ?>>Center left</option>
                                    <option value="center" <?= ($slide['title_position'] ?? '') === 'center' ? 'selected' : '' ?>>Center</option>
                                    <option value="center-right" <?= ($slide['title_position'] ?? '') === 'center-right' ? 'selected' : '' ?>>Center right</option>
                                    <option value="bottom-left" <?= ($slide['title_position'] ?? '') === 'bottom-left' ? 'selected' : '' ?>>Bottom left</option>
                                    <option value="bottom-right" <?= ($slide['title_position'] ?? '') === 'bottom-right' ? 'selected' : '' ?>>Bottom right</option>
                                </select>
                                <label>Button 1 text</label>
                                <input type="text" name="slide_button_1_text[<?= $slide['id'] ?>]" value="<?= clean($slide['button_1_text'] ?? '') ?>" placeholder="Button text">
                                <label>Button 1 URL</label>
                                <input type="text" name="slide_button_1_url[<?= $slide['id'] ?>]" value="<?= clean($slide['button_1_url'] ?? '') ?>" placeholder="/contact.php">
                                <label>Button 2 text</label>
                                <input type="text" name="slide_button_2_text[<?= $slide['id'] ?>]" value="<?= clean($slide['button_2_text'] ?? '') ?>" placeholder="Button text">
                                <label>Button 2 URL</label>
                                <input type="text" name="slide_button_2_url[<?= $slide['id'] ?>]" value="<?= clean($slide['button_2_url'] ?? '') ?>" placeholder="/services.php">
                                <div class="form-grid-small">
                                    <div>
                                        <label>Sort order</label>
                                        <input type="number" name="slide_sort[<?= $slide['id'] ?>]" value="<?= clean($slide['sort_order']) ?>" min="0">
                                    </div>
                                    <div>
                                        <label>Status</label>
                                        <select name="slide_status[<?= $slide['id'] ?>]">
                                            <option value="Published" <?= $slide['status'] === 'Published' ? 'selected' : '' ?>>Published</option>
                                            <option value="Draft" <?= $slide['status'] === 'Draft' ? 'selected' : '' ?>>Draft</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
            <div class="panel">
                <header>
                    <h3>Meet Our Team</h3>
                    <button type="button" class="btn btn-primary" onclick="toggleNewTeamMember()">Add Team Member</button>
                </header>
                <p>Upload team photos and manage names, titles, order, and visibility.</p>
                <div id="team-member-modal" class="modal hidden">
                    <div class="modal-panel">
                        <header>
                            <h3>Add Team Member</h3>
                            <button class="close" type="button" onclick="toggleNewTeamMember()">×</button>
                        </header>
                        <div class="hero-slide-card">
                            <label>Photo</label>
                            <input type="file" name="new_team_photo" accept="image/*">
                            <label>Name</label>
                            <input type="text" name="new_team_name" placeholder="Name">
                            <label>Title</label>
                            <input type="text" name="new_team_title" placeholder="Title">
                            <div class="form-grid-small">
                                <div>
                                    <label>Status</label>
                                    <select name="new_team_status">
                                        <option value="Published">Published</option>
                                        <option value="Draft">Draft</option>
                                    </select>
                                </div>
                                <div>
                                    <label>Sort order</label>
                                    <input type="number" name="new_team_sort" value="0" min="0">
                                </div>
                            </div>
                            <button type="button" class="btn btn-secondary" onclick="toggleNewTeamMember()">Cancel</button>
                        </div>
                    </div>
                </div>
                <input type="file" name="team_photos[]" accept="image/*" multiple>
                <?php if (!empty($teamMembers)): ?>
                    <div class="slide-editor-grid">
                        <?php foreach ($teamMembers as $member): ?>
                            <div class="hero-slide-card">
                                <div class="hero-thumb">
                                    <?php if (!empty($member['photo'])): ?>
                                        <img src="<?= BASE_URL . UPLOAD_URL . '/' . clean($member['photo']) ?>" alt="Team member">
                                    <?php else: ?>
                                        <div class="hero-thumb placeholder">No photo</div>
                                    <?php endif; ?>
                                    <button type="button" class="btn btn-danger small" onclick="deleteItem('delete_team_member', <?= $member['id'] ?>, 'admin/settings.php')">Remove</button>
                                </div>
                                <label>Replace photo</label>
                                <input type="file" name="team_photo[<?= $member['id'] ?>]" accept="image/*">
                                <label>Member name</label>
                                <input type="text" name="team_name[<?= $member['id'] ?>]" value="<?= clean($member['name']) ?>" placeholder="Name">
                                <label>Member title</label>
                                <input type="text" name="team_title[<?= $member['id'] ?>]" value="<?= clean($member['title']) ?>" placeholder="Title">
                                <div class="form-grid-small">
                                    <div>
                                        <label>Sort order</label>
                                        <input type="number" name="team_sort[<?= $member['id'] ?>]" value="<?= clean($member['sort_order']) ?>" min="0">
                                    </div>
                                    <div>
                                        <label>Status</label>
                                        <select name="team_status[<?= $member['id'] ?>]">
                                            <option value="Published" <?= $member['status'] === 'Published' ? 'selected' : '' ?>>Published</option>
                                            <option value="Draft" <?= $member['status'] === 'Draft' ? 'selected' : '' ?>>Draft</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
            <div class="panel">
                <header>
                    <h3 id="services-section">Services</h3>
                    <button type="button" class="btn btn-primary" onclick="showServiceModal()">Add Service</button>
                </header>
                <p>Manage website services and add thumbnail images.</p>
                <?php if (!empty($services)): ?>
                    <div class="services-grid">
                        <?php foreach ($services as $service): ?>
                            <div class="service-item" data-service="<?= htmlspecialchars(json_encode($service), ENT_QUOTES, 'UTF-8') ?>">
                                <div class="service-thumbnail">
                                    <?php if (!empty($service['thumbnail'])): ?>
                                        <img src="<?= BASE_URL . UPLOAD_URL . '/' . clean($service['thumbnail']) ?>" alt="<?= clean($service['title']) ?>">
                                    <?php else: ?>
                                        <div class="placeholder-image">No Image</div>
                                    <?php endif; ?>
                                </div>
                                <h4><?= clean($service['title']) ?></h4>
                                <p><?= clean(strlen($service['description']) > 100 ? substr($service['description'], 0, 97) . '...' : $service['description']) ?></p>
                                <div class="service-meta">
                                    <span class="badge status-<?= strtolower($service['status']) ?>"><?= clean($service['status']) ?></span>
                                    <span class="badge sort-order">Sort: <?= clean($service['sort_order']) ?></span>
                                </div>
                                <div class="service-actions">
                                    <button type="button" class="btn btn-secondary small" onclick="editService(this)">Edit</button>
                                    <button type="button" class="btn btn-danger small" onclick="deleteService(<?= $service['id'] ?>)">Delete</button>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <p>No services created yet. Add one to display on your services page.</p>
                <?php endif; ?>
            </div>
            <button type="submit" class="btn btn-primary">Save Settings</button>
        </form>
    </section>

    <div id="service-modal" class="modal hidden">
        <div class="modal-panel">
            <header>
                <h3 id="service-modal-title">Add Service</h3>
                <button class="close" type="button" onclick="closeModal('service-modal')">×</button>
            </header>
            <form method="post" action="actions.php" enctype="multipart/form-data">
                <input type="hidden" name="csrf" value="<?= csrf_token() ?>">
                <input type="hidden" name="action" value="create_service">
                <input type="hidden" name="id" value="">
                
                <div class="form-group">
                    <label>Service Title</label>
                    <input type="text" name="title" placeholder="e.g., Web Development" required>
                </div>
                
                <div class="form-group">
                    <label>Description</label>
                    <textarea name="description" rows="5" placeholder="Describe your service..."></textarea>
                </div>
                
                <div class="form-group">
                    <label>Thumbnail Image</label>
                    <input type="file" name="thumbnail" accept="image/*">
                    <small id="service-thumbnail-note" class="form-note">Upload a square image (150x150px recommended)</small>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label>Status</label>
                        <select name="status">
                            <option value="Published">Published</option>
                            <option value="Draft">Draft</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Sort Order</label>
                        <input type="number" name="sort_order" value="0" min="0">
                    </div>
                </div>
                
                <div class="modal-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeModal('service-modal')">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Service</button>
                </div>
            </form>
        </div>
    </div>
<?php include __DIR__ . '/includes/footer.php'; ?>
