<?php 
// আইটেম বা কার্ড ম্যানেজমেন্ট পেজ
include 'header.php'; 
?>

<div id="items">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <h4 style="color: var(--accent); margin: 0;"><i class="fas fa-box"></i> MANAGE ALL ITEMS</h4>
        <button class="btn" onclick="$('#addModal').fadeIn()" style="margin: 0; width: auto; padding: 10px 20px;">+ ADD NEW CARD</button>
    </div>

    <!-- আইটেম লিস্ট -->
    <ul id="sortable" style="padding:0; list-style:none;">
        <?php
        $res = $conn->query("SELECT * FROM site_links ORDER BY sort_order ASC");
        if($res->num_rows == 0) {
            echo '<li class="list-item" style="color:#666; justify-content:center;">No items found!</li>';
        } else {
            while($r = $res->fetch_assoc()) {
                $safe_title = htmlspecialchars($r['title'], ENT_QUOTES);
                $safe_cat = htmlspecialchars($r['category'], ENT_QUOTES);
                $safe_desc = htmlspecialchars($r['description'], ENT_QUOTES);
                $safe_url = htmlspecialchars($r['url'], ENT_QUOTES);
                
                // ইমেজের পাথ চেক করা
                $img_name = $r['image'];
                $img_path = "../uploads/" . $img_name;
                
                // যদি ফাইলটি ফোল্ডারে না থাকে তবে ডিফল্ট ইমেজ দেখাবে
                $display_img = (file_exists($img_path) && !empty($img_name)) ? $img_path : 'https://via.placeholder.com/50?text=No+Img';
                ?>
                <li class="list-item" id="item_<?= $r['id'] ?>">
                    <div style="display:flex; align-items:center;">
                        <i class="fas fa-bars" style="margin-right:15px; color:#444; cursor:move;"></i>
                        
                        <!-- ইমেজ ডিসপ্লে উইথ এরর হ্যান্ডলিং -->
                        <div style="width:45px; height:45px; margin-right:15px; border-radius: 5px; overflow:hidden; border: 1px solid #333; background:#000; display:flex; align-items:center; justify-content:center;">
                            <img src="<?= $display_img ?>" 
                                 style="width:100%; height:100%; object-fit:cover;" 
                                 onerror="this.src='https://via.placeholder.com/50?text=Error';">
                        </div>

                        <div>
                            <b style="color: #fff;"><?= $r['title'] ?></b><br>
                            <small style="color:var(--accent); font-size:10px;">Cat: <?= $r['category'] ?></small>
                        </div>
                    </div>
                    <div>
                        <a href="#" onclick="editItem(<?= $r['id'] ?>, '<?= $safe_cat ?>', '<?= $safe_title ?>', '<?= $safe_url ?>', '<?= $safe_desc ?>', '<?= $r['offer_percentage'] ?>', '<?= $r['show_discount'] ?>', '<?= $r['item_status'] ?>', '<?= $r['timer_deadline'] ?>')" style="color:var(--accent); margin-right:15px; text-decoration:none; font-weight:bold;">Edit</a>
                        <a href="../delete.php?id=<?= $r['id'] ?>" onclick="return confirm('Delete this item?')" style="color:red; text-decoration:none; font-weight:bold;">Del</a>
                    </div>
                </li>
                <?php
            }
        }
        ?>
    </ul>
</div>

