<?php
// Session Start
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
require_once 'config/database.php';

$page_title = "Domain Pricing";

// ডাটাবেস থেকে শুধু অ্যাক্টিভ ডোমেইন এক্সটেনশনগুলো আনা
$extensions = [];
try {
    $stmt = $db->query("SELECT * FROM domain_pricing WHERE status='active' ORDER BY id ASC");
    $extensions = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e) {}

// ট্যাগ অনুযায়ী কালার দেওয়ার ফাংশন
function getTagColor($tag) {
    $tag_lower = strtolower(trim($tag));
    if (in_array($tag_lower, ['hot', 'offer'])) return 'danger';
    if (in_array($tag_lower, ['sale', 'discount'])) return 'success';
    if (in_array($tag_lower, ['popular', 'best'])) return 'primary';
    if (in_array($tag_lower, ['new'])) return 'info';
    return 'secondary'; // Default color
}

require_once 'includes/user_header.php';
require_once 'includes/user_sidebar.php';
?>

<style>
    /* ==========================================
       Premium Light Grid Theme & Page Styles
       ========================================== */
    body {
        background-color: #ffffff !important;
        background-image: 
            linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px) !important;
        background-size: 30px 30px !important;
        color: #1e293b !important;
    }

    /* Hero Section */
    .pricing-hero {
        padding: 50px 20px 30px;
        text-align: center;
        background: radial-gradient(circle at center, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
    }

    /* Table Container */
    .table-wrapper {
        background: #ffffff;
        border-radius: 20px;
        border: 1px solid rgba(15, 23, 42, 0.05);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
        padding: 20px;
        margin-bottom: 50px;
    }

    /* Custom Table Style */
    .premium-table {
        width: 100%;
        margin-bottom: 0;
        border-collapse: separate;
        border-spacing: 0;
    }
    .premium-table thead th {
        background: #f8fafc;
        color: #64748b;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
        padding: 15px 20px;
        border-bottom: 2px solid rgba(15, 23, 42, 0.05);
    }
    .premium-table thead th:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
    .premium-table thead th:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
    
    .premium-table tbody tr {
        transition: all 0.3s ease;
    }
    .premium-table tbody tr:hover {
        background: rgba(37, 99, 235, 0.02);
        transform: scale(1.002);
    }
    .premium-table tbody td {
        padding: 20px;
        vertical-align: middle;
        border-bottom: 1px solid rgba(15, 23, 42, 0.03);
        color: #0f172a;
    }
    .premium-table tbody tr:last-child td { border-bottom: none; }

    /* Text & Badges */
    .ext-name {
        font-size: 18px;
        font-weight: 800;
        color: #1e293b;
    }
    .tag-badge {
        font-size: 10px;
        padding: 4px 8px;
        border-radius: 6px;
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: 0.5px;
        vertical-align: text-top;
        margin-left: 8px;
    }
    .price-main {
        font-size: 16px;
        font-weight: 700;
        color: #2563eb;
    }
    .price-strike {
        font-size: 12px;
        color: #94a3b8;
        text-decoration: line-through;
        display: block;
        margin-bottom: 2px;
    }

    /* Action Buttons */
    .btn-action {
        padding: 8px 20px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 13px;
        transition: all 0.3s;
        text-decoration: none;
        display: inline-block;
    }
    .btn-register { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
    .btn-register:hover { background: #2563eb; color: #ffffff; box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3); transform: translateY(-2px); }
    
    .btn-transfer { background: rgba(16, 185, 129, 0.1); color: #10b981; margin-left: 5px; }
    .btn-transfer:hover { background: #10b981; color: #ffffff; box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); transform: translateY(-2px); }

    /* Search Box */
    .search-filter {
        background: #f8fafc;
        border: 1px solid rgba(15, 23, 42, 0.1);
        border-radius: 50px;
        padding: 10px 20px;
        width: 100%;
        max-width: 300px;
        outline: none;
        transition: all 0.3s;
    }
    .search-filter:focus {
        border-color: #2563eb;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    }
</style>

<div class="main-content flex-grow-1 w-100 d-flex flex-column" style="min-height: calc(100vh - 70px);">
    
    <!-- Hero Area -->
    <section class="pricing-hero">
        <div class="container">
            <h1 class="fw-bold mb-3 text-dark" style="font-size: clamp(2rem, 5vw, 3rem);">Domain <span style="color: #2563eb;">Pricing</span></h1>
            <p class="text-secondary fs-5 mb-0">Transparent pricing. No hidden fees. Secure your domain today.</p>
        </div>
    </section>

    <!-- Content Area -->
    <div class="container">
        <div class="table-wrapper">
            
            <!-- Table Header & Search -->
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-4 px-2">
                <h4 class="fw-bold text-dark mb-3 mb-md-0"><i class="fa-solid fa-tags text-primary me-2"></i> All Extensions</h4>
                <div class="position-relative">
                    <input type="text" id="tldSearch" class="search-filter" placeholder="Search TLD (e.g. .com)" onkeyup="filterTable()">
                    <i class="fa-solid fa-magnifying-glass position-absolute text-muted" style="right: 15px; top: 50%; transform: translateY(-50%);"></i>
                </div>
            </div>

            <!-- Pricing Table -->
            <div class="table-responsive">
                <table class="table premium-table" id="pricingTable">
                    <thead>
                        <tr>
                            <th>Extension</th>
                            <th>Registration</th>
                            <th>Renewal</th>
                            <th>Transfer</th>
                            <th class="text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if(!empty($extensions)): ?>
                            <?php foreach($extensions as $ext): ?>
                                <tr>
                                    <td>
                                        <span class="ext-name">.<?= htmlspecialchars($ext['extension']) ?></span>
                                        <?php if(!empty($ext['tag'])): ?>
                                            <span class="badge bg-<?= getTagColor($ext['tag']) ?> tag-badge">
                                                <?= htmlspecialchars($ext['tag']) ?>
                                            </span>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <?php if($ext['fake_price'] && $ext['fake_price'] > $ext['register_price']): ?>
                                            <span class="price-strike">৳ <?= number_format($ext['fake_price'], 2) ?></span>
                                        <?php endif; ?>
                                        <span class="price-main">৳ <?= number_format($ext['register_price'], 2) ?></span>
                                        <span class="text-muted" style="font-size: 12px;">/yr</span>
                                    </td>
                                    <td>
                                        <span class="fw-bold text-dark">৳ <?= number_format($ext['renew_price'], 2) ?></span>
                                        <span class="text-muted" style="font-size: 12px;">/yr</span>
                                    </td>
                                    <td>
                                        <span class="fw-bold text-dark">৳ <?= number_format($ext['transfer_price'], 2) ?></span>
                                    </td>
                                    <td class="text-end">
                                        <!-- Register Button -->
                                        <a href="register-domain.php?tld=<?= urlencode($ext['extension']) ?>" class="btn-action btn-register">
                                            Register
                                        </a>
                                        <!-- Transfer Button (Optional, links to transfer page if you have one) -->
                                        <a href="#" class="btn-action btn-transfer d-none d-sm-inline-block">
                                            Transfer
                                        </a>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <i class="fa-solid fa-folder-open fs-1 mb-3 opacity-50"></i>
                                    <h5 class="fw-bold">No Pricing Found</h5>
                                    <p class="mb-0">Admin has not added any domain pricing yet.</p>
                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>

<!-- JS for Quick Search Filter -->
<script>
function filterTable() {
    let input = document.getElementById("tldSearch");
    let filter = input.value.toUpperCase();
    let table = document.getElementById("pricingTable");
    let tr = table.getElementsByTagName("tr");

    for (let i = 1; i < tr.length; i++) {
        let td = tr[i].getElementsByTagName("td")[0]; // Extension column
        if (td) {
            let txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }       
    }
}
</script>

<?php require_once 'includes/user_footer.php'; ?>