<?php
require_once 'config.php';
require_once 'includes/db.php';
require_once 'includes/functions.php';
require_login();

if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
    header("Location: dashboard.php");
    exit;
}

$pageTitle = "System Setup Guide - SonicPesa";
?>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<?php include 'includes/head.php'; ?>
<style>
    .instruction-card {
        border: 1px solid rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }
    .instruction-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
    .step-number {
        width: 32px;
        height: 32px;
        background: #4e73df;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        flex-shrink: 0;
    }
    .code-block {
        background: #f8f9fa;
        padding: 12px;
        border-radius: 8px;
        font-family: monospace;
        font-size: 0.9rem;
        color: #e83e8c;
        border: 1px solid #dee2e6;
    }
</style>
<body>
    <?php include 'includes/sidebar.php'; ?>
    <main class="dashboard-main">
        <?php include 'includes/header.php'; ?>
        
        <div class="dashboard-main-body">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
                <h6 class="fw-semibold mb-0">System Instructions</h6>
                <ul class="d-flex align-items-center gap-2">
                    <li class="fw-medium"><a href="dashboard.php" class="hover-text-primary">Dashboard</a></li>
                    <li>-</li>
                    <li class="fw-medium">Instructions</li>
                </ul>
            </div>

            <div class="row gy-4">
                <!-- Installation Section -->
                <div class="col-12">
                    <div class="card instruction-card radius-12 p-32">
                        <h5 class="mb-24 d-flex align-items-center gap-12">
                            <iconify-icon icon="solar:install-bold-duotone" class="text-primary-600"></iconify-icon>
                            Full System Installation
                        </h5>
                        
                        <div class="d-flex gap-16 mb-24">
                            <div class="step-number">1</div>
                            <div>
                                <h6 class="mb-4">Upload Files</h6>
                                <p class="text-secondary-light">Upload all the system files to your server's root directory (usually <code>public_html</code>) or a subfolder.</p>
                            </div>
                        </div>

                        <div class="d-flex gap-16 mb-24">
                            <div class="step-number">2</div>
                            <div>
                                <h6 class="mb-4">Create Database</h6>
                                <p class="text-secondary-light">Create a new MySQL database and user in your hosting control panel (e.g., cPanel). Take note of the database name, username, and password.</p>
                            </div>
                        </div>

                        <div class="d-flex gap-16 mb-24">
                            <div class="step-number">3</div>
                            <div>
                                <h6 class="mb-4">Run Installer</h6>
                                <p class="text-secondary-light">Visit <code>yourdomain.com/install.php</code> in your browser and follow the on-screen steps to configure your database and admin account.</p>
                            </div>
                        </div>

                        <div class="alert alert-warning d-flex align-items-center gap-12 radius-8">
                            <iconify-icon icon="lucide:shield-alert" class="text-2xl"></iconify-icon>
                            <div><strong>Important:</strong> Delete <code>install.php</code> and <code>db.sql</code> from your server immediately after a successful installation.</div>
                        </div>
                    </div>
                </div>

                <!-- Diagnostics Section -->
                <div class="col-lg-6">
                    <div class="card instruction-card radius-12 p-32 h-100">
                        <h5 class="mb-24 d-flex align-items-center gap-12">
                            <iconify-icon icon="solar:checklist-bold-duotone" class="text-success-600"></iconify-icon>
                            Post-Installation Health Check
                        </h5>
                        <p class="text-secondary-light mb-20">Ensure everything is working perfectly by running the diagnostic tool:</p>
                        
                        <div class="bg-base p-16 radius-8 border mb-24">
                            <h6 class="text-sm mb-8">Run Diagnostics</h6>
                            <a href="diag.php" target="_blank" class="btn btn-outline-success w-100">Run diag.php</a>
                        </div>

                        <ul class="list-unstyled">
                            <li class="mb-12 d-flex align-items-start gap-12">
                                <iconify-icon icon="lucide:check-circle" class="text-success-600 mt-4"></iconify-icon>
                                <div><strong>Green Checks:</strong> All requirements should be green.</div>
                            </li>
                            <li class="mb-12 d-flex align-items-start gap-12">
                                <iconify-icon icon="lucide:link-2" class="text-success-600 mt-4"></iconify-icon>
                                <div><strong>API Status:</strong> Ensure SONICPESA API endpoints are reachable.</div>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Custom Domains Section -->
                <div class="col-lg-6">
                    <div class="card instruction-card radius-12 p-32 h-100">
                        <h5 class="mb-24 d-flex align-items-center gap-12">
                            <iconify-icon icon="solar:globus-bold-duotone" class="text-warning-600"></iconify-icon>
                            Adding Custom Domains
                        </h5>
                        <p class="text-secondary-light mb-20">You can use your own domains (e.g., <code>coolvideo.com</code>) to host your landing pages:</p>

                        <div class="ps-24 border-start border-2 border-warning-200">
                            <div class="mb-20">
                                <h6 class="text-sm mb-4">1. Network Setup</h6>
                                <p class="text-xs text-secondary-light">Point your domain's <strong>A Record</strong> to this server IP address.</p>
                            </div>
                            <div class="mb-20">
                                <h6 class="text-sm mb-4">2. Hosting Setup</h6>
                                <p class="text-xs text-secondary-light">Add the domain to your hosting panel (cPanel) as an <strong>Alias</strong> or <strong>Addon Domain</strong>.</p>
                            </div>
                            <div class="mb-0">
                                <h6 class="text-sm mb-4">3. System Registration</h6>
                                <p class="text-xs text-secondary-light">In SonicPesa, go to <strong>Landing Pages</strong> menu and register your new domain.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer info -->
                <div class="col-12 text-center mt-24">
                    <p class="text-secondary-light">Need more help? Contact support or check the <strong>Tutorials</strong> section.</p>
                </div>
            </div>
        </div>
        
        <?php include 'includes/footer.php'; ?>
    </main>
</body>
</html>