<!-- ADD MODAL -->
<div id="addModal" class="modal">
    <div class="modal-content">
        <h3 style="color:var(--accent); margin-top:0;">ADD NEW ITEM</h3>
        <form action="../process.php" method="POST" enctype="multipart/form-data">
            <label>Select Category</label>
            <select name="category" required>
                <?php 
                $cat_res = $conn->query("SELECT * FROM categories ORDER BY id ASC");
                while($c = $cat_res->fetch_assoc()) echo '<option value="'.$c['name'].'">'.$c['name'].'</option>';
                ?>
            </select>
            <label>Item Title</label><input type="text" name="title" required>
            <label>Link (URL)</label><input type="url" name="url" placeholder="https://" required>
            <label>Description</label><textarea name="description" rows="2"></textarea>
            <label>Upload Image</label><input type="file" name="image" required>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;">
    <div>
        <label>Offer % (Emoji)</label>
        <input type="text" name="offer_percentage" placeholder="e.g. 50%">
    </div>
    <div>
        <label>Show Discount?</label>
        <select name="show_discount">
            <option value="0">OFF</option>
            <option value="1">ON</option>
        </select>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;">
    <div>
        <label>Item Status</label>
        <select name="item_status">
            <option value="normal">Normal</option>
            <option value="update">Update</option>
            <option value="upcoming">Upcoming</option>
        </select>
    </div>
    <div>
        <label>Timer Deadline</label>
        <input type="datetime-local" name="timer_deadline">
    </div>
</div>
            <button class="btn" name="submit">PUBLISH</button>
        </form>
        <button onclick="$('#addModal').fadeOut()" class="btn" style="background:#333;">CANCEL</button>
    </div>
</div>

<!-- EDIT MODAL -->
<div id="editModal" class="modal">
    <div class="modal-content">
        <h3 style="color:var(--accent); margin-top:0;">EDIT ITEM</h3>
        <form action="../process.php" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="id" id="edit_id">
            <label>Category</label>
            <select name="category" id="edit_category">
                <?php 
                $cat_res->data_seek(0);
                while($c = $cat_res->fetch_assoc()) echo '<option value="'.$c['name'].'">'.$c['name'].'</option>'; 
                ?>
            </select>
            <label>Title</label><input type="text" name="title" id="edit_title">
            <label>URL</label><input type="url" name="url" id="edit_url">
            <label>Description</label><textarea name="description" id="edit_desc"></textarea>
            <label>New Image (Optional)</label><input type="file" name="image">

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;">
    <div>
        <label>Offer % (Emoji)</label>
        <input type="text" name="offer_percentage" id="edit_offer">
    </div>
    <div>
        <label>Show Discount?</label>
        <select name="show_discount" id="edit_show_discount">
            <option value="0">OFF</option>
            <option value="1">ON</option>
        </select>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;">
    <div>
        <label>Item Status</label>
        <select name="item_status" id="edit_status">
            <option value="normal">Normal</option>
            <option value="update">Update</option>
            <option value="upcoming">Upcoming</option>
        </select>
    </div>
    <div>
        <label>Timer Deadline</label>
        <input type="datetime-local" name="timer_deadline" id="edit_timer">
    </div>
</div>
            <button class="btn" name="update_item">UPDATE ITEM</button>
        </form>
        <button onclick="$('#editModal').fadeOut()" class="btn" style="background:#333;">CANCEL</button>
    </div>
</div>

<script>
function editItem(id, cat, title, url, desc, offer, show_disc, status, timer) {
    $('#edit_id').val(id); 
    $('#edit_category').val(cat); 
    $('#edit_title').val(title); 
    $('#edit_url').val(url); 
    $('#edit_desc').val(desc);
    
    // নতুন ফিল্ডগুলো মোডালে সেট করা হচ্ছে
    $('#edit_offer').val(offer);
    $('#edit_show_discount').val(show_disc);
    $('#edit_status').val(status);
    
    // টাইমার ফরম্যাট ফিক্স (datetime-local এর জন্য)
    if(timer && timer !== '0000-00-00 00:00:00' && timer !== '') {
        // SQL datetime কে HTML datetime-local ফরম্যাটে রূপান্তর (YYYY-MM-DDTHH:MM)
        var formattedTimer = timer.replace(" ", "T").substring(0, 16);
        $('#edit_timer').val(formattedTimer);
    } else {
        $('#edit_timer').val('');
    }

    $('#editModal').fadeIn();
}
</script>

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