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

<head>
    <?php require_once('head.php');?>
    <title>Quản Lý Mẫu Web | AdminLTE 3</title>
    <?php require_once('nav.php');?>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>

<?php
// XỬ LÝ XÓA MẪU WEB QUA AJAX (CHỐNG SQL INJECTION)
if (isset($_POST['ajax_delete']) && isset($_SESSION['admin'])) {
    $delete_id = (int)$_POST['ajax_delete'];
    $query = mysqli_query($ketnoi, "DELETE FROM `list_mau_web` WHERE `id` = '$delete_id'");
    
    if ($query) {
        echo json_encode(['status' => 'success', 'msg' => 'Xóa mẫu giao diện thành công!']);
    } else {
        echo json_encode(['status' => 'error', 'msg' => 'Lỗi kết nối cơ sở dữ liệu máy chủ.']);
    }
    exit(); // Dừng luồng xử lý không render HTML khi gọi Ajax
}
?>

<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-2">
                        <div class="col-sm-6">
                            <h1 class="m-0 text-dark font-weight-bold"><i class="fas fa-cubes text-primary mr-2"></i>Danh Sách Mẫu Website</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="#">Hệ thống</a></li>
                                <li class="breadcrumb-item active">Mẫu web</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card card-outline card-primary shadow-sm">
                                <div class="card-header d-flex align-items-center justify-content-between">
                                    <h3 class="card-title font-weight-bold">Kho Giao Diện Hệ Thống</h3>
                                    <div class="card-tools ml-auto">
                                        <a class="btn btn-sm btn-success font-weight-bold" href="add-mau-web.php">
                                            <i class="fas fa-plus-circle mr-1"></i> Thêm Mẫu Web Mới
                                        </a>
                                    </div>
                                </div>
                                
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="mauWebTable" class="table table-bordered table-striped table-hover vertical-align-middle">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th style="width: 60px" class="text-center">ID</th>
                                                    <th>TÊN MẪU WEB</th>
                                                    <th style="width: 200px;">HÌNH ẢNH</th>
                                                    <th>GIÁ MUA</th>
                                                    <th>GIA HẠN</th>
                                                    <th class="text-center">TRẠNG THÁI</th>
                                                    <th style="width: 160px;" class="text-center">THAO TÁC</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php
                                                $result = mysqli_query($ketnoi, "SELECT * FROM `list_mau_web` ORDER BY `id` DESC");
                                                while($row = mysqli_fetch_assoc($result)) {
                                                    // Định dạng hiển thị trạng thái Badge
                                                    $statusBadge = ($row['status'] == '1' || strtolower($row['status']) == 'on' || strtolower($row['status']) == 'hiển thị') 
                                                        ? '<span class="badge badge-success px-2 py-1">Hiển thị</span>' 
                                                        : '<span class="badge badge-danger px-2 py-1">Đang ẩn</span>';
                                                ?>
                                                <tr id="row-<?=$row['id'];?>">
                                                    <td class="text-center font-weight-bold"><?=$row['id'];?></td>
                                                    <td class="font-weight-bold text-dark"><?=$row['title'];?></td>
                                                    <td>
                                                        <a href="<?=$row['img'];?>" target="_blank">
                                                            <img class="img-thumbnail shadow-sm" style="max-width: 180px; height: auto; max-height: 90px; object-fit: cover;" src="<?=$row['img'];?>" alt="<?=$row['title'];?>">
                                                        </a>
                                                    </td>
                                                    <td class="text-primary font-weight-bold"><?=number_format($row['gia']);?>đ</td>
                                                    <td class="text-secondary"><?=number_format($row['gia_han']);?>đ</td>
                                                    <td class="text-center"><?=$statusBadge;?></td>
                                                    <td class="text-center">
                                                        <a href="edit-mau-web.php?id=<?=$row['id'];?>" class="btn btn-sm btn-info mr-1" title="Chỉnh sửa">
                                                            <i class="fas fa-edit"></i> Sửa
                                                        </a>
                                                        <button type="button" class="btn btn-sm btn-danger btn-delete" data-id="<?=$row['id'];?>" data-title="<?=$row['title'];?>" title="Xóa mẫu này">
                                                            <i class="fas fa-trash-alt"></i> Xóa
                                                        </button>
                                                    </td>
                                                </tr>
                                                <?php } ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </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>
        $(document).ready(function() {
            // Khởi tạo bảng thông minh tự động tìm kiếm, lọc phân trang
            $('#mauWebTable').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "order": [[0, "desc"]], // Sắp xếp ID mới lên đầu
                "language": {
                    "sProcessing": "Đang xử lý...",
                    "sLengthMenu": "Hiển thị _MENU_ mục",
                    "sZeroRecords": "Không tìm thấy dữ liệu mẫu web nào",
                    "sInfo": "Hiển thị từ _START_ đến _END_ trong tổng số _TOTAL_ mẫu",
                    "sInfoEmpty": "Hiển thị 0 mục",
                    "sInfoFiltered": "(lọc từ tổng số _MAX_ mục)",
                    "sSearch": "Tìm kiếm nhanh:",
                    "oPaginate": {
                        "sFirst": "Đầu",
                        "sPrevious": "Trước",
                        "sNext": "Tiếp",
                        "sLast": "Cuối"
                    }
                }
            });

            // SỰ KIỆN XÓA REALTIME KHÔNG RELOAD TRANG QUA AJAX
            $(document).on('click', '.btn-delete', function() {
                var id = $(this).data('id');
                var title = $(this).data('title');
                
                Swal.fire({
                    title: 'Xác nhận xóa?',
                    text: "Bạn có chắc chắn muốn xóa mẫu web: [" + title + "] không? Dữ liệu không thể khôi phục!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Vẫn xóa',
                    cancelButtonText: 'Hủy thao tác'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Gửi dữ liệu xóa ngầm lên Server
                        $.ajax({
                            url: '',
                            type: 'POST',
                            data: {
                                ajax_delete: id
                            },
                            dataType: 'json',
                            success: function(response) {
                                if (response.status === 'success') {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Thành công',
                                        text: response.msg,
                                        timer: 1500,
                                        showConfirmButton: false
                                    });
                                    // Hiệu ứng mờ dần và loại bỏ dòng vừa xóa khỏi DOM
                                    $('#row-' + id).fadeOut(400, function() {
                                        $(this).remove();
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Thất bại',
                                        text: response.msg
                                    });
                                }
                            },
                            error: function() {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Lỗi hệ thống',
                                    text: 'Không thể kết nối đến máy chủ xử lý tác vụ!'
                                });
                            }
                        });
                    }
                });
            });
        });
    </script>
</body>

</html>
