EVOLUTION-NINJA

Edit File: user-homepage.php

<?php echo view('includes/headerSidebar'); ?>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

}

.user_details_main {
        border-radius: 13px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        /* width: 55%; */
        padding: 27px;
        min-height: 301px;
        background-color: white;

}

.use_img {
        width: 140px;
        height: 126px;
        /* border: 1px solid; */
        border-radius: 50%;
        overflow: hidden;
    }

.user_deta {
        /* border: 1px solid; */
    }

.user_deta>p {
        margin: 0;
        margin-bottom: 5px;
    }

.user_deta>p:nth-child(1) {
        color: #0065A3;
        font-size: 26px;
        font-weight: 600;
    }

.user_deta>p:nth-child(2) {
        color: #33363F;
        font-size: 19px;
        font-weight: 600;
    }

.user_deta>p:nth-child(3) {
        color: #222323;
        font-size: 16px;
        font-weight: 600;
        word-wrap: break-word;
        white-space: break-spaces;
        word-break: break-word;
    }

.user_idno {
        color: #575757
    }

.user_border {
        height: 1px;
        border: 1px solid #B7B4B4;
        margin-bottom: 15px;
    }

.user_more_inf {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        margin-left: 10px;

/* color: #007bff; */
        color: #444;
    }

.user_more_inf>span {
        margin-left: 8px;

color: #525252;
    }

.user_de {
        color: #363636;
        font-weight: 500;
        margin: 0;
        margin-bottom: 8px;
        margin-left: 4px;
        font-size: 20px;
    }

.mor_det {
        color: #212529;
        font-weight: 500;
    }

/* promoter details  */
    .prom_det {
        position: relative;
        width: 300px;
        padding: 20px;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        margin: auto;
        margin-bottom: 15px;
        background-color: white;
    }

.prom_det:hover {
        scale: 1.1;
        transition: scale 0.6s ease-in-out;

}

.prom_icon {
        width: 63px;
        position: relative;
        top: -47px;
        left: 17px;
    }

.prom_det>.pro_mon {
        float: right;
        margin-top: 18px;
        font-size: 18px;
        font-weight: 600;
        color: #345757;

}

.prom_detail {
        /* display:grid;
            grid-template-columns: repeat(5,1fr); */
        display: flex;
        flex-wrap: wrap;
        flex: 1 0 300px;
        gap: 22px;
        margin: auto;
    }

.peo_par {
        color: #443;
        font-weight: 600;
        margin-top: 4px
    }

@media only screen and (max-width:628px) {
        .user_details_main {
            width: 100%;
            padding: 12px;
            min-height: auto;
        }
    }

@media only screen and (min-width:629px) and (max-width:1028px) {
        .user_details_main {
            width: 100%;
            min-height: auto;
        }
    }
</style>
<div id="main" class="p-4">

<section>
        
        <div class="mainheading">My Account</div>

<div class="row  mt-5">
            <div class="col-lg-8 col-md-12 col-sm-12">
                <div class="user_details_main h-auto mb-3">
                    <div class="d-flex mb-3 flex-wrap align-items-center flex-wrap">
                        <img src='<?php echo base_url("public/assets/images/Rectangle 4141 (1).png")?>' alt="user image"
                            class="use_img ">

<div class="user_deta ml-4">
                            <p> <?php echo session()->get('username');?></p>
                           
                            <p>User Key: <span class="user_idno" id="user_id"></span> </p>
                        </div>

</div>

<div class="accordion" id="accordionExample">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <h2 class="mb-0">
                                    <button class="btn btn-link btn-block text-left text-decoration-none mor_det"
                                        type="button" data-toggle="collapse" data-target="#collapseOne"
                                        aria-expanded="true" aria-controls="collapseOne">
                                        More Details
                                    </button>
                                </h2>
                            </div>

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                data-parent="#accordionExample">
                              <div class="card-body">
                                    <p class="user_de">About</p>
                                    <div class="user_more_inf"> Full Name: <span class="usre_inf" id="customerFullName"></span></div>
                                    <div class="user_more_inf"> Role: <span class="usre_inf" id="customerRole" >Customer</span> </div>
                                    <div class="user_more_inf"> City: <span class="usre_inf" id="customerCity"></span></div>
                                    
                                    
                                    <div class="user_border"></div>

<p class="user_de">Contact Details</p>
                                    <div class="user_more_inf"> Contact: <span class="usre_inf" id="customerPhone"></span>
                                    </div>
                                    <div class="user_more_inf"> Email: <span class="usre_inf"  id="customerEmail"></span>
                                    </div>

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

</div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12 col-sm-12">
                <div class="overview-prom user_details_main"
                    style="box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;">
                    <p class="user_de">Overview</p>
                    <div class="user_more_inf"> Total Payments:<span class="usre_inf" id="customer_payment"></span> </div>
                    <div class="user_more_inf"> Total Months: <span class="usre_inf" id="customer_month"></span>
                        <span class="usre_inf"></span>
                    </div>

</div>

</div>
        </div>

</section>

<section> <br>
    
    <h3>Customer Payments</h3> <br>
        <table class="table table-striped table-hover" id="paymentTable">
            <thead>
                <tr>
                    <th>Sl no</th>
                    <th>Scheme Name</th>
                    <th>Amount</th>
                    <th>Payment_Date</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    
</section>

</div>

</body>

window.location.href = "<?php echo base_url('withdraw'); ?>";
    });
});
</script>

</html>