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

<head>
    <?php require_once('head.php');?>
    <title>Hệ Thống Quản Trị Kho Mã Nguồn | Enterprise Edition</title>
    <?php require_once('nav.php');?>
    
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap4.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        .content-wrapper { background-color: #f8fafc; }
        .card { border-radius: 16px; border: none; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.04)!important; }
        
        /* Trạng thái tương tác realtime */
        .badge-interactive { padding: 8px 14px; border-radius: 30px; font-weight: 700; font-size: 11px; cursor: pointer; transition: all 0.2s ease; user-select: none; border: 1px solid transparent; }
        .badge-interactive:hover { transform: scale(1.05); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
        
        /* Khung hiển thị ảnh preview */
        .preview-img-container { position: relative; overflow: hidden; border-radius: 10px; width: 140px; height: 75px; border: 1px solid #cbd5e1; cursor: zoom-in; background: #f1f5f9; }
        .preview-img { width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; }
        .preview-img-container:hover .preview-img { transform: scale(1.2) rotate(1deg); }
        
        /* Cấu trúc bảng và nút bấm */
        .dt-buttons .btn { margin-right: 5px; border-radius: 8px !important; font-weight: 600; font-size: 13px; padding: 6px 12px; }
        .v-align-middle td { vertical-align: middle !important; color: #334155; font-size: 14px; }
        .filter-label { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 5px; }
    </style>
    
    

</head>

<?php
// CỔNG RESTFUL API INTERNALS - XỬ LÝ QUẢN TRỊ REALTIME QUA AJAX
if (isset($_POST['action']) && isset($_SESSION['admin'])) {
    header('Content-Type: application/json');
    $target_id = (int)$_POST['id'];

    // 1. Phân hệ API xóa mã nguồn
    if ($_POST['action'] === 'delete') {
        $check = mysqli_num_rows(mysqli_query($ketnoi, "SELECT `id` FROM `khocode` WHERE `id` = '$target_id'"));
        if ($check > 0) {
            if (mysqli_query($ketnoi, "DELETE FROM `khocode` WHERE `id` = '$target_id'")) {
                echo json_encode(['status' => 'success', 'msg' => 'Đã gỡ bỏ mã nguồn thành công khỏi cơ sở dữ liệu bán hàng.']);
            } else {
                echo json_encode(['status' => 'error', 'msg' => 'Lỗi kết nối cơ sở dữ liệu hệ thống.']);
            }
        } else {
            echo json_encode(['status' => 'error', 'msg' => 'Mã nguồn này không tồn tại hoặc đã bị xóa trước đó.']);
        }
    }

    // 2. Phân hệ API bật/tắt trạng thái hiển thị (Realtime Toggle)
    if ($_POST['action'] === 'toggle_status') {
        $current = mysqli_fetch_assoc(mysqli_query($ketnoi, "SELECT `status` FROM `khocode` WHERE `id` = '$target_id'"));
        if ($current) {
            // Chuyển đổi linh hoạt giữa các định dạng (1/0, on/off, hiển thị/ẩn)
            $curr_status = strtolower($current['status']);
            $new_status = ($curr_status == '1' || $curr_status == 'on' || $curr_status == 'hiển thị') ? '0' : '1';
            
            if (mysqli_query($ketnoi, "UPDATE `khocode` SET `status` = '$new_status' WHERE `id` = '$target_id'")) {
                echo json_encode(['status' => 'success', 'new_status' => $new_status, 'msg' => 'Cập nhật trạng thái phân phối thành công!']);
            } else {
                echo json_encode(['status' => 'error', 'msg' => 'Không thể ghi đè trạng thái mới vào hệ thống.']);
            }
        } else {
            echo json_encode(['status' => 'error', 'msg' => 'Bản ghi không hợp lệ hoặc đã bị thay đổi cấu trúc.']);
        }
    }
    exit();
}

// LẤY SỐ LIỆU ĐỂ ĐỔ LÊN KHỐI THỐNG KÊ ĐẦU TRANG
$total_code = mysqli_fetch_assoc(mysqli_query($ketnoi, "SELECT COUNT(*) AS total FROM `khocode`"))['total'] ?? 0;
$active_code = mysqli_fetch_assoc(mysqli_query($ketnoi, "SELECT COUNT(*) AS total FROM `khocode` WHERE `status` = '1' OR `status` = 'on' OR `status` = 'hiển thị'"))['total'] ?? 0;
$hidden_code = $total_code - $active_code;
$total_val = mysqli_fetch_assoc(mysqli_query($ketnoi, "SELECT SUM(`gia`) AS total FROM `khocode`"))['total'] ?? 0;
?>

<body class="hold-transition sidebar-mini layout-fixed">
    <div class="wrapper">
        <div class="content-wrapper">
            
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-3 align-items-center">
                        <div class="col-sm-6">
                            <h1 class="m-0 text-dark font-weight-black" style="font-size: 28px; font-weight: 800;">
                                <i class="fas fa-code text-indigo mr-2"></i>Quản Lý Kho Mã Nguồn
                            </h1>
                        </div>
                    </div>
                </div>
            </div>

            <section class="content">
                <div class="container-fluid">
                    
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-3">
                            <div class="info-box bg-white p-3" style="box-shadow: 0 4px 12px rgba(0,0,0,0.02); border-radius:12px;">
                                <span class="info-box-icon text-indigo elevation-0" style="background:#e0f2fe; border-radius:10px;"><i class="fas fa-laptop-code"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text text-muted text-sm">Tổng Sản Phẩm Code</span>
                                    <span class="info-box-number text-xl font-weight-bold"><?=$total_code;?> Code</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-3">
                            <div class="info-box bg-white p-3" style="box-shadow: 0 4px 12px rgba(0,0,0,0.02); border-radius:12px;">
                                <span class="info-box-icon text-success elevation-0" style="background:#dcfce7; border-radius:10px;"><i class="fas fa-check-circle"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text text-muted text-sm">Mở Bán Công Khai</span>
                                    <span class="info-box-number text-xl font-weight-bold text-success"><?=$active_code;?> Bản</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-3">
                            <div class="info-box bg-white p-3" style="box-shadow: 0 4px 12px rgba(0,0,0,0.02); border-radius:12px;">
                                <span class="info-box-icon text-danger elevation-0" style="background:#fee2e2; border-radius:10px;"><i class="fas fa-eye-slash"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text text-muted text-sm">Đang Tạm Ẩn</span>
                                    <span class="info-box-number text-xl font-weight-bold text-danger"><?=$hidden_code;?> Bản</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-3">
                            <div class="info-box bg-white p-3" style="box-shadow: 0 4px 12px rgba(0,0,0,0.02); border-radius:12px;">
                                <span class="info-box-icon text-warning elevation-0" style="background:#fef9c3; border-radius:10px;"><i class="fas fa-vault"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text text-muted text-sm">Định Giá Kho Code</span>
                                    <span class="info-box-number text-xl font-weight-bold text-dark"><?=number_format($total_val);?>đ</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card bg-white shadow-sm mb-4">
                        <div class="card-body py-3">
                            <div class="row align-items-center">
                                <div class="col-md-3 col-6">
                                    <div class="filter-label">Giá sàn tối thiểu</div>
                                    <input type="number" id="minPrice" class="form-control form-control-sm" placeholder="Ví dụ: 50,000">
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="filter-label">Giá trần tối đa</div>
                                    <input type="number" id="maxPrice" class="form-control form-control-sm" placeholder="Ví dụ: 5,000,000">
                                </div>
                                <div class="col-md-4 col-12 mt-3 mt-md-0">
                                    <div class="filter-label">Trạng thái phát hành nhanh</div>
                                    <div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
                                        <button class="btn btn-sm btn-outline-indigo active filter-btn-status w-100" data-filter="all">Tất cả</button>
                                        <button class="btn btn-sm btn-outline-indigo filter-btn-status w-100" data-filter="Hiển thị">Hoạt động</button>
                                        <button class="btn btn-sm btn-outline-indigo filter-btn-status w-100" data-filter="Đang ẩn">Đang ẩn</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="card shadow-sm">
                                <div class="card-header d-flex flex-wrap align-items-center justify-content-between bg-white border-bottom py-3">
                                    <h3 class="card-title font-weight-bold text-dark my-1">Quản lý cơ sở dữ liệu mã nguồn</h3>
                                    <a class="btn btn-md btn-indigo font-weight-bold shadow-sm" href="add-code.php">
                                        <i class="fas fa-plus-circle mr-1"></i> Thêm mã nguồn mới
                                    </a>
                                </div>
                                
                                <div class="card-body">
                                    <table id="codeEnterpriseTable" class="table table-hover v-align-middle table-striped" width="100%">
                                        <thead class="bg-light text-uppercase" style="font-size: 11px; color:#475569; letter-spacing: 0.3px;">
                                            <tr>
                                                <th class="text-center" style="width: 50px;">ID</th>
                                                <th>Ảnh đại diện</th>
                                                <th>Tên sản phẩm mã nguồn</th>
                                                <th>Đơn giá bán</th>
                                                <th class="text-center" style="width: 180px;">Trạng Thái (Click đổi)</th>
                                                <th class="text-center" style="width: 130px;">Hành động</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php
                                            $result = mysqli_query($ketnoi, "SELECT * FROM `khocode` ORDER BY `id` DESC");
                                            while($row = mysqli_fetch_assoc($result)) {
                                                $isActive = ($row['status'] == '1' || strtolower($row['status']) == 'on' || strtolower($row['status']) == 'hiển thị');
                                                $statusText = $isActive ? 'Hiển thị' : 'Đang ẩn';
                                                $statusColor = $isActive ? 'bg-success text-white' : 'bg-secondary text-white';
                                            ?>
                                            <tr id="row-<?=$row['id'];?>">
                                                <td class="text-center font-weight-bold text-muted"><?=$row['id'];?></td>
                                                <td>
                                                    <div class="preview-img-container" onclick="openLightbox('<?=$row['img'];?>', '<?=$row['title'];?>')">
                                                        <img class="preview-img" src="<?=$row['img'];?>" alt="Source Preview" onerror="this.onerror=null; this.src='https://placehold.co/600x400/e2e8f0/64748b?text=No+Image';">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="d-block font-weight-bold text-dark text-md"><?=$row['title'];?></span>
                                                    <small class="text-muted"><i class="fas fa-box-open mr-1"></i>Danh mục: SKU-00<?=$row['id'];?></small>
                                                </td>
                                                <td data-order="<?=$row['gia'];?>" class="font-weight-bold text-primary"><?=tien($row['gia']);?>đ</td>
                                                <td class="text-center">
                                                    <span id="badge-status-<?=$row['id'];?>" class="badge-interactive <?=$statusColor;?>" data-id="<?=$row['id'];?>">
                                                        <?=$statusText;?>
                                                    </span>
                                                </td>
                                                <td class="text-center">
                                                    <div class="btn-group">
                                                        <a href="edit-code.php?id=<?=$row['id'];?>" class="btn btn-sm btn-clean border mr-1" title="Sửa thông tin"><i class="fas fa-edit text-info"></i></a>
                                                        <button type="button" class="btn btn-sm btn-clean border btn-ajax-delete-code" data-id="<?=$row['id'];?>" data-title="<?=$row['title'];?>" title="Xóa vĩnh viễn"><i class="fas fa-trash-alt text-danger"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <?php } ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </div>
        
        <aside class="control-sidebar control-sidebar-dark"></aside>
    </div>

    <?php require_once('foot.php');?>
    
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

    <script>
        // Trình phóng to hình ảnh đại diện cao cấp bằng SweetAlert2
        function openLightbox(url, title) {
            Swal.fire({ title: title, imageUrl: url, imageWidth: '100%', showConfirmButton: false, showCloseButton: true });
        }

        $(document).ready(function() {
            // Hàm mở rộng thuật toán quét dải số tiền thông minh của DataTables
            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                var min = parseInt($('#minPrice').val(), 10);
                var max = parseInt($('#maxPrice').val(), 10);
                var price = parseFloat($(settings.aoData[dataIndex].anCells[3]).data('order')) || 0;

                if ((isNaN(min) && isNaN(max)) || (isNaN(min) && price <= max) || (isNaN(max) && price >= min) || (price >= min && price <= max)) {
                    return true;
                }
                return false;
            });

            // Khởi chạy phân hệ cấu trúc Enterprise DataTable
            var table = $('#codeEnterpriseTable').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "dom": '<"d-flex flex-wrap align-items-center justify-content-between mb-3"Bf>rt<"d-flex align-items-center justify-content-between mt-3"ip>',
                "buttons": [
                    { extend: 'excel', className: 'btn btn-success', text: '<i class="far fa-file-excel mr-1"></i> Xuất Excel' },
                    { extend: 'pdf', className: 'btn btn-danger', text: '<i class="far fa-file-pdf mr-1"></i> Xuất PDF' },
                    { extend: 'print', className: 'btn btn-dark', text: '<i class="fas fa-print mr-1"></i> In dữ liệu' }
                ],
                "order": [[0, "desc"]],
                "language": {
                    "sSearch": "",
                    "searchPlaceholder": "Tìm kiếm mã nguồn...",
                    "oPaginate": { "sNext": "<i class='fas fa-angle-right'></i>", "sPrevious": "<i class='fas fa-angle-left'></i>" }
                }
            });

            // Thiết lập dải lắng nghe bàn phím khi quản trị viên nhập khoảng tiền
            $('#minPrice, #maxPrice').on('keyup change', function() { table.draw(); });

            // Phân loại trạng thái nhanh qua các tab nút bấm
            $('.filter-btn-status').on('click', function() {
                var filterValue = $(this).data('filter');
                $('.filter-btn-status').removeClass('active btn-indigo text-white').addClass('btn-outline-indigo');
                $(this).addClass('active btn-indigo text-white').removeClass('btn-outline-indigo');
                table.column(4).search(filterValue === 'all' ? '' : '^' + filterValue + '$', true, false).draw();
            });

            // ⚡ API REALTIME TOGGLE: BẬT TẮT TRẠNG THÁI SẢN PHẨM KHÔNG LOAD LẠI TRANG
            $(document).on('click', '.badge-interactive', function() {
                var badge = $(this);
                var id = badge.data('id');
                
                $.ajax({
                    url: '',
                    type: 'POST',
                    data: { action: 'toggle_status', id: id },
                    dataType: 'json',
                    success: function(res) {
                        if (res.status === 'success') {
                            if (res.new_status == '1') {
                                badge.text('Hiển thị').removeClass('bg-secondary').addClass('bg-success');
                            } else {
                                badge.text('Đang ẩn').removeClass('bg-success').addClass('bg-secondary');
                            }
                            // Đồng bộ lại vùng bộ nhớ đệm (Cache layout) của DataTables
                            table.cell(badge.closest('td')).data(badge.prop('outerHTML')).draw(false);
                        } else {
                            Swal.fire({ icon: 'error', title: 'Thất bại', text: res.msg });
                        }
                    },
                    error: function() {
                        Swal.fire({ icon: 'error', title: 'Lỗi API', text: 'Không kết nối được tới phân hệ đổi trạng thái.' });
                    }
                });
            });

            // ⚡ API AJAX DELETE: XÓA SẢN PHẨM REALTIME KHÔNG LOAD TRANG
            $(document).on('click', '.btn-system-delete-code', function() {
                var id = $(this).data('id');
                var title = $(this).data('title');
                var trRow = $(this).closest('tr');

                Swal.fire({
                    title: 'Xác nhận xóa?',
                    text: "Sản phẩm code [" + title + "] sẽ bị hủy bỏ vĩnh viễn khỏi toàn bộ hệ thống!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#4f46e5',
                    cancelButtonColor: '#64748b',
                    confirmButtonText: 'Đồng ý xóa',
                    cancelButtonText: 'Hủy thao tác'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '',
                            type: 'POST',
                            data: { action: 'delete', id: id },
                            dataType: 'json',
                            success: function(res) {
                                if (res.status === 'success') {
                                    Swal.fire({ icon: 'success', title: 'Hoàn tất', text: res.msg, timer: 1200, showConfirmButton: false });
                                    trRow.fadeOut(400, function() {
                                        table.row(trRow).remove().draw(false);
                                    });
                                } else {
                                    Swal.fire({ icon: 'error', title: 'Lỗi', text: res.msg });
                                }
                            },
                            error: function() {
                                Swal.fire({ icon: 'error', title: 'Lỗi mạng', text: 'Kết nối API máy chủ bị gián đoạn.' });
                            }
                        });
                    }
                });
            });
        });
    </script>
</body>

</html>
