<!DOCTYPE html>
<html lang="vi">

<head>
    <?php require_once('head.php');?>
    <title>Thêm Logo Mới | Premium UI</title>
    <?php require_once('nav.php');?>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        .glass-card { background: #fff; border-radius: 20px; border: none; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
        .form-control { border-radius: 10px; border: 1px solid #e2e8f0; padding: 12px; transition: all 0.3s; }
        .form-control:focus { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); border-color: #3b82f6; }
        .preview-box { width: 100%; height: 200px; border: 2px dashed #e2e8f0; border-radius: 15px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f8fafc; margin-top: 10px; }
        .preview-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
    </style>
</head>

<?php
if (isset($_POST["submit"])) {
    $stmt = $ketnoi->prepare("INSERT INTO `mau_logo` (`name`, `image`, `gia`) VALUES (?, ?, ?)");
    $stmt->bind_param("sss", $_POST['name'], $_POST['image'], $_POST['price']);
    
    if ($stmt->execute()) {
        echo '<script>Swal.fire("Thành công", "Logo đã được đưa vào kho", "success").then(() => { location.href="chuyen-muc.php"; });</script>';
    } else {
        echo '<script>Swal.fire("Lỗi", "Hệ thống bận, thử lại sau", "error");</script>';
    }
}
?>

<body class="hold-transition sidebar-mini layout-fixed">
    <div class="wrapper">
        <div class="content-wrapper bg-light">
            <section class="content pt-4">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="card glass-card p-4">
                                <h3 class="font-weight-bold mb-4"><i class="fas fa-plus-circle text-primary mr-2"></i>Thêm Logo Mới</h3>
                                <form method="post">
                                    <div class="form-group">
                                        <label>Tên Logo</label>
                                        <input type="text" class="form-control" name="name" required placeholder="Ví dụ: Logo Công Nghệ Xanh">
                                    </div>
                                    <div class="form-group">
                                        <label>Giá (VNĐ)</label>
                                        <input type="number" class="form-control" name="price" required placeholder="Ví dụ: 500000">
                                    </div>
                                    <div class="form-group">
                                        <label>Link Hình Ảnh</label>
                                        <input type="text" class="form-control" name="image" id="imgInput" oninput="updatePreview()" required placeholder="Dán link ảnh vào đây...">
                                    </div>
                                    <button type="submit" name="submit" class="btn btn-primary btn-lg mt-3 px-5">Lưu Logo</button>
                                </form>
                            </div>
                        </div>

                        <div class="col-md-5">
                            <div class="card glass-card p-4">
                                <h5 class="font-weight-bold mb-3">Xem trước</h5>
                                <div class="preview-box" id="previewArea">
                                    <span class="text-muted"><i class="fas fa-image fa-2x"></i></span>
                                </div>
                                <p class="text-center mt-3 text-muted small">Ảnh sẽ hiển thị ở đây khi bạn dán link</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <script>
    function updatePreview() {
        const url = document.getElementById('imgInput').value;
        const area = document.getElementById('previewArea');
        if(url) {
            area.innerHTML = `<img src="${url}" onerror="this.src='https://via.placeholder.com/200?text=Lỗi+ảnh'">`;
        } else {
            area.innerHTML = `<span class="text-muted"><i class="fas fa-image fa-2x"></i></span>`;
        }
    }
    </script>
    <?php require_once('foot.php');?>
</body>
</html>