<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php init_head(); ?>
<style>
    .theme-cards {
        margin: 30px 0;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .theme-cards .card {
        width: 320px;
        border: none;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .theme-cards .card:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    }

    .theme-cards .img-wrapper {
        position: relative;
        overflow: hidden;
        height: 200px;
    }

    .theme-cards .img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .theme-cards .card-body {
        padding: 20px;
        background-color: #fff;
    }

    .theme-cards .card-title {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #333;
    }

    .theme-cards p {
        color: #777;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    .theme-cards .price {
        font-weight: bold;
        color: #2ecc71;
        font-size: 16px;
    }

    .theme-cards .category,
    .theme-cards .version {
        font-size: 14px;
        color: #3498db;
    }

    .theme-cards .btn {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 30px;
        text-align: center;
        font-weight: 600;
        margin-top: 10px;
        width: 100%;
        transition: background-color 0.3s ease;
    }

    .theme-cards .btn-info {
        background-color: #2980b9;
        color: #fff;
    }

    .theme-cards .btn-info:hover {
        background-color: #1d6e8d;
    }

    .theme-cards .btn-success {
        background-color: #27ae60;
        color: #fff;
    }

    .theme-cards .btn-success:hover {
        background-color: #2c8e51;
    }

    .no-modules {
        text-align: center;
        padding: 50px;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .no-modules img {
        max-width: 200px;
        margin-bottom: 20px;
    }

    .no-modules .btn-check {
        background-color: #f39c12;
        color: white;
        border-radius: 25px;
        padding: 10px 30px;
        text-transform: uppercase;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .no-modules .btn-check:hover {
        background-color: #e67e22;
    }
</style>

<div id="wrapper">
    <div class="content">
        <h2><?php echo _l('propertybase_modules'); ?></h2>
        <div class="row">
            <div class="col-md-12">
                <div class="panel_s">
                    <div class="panel-body panel-table-full">
                        <div class="row mt-2 mb-2">
                            <?php if (is_array($modules_list) && count($modules_list) > 0) { ?>
                                <?php foreach ($modules_list as $theme) { ?>
                                    <div class="col-md-4 theme-cards">
                                        <div class="card">
                                            <div class="img-wrapper">
                                                <img class="card-img-top img-fluid"
                                                     src="<?php echo $theme['featured_image'] ?? ''; ?>"
                                                     alt="Module Image">
                                            </div>
                                            <div class="card-body">
                                                <h5 class="card-title"><?php echo $theme['name'] ?? ''; ?></h5>
                                                <p><?php echo $theme['description'] ?? ''; ?></p>
                                                <p class="price"><?php echo $theme['price'] ?? ''; ?></p>
                                                <p class="category">Category
                                                    : <?php echo ucfirst($theme['category']) ?? ''; ?></p>
                                                <p class="version">Version : <?php echo $theme['version'] ?? ''; ?></p>
                                                <a target="_blank" href="<?php echo $theme['buy_link'] ?? ''; ?>"
                                                   class="btn btn-success">Buy Now</a>
                                                <a target="_blank" href="<?php echo $theme['demo_link'] ?? ''; ?>"
                                                   class="btn btn-info">View Demo</a>
                                            </div>
                                        </div>
                                    </div>
                                <?php } ?>
                            <?php } else { ?>
                                <div class="no-modules">
                                    <img src="<?php echo module_dir_url(PROPERTYBASE_MODULE_NAME, 'assets/images/empty.svg'); ?>"
                                         alt="No Modules Available">
                                    <h3><?php echo _l('propertybase_no_extensions_available'); ?></h3>
                                    <a target="_blank" href="https://lenzcreative.net/perfex-crm-modules/"
                                       class="btn-check"><?php echo _l('propertybase_check_our_other_products'); ?></a>
                                </div>
                            <?php } ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php init_tail(); ?>
