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

<head>
    <?php require_once('head.php');?>
    <title>Hệ Thống | Quản Lý Danh Sách Hosting</title>
    <?php require_once('nav.php');?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* CSS Nâng Cấp Giao Diện Bảng Cao Cấp */
        .custom-card {
            border: none !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
            border-radius: 16px !important;
            background: #ffffff;
            overflow: hidden;
        }
        .table-custom {
            border-collapse: separate;
            border-spacing: 0 8px;
            margin-top: -8px;
        }
        .table-custom thead th {
            background-color: #f8fafc !important;
            color: #64748b !important;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.05em;
            border: none !important;
            padding: 16px 20px !important;
        }
        .table-custom tbody tr {
            background: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
            transition: all 0.2s ease;
        }
        .table-custom tbody tr:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            background-color: #fdfdfd !important;
        }
        .table-custom tbody td {
            padding: 16px 20px !important;
            vertical-align: middle !important;
            border-top: 1px solid #f1f5f9 !important;
            border-bottom: 1px solid #f1f5f9 !important;
            border-left: none !important;
            border-right: none !important;
            color: #334155;
            font-size: 0.95rem;
        }
        .table-custom tbody tr td:first-child {
            border-left: 1px solid #f1f5f9 !important;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            font-weight: 600;
            color: #64748b;
        }
        .table-custom tbody tr td:last-child {
            border-right: 1px solid #f1f5f9 !important;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .domain-link {
            font-weight: 600;
            color: #2563eb;
            text-decoration: none;
        }
        .domain-link:hover {
            text-decoration: underline;
        }
        /* Phân trang kiểu hiện đại */
        .pagination-container {
            display: flex;
            justify-content: flex-end;
            margin-top: 24px;
        }
        .pagination .page-item .page-link {
            border: 1px solid #e2e8f0;
            color: #475569;
            padding: 10px 16px;
            margin: 0 3px;
            border-radius: 8px !important;
            font-weight: 500;
            transition: all 0.2s;
        }
        .pagination .page-item.active .page-link {
            background-color: #3b82f6 !important;
            border-color: #3b82f6 !important;
            color: #fff !important;
            box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
        }
        .pagination .page-item .page-link:hover:not(.active) {
            background-color: #f1f5f9;
            color: #1e293b;
        }
        .btn-action-edit {
            background: #f1f5f9;
            color: #475569;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.85rem;
            transition: all 0.2s;
        }
        .btn-action-edit:hover {
            background: #e2e8f0;
            color: #0f172a;
        }
    </style>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
    <div class="wrapper">
        <div class="content-wrapper" style="background: #f8fafc;">
            <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 font-weight-bold text-dark" style="font-size: 1.5rem;">Cơ Sở Dữ Liệu Hosting</h1>
                        </div><div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right" style="background: transparent; padding: 0;">
                                <li class="breadcrumb-item"><a href="#" class="text-muted">Home</a></li>
                                <li class="breadcrumb-item active text-primary">Danh sách dịch vụ</li>
                            </ol>
                        </div></div></div></div>
            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card custom-card">
                                <div class="card-header py-3" style="background: #ffffff; border-bottom: 1px solid #f1f5f9;">
                                    <h3 class="card-title font-weight-bold text-secondary mb-0" style="font-size: 1.05rem;">
                                        <i class="fas fa-list-ul mr-2 text-primary"></i>Danh Sách Tài Khoản Khách Hàng
                                    </h3>
                                </div>
                                
                                <div class="card-body p-4">
                                    <div class="table-responsive">
                                        <table id="datatable1" class="table table-custom w-100">
                                            <thead>
                                                <tr>
                                                    <th style="width: 60px">ID</th>
                                                    <th>Username</th>
                                                    <th>Tên Miền (Domain)</th>
                                                    <th>Gói Dịch Vụ</th>
                                                    <th>Ngày Khởi Tạo</th>
                                                    <th>Ngày Hết Hạn</th>
                                                    <th>Trạng Thái</th>
                                                    <th style="width: 110px text-align: center;">Thao Tác</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php
                                                $result = mysqli_query($ketnoi,"SELECT * FROM `lich_su_mua_host` ORDER BY id desc ");
                                                while($row = mysqli_fetch_assoc($result))
                                                {
                                                ?>
                                                <tr>
                                                    <td>#<?=$row['id'];?></td>
                                                    <td>
                                                        <span class="font-weight-bold text-dark"><i class="fa-regular fa-user mr-2 text-muted"></i><?=$row['username'];?></span>
                                                    </td>
                                                    <td>
                                                        <a href="http://<?=$row['domain'];?>" target="_blank" class="domain-link">
                                                            <i class="fa-solid fa-link mr-1" style="font-size: 0.8rem;"></i><?=$row['domain'];?>
                                                        </a>
                                                    </td>
                                                    <td>
                                                        <span class="badge bg-light text-dark border px-2 py-1.5" style="border-radius: 6px; font-weight: 600;"><i class="fa-solid fa-box mr-1 text-primary"></i><?=$row['goi_host'];?></span>
                                                    </td>
                                                    <td><i class="fa-regular fa-calendar-check mr-1 text-muted"></i><?=ngay($row['ngay_mua']); ?></td>
                                                    <td><i class="fa-regular fa-calendar-minus mr-1 text-muted"></i><?=ngay($row['ngay_het']); ?></td>
                                                    <td>
                                                        <?php 
                                                            $status_output = host($row['status']);
                                                            // Nếu trong chuỗi trả về chứa chữ "hoạt động" hoặc "thành công" hoặc "ON"
                                                            if (stripos($status_output, 'hoạt động') !== false || stripos($status_output, 'on') !== false || stripos($status_output, 'active') !== false) {
                                                                echo '<span class="badge bg-success-subtle text-success border-0 px-3 py-1.5 rounded-pill font-weight-bold"><i class="fa-solid fa-circle-check mr-1"></i>'.$status_output.'</span>';
                                                            } else {
                                                                echo '<span class="badge bg-danger-subtle text-danger border-0 px-3 py-1.5 rounded-pill font-weight-bold"><i class="fa-solid fa-circle-exclamation mr-1"></i>'.$status_output.'</span>';
                                                            }
                                                        ?>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="edit-host.php?id=<?=$row['id'];?>" class="btn btn-action-edit">
                                                            <i class="fas fa-edit mr-1"></i> Sửa
                                                        </a>
                                                    </td>
                                                </tr>
                                                <?php }?>
                                            </tbody>
                                        </table>

                                        <div id="pagination-container" class="pagination-container"></div>

                                        <script>
                                        $(document).ready(function() {
                                            var $table = $('#datatable1');
                                            var $rows = $table.find('tbody tr');
                                            var $paginationContainer = $('#pagination-container');

                                            var limitPerPage = 10;
                                            var totalPages = Math.ceil($rows.length / limitPerPage);

                                            // Xây dựng phân trang chuẩn Bootstrap UI
                                            if (totalPages > 1) {
                                                var pagination = '<ul class="pagination">';

                                                for (var i = 1; i <= totalPages; i++) {
                                                    var activeClass = (i === 1) ? 'active' : '';
                                                    pagination += '<li class="page-item ' + activeClass + '"><a class="page-link" href="javascript:void(0);">' + i + '</a></li>';
                                                }

                                                pagination += '</ul>';
                                                $paginationContainer.html(pagination).show();

                                                // Thiết lập hiển thị trang đầu tiên
                                                $rows.hide().slice(0, limitPerPage).show();

                                                // Sự kiện Click đổi trang
                                                $paginationContainer.on('click', '.page-link', function() {
                                                    var currentPage = parseInt($(this).text());
                                                    var start = (currentPage - 1) * limitPerPage;
                                                    var end = start + limitPerPage;

                                                    $rows.hide().slice(start, end).show();

                                                    $paginationContainer.find('.page-item').removeClass('active');
                                                    $(this).parent().addClass('active');
                                                    
                                                    // Cuộn mượt lên đầu bảng khi đổi trang
                                                    $('html, body').animate({
                                                        scrollTop: $table.offset().top - 100
                                                    }, 200);
                                                });
                                            }
                                        });
                                        </script>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            </div>
        
        <aside class="control-sidebar control-sidebar-dark"></aside>
    </div>

    <?php require_once('foot.php');?>
</body>

</html>