<?php include 'header.php'; ?>

<style>
    .price {
        font-size: 2.4rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .feature-item {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px dashed #dee2e6;
        padding: 0.55rem 0;
        font-size: 0.95rem;
    }

    .feature-item:last-of-type {
        border-bottom: none;
    }

    .feature-label {
        color: #2c3e50;
        font-weight: 450;
    }

    .feature-value {
        font-weight: 500;
        color: #0d6efd;
    }

    .price-header {
        background-color: #f8f9fc;
        border-bottom: 2px solid #e9ecef;
    }

    .badge-plan {
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: 0.03rem;
        color: #1a2b3c;
    }

    .perks-line {
        background: #eef2f6;
        padding: 0.5rem;
        border-radius: 40px;
        font-size: 0.85rem;
        color: #1f3a5f;
    }

    .plan-name {
        font-size: 1.7rem;
        font-weight: 600;
        color: #0b2a4a;
    }

    .select-btn {
        border: 1px solid #1c6efd;
        padding: 8px;
        margin: 10px 90px;
        text-align: center;
        border-radius: 22px;
        background: #1c6efd;
        color: white;
        font-size: 18px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .select-btn:hover {
        background-color: #1454c8;
        transform: scale(1.05);
    }
    
    .card{
        padding-bottom: 15px;
    }

    .card.selected {
        border: 2px solid #73A7FF !important;
        box-shadow: 0 0 15px rgba(28, 110, 253, 0.5);
        transform: scale(1.03);
        transition: all 0.3s ease;
    }

    .card:hover {
        transform: scale(1.02);
        transition: all 0.3s ease;
    }
</style>

<div class="container">
    <div class="row g-4 justify-content-center">
        <div class="row g-4 justify-content-center">
            
            <!-- BASIC Plan -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header price-header bg-white border-bottom text-center py-3">
                        <span class="badge-plan">BASIC</span>
                    </div>
                    <div class="card-body pt-3">
                        <div class="perks-line text-center text-secondary mb-3 small text-uppercase fw-semibold">basic features</div>
                        <div class="price text-center mb-3">₹ 500/month</div>

                        <div class="feature-item">
                            <span class="feature-label">Resident Database</span>
                            <span class="feature-value">100 residents</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Visitor Management</span>
                            <span class="feature-value">Basic</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Accounting & Billing</span>
                            <span class="feature-value">Monthly bills only</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Notice / Announcements</span>
                            <span class="feature-value">Yes</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Maintenance Tracking</span>
                            <span class="feature-value">Limited</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Security Alerts</span>
                            <span class="feature-value">SMS only</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Cloud Backup</span>
                            <span class="feature-value">1GB</span>
                        </div>
                    </div>
                    <button class="select-btn">Select Plan</button>
                </div>
            </div>

            <!-- PREMIUM Plan -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm border-primary border-opacity-10">
                    <div class="card-header price-header bg-white border-bottom text-center py-3">
                        <span class="badge-plan">PREMIUM</span>
                    </div>
                    <div class="card-body pt-3">
                        <div class="perks-line text-center text-secondary mb-3 small text-uppercase fw-semibold">premium features</div>
                        <div class="price text-center mb-3">₹ 1000/month</div>

                        <div class="feature-item">
                            <span class="feature-label">Resident Database</span>
                            <span class="feature-value">500 residents</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Visitor Management</span>
                            <span class="feature-value">Advanced</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Accounting & Billing</span>
                            <span class="feature-value">Monthly + Annual</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Notice / Announcements</span>
                            <span class="feature-value">Yes</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Maintenance Tracking</span>
                            <span class="feature-value">Full</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Security Alerts</span>
                            <span class="feature-value">SMS + Email</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Cloud Backup</span>
                            <span class="feature-value">5GB</span>
                        </div>
                    </div>
                    <button class="select-btn">Select Plan</button>
                </div>
            </div>

            <!-- BUSINESS Plan -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm border-warning border-opacity-10">
                    <div class="card-header price-header bg-white border-bottom text-center py-3">
                        <span class="badge-plan">ENTERPRISE</span>
                    </div>
                    <div class="card-body pt-3">
                        <div class="perks-line text-center text-secondary mb-3 small text-uppercase fw-semibold">enterprise features</div>
                        <div class="price text-center mb-3">₹ 2000/month</div>

                        <div class="feature-item">
                            <span class="feature-label">Resident Database</span>
                            <span class="feature-value text-success fw-bold">Unlimited</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Visitor Management</span>
                            <span class="feature-value text-success fw-bold">Advanced + Gatepass</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Accounting & Billing</span>
                            <span class="feature-value text-success fw-bold">Monthly + Annual</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Notice / Announcements</span>
                            <span class="feature-value text-success fw-bold">Multi-channel</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Maintenance Tracking</span>
                            <span class="feature-value text-success fw-bold">Full + reminders</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Security Alerts</span>
                            <span class="feature-value text-success fw-bold">SMS + Email + App</span>
                        </div>
                        <div class="feature-item">
                            <span class="feature-label">Cloud Backup</span>
                            <span class="feature-value text-success fw-bold">Unlimited</span>
                        </div>
                    </div>
                    <button class="select-btn">Select Plan</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
const cards = document.querySelectorAll('.card');
const buttons = document.querySelectorAll('.select-btn');

buttons.forEach((btn, index) => {
    btn.addEventListener('click', function(e) {
        e.stopPropagation(); 

        // Remove 'selected' from all cards
        cards.forEach(c => c.classList.remove('selected'));

        // Add 'selected' to clicked card
        const selectedCard = cards[index];
        selectedCard.classList.add('selected');

        // Optional: change background color (you can customize)
        selectedCard.style.backgroundColor = '#e0f0ff'; // light blue
        // Reset background for other cards
        cards.forEach((c, i) => {
            if (i !== index) c.style.backgroundColor = '';
        });

        // Show SweetAlert
        const planName = selectedCard.querySelector('.badge-plan').textContent;
        Swal.fire({
            title: 'Plan Selected!',
            text: `You have selected the ${planName} plan.`,
            icon: 'success',
            confirmButtonText: 'OK',
            timer: 2500,
            timerProgressBar: true
        });
    });
});

// Optional: clicking card itself only changes background without SweetAlert
cards.forEach(card => {
    card.addEventListener('click', function() {
        cards.forEach(c => c.classList.remove('selected'));
        this.classList.add('selected');
        this.style.backgroundColor = '#e0f0ff';
        cards.forEach(c => {
            if (c !== this) c.style.backgroundColor = '';
        });
    });
});
</script>

<?php include 'footer.php'; ?>