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

<head>
    <?php require_once('head.php');?>
    <title>AdminLTE 3 | Bảng Điều Khiển Logo</title>
    <?php require_once('nav.php');?>
    
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root { --primary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
        body { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: #f8fafc; }
        
        /* Card hiện đại */
        .card { border-radius: 20px; border: none; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
        
        /* Tùy chỉnh bảng */
        .table { border-collapse: separate; border-spacing: 0 8px; }
        .table thead th { border: none; background: #f1f5f9; padding: 15px; color: #475569; font-weight: 700; }
        .table tbody tr { background: #ffffff; transition: transform 0.2s; }
        .table tbody tr:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
        
        /* Hình ảnh & Nút */
        .img-thumbnail { border: none; border-radius: 12px; padding: 4px; background: #f1f5f9; }
        .badge-price { background: #fee2e2; color: #dc2626; padding: 6px 12px; border-radius: 8px; font-weight: 700; }
        .btn-delete { background: #fff1f2; color: #e11d48; border: 1px solid #fda4af; }
        .btn-delete:hover { background: #e11d48; color: #fff; }
    </style>
</head>

<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="d-flex justify-content-between align-items-center">
                        <h1 class="h3 font-weight-bold">Quản lý Logo</h1>
                        <a class="btn btn-primary shadow" href="add-logo.php" style="border-radius: 12px;">
                            <i class="fas fa-plus mr-2"></i>Thêm Logo
                        </a>
                    </div>
                </div>
            </div>

            <section class="content">
                <div class="container-fluid">
                    <div class="card p-3">
                        <div class="table-responsive">
                            <table id="datatable1" class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Hình Ảnh</th>
                                        <th>Thông Tin</th>
                                        <th>Giá Tiền</th>
                                        <th class="text-center">Thao Tác</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                    $result = mysqli_query($ketnoi, "SELECT * FROM `mau_logo` ORDER BY id DESC");
                                    while($row = mysqli_fetch_assoc($result)) {
                                    ?>
                                    <tr>
                                        <td class="align-middle text-muted">#<?=$row['id'];?></td>
                                        <td class="align-middle">
                                            <img class="img-thumbnail" width="80" src="<?=$row['image'];?>">
                                        </td>
                                        <td class="align-middle font-weight-bold"><?=$row['name'];?></td>
                                        <td class="align-middle">
                                            <span class="badge-price"><?=number_format($row['gia']);?>đ</span>
                                        </td>
                                        <td class="align-middle text-center">
                                            <button onclick="confirmDelete(<?=$row['id'];?>)" class="btn btn-delete btn-sm">
                                                <i class="fas fa-trash-alt mr-1"></i> Xóa
                                            </button>
                                        </td>
                                    </tr>
                                    <?php } ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <script>
    function confirmDelete(id) {
        Swal.fire({
            title: 'Xóa logo này?',
            text: "Dữ liệu sẽ bị xóa vĩnh viễn khỏi cơ sở dữ liệu!",
            icon: 'error',
            showCancelButton: true,
            confirmButtonColor: '#e11d48',
            cancelButtonColor: '#94a3b8',
            confirmButtonText: 'Đồng ý xóa'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = "?delete=" + id;
            }
        });
    }

    $(document).ready(function() {
        $('#datatable1').DataTable({
            "language": { "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Vietnamese.json" },
            "pagingType": "full_numbers"
        });
    });
    </script>
    <?php require_once('foot.php');?>
</body>
</html>