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

<style>
    /* property info row - improved spacing */
    .info-row {
        background: #f9fafc;
        border-radius: 20px;
        padding: 1rem 1.5rem;
        margin-bottom: 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        align-items: baseline;
    }

    .info-item {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: 0.95rem;
    }

    .info-item label {
        font-weight: 600;
        color: #2c3e66;
        background: #eef2ff;
        padding: 0.2rem 0.8rem;
        border-radius: 40px;
        font-size: 0.8rem;
        letter-spacing: 0.2px;
    }

    .info-item span {
        color: #1f2b48;
        font-weight: 500;
    }

    .info-item sup {
        font-size: 0.7rem;
    }

    .renewal-heading {
        font-size: 1.2rem;
        font-weight: 700;
        color: #0a2540;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .renewal-heading i {
        color: #2d6a4f;
        font-size: 1.3rem;
    }

    /* PRICING GRID — refined 4 columns with better card design */
    .card-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.8rem;
        margin-top: 0.5rem;
    }

    /* enhanced pricing card */
    .pricing-card {
        background: #ffffff;
        border-radius: 1.75rem;
        padding: 1.6rem 1.4rem 1.8rem 1.4rem;
        transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid #eef2f8;
    }

    .pricing-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 36px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px #e0e9f4;
        border-color: #e0e9f4;
    }
    .pricing-card.active {
        border: 2px solid #2d6a9f;
        background: #94C2EB;
        box-shadow: 0 20px 40px -10px rgba(45, 106, 159, 0.3);
        transform: translateY(-6px);
    }

    /* Plan name + badge area */
    .plan-header {
        margin-bottom: 1rem;
    }

    .plan-name {
        font-size: 1.55rem;
        font-weight: 800;
        background: linear-gradient(135deg, #1E2A5E 0%, #2a3f7e 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        letter-spacing: -0.3px;
        line-height: 1.3;
    }

    .plan-desc {
        font-size: 0.8rem;
        color: #5b6e8c;
        background: #f8fafd;
        display: inline-block;
        padding: 0.2rem 0.8rem;
        border-radius: 30px;
        margin-top: 6px;
        font-weight: 500;
    }

    /* price area modern */
    .price-wrapper {
        margin: 1.2rem 0 1rem 0;
        border-bottom: 2px dotted #e9edf2;
        padding-bottom: 1rem;
    }

    .price {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px;
    }

    .currency {
        font-size: 1.3rem;
        font-weight: 600;
        color: #2c3e66;
    }

    .amount {
        font-size: 2.4rem;
        font-weight: 800;
        color: #0b2b42;
        letter-spacing: -1px;
    }

    .period {
        font-size: 0.85rem;
        font-weight: 500;
        color: #7d8fb3;
        margin-left: 4px;
    }

    /* features list polished */
    .features {
        list-style: none;
        padding: 0;
        margin: 1rem 0 1.8rem 0;
        flex-grow: 1;
    }

    .features li {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font-size: 0.85rem;
        margin-bottom: 0.85rem;
        color: #1f2a44;
        font-weight: 500;
        line-height: 1.35;
    }

    .features li i {
        color: #2b7e4b;
        font-size: 0.9rem;
        width: 1.2rem;
        text-align: center;
    }

    /* missing feature style? we keep check-circle solid */
    .fa-check-circle {
        color: #2c9c5c;
    }

    /* button refined */
    .btn-select {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #ffffff;
        border: 1.5px solid #cbdde9;
        border-radius: 40px;
        padding: 0.7rem 0.8rem;
        font-weight: 600;
        font-size: 0.9rem;
        color: #1f4172;
        transition: all 0.2s;
        text-decoration: none;
        width: 100%;
        font-family: 'Inter', sans-serif;
        margin-top: 0.5rem;
    }

    .btn-select i {
        font-size: 0.85rem;
        transition: transform 0.2s;
    }

    .btn-select:hover {
        background: #f0f6fe;
        border-color: #2d6a9f;
        color: #0a3a5e;
        transform: scale(0.98);
    }

    .btn-select:hover i {
        transform: translateX(3px);
    }

    /* highlight for recommended? but keep simple, but we can add subtle diff */
    /* ensure consistent card heights */
    @media (max-width: 1200px) {
        .card-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }
    }

    @media (max-width: 768px) {
        .card-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        .card-body {
            padding: 1.2rem;
        }

        .amount {
            font-size: 2rem;
        }

        .plan-name {
            font-size: 1.4rem;
        }

        .info-row {
            flex-direction: column;
            gap: 0.75rem;
        }
    }

    /* additional micro spacing */
    .mb-24 {
        margin-bottom: 1.5rem;
    }

    .fw-semibold {
        font-weight: 600;
    }

    .d-flex {
        display: flex;
    }

    .justify-content-between {
        justify-content: space-between;
    }

    .align-items-center {
        align-items: center;
    }
</style>

<div class="dashboard-main-body">
    <!-- header like original -->
    <div class="d-flex justify-content-between align-items-center mb-24">
        <h6 class="fw-semibold" style="font-size: 1.35rem; margin:0; color:#102a4e;">Pricing Plans</h6>
    </div>

    <div class="card">
        <div class="card-body">
            <!-- improved property info -->

            <div class="pricing-container">
                <div class="renewal-heading">
                    <i class="fas fa-tag"></i>
                    <span>Choose your plan</span>
                </div>
                <div class="card-grid">

                    <!-- STARTER PLAN  -->
