<?php
/**
 * --------------------------------------------------------------------------------
 * WEBICA BUSINESS MANAGEMENT SYSTEM - CORE ENGINE (INDEX.PHP)
 * --------------------------------------------------------------------------------
 * Version: 6.5 (Enterprise Edition)
 */

// Initialize session protocols
session_start();

/**
 * 1. ACCESS CONTROL CONFIGURATION
 */
$allowed_users = [
    'admin' => 'webica123', 
    'ravi'  => 'ravi186' 
];

/**
 * AUTHENTICATION: LOGIN HANDLER
 */
if (isset($_POST['login_submit'])) {
    $input_user = $_POST['username'] ?? '';
    $input_pass = $_POST['password'] ?? '';
    if (isset($allowed_users[$input_user]) && $allowed_users[$input_user] === $input_pass) {
        $_SESSION['webica_admin'] = $input_user;
        header("Location: index.php"); 
        exit;
    }
}

/**
 * AUTHENTICATION: LOGOUT HANDLER
 */
if (isset($_GET['logout'])) { 
    unset($_SESSION['webica_admin']); 
    session_destroy(); 
    header("Location: index.php"); 
    exit; 
}

$currentUser = $_SESSION['webica_admin'] ?? null;
$isAdmin     = ($currentUser === 'admin');
$isModerator = ($currentUser === 'ravi');
$isAnyAdmin  = ($isAdmin || $isModerator);

$dataFile = 'content.json';
if (file_exists($dataFile)) {
    $data = json_decode(file_get_contents($dataFile), true);
} else {
    $data = [];
}

if(!isset($data['logo_text'])) $data['logo_text'] = "RAVI SWEET SHOP";
if(!isset($data['slider'])) {
    $data['slider'] = [["img" => "https://via.placeholder.com/1200x600", "title" => "Welcome", "sub" => "Digital Excellence"]];
}
if(!isset($data['about_status'])) $data['about_status'] = "pending";
if(!isset($data['about_colors'])) $data['about_colors'] = ["bg" => "#ffffff", "text" => "#1e293b"];
if(!isset($data['about_title']))  $data['about_title']  = "About Us";
if(!isset($data['about_desc']))   $data['about_desc']   = "Tell the world about your business here...";
if(!isset($data['about_img']))    $data['about_img']    = "https://via.placeholder.com/600x400";
if(!isset($data['products'])) $data['products'] = [];

