<?php
require_once 'config.php';
requireLogin();

$page_title = 'Affiliate Management';
$page_description = 'Manage affiliate partners and track signups';

$success = '';
$error = '';

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    
    // CREATE AFFILIATE
    if ($_POST['action'] === 'create_affiliate') {
        $type = $_POST['type'] ?? '';
        $company_name = trim($_POST['company_name'] ?? '');
        $incharge_name = trim($_POST['incharge_name'] ?? '');
        $state = $_POST['state'] ?? '';
        $postal_code = trim($_POST['postal_code'] ?? '');
        $place_name = trim($_POST['place_name'] ?? '');
        $mobile = trim($_POST['mobile'] ?? '');
        $email = trim($_POST['email'] ?? '');
        $url = trim($_POST['url'] ?? '');
        $signup_reward = floatval($_POST['signup_reward'] ?? 0);
        
        // Validation
        if (empty($type) || empty($company_name) || empty($incharge_name) || empty($state) || 
            empty($postal_code) || empty($place_name) || empty($mobile) || empty($email)) {
            $error = 'All required fields must be filled';
        } elseif (!preg_match('/^\d{6}$/', $postal_code)) {
            $error = 'Postal code must be exactly 6 digits';
        } elseif (!preg_match('/^\d{10}$/', $mobile)) {
            $error = 'Mobile number must be exactly 10 digits';
        } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $error = 'Invalid email address';
        } else {
            try {
                $pdo = getDBConnection();
                
                // Generate unique affiliate code
                do {
                    $affiliate_code = 'AFF' . strtoupper(substr(md5(uniqid(rand(), true)), 0, 8));
                    $checkStmt = $pdo->prepare("SELECT id FROM affiliates WHERE affiliate_code = ?");
                    $checkStmt->execute([$affiliate_code]);
                } while ($checkStmt->fetch());
                
                // Insert affiliate
                $stmt = $pdo->prepare("
                    INSERT INTO affiliates 
                    (affiliate_code, type, company_name, incharge_name, state, postal_code, 
                     place_name, mobile, email, url, signup_reward, created_by)
                    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
                ");
                
                $stmt->execute([
                    $affiliate_code, $type, $company_name, $incharge_name, $state, $postal_code,
                    $place_name, $mobile, $email, $url, $signup_reward, $_SESSION['admin_id']
                ]);
                
                $affiliate_id = $pdo->lastInsertId();
                
                // Handle file uploads
                if (!empty($_FILES['attachments']['name'][0])) {
                    $upload_dir = 'uploads/affiliates/';
                    if (!file_exists($upload_dir)) {
                        mkdir($upload_dir, 0755, true);
                    }
                    
                    $allowed_types = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
                    $max_files = 10;
                    
                    for ($i = 0; $i < min(count($_FILES['attachments']['name']), $max_files); $i++) {
                        if ($_FILES['attachments']['error'][$i] === UPLOAD_ERR_OK) {
                            $file_type = $_FILES['attachments']['type'][$i];
                            
                            if (in_array($file_type, $allowed_types)) {
                                $file_name = $_FILES['attachments']['name'][$i];
                                $file_size = $_FILES['attachments']['size'][$i];
                                $file_tmp = $_FILES['attachments']['tmp_name'][$i];
                                
                                // Generate unique filename
                                $extension = pathinfo($file_name, PATHINFO_EXTENSION);
                                $unique_name = $affiliate_code . '_' . time() . '_' . $i . '.' . $extension;
                                $file_path = $upload_dir . $unique_name;
                                
                                if (move_uploaded_file($file_tmp, $file_path)) {
                                    $attachStmt = $pdo->prepare("
                                        INSERT INTO affiliate_attachments 
                                        (affiliate_id, file_name, file_path, file_type, file_size)
                                        VALUES (?, ?, ?, ?, ?)
                                    ");
                                    $attachStmt->execute([
                                        $affiliate_id, $file_name, $file_path, $file_type, $file_size
                                    ]);
                                }
                            }
                        }
                    }
                }
                
                logActivity($_SESSION['admin_id'], 'create_affiliate', "Created affiliate: $affiliate_code", 'affiliate', $affiliate_id);
                
                $success = "Affiliate created successfully! Affiliate Code: <strong>$affiliate_code</strong>";
            } catch (Exception $e) {
                $error = 'An error occurred. Please try again.';
                error_log("Create affiliate error: " . $e->getMessage());
            }
        }
    }
    
    // DELETE AFFILIATE
    if ($_POST['action'] === 'delete_affiliate') {
        $delete_id = intval($_POST['affiliate_id'] ?? 0);
        
        if ($delete_id) {
            try {
                $pdo = getDBConnection();
                
                // Get affiliate code for logging
                $stmt = $pdo->prepare("SELECT affiliate_code FROM affiliates WHERE id = ?");
                $stmt->execute([$delete_id]);
                $affiliate_code = $stmt->fetchColumn();
                
                // Delete affiliate (cascade will delete attachments and signups)
                $stmt = $pdo->prepare("DELETE FROM affiliates WHERE id = ?");
                $stmt->execute([$delete_id]);
                
                logActivity($_SESSION['admin_id'], 'delete_affiliate', "Deleted affiliate: $affiliate_code", 'affiliate', $delete_id);
                
                $success = 'Affiliate deleted successfully!';
            } catch (Exception $e) {
                $error = 'An error occurred while deleting. Please try again.';
                error_log("Delete affiliate error: " . $e->getMessage());
            }
        }
    }
}