<div class="pricing-card">
    <div class="plan-header">
        <div class="plan-name">Basic Society Plan</div>
        <div class="plan-desc">Best For Small Societies</div>
    </div>

    <div class="price-wrapper">
        <div class="price">
            <span class="currency">₹</span>
            <span class="amount">4,999</span>
            <span class="period">/ Year</span>
        </div>
    </div>

    <ul class="features">
        <li><i class="fas fa-check-circle"></i> Up to 50 Flats</li>
        <li><i class="fas fa-check-circle"></i> Member Management</li>
        <li><i class="fas fa-check-circle"></i> Maintenance Billing</li>
        <li><i class="fas fa-check-circle"></i> Notice Board</li>
        <li><i class="fas fa-check-circle"></i> Complaint Management</li>
        <li><i class="fas fa-check-circle"></i> Basic Reports</li>
    </ul>

    <a href="#" class="btn-select">
        Select Plan <i class="fas fa-arrow-right"></i>
    </a>
</div>

                    <!-- TEAM PLAN -->
<div class="pricing-card">
    <div class="plan-header">
        <div class="plan-name">Standard Plan</div>
        <div class="plan-desc">Best For Medium Societies</div>
    </div>

    <div class="price-wrapper">
        <div class="price">
            <span class="currency">₹</span>
            <span class="amount">9,999</span>
            <span class="period">/ Year</span>
        </div>
    </div>

    <ul class="features">
        <li><i class="fas fa-check-circle"></i> Up to 150 Flats</li>
        <li><i class="fas fa-check-circle"></i> Visitor Management</li>
        <li><i class="fas fa-check-circle"></i> Maintenance Collection</li>
        <li><i class="fas fa-check-circle"></i> Event Management</li>
        <li><i class="fas fa-check-circle"></i> Parking Management</li>
        <li><i class="fas fa-check-circle"></i> SMS & Email Alerts</li>
        <li><i class="fas fa-check-circle"></i> Accounting Reports</li>
    </ul>

    <a href="#" class="btn-select">
        Select Plan <i class="fas fa-arrow-right"></i>
    </a>
</div>

                    <!-- Growth Plan -->
<div class="pricing-card">
    <div class="plan-header">
        <div class="plan-name">Premium Plan</div>
        <div class="plan-desc">Best For Large Societies</div>
    </div>

    <div class="price-wrapper">
        <div class="price">
            <span class="currency">₹</span>
            <span class="amount">18,999</span>
            <span class="period">/ Year</span>
        </div>
    </div>

    <ul class="features">
        <li><i class="fas fa-check-circle"></i> Unlimited Flats</li>
        <li><i class="fas fa-check-circle"></i> Staff Management</li>
        <li><i class="fas fa-check-circle"></i> Visitor Gate Pass</li>
        <li><i class="fas fa-check-circle"></i> Online Payment Gateway</li>
        <li><i class="fas fa-check-circle"></i> Asset Management</li>
        <li><i class="fas fa-check-circle"></i> Mobile App Access</li>
        <li><i class="fas fa-check-circle"></i> Advanced Reports</li>
        <li><i class="fas fa-check-circle"></i> Priority Support</li>
    </ul>

    <a href="#" class="btn-select">
        Select Plan <i class="fas fa-arrow-right"></i>
    </a>
</div>

                    <!-- Pro Broker PLAN -->
<div class="pricing-card">
    <div class="plan-header">
        <div class="plan-name">Enterprise Plan</div>
        <div class="plan-desc">Best For Township & Complex</div>
    </div>

    <div class="price-wrapper">
        <div class="price">
            <span class="currency">₹</span>
            <span class="amount">29,999</span>
            <span class="period">/ Year</span>
        </div>
    </div>

    <ul class="features">
        <li><i class="fas fa-check-circle"></i> Multi Society Management</li>
        <li><i class="fas fa-check-circle"></i> Admin & Committee Panel</li>
        <li><i class="fas fa-check-circle"></i> Smart Visitor Tracking</li>
        <li><i class="fas fa-check-circle"></i> Biometric Integration</li>
        <li><i class="fas fa-check-circle"></i> Vendor Management</li>
        <li><i class="fas fa-check-circle"></i> Full Accounting Module</li>
        <li><i class="fas fa-check-circle"></i> Custom Reports</li>
        <li><i class="fas fa-check-circle"></i> Dedicated Support</li>
    </ul>

    <a href="#" class="btn-select">
        Select Plan <i class="fas fa-arrow-right"></i>
    </a>
</div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- SweetAlert2 CDN (if not already added) -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.querySelectorAll('.btn-select').forEach(btn => {
    btn.addEventListener('click', (e) => {
        e.preventDefault();

        // Remove active from all cards
        document.querySelectorAll('.pricing-card').forEach(card => {
            card.classList.remove('active');
        });

        // Add active to selected card
        const selectedCard = btn.closest('.pricing-card');
        selectedCard.classList.add('active');

        const planName = selectedCard.querySelector('.plan-name')?.innerText;

        console.log('Plan selected:', planName);

        Swal.fire({
            title: 'Selected',
            text: `Plan: ${planName}`,
            icon: 'success',
            confirmButtonText: 'OK',
            confirmButtonColor: '#3085d6',
            width: '350px',
            
            customClass: {
                popup: 'swal-modern',
                title: 'swal-title',
                htmlContainer: 'swal-text',
                confirmButton: 'swal-confirm',
                cancelButton: 'swal-cancel'
            }
        });
    });
});
</script>

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