<!DOCTYPE html>
<html lang="en">
<!--begin::Head-->

<head>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
    <title>View Code | <?=$lxtdev['ten_web'];?></title>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/nav.php';?>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* CSS Gói giao diện cao cấp */
        .premium-aside-card {
            border: 1px solid rgba(0, 0, 0, 0.05) !important;
            border-radius: 16px !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
            background: #ffffff;
        }
        [data-bs-theme="dark"] .premium-aside-card {
            background: #1e1e2d;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
        }

        .product-main-thumb {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
        }
        [data-bs-theme="dark"] .info-row {
            border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
        }
        .info-row:last-child {
            border-bottom: none;
        }

        .screenshot-card img {
            border-radius: 12px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.04);
        }
        .screenshot-card img:hover {
            transform: scale(1.02);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
            cursor: zoom-in;
        }

        /* Tối ưu hóa Lightbox phóng to ảnh */
        .zoomed-image {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(10, 10, 15, 0.85);
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            cursor: zoom-out;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .zoomed-image.show {
            opacity: 1;
        }
        .zoomed-image img {
            max-width: 92%;
            max-height: 92%;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            transform: scale(0.95);
            transition: transform 0.3s ease;
        }
        .zoomed-image.show img {
            transform: scale(1);
        }
    </style>
</head>

<?php
    $check_id = antixss($_GET['id']);
    $api_checkid = $ketnoi->query("SELECT * FROM `khocode` WHERE `id` = '$check_id' AND `status`='ON' ")->fetch_array();
    if (!($api_checkid)) {
        header("Location: /ma-nguon");
        exit();
    } else {
        $id = antixss($_GET['id']);
        $api_code = $ketnoi->query("SELECT * FROM `khocode` WHERE `id` = '$id' AND `status`='ON'  ")->fetch_array();
        mysqli_query($ketnoi, "UPDATE `khocode` SET `view` = `view` + '1' WHERE `id` = '$id' ");
    }
?>

<body id="kt_app_body" data-kt-app-layout="light-sidebar" data-kt-app-header-fixed="true"
    data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true" data-kt-app-sidebar-hoverable="true"
    data-kt-app-sidebar-push-header="true" data-kt-app-sidebar-push-toolbar="true"
    data-kt-app-sidebar-push-footer="true" data-kt-app-toolbar-enabled="true" class="app-default">

    <script>var defaultThemeMode = "light"; var themeMode; if (document.documentElement) { if (document.documentElement.hasAttribute("data-bs-theme-mode")) { themeMode = document.documentElement.getAttribute("data-bs-theme-mode"); } else { if (localStorage.getItem("data-bs-theme") !== null) { themeMode = localStorage.getItem("data-bs-theme"); } else { themeMode = defaultThemeMode; } } if (themeMode === "system") { themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } document.documentElement.setAttribute("data-bs-theme", themeMode); }</script>

    <div class="d-flex flex-column flex-root app-root" id="kt_app_root">
        <div class="app-page flex-column flex-column-fluid" id="kt_app_page">
            
            <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
                <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/sider.php';?>
            </div>

            <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                <div class="d-flex flex-column flex-column-fluid">
                    
                    <!-- TOOLBAR BAR -->
                    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
                        <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack">
                            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                                <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                                    <i class="fa-solid fa-code text-primary fs-4 mb-1"></i> Chi Tiết Mã Nguồn
                                </h1>
                                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                                    <li class="breadcrumb-item text-muted"><a href="/" class="text-muted text-hover-primary">Home</a></li>
                                    <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                                    <li class="breadcrumb-item text-muted">Mã Nguồn</li>
                                    <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                                    <li class="breadcrumb-item text-dark fw-bold"><?=$api_code['title'];?></li>
                                </ul>
                            </div>
                            <div class="d-flex align-items-center gap-2 gap-lg-3">
                                <a href="#" class="btn btn-sm fw-bold btn-light-success px-4 py-3" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">
                                    <i class="fa-solid fa-wallet me-1"></i> <?=tien($user['money']);?>đ
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- NỘI DUNG CHÍNH -->
                    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
                        <div class="container-xxl" id="kt_content_container">
                            
                            <div class="row g-7 g-lg-10">
                                <!-- CỘT TRÁI - THÔNG TIN DOANH THU & ĐẠI DIỆN -->
                                <div class="col-12 col-lg-4 col-xl-350px">
                                    <div class="card premium-aside-card p-6">
                                        <div class="text-center mb-5">
                                            <img src="<?=$api_code['img'];?>" alt="Thumbnail" class="product-main-thumb mb-4" />
                                            <h2 class="text-dark fs-4 fw-bolder mb-1 px-2"><?=$api_code['title'];?></h2>
                                            <span class="badge badge-light-success fw-bold fs-7 mb-4">Sẵn sàng bàn giao</span>
                                        </div>

                                        <div class="separator separator-dashed mb-4"></div>

                                        <!-- Thống kê thông số nhanh -->
                                        <div class="mb-6">
                                            <div class="info-row">
                                                <span class="text-muted fw-semibold fs-7"><i class="fa-solid fa-tags me-1 fs-8"></i> Mã sản phẩm:</span>
                                                <span class="text-gray-800 fw-bold fs-7">#<?=$api_code['id'];?></span>
                                            </div>
                                            <div class="info-row">
                                                <span class="text-muted fw-semibold fs-7"><i class="fa-regular fa-eye me-1 fs-8"></i> Lượt xem:</span>
                                                <span class="text-gray-800 fw-bold fs-7"><?=number_format($api_code['view']);?></span>
                                            </div>
                                            <div class="info-row">
                                                <span class="text-muted fw-semibold fs-7"><i class="fa-solid fa-coins text-warning me-1 fs-8"></i> Giá bán lẻ:</span>
                                                <span class="text-primary fw-black fs-5"><?=tien($api_code['gia']);?>đ</span>
                                            </div>
                                        </div>

                                        <!-- Hành động mua ngay gọn gàng -->
                                        <button type="button" onclick="muangay()" class="btn btn-primary w-100 py-3 fw-bold fs-6 d-flex align-items-center justify-content-center gap-2">
                                            <span id="button1" class="d-flex align-items-center gap-2">
                                                <i class="fa-solid fa-basket-shopping fs-5"></i> Mua Ngay Bản Quyền
                                            </span>
                                            <span id="button2" class="indicator-progress" style="display: none;">
                                                Đang xử lý <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                            </span>
                                        </button>
                                        
                                        <a href="/ma-nguon" class="btn btn-light-dark w-100 mt-3 fw-semibold"><i class="fa-solid fa-arrow-left me-1"></i> Quay lại kho</a>
                                    </div>
                                </div>

                                <!-- CỘT PHẢI - THÔNG TIN CHI TIẾT & SCREENSHOTS -->
                                <div class="col-12 col-lg-8 col-fluid">
                                    
                                    <!-- Tabs điều hướng -->
                                    <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-5 fw-bold mb-6">
                                        <li class="nav-item">
                                            <a class="nav-link text-active-primary pb-3 active" data-bs-toggle="tab" href="#tab_details">
                                                <i class="fa-solid fa-circle-info me-1 fs-6"></i> Mô tả chi tiết
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link text-active-primary pb-3" data-bs-toggle="tab" href="#tab_images">
                                                <i class="fa-solid fa-images me-1  fs-6"></i> Ảnh xem trước
                                            </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content">
                                        <!-- Tab 1: Mô tả -->
                                        <div class="tab-pane fade show active" id="tab_details" role="tabpanel">
                                            <div class="card premium-aside-card p-6 p-lg-8">
                                                <h3 class="text-dark fw-bolder mb-5 fs-4">Đặc điểm nổi bật của mã nguồn</h3>
                                                <div class="text-gray-800 fs-6 lh-lg">
                                                    <?=empty($api_code['noidung']) ? '<span class="text-muted italic">Mô tả đang được cập nhật...</span>' : $api_code['noidung'];?>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Tab 2: Album ảnh chụp màn hình thực tế -->
                                        <div class="tab-pane fade" id="tab_images" role="tabpanel">
                                            <div class="card premium-aside-card p-6">
                                                <h3 class="text-dark fw-bolder mb-6 fs-4"><i class="fa-regular fa-images text-primary me-2"></i>Hình ảnh giao diện thực tế</h3>
                                                
                                                <div class="row row-cols-1 row-cols-md-2 g-4 screenshot-card">
                                                    <?php
                                                    if(!empty($api_code['list_img'])) {
                                                        $lines = explode("\n", $api_code['list_img']); 
                                                        foreach ($lines as $line) {
                                                            $img_url = trim($line);
                                                            if(!empty($img_url)) {
                                                    ?>
                                                            <div class="col">
                                                                <img class="img-fluid w-100" src="<?=$img_url;?>" alt="Screenshot Interface" loading="lazy" onclick="zoomImage(this);">
                                                            </div>
                                                    <?php 
                                                            }
                                                        }
                                                    } else {
                                                        echo '<div class="col-12 text-center text-muted py-5">Sản phẩm này chưa cập nhật ảnh chụp màn hình.</div>';
                                                    }
                                                    ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>

                    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/foot.php';?>
                </div>
            </div>
        </div>
    </div>

    <!-- SCRIPT XỬ LÝ CONTAINER MUA & ZOOM LIGHTBOX -->
    <script>
    function muangay() {
        const button1 = document.getElementById("button1");
        const button2 = document.getElementById("button2");

        button1.style.display = "none";
        button2.style.display = "inline-block";

        const username = "<?=$username?>";
        const id_code = "<?=$id?>";

        Swal.fire({
            title: 'Xác nhận thanh toán',
            text: "Hệ thống tự động trừ tiền trong tài khoản và bàn giao mã nguồn lập tức!",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Xác nhận mua',
            cancelButtonText: 'Hủy'
        }).then((result) => {
            if (result.isConfirmed) {
                const xhr = new XMLHttpRequest();
                xhr.open("POST", "/ajax/manguon/xulymuacode");
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.onload = function() {
                    button1.style.display = "inline-block";
                    button2.style.display = "none";

                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        if (response.success) {
                            Swal.fire({
                                icon: "success",
                                title: "Thành công!",
                                text: "Bạn đã sở hữu mã nguồn này thành công.",
                            }).then(function() {
                                 window.location.href = "/history-ma-nguon";
                            });
                        } else {
                            Swal.fire({ icon: "error", text: response.message });
                        }
                    } else {
                        Swal.fire({ icon: "error", text: "Lỗi kết nối máy chủ." });
                    }
                };
                xhr.onerror = function() {
                    button1.style.display = "inline-block";
                    button2.style.display = "none";
                    Swal.fire({ icon: "error", text: "Lỗi hệ thống ngoại vi." });
                };
                xhr.send("username=" + encodeURIComponent(username) + "&id_code=" + encodeURIComponent(id_code));
            } else {
                button1.style.display = "inline-block";
                button2.style.display = "none";
            }
        });
    }

    // Hiệu ứng Lightbox Xem Ảnh Lớn Chuyên Nghiệp
    function zoomImage(image) {
        var zoomedContainer = document.createElement('div');
        zoomedContainer.className = 'zoomed-image';
        
        var zoomedImage = document.createElement('img');
        zoomedImage.src = image.src;
        
        zoomedContainer.appendChild(zoomedImage);
        document.body.appendChild(zoomedContainer);
        
        // Kích hoạt animation mượt mà
        setTimeout(() => { zoomedContainer.classList.add('show'); }, 10);

        zoomedContainer.onclick = function() {
            zoomedContainer.classList.remove('show');
            setTimeout(() => { zoomedContainer.remove(); }, 300);
        };
    }
    </script>
</body>
</html>