// Fetch all affiliates
try {
    $pdo = getDBConnection();
    $stmt = $pdo->query("SELECT * FROM affiliates ORDER BY created_at DESC");
    $affiliates = $stmt->fetchAll();
} catch (Exception $e) {
    $affiliates = [];
    error_log("Fetch affiliates error: " . $e->getMessage());
}

// Indian states list
$indian_states = [
    'Andhra Pradesh', 'Arunachal Pradesh', 'Assam', 'Bihar', 'Chhattisgarh', 'Goa', 'Gujarat',
    'Haryana', 'Himachal Pradesh', 'Jharkhand', 'Karnataka', 'Kerala', 'Madhya Pradesh',
    'Maharashtra', 'Manipur', 'Meghalaya', 'Mizoram', 'Nagaland', 'Odisha', 'Punjab',
    'Rajasthan', 'Sikkim', 'Tamil Nadu', 'Telangana', 'Tripura', 'Uttar Pradesh',
    'Uttarakhand', 'West Bengal', 'Andaman and Nicobar Islands', 'Chandigarh',
    'Dadra and Nagar Haveli and Daman and Diu', 'Delhi', 'Jammu and Kashmir', 'Ladakh',
    'Lakshadweep', 'Puducherry'
];

include 'includes/header.php';
?>

<style>
.affiliate-stats {
    background: white;
    padding: 20px 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 24px;
}

.affiliate-stats-row {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
}

.affiliate-table {
    width: 100%;
    background: white;
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-top: 30px;
}

.affiliate-table table {
    width: 100%;
    min-width: 1200px;
    border-collapse: separate;
    border-spacing: 0;
}

.affiliate-table thead {
    background: #f9fafb;
}

.affiliate-table th {
    padding: 16px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.affiliate-table td {
    padding: 16px 12px;
    font-size: 14px;
    color: #1f2937;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.affiliate-table tbody tr:hover {
    background: #f9fafb;
}

.affiliate-code {
    font-family: monospace;
    font-weight: 700;
    color: #0066cc;
    font-size: 15px;
}

.affiliate-link {
    font-size: 12px;
    color: #6b7280;
    word-break: break-all;
}

.copy-btn {
    background: #f3f4f6;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-left: 8px;
    transition: background 0.2s;
}

.copy-btn:hover {
    background: #e5e7eb;
}

/* ===== IMPROVED MODAL STYLES ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.modal-content {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    margin: 20px auto;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    padding: 24px 32px;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px 16px 0 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.modal-content form {
    padding: 32px;
}

/* File Upload Styling */
.file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 8px;
}

.file-upload-area:hover {
    border-color: #667eea;
    background: #f0f4ff;
}

.file-upload-area.dragover {
    border-color: #667eea;
    background: #e0e7ff;
    border-width: 3px;
}

.file-upload-area p {
    margin: 0;
    color: #6b7280;
    font-size: 15px;
}

.file-upload-area small {
    color: #9ca3af;
    font-size: 13px;
}

.file-list {
    margin-top: 16px;
    max-height: 200px;
    overflow-y: auto;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.file-item:hover {
    border-color: #667eea;
    background: #f9fafb;
}

.file-remove {
    background: #fee2e2;
    color: #dc2626;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.file-remove:hover {
    background: #fecaca;
}

/* Scrollbar styling for modal */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #5568d3;
}

/* Action Buttons */
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn-view {
    background: #0066cc;
    color: white;
}

.action-btn-view:hover {
    background: #0052a3;
    color: white;
    text-decoration: none;
}

