<?php
require_once '../config/db.php';
require_once '../config/auth.php';
require_once '../config/functions.php';
requireLogin();

$page_title = 'Report Lost Item';
$msg = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $item_name = sanitize($conn, $_POST['item_name']);
    $description = sanitize($conn, $_POST['description']);
    $category = sanitize($conn, $_POST['category']);
    $location = sanitize($conn, $_POST['location']);
    $date_lost = sanitize($conn, $_POST['date_lost']);
    $contact_number = sanitize($conn, $_POST['contact_number']);
    $uid = $_SESSION['user_id'];
    $image_path = '';

    if (!empty($_FILES['image']['name'])) {
        $uploaded = uploadImage($_FILES['image']);
        if ($uploaded) $image_path = $uploaded;
        else { $msg = '<div class="alert alert-danger">Invalid image. Only JPG, JPEG, PNG allowed (max 5MB).</div>'; }
    }

    if (!$msg) {
        $conn->query("INSERT INTO lost_items (user_id, item_name, description, category, location, date_lost, image_path, contact_number) VALUES ($uid,'$item_name','$description','$category','$location','$date_lost','$image_path','$contact_number')");
        $new_id = $conn->insert_id;
        // Run matching
        runMatchingAlgorithm($conn, $new_id);
        $msg = '<div class="alert alert-success">Lost item reported successfully! The system will notify you if a match is found.</div>';
    }
}

$categories = $conn->query("SELECT name FROM categories ORDER BY name");
$user_phone = $conn->query("SELECT phone FROM users WHERE id={$_SESSION['user_id']}")->fetch_assoc()['phone'] ?? '';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $page_title ?> - RELINK</title>
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/style.css">
</head>
<body>
<div class="layout">
    <?php include '../includes/user_sidebar.php'; ?>
    <div class="main-content">
        <?php include '../includes/topbar.php'; ?>
        <div class="page-content">
            <?= $msg ?>

            <div class="rf-wrapper">
                <!-- Sidebar Info -->
                <div class="rf-sidebar">
                    <div class="rf-info-card rf-info-lost">
                        <div class="rf-info-icon">🔍</div>
                        <h3>Reporting a Lost Item</h3>
                        <p>Fill in as much detail as possible to help our system find a match faster.</p>
                    </div>
                    <div class="rf-tips">
                        <div class="rf-tip">
                            <span class="rf-tip-icon">✏️</span>
                            <div><strong>Be specific</strong><br><small>Include brand, color, and unique features</small></div>
                        </div>
                        <div class="rf-tip">
                            <span class="rf-tip-icon">📍</span>
                            <div><strong>Exact location</strong><br><small>The more precise, the better the match</small></div>
                        </div>
                        <div class="rf-tip">
                            <span class="rf-tip-icon">📷</span>
                            <div><strong>Add a photo</strong><br><small>Greatly improves matching accuracy</small></div>
                        </div>
                        <div class="rf-tip">
                            <span class="rf-tip-icon">📱</span>
                            <div><strong>Stay reachable</strong><br><small>We'll SMS you when a match is found</small></div>
                        </div>
                    </div>
                </div>

                <!-- Form -->
                <div class="rf-form-card">
                    <div class="rf-form-header rf-form-header--lost">
                        <div class="rf-form-header-icon">🔍</div>
                        <div>
                            <h2>Report a Lost Item</h2>
                            <p>All fields marked with <span style="color:#ef4444">*</span> are required</p>
                        </div>
                    </div>

                    <form method="POST" enctype="multipart/form-data" class="rf-form">

                        <div class="rf-section-label">Item Details</div>

                        <div class="form-group">
                            <label>Item Name <span class="rf-required">*</span></label>
                            <input type="text" name="item_name" class="form-control rf-input" placeholder="e.g. Black Wallet, Samsung Galaxy A54" required>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label>Category <span class="rf-required">*</span></label>
                                <select name="category" class="form-control rf-input" required>
                                    <option value="">Select a category</option>
                                    <?php while($c=$categories->fetch_assoc()): ?>
                                    <option value="<?= $c['name'] ?>"><?= $c['name'] ?></option>
                                    <?php endwhile; ?>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Date Lost <span class="rf-required">*</span></label>
                                <input type="date" name="date_lost" class="form-control rf-input" max="<?= date('Y-m-d') ?>" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Location Lost <span class="rf-required">*</span></label>
                            <input type="text" name="location" class="form-control rf-input" placeholder="e.g. City Hall Lobby, 2nd Floor Corridor" required>
                        </div>

                        <div class="form-group">
                            <label>Contact Number <span class="rf-required">*</span></label>
                            <input type="text" name="contact_number" class="form-control rf-input" placeholder="09XXXXXXXXX" value="<?= htmlspecialchars($user_phone) ?>" required>
                        </div>

                        <div class="form-group">
                            <label>Description <span class="rf-optional">(optional but recommended)</span></label>
                            <textarea name="description" class="form-control rf-input" rows="4" placeholder="Describe the item: color, brand, size, distinguishing marks, contents..."></textarea>
                        </div>

                        <div class="rf-section-label" style="margin-top:8px">Photo</div>

                        <div class="form-group">
                            <label>Upload Image <span class="rf-optional">(optional)</span></label>
                            <div class="rf-upload-zone" id="uploadZoneLost" onclick="document.getElementById('imageInput').click()">
                                <div class="rf-upload-icon">📷</div>
                                <div class="rf-upload-text">Click or drag to upload a photo</div>
                                <div class="rf-upload-hint">JPG, JPEG, PNG &middot; Max 5MB</div>
                            </div>
                            <input type="file" id="imageInput" name="image" accept=".jpg,.jpeg,.png" style="display:none" onchange="rfPreview(this,'imgPreview','uploadZoneLost')">
                            <div id="imgPreview" class="rf-preview-wrap" style="display:none">
                                <img id="imgPreviewImg" class="rf-preview-img">
                                <button type="button" class="rf-preview-remove" onclick="rfRemove('imageInput','imgPreview','uploadZoneLost')">✕ Remove</button>
                            </div>
                        </div>

                        <div class="rf-form-actions">
                            <button type="submit" class="btn btn-primary btn-lg rf-submit-btn">🔍 Submit Lost Report</button>
                            <a href="<?= BASE_URL ?>/user/dashboard.php" class="btn btn-light">Cancel</a>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<?= BASE_URL ?>/assets/js/main.js"></script>
</body>
</html>