function getCustomPaginated($array, $pageVar, $perPage = 10) {
    $page = isset($_GET[$pageVar]) ? (int)$_GET[$pageVar] : 1;
    if ($page < 1) $page = 1;
    $totalItems = count($array);
    $totalPages = ceil($totalItems / $perPage);
    if ($page > $totalPages && $totalPages > 0) $page = $totalPages;
    $offset = ($page - 1) * $perPage;
    return ['data' => array_slice($array, $offset, $perPage), 'total_pages' => $totalPages, 'current_page' => $page];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title><?= htmlspecialchars($data['logo_text']) ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        html { scroll-behavior: smooth; }
        body { overflow-x: hidden; width: 100%; background-color: #f8fafc; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
        @keyframes heartbeat {
            0% { transform: scale(1); opacity: 1; }
            14% { transform: scale(1.08); opacity: 0.9; }
            28% { transform: scale(1); opacity: 1; }
            42% { transform: scale(1.08); opacity: 0.9; }
            70% { transform: scale(1); opacity: 1; }
        }
        .animate-heartbeat { animation: heartbeat 1.5s infinite ease-in-out; display: inline-block; }
        .editable:focus { outline: 3px solid #3b82f6; background: rgba(59,130,246,0.1); border-radius: 4px; }
        .frame-tool { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; background: #ffffff; padding: 8px; border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.12); z-index: 600; border: 1px solid #e2e8f0; }
        .slide { display: none; }
        .slide.active { display: block; animation: zoomFadeTransition 1.5s ease; }
        @keyframes zoomFadeTransition { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: scale(1); } }
        .promo-dark-card { background: #0f172a; transition: all 0.4s ease; }
        .promo-dark-card:hover { transform: translateY(-5px); }
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 10px; border: 2px solid #f1f5f9; }
        .chat-sticky { position: fixed; bottom: 20px; right: 20px; z-index: 9999; }
    </style>
</head>
<body class="text-slate-900">

    <?php if ($isAnyAdmin): ?>
    <div class="fixed top-0 inset-x-0 bg-slate-950 text-white z-[9999] p-2 flex justify-between items-center border-b border-blue-500 shadow-2xl h-12">
        <div class="flex items-center gap-3 ml-4">
            <div class="w-2.5 h-2.5 bg-green-500 rounded-full animate-ping"></div>
            <span class="text-[10px] font-black uppercase tracking-[0.25em] text-blue-400">
                <?= $isAdmin ? 'Management Console (Admin)' : 'Moderator Active (Ravi)' ?>
            </span>
        </div>
        <div class="flex gap-4">
            <button onclick="saveEverything()" class="bg-blue-600 hover:bg-blue-500 px-6 py-1.5 rounded-full text-[10px] font-black uppercase shadow-lg transition-all transform active:scale-90">
                <i class="fa fa-cloud-upload-alt mr-2"></i> Save Changes
            </button>
            <a href="?logout=1" class="bg-red-600 px-6 py-1.5 rounded-full text-[10px] font-black uppercase hover:bg-red-500 transition-all mr-2">
                <i class="fa fa-power-off mr-2"></i> Logout
            </a>
        </div>
    </div>
    <input type="file" id="image_uploader" class="hidden" accept="image/*" onchange="handleUpload(this)">
    <?php endif; ?>

    <!-- CHAT WITH US STICKY BUTTON -->
    <a href="https://meet.applet.in/?ref=ravi" target="_blank" class="chat-sticky bg-green-600 text-white px-6 py-3 rounded-full font-black uppercase text-xs shadow-2xl hover:bg-green-500 transition-all transform hover:scale-110 flex items-center gap-2">
        <i class="fa-solid fa-comments text-lg"></i> Chat with us
    </a>

    <nav class="bg-white/95 backdrop-blur-md shadow-lg sticky <?= $isAnyAdmin ? 'top-12' : 'top-0' ?> z-[8000] h-20 flex items-center transition-all">
        <div class="container mx-auto px-4 md:px-8 flex justify-between items-center">
            <!-- LOGO REMOVED FROM LEFT SIDE OF BUTTONS -->
            <div class="hidden md:flex gap-10 text-[11px] font-black uppercase text-slate-500 tracking-widest">
                <a href="#home" class="hover:text-blue-600 transition-colors">Home</a>
                <a href="#about" class="hover:text-blue-600 transition-colors">About Us</a>
                <a href="#products" class="hover:text-blue-600 transition-colors">Products/Services</a>
            </div>
            <div class="flex items-center gap-2 md:gap-3 ml-auto">
                <!-- SHARE TELUGU BUTTON -->
                <button onclick="shareToWhatsAppTelugu()" class="bg-emerald-600 text-white px-3 md:px-5 py-3 rounded-full text-[9px] md:text-[10px] font-black uppercase shadow-xl hover:bg-emerald-700 transition transform hover:scale-105 flex items-center gap-1 md:gap-2">
                    <i class="fab fa-whatsapp text-sm"></i> <span class="hidden xs:inline">Share Telugu</span><span class="xs:hidden">Telugu</span>
                </button>

                <!-- EXISTING SHARE BUTTON -->
                <button onclick="shareToWhatsApp()" class="bg-green-500 text-white px-3 md:px-5 py-3 rounded-full text-[9px] md:text-[10px] font-black uppercase shadow-xl hover:bg-green-600 transition transform hover:scale-105 flex items-center gap-1 md:gap-2">
                    <i class="fab fa-whatsapp text-sm"></i> <span class="hidden xs:inline">Share</span><span class="xs:hidden">ENGLISH</span>
                </button>

                <?php if(!$currentUser): ?>
                    <a href="?view_login=1" class="bg-slate-900 text-white px-4 md:px-7 py-3 rounded-full text-[9px] md:text-[10px] font-black uppercase shadow-xl hover:bg-blue-700 transition transform hover:scale-105">Login</a>
                <?php else: ?>
                    <span class="text-[9px] font-black text-blue-600 bg-blue-50 px-3 md:px-4 py-1.5 rounded-full border border-blue-100 uppercase tracking-tighter"><?= $currentUser ?></span>
                <?php endif; ?>
            </div>
        </div>
    </nav>

    <!-- MAIN APP TITLE SECTION (RAVI SWEET SHOP - NOW EDITABLE AS MAIN LOGO) -->
    <div class="w-full bg-white py-6 md:py-10 text-center border-b border-slate-100 shadow-sm">
        <div id="main_logo" class="text-4xl md:text-8xl font-black text-blue-900 editable uppercase tracking-tighter px-4 leading-none italic inline-block" contenteditable="<?= $isAdmin?'true':'false' ?>">
            <?= htmlspecialchars($data['logo_text']) ?>
        </div>
    </div>

    <!-- PROMO SECTION 1 -->
    <div class="mt-6 md:mt-10 mb-6 container mx-auto px-4 lg:px-24">
        <a href="https://meet.applet.in/?ref=ravi" target="_blank" class="promo-dark-card block rounded-[2.5rem] md:rounded-[3rem] p-6 md:p-10 shadow-2xl relative overflow-hidden group">
            <div class="absolute -top-10 -left-10 w-64 h-64 bg-yellow-400/10 rounded-full blur-3xl group-hover:bg-blue-400/20 transition duration-1000"></div>
            <div class="flex flex-col md:flex-row items-center justify-between gap-8 relative z-10 text-center md:text-left text-white">
                <div class="space-y-4">
                    <h3 class="font-black text-2xl md:text-5xl uppercase tracking-tighter leading-none">
                        Get Your Own App <br class="hidden md:block"> <span class="text-yellow-400 italic">Like this Free for Lifetime?</span> 
                    </h3>
                    <div class="space-y-2 opacity-95">
                        <p class="text-sm md:text-lg font-bold text-yellow-300 italic">"Kya Aap ko is tarah Apnaa Own App Lifetime Free Chahiye? Toh Yahan Click Keejiye"</p>
                        <p class="text-xl md:text-2xl font-black text-white leading-tight italic">ఇటువంటి మీ స్వంత యాప్ మీకు లైఫ్ టైమ్ ఫ్రీ గా కావాలా?</p>
                    </div>
                </div>
                <div class="flex-shrink-0">
                    <div class="bg-yellow-400 text-black font-black px-8 py-5 rounded-2xl shadow-xl uppercase text-[12px] tracking-[0.2em] group-hover:bg-white transition-all transform group-hover:scale-110 active:scale-95">
                        Get Your Free App Now
                    </div>
                </div>
            </div>
        </a>
    </div>

    <!-- PROMO SECTION 2 -->
    <div class="mb-12 container mx-auto px-4 lg:px-20">
        <div class="bg-black rounded-[2rem] md:rounded-[2.5rem] p-5 md:p-10 shadow-2xl border-2 border-white/5 relative overflow-hidden">
            <div class="absolute top-0 right-0 w-64 h-64 bg-blue-600/5 rounded-full blur-3xl"></div>
            <div class="flex flex-col gap-6 relative z-10">
                <div class="text-center md:text-left">
                    <p class="text-white text-base md:text-xl font-bold leading-relaxed mb-4">
                        Earn Thousands of Rupees per Month as <span class="text-yellow-400">Passive Income</span> with ZERO Investment without any Education / Skill / Work / Job. Visit my Website to become a Lifetime 40 % Partner.
                    </p>
                    <a href="https://ravi.webica.info" target="_blank" class="inline-block text-yellow-400 font-black text-lg md:text-2xl underline underline-offset-8 decoration-4 hover:text-white transition">VISIT MY WEBSITE</a>
                </div>
                <div class="h-px bg-white/10 w-full"></div>
                <div class="text-center md:text-left">
                    <p class="text-slate-300 text-base md:text-xl font-bold leading-relaxed mb-4 italic">
                        Har Mahine Hazaaro Rupees Passive Income kamaiye bagair kisee investment ya education ke. "Mere Website ko visit keejiye" aur Lifetime 40% Partner baniye.
                    </p>
                    <a href="https://ravi.webica.info" target="_blank" class="inline-block text-yellow-400 font-black text-lg md:text-2xl underline underline-offset-8 decoration-4 hover:text-white transition uppercase">MERE WEBSITE KO VISIT KEEJIYE</a>
                </div>
                <div class="h-px bg-white/10 w-full"></div>
                <div class="text-center md:text-left">
                    <p class="text-white text-lg md:text-2xl font-black leading-snug mb-4">
                        ఎలాంటి పెట్టుబడి మరియు ఉద్యోగం లేకుండా ప్రతి నెల వేల రూపాయలను సంపాదించండి. 40% భాగస్వామిగా చేరడానికి నా వెబ్‌సైట్‌ను సందర్శించండి.
                    </p>
                    <a href="https://ravi.webica.info" target="_blank" class="inline-block text-yellow-400 font-black text-lg md:text-2xl underline underline-offset-8 decoration-4 hover:text-white transition">నా వెబ్‌సైట్‌ను సందర్శించండి</a>
                </div>
            </div>
        </div>
    </div>

    <!-- HERO SLIDER -->
    <section id="home" class="relative h-[450px] md:h-[700px] bg-black overflow-hidden shadow-2xl">
        <div id="slides-container" class="h-full">
            <?php foreach($data['slider'] as $i => $s): ?>
            <div class="slide h-full w-full absolute inset-0 <?= $i==0?'active':'' ?>">
                <img src="<?= htmlspecialchars($s['img']) ?>" class="w-full h-full object-cover opacity-50 s-img">
                <div class="absolute inset-0 flex flex-col items-center justify-center text-white text-center p-10">
                    <h2 class="text-5xl md:text-[8rem] font-black mb-6 editable s-title uppercase leading-none tracking-tighter" contenteditable="<?= $isAdmin?'true':'false' ?>">
                        <?= htmlspecialchars($s['title']) ?>
                    </h2>
                    <p class="text-xl md:text-3xl font-light editable s-sub opacity-80 max-w-5xl italic" contenteditable="<?= $isAdmin?'true':'false' ?>">
                        <?= htmlspecialchars($s['sub']) ?>
                    </p>
                    <?php if($isAdmin): ?>
                    <div class="mt-12 flex gap-5">
                        <button onclick="triggerInput(this, 'slider')" class="bg-blue-600 px-10 py-3.5 rounded-full text-[11px] font-black uppercase shadow-xl hover:bg-blue-500 transition">Change Background</button>
                        <button onclick="this.closest('.slide').remove(); initSlider();" class="bg-red-600 px-10 py-3.5 rounded-full text-[11px] font-black uppercase shadow-xl hover:bg-red-500 transition">Remove Slide</button>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <button onclick="prevSlide()" class="absolute left-8 top-1/2 -translate-y-1/2 text-white/20 text-6xl z-40 hover:text-white transition-all duration-300"><i class="fa fa-angle-left"></i></button>
        <button onclick="nextSlide()" class="absolute right-8 top-1/2 -translate-y-1/2 text-white/20 text-6xl z-40 hover:text-white transition-all duration-300"><i class="fa fa-angle-right"></i></button>
        <?php if($isAdmin): ?>
            <button onclick="addSlide()" class="absolute bottom-12 left-1/2 -translate-x-1/2 bg-green-600 text-white px-12 py-5 rounded-full font-black text-[12px] uppercase shadow-2xl z-50 hover:bg-green-500 transition-all">+ Add New Slide</button>
        <?php endif; ?>
    </section>

    <!-- WEBICA APP FRAME -->
    <section class="py-10 bg-white border-b overflow-hidden">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto">
                <a href="https://ravi.webica.info" target="_blank" class="group relative block p-1 rounded-[2rem] md:rounded-[3.5rem] bg-gradient-to-r from-blue-700 via-white to-blue-700 hover:scale-[1.02] transition-all duration-500 shadow-xl">
                    <div class="bg-gradient-to-br from-indigo-950 via-blue-900 to-slate-900 rounded-[1.8rem] md:rounded-[3.3rem] p-8 md:p-14 text-center relative overflow-hidden">
                        <div class="absolute -right-20 -top-20 w-64 h-64 bg-blue-600/20 rounded-full blur-[80px]"></div>
                        <h2 class="text-2xl md:text-5xl font-black text-white tracking-tight leading-tight relative z-10">
                            <span class="animate-heartbeat text-yellow-400">Click here to enter my Webica App</span> <br class="hidden md:block"> 
                            <span class="opacity-90 text-xl md:text-3xl">to order any product or service for Free</span>
                        </h2>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- PROMOTE BUSINESS FRAME -->
    <section class="py-10 bg-slate-50 overflow-hidden">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto">
                <a href="https://ravi.webica.info/u3" target="_blank" class="group relative block p-1 rounded-[2rem] md:rounded-[3.5rem] bg-gradient-to-r from-red-500 via-white to-red-500 hover:scale-[1.02] transition-all duration-500 shadow-xl">
                    <div class="bg-gradient-to-br from-rose-950 via-red-800 to-orange-950 rounded-[1.8rem] md:rounded-[3.3rem] p-8 md:p-14 text-center relative overflow-hidden">
                        <div class="absolute -right-20 -top-20 w-64 h-64 bg-white/10 rounded-full blur-[80px]"></div>
                        <h2 class="text-2xl md:text-5xl font-black text-white tracking-tight leading-tight relative z-10">
                            <span class="animate-heartbeat block mb-2">Click Here to Promote your Business</span>
                            <span class="text-yellow-400 text-xl md:text-3xl">to Lakhs of People for FREE !!!</span>
                        </h2>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- ABOUT US -->
    <?php 
        $aboutStatus = $data['about_status'] ?? 'pending';
        $isAboutApproved = ($aboutStatus === 'approved');
        if ($isAnyAdmin || $isAboutApproved): 
            $canModEditAbout = ($isModerator && !$isAboutApproved);
            $aboutEditable = ($isAdmin || $canModEditAbout);
    ?>
    <section id="about" class="py-32 relative transition-all duration-1000" style="background-color: <?= $data['about_colors']['bg'] ?>; color: <?= $data['about_colors']['text'] ?>;">
        <?php if($isAnyAdmin): ?>
        <div class="frame-tool">
            <input type="color" id="about_bg_picker" value="<?= $data['about_colors']['bg'] ?>" onchange="document.getElementById('about').style.backgroundColor=this.value">
            <input type="color" id="about_text_picker" value="<?= $data['about_colors']['text'] ?>" onchange="document.getElementById('about').style.color=this.value">
            <?php if($isAdmin && !$isAboutApproved): ?>
                <button onclick="approveAbout()" class="bg-green-600 text-white px-5 py-2 rounded-lg text-[10px] font-black uppercase shadow-lg">Approve About Us</button>
            <?php endif; ?>
        </div>
        <?php endif; ?>
        <div class="container mx-auto px-6 md:px-12 flex flex-col md:flex-row items-center gap-20">
            <div class="w-full md:w-1/2 text-center md:text-left space-y-10">
                <h2 id="about_title" class="text-5xl md:text-9xl font-black mb-8 editable uppercase italic leading-none tracking-tighter" contenteditable="<?= $aboutEditable?'true':'false' ?>"><?= htmlspecialchars($data['about_title']) ?></h2>
                <div id="about_desc" class="text-2xl md:text-3xl opacity-80 editable font-light leading-relaxed text-justify" contenteditable="<?= $aboutEditable?'true':'false' ?>"><?= htmlspecialchars($data['about_desc']) ?></div>
            </div>
            <div class="w-full md:w-1/2 relative">
                <img id="about_img_display" src="<?= htmlspecialchars($data['about_img']) ?>" class="relative w-full h-auto rounded-[3.5rem] shadow-2xl object-cover border-4 border-white/20">
                <?php if($aboutEditable): ?>
                    <button onclick="triggerInput(this, 'about')" class="absolute top-8 right-8 bg-blue-600 text-white w-16 h-16 rounded-full shadow-2xl flex items-center justify-center"><i class="fa fa-camera"></i></button>
                <?php endif; ?>
            </div>
        </div>
    </section>
    <?php endif; ?>

    <!-- PRODUCTS GRID -->
    <section id="products" class="py-32 bg-slate-100 border-y border-slate-200">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-4xl sm:text-6xl md:text-8xl lg:text-[9rem] font-black text-blue-950 mb-8 italic tracking-tighter leading-none break-words">Products/Services</h2>
            <?php if($isAdmin || ($isModerator && count($data['products']) < 50)): ?>
                <button onclick="addProduct()" class="bg-indigo-600 text-white px-14 py-6 rounded-[2rem] font-black text-[12px] uppercase shadow-2xl mb-24">+ Add New Product/Service</button>
            <?php endif; ?>
            <div id="product-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 text-left">
                <?php 
                    $activePool = $isAnyAdmin ? $data['products'] : array_filter($data['products'], function($p) { return ($p['status'] ?? 'pending') === 'approved'; });
                    $paginationPackage = getCustomPaginated(array_reverse($activePool), 'p_pg', 10);
                    foreach($paginationPackage['data'] as $p): 
                        $statusRef = $p['status'] ?? 'pending';
                        $isPApproved = ($statusRef === 'approved');
                        $canModifyMeta = $isAdmin || ($isModerator && !$isPApproved);
                ?>
                <div class="product-card bg-white rounded-[3.5rem] overflow-hidden shadow-xl relative group transition-all" data-status="<?= $statusRef ?>">
                    <div class="relative h-72 bg-slate-200 overflow-hidden">
                        <img src="<?= htmlspecialchars($p['img'] ?? 'https://via.placeholder.com/600x400') ?>" class="w-full h-full object-cover p-img group-hover:scale-110 transition-transform duration-1000">
                        <?php if($canModifyMeta): ?>
                            <button onclick="triggerInput(this, 'product')" class="absolute top-6 right-6 bg-blue-600 text-white w-14 h-14 rounded-full flex items-center justify-center"><i class="fa fa-edit"></i></button>
                        <?php endif; ?>
                        <?php if($isAnyAdmin): ?>
                            <div class="absolute top-6 left-8"><span class="p-status-badge text-[11px] font-black uppercase px-6 py-2 rounded-2xl <?= $isPApproved?'bg-green-500 text-white':'bg-yellow-400 text-black' ?>"><?= strtoupper($statusRef) ?></span></div>
                        <?php endif; ?>
                    </div>
                    <div class="p-10 md:p-12 space-y-8">
                        <div>
                            <div class="text-[11px] font-bold text-slate-400 uppercase tracking-widest">REF: <span class="editable p-id" contenteditable="<?= $canModifyMeta?'true':'false' ?>"><?= htmlspecialchars($p['id'] ?? 'N/A') ?></span></div>
                            <h3 class="text-3xl font-black uppercase text-blue-900 editable p-name" contenteditable="<?= $canModifyMeta?'true':'false' ?>"><?= htmlspecialchars($p['name'] ?? 'Premium Listing') ?></h3>
                        </div>
                        <p class="text-slate-500 text-base leading-relaxed editable p-desc" contenteditable="<?= $canModifyMeta?'true':'false' ?>"><?= htmlspecialchars($p['desc'] ?? 'Description here...') ?></p>
                        <div class="pt-8 border-t border-slate-100">
                            <div class="flex flex-col">
                                <span class="text-blue-700 font-black flex items-baseline gap-2">₹ <span class="text-5xl editable p-price" contenteditable="<?= $isAnyAdmin?'true':'false' ?>"><?= htmlspecialchars($p['price'] ?? '0') ?></span></span>
                                <span class="text-slate-400 text-xs italic font-bold editable p-price-details" contenteditable="<?= $isAnyAdmin?'true':'false' ?>"><?= htmlspecialchars($p['price_details'] ?? 'Statutory taxes apply') ?></span>
                            </div>
                        </div>
                        <?php if($isAdmin): ?>
                        <div class="flex gap-4">
                            <?php if(!$isPApproved): ?><button onclick="approveProduct(this)" class="bg-blue-600 text-white text-[11px] font-black px-8 py-4 rounded-2xl uppercase flex-1">Authorize</button><?php endif; ?>
                            <button onclick="this.closest('.product-card').remove()" class="bg-red-50 text-red-500 p-5 rounded-2xl hover:bg-red-500 hover:text-white transition"><i class="fa fa-trash-alt"></i></button>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <?php if($paginationPackage['total_pages'] > 1): ?>
            <div class="flex justify-center items-center gap-12 mt-32">
                <?php if($paginationPackage['current_page'] > 1): ?><a href="?p_pg=<?= $paginationPackage['current_page'] - 1 ?>#products" class="bg-slate-950 text-white px-12 py-5 rounded-full font-black text-[12px] uppercase shadow-2xl">Previous Cycle</a><?php endif; ?>
                <div class="text-2xl font-black text-blue-900 bg-white px-14 py-5 rounded-[2.5rem] shadow-inner border-2 border-slate-100 italic">Segment <?= $paginationPackage['current_page'] ?> of <?= $paginationPackage['total_pages'] ?></div>
                <?php if($paginationPackage['current_page'] < $paginationPackage['total_pages']): ?><a href="?p_pg=<?= $paginationPackage['current_page'] + 1 ?>#products" class="bg-slate-950 text-white px-12 py-5 rounded-full font-black text-[12px] uppercase shadow-2xl">Next Cycle</a><?php endif; ?>
            </div>
            <?php endif; ?>
        </div>
    </section>

    <!-- READY TO ORDER -->
    <section class="py-12 bg-gradient-to-br from-indigo-900 via-blue-900 to-slate-950 text-white relative border-t-4 border-yellow-400 text-center">
        <div class="container mx-auto px-6 relative z-10">
            <h2 class="text-3xl md:text-5xl font-black uppercase italic tracking-tighter mb-8 leading-none">Ready to Order?</h2>
            <a href="https://ravi.webica.info/list_items.php?app_id=15&limit=10&list_order=desc&search%5Bitem_name%5D=Ravi+Sweets" target="_blank" class="inline-block bg-yellow-400 text-black font-black px-12 py-4 rounded-full shadow-2xl uppercase text-xl md:text-3xl tracking-widest hover:bg-white transition-all transform hover:scale-110 active:scale-95">Proceed</a>
        </div>
    </section>

    <!-- FOOTER (UPDATED CASE & PADDING) -->
    <footer class="bg-slate-900 text-slate-500 py-10 pb-36 text-center border-t border-white/5">
        <div class="container mx-auto px-6">
            <div class="text-2xl font-black text-white mb-6 italic uppercase tracking-widest"><?= htmlspecialchars($data['logo_text']) ?></div>
            <a href="https://ravi.webica.info" target="_blank" class="text-white font-bold text-sm tracking-widest block hover:text-blue-400 transition-colors">
                App is Developed by Webica
            </a>
        </div>
    </footer>

    <!-- LOGIN MODAL -->
    <?php if (isset($_GET['view_login']) && !$currentUser): ?>
    <div class="fixed inset-0 bg-slate-950/95 z-[9999] flex items-center justify-center p-6 backdrop-blur-3xl">
        <form method="POST" class="bg-white p-12 md:p-16 rounded-[4rem] w-full max-w-xl text-center shadow-2xl border border-slate-100">
            <div class="w-24 h-24 bg-blue-50 text-blue-600 rounded-[2rem] flex items-center justify-center mx-auto mb-10"><i class="fa fa-fingerprint text-5xl"></i></div>
            <h2 class="text-3xl font-black mb-12 uppercase tracking-tighter">Login Panel</h2>
            <div class="space-y-6">
                <input type="text" name="username" placeholder="Username" class="w-full bg-slate-50 p-6 rounded-2xl font-black text-center uppercase tracking-widest border-none outline-none focus:ring-4 focus:ring-blue-500/20" required>
                <input type="password" name="password" placeholder="Password" class="w-full bg-slate-50 p-6 rounded-2xl font-black text-center tracking-widest border-none outline-none focus:ring-4 focus:ring-blue-500/20" required>
            </div>
            <button type="submit" name="login_submit" class="w-full mt-10 bg-blue-700 text-white font-black py-6 rounded-2xl uppercase tracking-[0.5em] shadow-xl hover:bg-blue-800 transition-all">Login</button>
            <a href="index.php" class="block mt-8 text-slate-400 font-bold uppercase text-[10px] hover:text-red-500">Back Home</a>
        </form>
    </div>
    <?php endif; ?>

    <script>
        /**
         * WHATSAPP SHARE TELUGU FUNCTION
         */
        function shareToWhatsAppTelugu() {
            const shareText = `👉 మీరు అందుబాటులో ఉన్న ధరలకే రుచికరమైన స్వీట్లను ఆర్డర్ చేయాలనుకుంటున్నారా?
నా యాప్‌ను సందర్శించండి : https://applet.in/a/ravi

👉 ఎటువంటి చదువు, పని, నైపుణ్యం, ఉద్యోగం, వ్యాపారం లేదా పెట్టుబడి లేకుండానే మీరు నెలకు వేలాది రూపాయలు సంపాదించవచ్చు

👉 Webica తో ఇది 100% నిజం

🔥 ఏ పనీ చేయకుండా డబ్బు సంపాదించే రహస్యాన్ని మీకు ఎవరూ చెప్పరు
ఉచితంగా Webica Partner గా మారండి మరియు డబ్బు సంపాదించడం ప్రారంభించండి

🎥 మరింత తెలుసుకోవడానికి వీడియో చూడండి https://www.youtube.com/playlist?list=PLt1ijCQ_5DpjwnFkpYOUQ5N8ATFTPV57p

🚀 మరింత తెలుసుకోవడానికి దయచేసి నా వెబ్ యాప్‌ను సందర్శించి లైవ్ చాట్‌లోకి ప్రవేశించండి:
https://meet.applet.in/?ref=ravi

🚀 దయచేసి నా యాప్‌లో రిజిస్టర్ అవ్వండి : https://ravi.webica.info/register.php`;

            const encodedText = encodeURIComponent(shareText);
            const whatsappUrl = `https://api.whatsapp.com/send?text=${encodedText}`;
            window.open(whatsappUrl, '_blank');
        }

        /**
         * WHATSAPP SHARE ENGLISH FUNCTION
         */
        function shareToWhatsApp() {
            const shareText = `👉 Do you want to order delicious sweets at affordable prices?
Visit my App : https://applet.in/a/ravi

👉 You can earn thousands of rupees per month without any education, work, skill, job, business or investment

👉 It is 100 % True with Webica

🔥 Nobody will tell you the secret of earning money without doing any work

Become Webica Partner for free and Start earning money

🎥 Watch the video to know more
https://www.youtube.com/playlist?list=PLt1ijCQ_5DpjwnFkpYOUQ5N8ATFTPV57p

🚀 Please Visit my Web App and Enter in Live Chat to know more:
https://meet.applet.in/?ref=ravi

🚀 Please Register in my App :
https://ravi.webica.info/register.php`;

            const encodedText = encodeURIComponent(shareText);
            const whatsappUrl = `https://api.whatsapp.com/send?text=${encodedText}`;
            window.open(whatsappUrl, '_blank');
        }

        let currentSlideIdx = 0;
        function initSlider() {
            const domSlides = document.querySelectorAll('.slide');
            if(domSlides.length === 0) return;
            domSlides.forEach(s => s.classList.remove('active'));
            if(currentSlideIdx >= domSlides.length) currentSlideIdx = 0;
            if(currentSlideIdx < 0) currentSlideIdx = domSlides.length - 1;
            domSlides[currentSlideIdx].classList.add('active');
        }
        function nextSlide() { currentSlideIdx++; initSlider(); }
        function prevSlide() { currentSlideIdx--; initSlider(); }
        setInterval(nextSlide, 8000);

        let sessionActiveBtn = null; 
        let sessionProcType = '';
        function triggerInput(btn, type) { sessionActiveBtn = btn; sessionProcType = type; document.getElementById('image_uploader').click(); }

        function handleUpload(input) {
            if (input.files && input.files[0]) {
                const formData = new FormData(); 
                formData.append('file', input.files[0]);
                fetch('upload.php', { method: 'POST', body: formData }).then(r => r.json()).then(res => {
                    if (res.status === 'ok') {
                        let cacheBuster = res.path + '?v=' + new Date().getTime();
                        if (sessionProcType === 'slider') sessionActiveBtn.closest('.slide').querySelector('.s-img').src = cacheBuster;
                        if (sessionProcType === 'about') document.getElementById('about_img_display').src = cacheBuster;
                        if (sessionProcType === 'product') sessionActiveBtn.closest('.product-card').querySelector('.p-img').src = cacheBuster;
                    }
                });
            }
        }

        function addProduct() {
            const targetGrid = document.getElementById('product-grid');
            const uniqueId = 'ID-' + Math.floor(1000 + Math.random() * 8999);
            const htmlStructure = `
                <div class="product-card bg-white rounded-[3.5rem] overflow-hidden shadow-2xl relative" data-status="pending">
                    <div class="relative h-72 bg-slate-200">
                        <img src="https://via.placeholder.com/600x400" class="w-full h-full object-cover p-img">
                        <button onclick="triggerInput(this, 'product')" class="absolute top-6 right-6 bg-blue-600 text-white w-14 h-14 rounded-full flex items-center justify-center"><i class="fa fa-plus"></i></button>
                        <div class="absolute top-6 left-8"><span class="p-status-badge text-[11px] font-black uppercase px-6 py-2 rounded-2xl bg-yellow-400 text-black">pending</span></div>
                    </div>
                    <div class="p-10 space-y-8">
                        <div><span class="text-[11px] font-bold text-slate-400">REF: <span class="editable p-id" contenteditable="true">${uniqueId}</span></span><h3 class="text-3xl font-black text-blue-900 uppercase editable p-name" contenteditable="true">New Item</h3></div>
                        <p class="text-slate-500 editable p-desc" contenteditable="true">Details here...</p>
                        <span class="text-blue-700 font-black text-4xl flex items-baseline gap-2">₹ <span class="editable p-price" contenteditable="true">0</span></span>
                        <button onclick="this.closest('.product-card').remove()" class="text-red-500 font-black text-[10px] uppercase">Discard Entry</button>
                    </div>
                </div>`;
            targetGrid.insertAdjacentHTML('afterbegin', htmlStructure);
        }

        function approveProduct(btn) {
            const rootNode = btn.closest('.product-card'); rootNode.dataset.status = 'approved';
            const badge = rootNode.querySelector('.p-status-badge');
            badge.innerText = 'APPROVED'; badge.className = 'p-status-badge text-[11px] font-black uppercase px-6 py-2 rounded-2xl bg-green-500 text-white';
            btn.remove();
        }

        let sessionAboutStatus = "<?= $data['about_status'] ?? 'pending' ?>";
        function approveAbout() { sessionAboutStatus = 'approved'; alert("About Us Approved."); }

        function saveEverything() {
            const cleanUrl = u => u.split('?')[0];
            const packet = {
                logo_text: document.getElementById('main_logo').innerText,
                about_title: document.getElementById('about_title').innerText,
                about_desc: document.getElementById('about_desc').innerText,
                about_img: cleanUrl(document.getElementById('about_img_display').src),
                about_status: sessionAboutStatus,
                about_colors: { bg: document.getElementById('about_bg_picker').value, text: document.getElementById('about_text_picker').value },
                slider: Array.from(document.querySelectorAll('.slide')).map(s => ({
                    img: cleanUrl(s.querySelector('.s-img').src), title: s.querySelector('.s-title').innerText, sub: s.querySelector('.s-sub').innerText
                })),
                products: Array.from(document.querySelectorAll('.product-card')).map(p => ({
                    img: cleanUrl(p.querySelector('.p-img').src), id: p.querySelector('.p-id').innerText, name: p.querySelector('.p-name').innerText,
                    desc: p.querySelector('.p-desc').innerText, price: p.querySelector('.p-price').innerText, price_details: p.querySelector('.p-price-details').innerText, status: p.dataset.status
                }))
            };
            fetch('save.php', { method: 'POST', body: JSON.stringify(packet) }).then(() => { alert("Sync Successful."); location.reload(); });
        }
        window.onload = initSlider;
    </script>
</body>
</html>