.action-btn-edit {
    background: #ffa500;
    color: white;
}

.action-btn-edit:hover {
    background: #e69500;
    color: white;
    text-decoration: none;
}

.action-btn-delete {
    background: #dc3545;
    color: white;
}

.action-btn-delete:hover {
    background: #bb2d3b;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-content {
        max-width: 100%;
        margin: 10px;
    }
    
    .modal-header {
        padding: 20px 24px;
    }
    
    .modal-content form {
        padding: 24px 20px;
    }
}
</style>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Affiliate Management</h1>
            <p class="page-subtitle">Manage affiliate partners and track panel member signups</p>
        </div>
        <div class="header-actions">
            <button class="btn btn-primary" id="addAffiliateBtn">
                <span>➕</span> Add New Affiliate
            </button>
        </div>
    </div>

    <?php if ($success): ?>
        <div class="success-message">
            <span class="message-icon">✅</span>
            <?php echo $success; ?>
        </div>
    <?php endif; ?>
    
    <?php if ($error): ?>
        <div class="error-message">
            <span class="message-icon">⚠️</span>
            <?php echo htmlspecialchars($error); ?>
        </div>
    <?php endif; ?>

    <!-- Affiliate Statistics -->
    <div class="affiliate-stats">
        <div class="affiliate-stats-row">
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Total Affiliates:</span>
                <span style="font-size: 20px; font-weight: 700; color: #0066cc;"><?php echo count($affiliates); ?></span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Active:</span>
                <span style="font-size: 20px; font-weight: 700; color: #059669;">
                    <?php echo count(array_filter($affiliates, fn($a) => $a['status'] === 'active')); ?>
                </span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Total Signups:</span>
                <span style="font-size: 20px; font-weight: 700; color: #7c3aed;">
                    <?php echo array_sum(array_column($affiliates, 'total_signups')); ?>
                </span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Verified Signups:</span>
                <span style="font-size: 20px; font-weight: 700; color: #ea580c;">
                    <?php echo array_sum(array_column($affiliates, 'total_verified_signups')); ?>
                </span>
            </div>
        </div>
    </div>

    <!-- Affiliates Table -->
    <div class="affiliate-table">
        <table>
            <thead>
                <tr>
                    <th style="width: 120px;">Code</th>
                    <th style="width: 200px;">Company/Name</th>
                    <th style="width: 150px;">In-charge</th>
                    <th style="width: 120px;">Location</th>
                    <th style="width: 130px;">Contact</th>
                    <th style="width: 100px;">Reward</th>
                    <th style="width: 100px;">Signups</th>
                    <th style="width: 100px;">Status</th>
                    <th style="width: 200px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($affiliates)): ?>
                    <tr>
                        <td colspan="9" style="text-align: center; padding: 40px; color: #9ca3af;">
                            No affiliates found. Click "Add New Affiliate" to create one.
                        </td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($affiliates as $affiliate): ?>
                    <tr>
                        <td>
                            <div class="affiliate-code"><?php echo htmlspecialchars($affiliate['affiliate_code']); ?></div>
                            <div class="affiliate-link">
                                <?php 
                                $signup_url = 'https://relevantreflex.com/signup.php?ref=' . $affiliate['affiliate_code'];
                                echo substr($signup_url, 0, 30) . '...';
                                ?>
                                <button class="copy-btn" onclick="copyToClipboard('<?php echo $signup_url; ?>')">📋 Copy</button>
                            </div>
                        </td>
                        <td>
                            <div style="font-weight: 600;"><?php echo htmlspecialchars($affiliate['company_name']); ?></div>
                            <div style="font-size: 12px; color: #6b7280;">
                                <?php echo ucfirst($affiliate['type']); ?>
                            </div>
                        </td>
                        <td><?php echo htmlspecialchars($affiliate['incharge_name']); ?></td>
                        <td>
                            <div style="font-weight: 500;"><?php echo htmlspecialchars($affiliate['place_name']); ?></div>
                            <div style="font-size: 12px; color: #6b7280;"><?php echo htmlspecialchars($affiliate['state']); ?></div>
                        </td>
                        <td>
                            <div style="font-size: 13px;"><?php echo htmlspecialchars($affiliate['mobile']); ?></div>
                            <div style="font-size: 12px; color: #6b7280; word-break: break-all;">
                                <?php echo htmlspecialchars($affiliate['email']); ?>
                            </div>
                        </td>
                        <td>
                            <span style="font-weight: 700; color: #059669;">
                                ₹<?php echo number_format($affiliate['signup_reward'], 2); ?>
                            </span>
                        </td>
                        <td>
                            <div style="font-weight: 600; color: #0066cc;">
                                <?php echo $affiliate['total_signups']; ?>
                            </div>
                            <div style="font-size: 11px; color: #059669;">
                                <?php echo $affiliate['total_verified_signups']; ?> verified
                            </div>
                        </td>
                        <td>
                            <span class="badge badge-<?php echo strtolower($affiliate['status']); ?>">
                                <?php echo ucfirst($affiliate['status']); ?>
                            </span>
                        </td>
                        <td>
                            <div style="display: flex; gap: 6px; flex-wrap: wrap;">
                                <a href="affiliate_view.php?id=<?php echo $affiliate['id']; ?>" 
                                   class="action-btn action-btn-view">
                                    👁️ View
                                </a>
                                <a href="affiliate_edit.php?id=<?php echo $affiliate['id']; ?>" 
                                   class="action-btn action-btn-edit">
                                    ✏️ Edit
                                </a>
                                <form method="POST" style="display: inline; margin: 0;" 
                                      onsubmit="return confirm('Are you sure you want to delete this affiliate?\n\nAffiliate: <?php echo htmlspecialchars($affiliate['company_name']); ?>\nCode: <?php echo htmlspecialchars($affiliate['affiliate_code']); ?>\n\nThis will also delete all associated signups and attachments. This action cannot be undone!');">
                                    <input type="hidden" name="action" value="delete_affiliate">
                                    <input type="hidden" name="affiliate_id" value="<?php echo $affiliate['id']; ?>">
                                    <button type="submit" class="action-btn action-btn-delete">
                                        🗑️ Delete
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Add Affiliate Modal -->
<div id="addAffiliateModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>✨ Add New Affiliate Partner</h2>
            <button class="modal-close" type="button">&times;</button>
        </div>
        
        <form method="POST" enctype="multipart/form-data" id="affiliateForm">
            <input type="hidden" name="action" value="create_affiliate">
            
            <div class="form-row" style="margin-bottom: 24px;">
                <div class="form-group" style="flex: 1;">
                    <label for="type" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Type of Affiliate <span style="color: #dc2626;">*</span>
                    </label>
                    <select id="type" name="type" required 
                            style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                        <option value="">Select Type</option>
                        <option value="individual">Individual</option>
                        <option value="company">Company</option>
                    </select>
                </div>
                
                <div class="form-group" style="flex: 1;">
                    <label for="company_name" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Name of Affiliate (as per documents) <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="text" id="company_name" name="company_name" required 
                           placeholder="Company/Individual Name"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                </div>
            </div>
            
            <div class="form-row" style="margin-bottom: 24px;">
                <div class="form-group" style="flex: 1;">
                    <label for="incharge_name" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Name of In-charge (as per PAN) <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="text" id="incharge_name" name="incharge_name" required 
                           placeholder="Director/Partner/Proprietor Name"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                </div>
                
                <div class="form-group" style="flex: 1;">
                    <label for="state" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        State <span style="color: #dc2626;">*</span>
                    </label>
                    <select id="state" name="state" required
                            style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                        <option value="">Select State</option>
                        <?php foreach ($indian_states as $state): ?>
                            <option value="<?php echo $state; ?>"><?php echo $state; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            
            <div class="form-row" style="margin-bottom: 24px;">
                <div class="form-group" style="flex: 1;">
                    <label for="postal_code" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Postal Code <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="text" id="postal_code" name="postal_code" required 
                           pattern="\d{6}" maxlength="6" placeholder="123456"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                    <small style="color: #6b7280; font-size: 12px; margin-top: 4px; display: block;">6 digits required</small>
                </div>
                
                <div class="form-group" style="flex: 1;">
                    <label for="place_name" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Place Name <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="text" id="place_name" name="place_name" required 
                           placeholder="City/Town/Village"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                </div>
            </div>
            
            <div class="form-row" style="margin-bottom: 24px;">
                <div class="form-group" style="flex: 1;">
                    <label for="mobile" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Mobile Number <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="text" id="mobile" name="mobile" required 
                           pattern="\d{10}" maxlength="10" placeholder="9876543210"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                    <small style="color: #6b7280; font-size: 12px; margin-top: 4px; display: block;">10 digits required</small>
                </div>
                
                <div class="form-group" style="flex: 1;">
                    <label for="email" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Email Address <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="email" id="email" name="email" required 
                           placeholder="affiliate@example.com"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                </div>
            </div>
            
            <div class="form-row" style="margin-bottom: 24px;">
                <div class="form-group" style="flex: 1;">
                    <label for="url" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Website/Channel URL
                    </label>
                    <input type="text" id="url" name="url" 
                           placeholder="https://example.com or YouTube channel"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                </div>
                
                <div class="form-group" style="flex: 1;">
                    <label for="signup_reward" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Signup Reward (₹) <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="number" id="signup_reward" name="signup_reward" required 
                           min="0" step="0.01" placeholder="50.00"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                    <small style="color: #6b7280; font-size: 12px; margin-top: 4px; display: block;">Amount per verified signup</small>
                </div>
            </div>
            
            <div class="form-group" style="margin-bottom: 32px;">
                <label style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                    📎 Attachments (Max 10 files - PDF or Images)
                </label>
                <div class="file-upload-area" id="fileUploadArea">
                    <p style="margin: 0 0 8px 0; color: #374151; font-weight: 500;">
                        Click to upload or drag and drop files here
                    </p>
                    <small style="color: #6b7280;">PDF, JPG, PNG, GIF (Max 10 files, 5MB each)</small>
                    <input type="file" id="attachments" name="attachments[]" 
                           multiple accept=".pdf,.jpg,.jpeg,.png,.gif" 
                           style="display: none;">
                </div>
                <div class="file-list" id="fileList"></div>
            </div>
            
            <div class="form-actions" style="display: flex; gap: 12px; justify-content: flex-end; padding-top: 24px; border-top: 2px solid #e5e7eb;">
                <button type="button" class="btn btn-secondary" onclick="closeModal()"
                        style="padding: 12px 24px; border-radius: 8px; font-weight: 600;">
                    Cancel
                </button>
                <button type="submit" class="btn btn-primary"
                        style="padding: 12px 32px; border-radius: 8px; font-weight: 600;">
                    <span>✨</span> Create Affiliate
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function closeModal() {
    document.getElementById('addAffiliateModal').style.display = 'none';
    document.getElementById('affiliateForm').reset();
    selectedFiles = [];
    updateFileList();
}

