<?php
session_start();

// ==================================================
// AJAX IMAGE UPLOAD LOGIC (FIXED PERMISSION & PATH)
// ==================================================
if (isset($_POST['ajax_upload'])) {
    // Server ka absolute path use kiya hai jisse permission error na aaye
    $targetDir = dirname(__DIR__) . '/assets/png/'; 
    
    if (!is_dir($targetDir)) { 
        mkdir($targetDir, 0777, true); 
        chmod($targetDir, 0777); // Double check permission
    }

    $filename = $_POST['target_filename'];
    $file = $_FILES['act_image'];

    // 2MB Size Limit Check
    if ($file['size'] > 2 * 1024 * 1024) {
        echo json_encode(['success' => false, 'msg' => 'File size exceeds 2MB limit!']);
        exit;
    }

    if ($file['error'] === 0) {
        $targetPath = $targetDir . $filename;
        if (move_uploaded_file($file['tmp_name'], $targetPath)) {
            // Frontend ke liye relative URL return kar rahe hain
            $frontendUrl = '../assets/png/' . $filename;
            echo json_encode(['success' => true, 'url' => $frontendUrl . '?v=' . time()]);
        } else {
            echo json_encode(['success' => false, 'msg' => 'Upload failed. Path: ' . $targetDir]);
        }
    } else {
        echo json_encode(['success' => false, 'msg' => 'Invalid file or upload error.']);
    }
    exit; 
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Activity Visual Manager</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .mobile-simulator { max-width: 400px; margin: 0 auto; background: #F7F8FA; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); overflow: hidden; border: 8px solid #333; position: relative; padding-bottom: 20px;}
        .img-upload-box { position: relative; cursor: pointer; display: block; border: 2px dashed transparent; transition: 0.3s; border-radius: 8px; overflow: hidden;}
        .img-upload-box:hover { border-color: #f3595b; }
        .img-upload-box .overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; opacity: 0; transition: 0.3s; text-align: center;}
        .img-upload-box:hover .overlay { opacity: 1; }
        .uploading::after { content: 'Wait...'; position: absolute; inset: 0; background: rgba(243, 89, 91, 0.9); color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold;}
        
        .act-header { background: #fff; padding: 15px; text-align: center; font-weight: 900; color: #f3595b; font-size: 18px;}
        .top-red-box { background: linear-gradient(180deg, #FF7B7B, #F3595B); color: white; text-align: center; padding: 30px 15px; margin-bottom: 15px;}
        .icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px 15px; text-align: center;}
        .icon-item img { width: 45px; height: 45px; margin: 0 auto 5px; object-fit: contain;}
        .icon-item span { font-size: 10px; color: #666; font-weight: bold; line-height: 1.1; display: block;}
        .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 15px; }
        .promo-card { background: #fff; border-radius: 10px; padding: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); text-align: left;}
        .promo-card img { width: 100%; border-radius: 8px; margin-bottom: 5px; }
        .banners-sec { padding: 10px 15px; display: flex; flex-direction: column; gap: 10px;}
        .banners-sec img { width: 100%; border-radius: 10px; }
    </style>
</head>
<body class="bg-gray-100 p-6">

    <div class="max-w-4xl mx-auto">
        <h1 class="text-3xl font-black text-gray-800 mb-2 text-center">🎨 Activity Manager (Up to 2MB)</h1>
        <p class="text-gray-500 mb-8 text-center">Click inside the phone to change PNGs live.</p>

        <div class="mobile-simulator">
            <div class="act-header">91 CLUB</div>
            
            <div class="top-red-box">
                <div style="display:flex; justify-content:space-around; margin-bottom:15px;">
                    <div><div style="font-size:12px; opacity:0.8;">Today's bonus</div><div style="font-size:20px; font-weight:bold;">₹0.00</div></div>
                    <div><div style="font-size:12px; opacity:0.8;">Total bonus</div><div style="font-size:20px; font-weight:bold;">₹689.67</div></div>
                </div>
                <div style="border:1px solid #fff; border-radius:20px; padding:5px 20px; display:inline-block; font-size:12px;">Bonus details</div>
            </div>

            <div class="icon-grid">
                <div class="icon-item">
                    <label class="img-upload-box"><img id="i1" src="../assets/png/act_invitation.png" onerror="this.src='https://via.placeholder.com/100x100?text=Icon'"><div class="overlay">Change</div><input type="file" accept="image/*" hidden onchange="uploadImg(this, 'act_invitation.png', 'i1')"></label>
                    <span>Invitation<br>bonus</span>
                </div>
                <div class="icon-item">
                    <label class="img-upload-box"><img id="i2" src="../assets/png/act_betting.png" onerror="this.src='https://via.placeholder.com/100x100?text=Icon'"><div class="overlay">Change</div><input type="file" accept="image/*" hidden onchange="uploadImg(this, 'act_betting.png', 'i2')"></label>
                    <span>Betting<br>rebate</span>
                </div>
                <div class="icon-item">
                    <label class="img-upload-box"><img id="i3" src="../assets/png/act_jackpot.png" onerror="this.src='https://via.placeholder.com/100x100?text=Icon'"><div class="overlay">Change</div><input type="file" accept="image/*" hidden onchange="uploadImg(this, 'act_jackpot.png', 'i3')"></label>
                    <span>Super<br>Jackpot</span>
                </div>
                <div class="icon-item">
                    <label class="img-upload-box"><img id="i4" src="../assets/png/act_firstgift.png" onerror="this.src='https://via.placeholder.com/100x100?text=Icon'"><div class="overlay">Change</div><input type="file" accept="image/*" hidden onchange="uploadImg(this, 'act_firstgift.png', 'i4')"></label>
                    <span>First gift</span>
                </div>
                <div class="icon-item">
                    <label class="img-upload-box"><img id="i5" src="../assets/png/act_wheel.png" onerror="this.src='https://via.placeholder.com/100x100?text=Icon'"><div class="overlay">Change</div><input type="file" accept="image/*" hidden onchange="uploadImg(this, 'act_wheel.png', 'i5')"></label>
                    <span>Invite<br>Wheel</span>
                </div>
            </div>

            <div class="card-grid">
                <div class="promo-card">
                    <label class="img-upload-box"><img id="c1" src="../assets/png/act_gifts.png" onerror="this.src='https://via.placeholder.com/300x200?text=Card'"><div class="overlay">Change Image</div><input type="file" accept="image/*" hidden onchange="uploadImg(this, 'act_gifts.png', 'c1')"></label>
                    <div style="font-weight:bold; font-size:13px; color:#333; margin-top:5px;">Gifts</div>
                    <div style="font-size:10px; color:#999; line-height:1.2;">Enter redemption code</div>
                </div>
                <div class="promo-card">
                    <label class="img-upload-box"><img id="c2" src="../assets/png/act_attendance.png" onerror="this.src='https://via.placeholder.com/300x200?text=Card'"><div class="overlay">Change Image</div><input type="file" accept="image/*" hidden onchange="uploadImg(this, 'act_attendance.png', 'c2')"></label>
                    <div style="font-weight:bold; font-size:13px; color:#333; margin-top:5px;">Attendance bonus</div>
                    <div style="font-size:10px; color:#999; line-height:1.2;">More consecutive days</div>
                </div>
            </div>

            <div class="banners-sec">
                <label class="img-upload-box"><img id="b1" src="../assets/png/act_banner1.png" onerror="this.src='https://via.placeholder.com/600x200?text=Banner+1'"><div class="overlay">Change Banner 1</div><input type="file" accept="image/*" hidden onchange="uploadImg(this, 'act_banner1.png', 'b1')"></label>
                <label class="img-upload-box"><img id="b2" src="../assets/png/act_banner2.png" onerror="this.src='https://via.placeholder.com/600x200?text=Banner+2'"><div class="overlay">Change Banner 2</div><input type="file" accept="image/*" hidden onchange="uploadImg(this, 'act_banner2.png', 'b2')"></label>
                <label class="img-upload-box"><img id="b3" src="../assets/png/act_banner3.png" onerror="this.src='https://via.placeholder.com/600x200?text=Banner+3'"><div class="overlay">Change Banner 3</div><input type="file" accept="image/*" hidden onchange="uploadImg(this, 'act_banner3.png', 'b3')"></label>
            </div>
        </div>

    </div>

    <script>
        function uploadImg(input, targetFilename, imgId) {
            if (input.files && input.files[0]) {
                let file = input.files[0];
                
                // Frontend check for 2MB limit (2 * 1024 * 1024 bytes)
                if(file.size > 2097152) {
                    alert("Error: File size is greater than 2MB. Please select a smaller image.");
                    input.value = ""; // Clear input
                    return;
                }

                let label = input.closest('.img-upload-box');
                label.classList.add('uploading');

                let formData = new FormData();
                formData.append('ajax_upload', '1');
                formData.append('target_filename', targetFilename);
                formData.append('act_image', file);

                fetch('', { method: 'POST', body: formData })
                .then(res => res.json())
                .then(data => {
                    label.classList.remove('uploading');
                    if (data.success) {
                        document.getElementById(imgId).src = data.url;
                        alert("Image updated successfully!");
                    } else { alert(data.msg); }
                }).catch(err => { label.classList.remove('uploading'); alert('Network Error'); });
            }
        }
    </script>
</body>
</html>