document.getElementById('addAffiliateBtn')?.addEventListener('click', function() {
    document.getElementById('addAffiliateModal').style.display = 'flex';
});

document.querySelector('.modal-close')?.addEventListener('click', closeModal);

window.addEventListener('click', function(event) {
    if (event.target === document.getElementById('addAffiliateModal')) {
        closeModal();
    }
});

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        alert('Affiliate link copied to clipboard!');
    }).catch(function(err) {
        console.error('Could not copy text: ', err);
    });
}

// File upload handling
const fileUploadArea = document.getElementById('fileUploadArea');
const fileInput = document.getElementById('attachments');
const fileList = document.getElementById('fileList');
let selectedFiles = [];

fileUploadArea.addEventListener('click', () => fileInput.click());

fileUploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    fileUploadArea.classList.add('dragover');
});

fileUploadArea.addEventListener('dragleave', () => {
    fileUploadArea.classList.remove('dragover');
});

fileUploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    fileUploadArea.classList.remove('dragover');
    handleFiles(e.dataTransfer.files);
});

fileInput.addEventListener('change', (e) => {
    handleFiles(e.target.files);
});

function handleFiles(files) {
    const maxFiles = 10;
    const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
    
    for (let file of files) {
        if (selectedFiles.length >= maxFiles) {
            alert(`Maximum ${maxFiles} files allowed`);
            break;
        }
        
        if (!allowedTypes.includes(file.type)) {
            alert(`File type not allowed: ${file.name}`);
            continue;
        }
        
        selectedFiles.push(file);
    }
    
    updateFileList();
}

function updateFileList() {
    fileList.innerHTML = '';
    
    selectedFiles.forEach((file, index) => {
        const fileItem = document.createElement('div');
        fileItem.className = 'file-item';
        fileItem.innerHTML = `
            <span>${file.name} (${(file.size / 1024).toFixed(2)} KB)</span>
            <button type="button" class="file-remove" onclick="removeFile(${index})">Remove</button>
        `;
        fileList.appendChild(fileItem);
    });
    
    // Update the file input
    const dataTransfer = new DataTransfer();
    selectedFiles.forEach(file => dataTransfer.items.add(file));
    fileInput.files = dataTransfer.files;
}

function removeFile(index) {
    selectedFiles.splice(index, 1);
    updateFileList();
}
</script>

<?php include 'includes/footer.php'; ?>