






        <div class="main-cards" style="margin-top: 20px;">
            <div class="row">

                <div class="col-12">
                    <div class="topSecCards"
                        style="width: 100%; height: 100%; padding: 10px 10px 25px 10px; border-radius: 20px;">
                        <div class="row">
                            
                              <div class="col-sm-12 col-md-6 col-lg-4">
                                <div align="center" style="padding: 28px 0 0 0px;">
                                    <div class="proscard"
                                        style="width: 100%; border-radius: 15px; height: 170px; background-color:white;">
                                        <div style="padding: 10px;">
                                            <h6 style="margin-left: -120px; color: #333333;">Expected Income</h6>

                                            
                                                
                                                
                                            <div align="center" class="mt-4">
                                                <span style="font-size: 35px; font-weight: 500; color: #333333;" id="prosloadwalletebalancecontent">
                                                </span>
                                                <br>

                                                
                                                <a 
                                                    style="font-size: 18px; margin-top: -13px; color: #333333; float: right; margin-right: 50px;cursor:pointer;"><i
                                                        class="fa fa-eye prosslidewaleteicon prosviewfinancewalletbal" aria-hidden="true"></i></a>
                                            </div>

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

                            
                            <!---==================Modal Section=============================------>
                            <!---==================Modal Section=============================------>

                            <!--==== Withdraw Modal==== -->
                            <div class="modal fade" id="withdrawModal" tabindex="-1"
                                aria-labelledby="withdrawModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content" style="border-radius: 20px;">
                                        <div class="modal-body">
                                            <div align="center">
                                                <h4 class="mt-3">Cash Withdrawal</h4>
                                            </div>

                                            <div class="row" style="padding-top: 50px; margin: 0 5px 0 5px;">
                                                <div class="col-12 mb-2">
                                                    <div class="form-floating ">
                                                        <select class="form-select"
                                                            style="font-size: 13px; height: 53px;border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            id="floatingSelect"
                                                            aria-label="Floating label select example">
                                                            <option selected></option>
                                                            <option value="">Access Bank</option>
                                                            <option value="">First Bank</option>
                                                            <option value="">Fidelity Bank</option>
                                                        </select>
                                                        <label for="floatingSelect">Select Bank</label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-floating mb-3">
                                                        <input type="text"
                                                            style="height: 50px; border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            class="form-control form-control-sm" id="floatingInput"
                                                            placeholder="name">
                                                        <label for="floatingInput"
                                                            style="color: #afafaf; margin-top: 2px; font-weight: 500;">Account
                                                            Number</label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-floating mb-3">
                                                        <input type="text"
                                                            style="height: 50px; border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            class="form-control form-control-sm" id="floatingInput"
                                                            placeholder="name">
                                                        <label for="floatingInput"
                                                            style="color: #afafaf; margin-top: 2px; font-weight: 500;">Account
                                                            Name</label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-floating mb-3">
                                                        <input type="number"
                                                            style="height: 50px; border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            class="form-control form-control-sm" id="floatingInput"
                                                            placeholder="name">
                                                        <label for="floatingInput"
                                                            style="color: #afafaf; margin-top: 2px; font-weight: 500;">Amount</label>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="row">
                                                <div class="col-12" style="padding: 30px;">
                                                    <button class="btn btn-primary" style="width: 100%;"
                                                        type="button"><img
                                                            src="../../assets/images/cash-withdrawal---v2.png"
                                                            height="15" alt=""> Proceed</button>
                                                    <div align="center"
                                                        style="color: #afafaf; font-size: 11px; font-weight: 500;">
                                                        Powered by EduMESS</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--===Withdraw Modal=======-->

                            <!--======paysalary Modal== -->
                            <div class="modal fade" id="paysalaryModal" tabindex="-1"
                                aria-labelledby="paysalaryModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content" style="border-radius: 20px;">
                                        <div class="modal-body">
                                            <div align="center">
                                                <h4 class="mt-3">Pay Salary</h4>
                                            </div>

                                            <div class="row" style="padding-top: 50px; margin: 0 5px 0 5px;">
                                                <div class="col-12 mb-2">
                                                    <div class="form-floating ">
                                                        <select class="form-select"
                                                            style="font-size: 13px; height: 53px;border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            id="floatingSelect"
                                                            aria-label="Floating label select example">
                                                            <option selected></option>
                                                            <option value="">learningfield 1</option>
                                                            <option value="">learningfield 2</option>
                                                            <option value="">learningfield 3</option>
                                                        </select>
                                                        <label for="floatingSelect">Select Campus</label>
                                                    </div>
                                                </div>
                                                <div class="col-12 mb-2">
                                                    <div class="form-floating ">
                                                        <select class="form-select"
                                                            style="font-size: 13px; height: 53px;border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            id="floatingSelect"
                                                            aria-label="Floating label select example">
                                                            <option selected></option>
                                                            <option value="">Ade Tunde</option>
                                                            <option value="">Bayo Kola</option>
                                                            <option value="">Yemi Shagari</option>
                                                        </select>
                                                        <label for="floatingSelect">Select Staff</label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-floating mb-3">
                                                        <input type="number" disabled
                                                            style="height: 50px; border: none; background-color: #fcfbfb; border-bottom: #b3b3b3 solid 1px;"
                                                            class="form-control form-control-sm"
                                                            id="disabledTextInput" placeholder="name">
                                                        <label for="disabledTextInput"
                                                            style="color: #afafaf; margin-top: 2px; font-weight: 500;">Amount</label>
                                                        <small style="color: #ff0000;">This Staffs were penalised
                                                            due to late coming.</small>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="row">
                                                <div class="col-12" style="padding: 30px;">
                                                    <button class="btn btn-primary" style="width: 100%;"
                                                        type="button"><i style="font-size: 13px;"
                                                            class="fa fa-credit-card" aria-hidden="true"></i> Pay
                                                        Salary</button>
                                                    <div align="center"
                                                        style="color: #afafaf; font-size: 11px; font-weight: 500;">
                                                        Powered by EduMESS</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--======paysalary Modal== -->

                          


                         


                            <!--====School Budget Modal=====-->

                            <!--First Modal -->
                            <div class="modal fade" id="budgetModal" aria-hidden="true"
                                aria-labelledby="budgetModalLabel" tabindex="-1">
                                <div class="modal-dialog modal-dialog-scrollable modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">Set Budget</h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="col-lg-10">

                                                </div>
                                                <div class="col-lg-2">
                                                    <a href="" data-bs-target="#useTemplateModal"
                                                        data-bs-toggle="modal" data-bs-dismiss="modal"
                                                        style="float: right; font-size: 12px;">
                                                        <i class="fa fa-plus" aria-hidden="true"></i> Use Template
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="row" style="margin-top: 50px;">
                                                <div class="col-12">
                                                    <div align="center">
                                                        <img src="../../assets/images/Feb-Business_9.jpg"
                                                            style="width: 15%;" alt="">
                                                        <p></p>
                                                        <p>Opps looks like you haven't set any Budget items yet!!!
                                                            <br> Click on Add Item to set them.</p>

                                                        <button type="button" class="btn btn-lg btn-primary"
                                                            data-bs-target="#addItemsModal2" data-bs-toggle="modal"
                                                            data-bs-dismiss="modal"
                                                            style="border: solid 1px #FF7702; background: #FF7702; border-radius: 25px; font-size: 16px; width: 250px;">
                                                            <i class='bx bxs-bookmark-alt-plus'></i> Add Items
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-sm btn-secondary"
                                                data-bs-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        

                            <!--School Budget with table Modal -->
                            <div class="modal fade" id="budgetModal2" data-bs-backdrop="static"
                                data-bs-keyboard="false" aria-hidden="true" aria-labelledby="budgetModalLabel2"
                                tabindex="-1">
                                <div class="modal-dialog modal-dialog-scrollable modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">School Budget</h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">

                                            <div class="row">
                                                <div class="col-lg-9">

                                                </div>
                                                <div class="col-lg-3">
                                                    <a href=""
                                                        style="float: right; font-size: 14px; text-decoration: none;"
                                                        data-bs-target="#addItemsModal2" data-bs-toggle="modal"
                                                        data-bs-dismiss="modal">
                                                        <i class="fa fa-plus" aria-hidden="true"></i> Create New
                                                        Item
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="row" style="margin-top: 50px;">
                                                <div class="col-12">
                                                    <!-- Editable table -->
                                                    <div class="table-editable" style="margin: 0 5px 0 5px;">
                                                        <h4
                                                            class="card-header text-center font-weight-bold text-uppercase py-3">
                                                            Income
                                                        </h4>
                                                        <table class="table table-bordered table-striped">
                                                            <thead>
                                                                <tr>
                                                                    <th>Items</th>
                                                                    <th>Actual Amount</th>
                                                                    <th>Budget Amount</th>
                                                                    <th>Difference</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        School Bus</td>
                                                                    <td class="pt-3-half" contenteditable="true">---
                                                                    </td>
                                                                    <td class="pt-3-half" contenteditable="true">---
                                                                    </td>
                                                                    <td class="pt-3-half" contenteditable="true">---
                                                                    </td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        Chair</td>
                                                                    <td class="pt-3-half" contenteditable="true">---
                                                                    </td>
                                                                    <td class="pt-3-half" contenteditable="true">---
                                                                    </td>
                                                                    <td class="pt-3-half" contenteditable="true">---
                                                                    </td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        Text-books</td>
                                                                    <td class="pt-3-half" contenteditable="true">---
                                                                    </td>
                                                                    <td class="pt-3-half" contenteditable="true">---
                                                                    </td>
                                                                    <td class="pt-3-half" contenteditable="true">---
                                                                    </td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        Uniform</td>
                                                                    <td class="pt-3-half" contenteditable="true">---
                                                                    </td>
                                                                    <td class="pt-3-half" contenteditable="true">---
                                                                    </td>
                                                                    <td class="pt-3-half" contenteditable="true">---
                                                                    </td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="pt-3-half">Total Amount</td>
                                                                    <td class="pt-3-half">---</td>
                                                                    <td class="pt-3-half">---</td>
                                                                    <td class="pt-3-half">---</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        <a href=""
                                                            style="float: right; font-size: 14px; text-decoration: none;"
                                                            data-bs-target="#addItemsModal2" data-bs-toggle="modal"
                                                            data-bs-dismiss="modal">
                                                            <i class="fa fa-plus" aria-hidden="true"></i> Add More
                                                            Item
                                                        </a>
                                                    </div>

                                                    <div class="table-editable pt-5" style="margin: 0 5px 0 5px;">
                                                        <h4
                                                            class="card-header text-center font-weight-bold text-uppercase py-3">
                                                            Expenses
                                                        </h4>
                                                        <table class="table table-bordered table-striped">
                                                            <thead>
                                                                <tr>
                                                                    <th>Items</th>
                                                                    <th>Actual Amount</th>
                                                                    <th>Budget Amount</th>
                                                                    <th>Difference</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        School Bus</td>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        ₦90,000</td>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        ₦100,000</td>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        ₦10,000</td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        Chair</td>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        ₦30,000</td>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        ₦35,000</td>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        ₦5,000</td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        Text-books</td>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        ₦10,000</td>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        ₦15,000</td>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        ₦5,000</td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        Pencils</td>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        ₦10,000</td>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        ₦8,000</td>
                                                                    <td class="pt-3-half" contenteditable="true">
                                                                        ₦2,000</td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="pt-3-half">Total Amount</td>
                                                                    <td class="pt-3-half">₦140,000</td>
                                                                    <td class="pt-3-half">₦158,000</td>
                                                                    <td class="pt-3-half">₦22,000</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        <a href=""
                                                            style="float: right; font-size: 14px; text-decoration: none;"
                                                            data-bs-target="#addItemsModal2" data-bs-toggle="modal"
                                                            data-bs-dismiss="modal">
                                                            <i class="fa fa-plus" aria-hidden="true"></i> Add More
                                                            Item
                                                        </a>
                                                    </div>
                                                    <!-- Editable table -->
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-sm btn-primary"
                                                data-bs-target="#budgetSummaryModal" data-bs-toggle="modal"
                                                data-bs-dismiss="modal">Proceed</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--Use Template Modal -->
                            <div class="modal fade" id="useTemplateModal" data-bs-backdrop="static"
                                data-bs-keyboard="false" aria-hidden="true" aria-labelledby="useTemplateModalLabel"
                                tabindex="-1">
                                <div class="modal-dialog modal-dialog-scrollable modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalToggleLabel2"><i
                                                    class="fa fa-plus" aria-hidden="true"></i> Import Template</h5>

                                        </div>
                                        <div class="modal-body">

                                            <div style=" margin: 20px 25px 0 25px;">
                                                <div class="col-12 mb-2">
                                                    <div class="form-floating ">
                                                        <select class="form-select"
                                                            style="font-size: 13px; height: 50px;border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            id="floatingSelect"
                                                            aria-label="Floating label select example">
                                                            <option selected>All</option>
                                                            <option value="Learning Field 1">Learning Field 1
                                                            </option>
                                                            <option value="Learning Field 2">Learning Field 2
                                                            </option>
                                                            <option value="Learning Field 3">Learning Field 3
                                                            </option>
                                                        </select>
                                                        <label for="floatingSelect">Select Campus</label>
                                                    </div>
                                                </div>

                                                <div class="col-12 mb-2">
                                                    <div class="form-floating ">
                                                        <select class="form-select"
                                                            style="font-size: 13px; height: 50px;border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            id="floatingSelect"
                                                            aria-label="Floating label select example">
                                                            <option selected></option>
                                                            <option value="2021/2022">2021/2022</option>
                                                            <option value="2022/2023">2022/2023</option>
                                                            <option value="2023/2024">2023/2024</option>
                                                        </select>
                                                        <label for="floatingSelect">Select Yearly</label>
                                                    </div>
                                                </div>

                                                <div class="col-12 mb-2">
                                                    <div class="form-floating ">
                                                        <select class="form-select"
                                                            style="font-size: 13px; height: 50px;border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            id="floatingSelect"
                                                            aria-label="Floating label select example">
                                                            <option selected></option>
                                                            <option value="First Term">First Term</option>
                                                            <option value="Second Term">Second Term</option>
                                                            <option value="Third Term">Third Term</option>
                                                        </select>
                                                        <label for="floatingSelect">Select Termly</label>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                        <div class="modal-footer mt-4">
                                            <button class="btn btn-sm btn-primary" data-bs-target="#budgetModal2"
                                                data-bs-toggle="modal" data-bs-dismiss="modal">Import
                                                Template</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--Bubget Summary Modal -->
                            <div class="modal fade" id="budgetSummaryModal" data-bs-backdrop="static"
                                data-bs-keyboard="false" aria-hidden="true"
                                aria-labelledby="budgetSummaryModalLabel" tabindex="-1">
                                <div class="modal-dialog modal-dialog-scrollable modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalToggleLabel2"><i
                                                    class='bx bxs-bookmark-alt'></i> Budget Summery</h5>

                                        </div>
                                        <div class="modal-body">

                                            <div style=" margin: 20px 25px 0 25px;">
                                                <div class="col-12">
                                                    <div>
                                                        <a href="#"
                                                            style="float: right; text-decoration: none; font-size: 15px; font-weight: 500;"
                                                            data-bs-target="#budgetModal2" data-bs-toggle="modal"
                                                            data-bs-dismiss="modal">View</a>
                                                        <h5 style="font-weight: 400;">Learning Field 2024 Budget
                                                            Summary</h5>

                                                        <hr>
                                                        <div class="row g-3">
                                                            <div style="font-weight: 600;" class="col-8">Item
                                                                Category</div>
                                                            <div style="font-weight: 600;" class="col-4">Actual
                                                                Amount</div>

                                                            <div class="col-8">Income</div>
                                                            <div class="col-2">₦140,000</div>

                                                            <div class="col-8">Expenses</div>
                                                            <div class="col-2">₦140,000</div>

                                                            <div class="col-8">School Trip</div>
                                                            <div class="col-2">₦40,000</div>

                                                            <div class="col-8">School External Expense</div>
                                                            <div class="col-2">₦140,000</div>
                                                            <hr>
                                                            <div style="font-weight: 600;" class="col-8">Total
                                                                Amount</div>
                                                            <div style="font-weight: 600;" class="col-2">₦560,000
                                                            </div>

                                                            <div style="font-weight: 600;" class="col-8">Expected
                                                                Budget Wallet Amount</div>
                                                            <div style="font-weight: 600;" class="col-2">₦600,000
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                        <div class="modal-footer mt-4">
                                            <button class="btn btn-sm btn-primary" data-bs-target="#budgetModal2"
                                                data-bs-toggle="modal" data-bs-dismiss="modal">Import
                                                Template</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--====School Budget Modal=====-->



                             <!--Add Item Modal -->
                             <div class="modal fade" id="addItemsModal2" data-bs-backdrop="static"
                                data-bs-keyboard="false" aria-hidden="true" aria-labelledby="addItemsModalLabel2"
                                tabindex="-1">
                                <div class="modal-dialog modal-dialog-scrollable modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalToggleLabel2"><i
                                                    class="fa fa-plus" aria-hidden="true"></i> Add Item</h5>

                                        </div>
                                        <div class="modal-body">
                                            <div style=" margin: 20px 25px 0 25px;">
                                                 <div class="col-12 mb-2">
                                                     <div class="form-floating ">
                                                        <select class="form-select"
                                                            style="font-size: 13px; height: 50px;border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            id="floatingSelect"
                                                            aria-label="Floating label select example">
                                                            <option selected>All</option>
                                                            <option value="Learning Field 1">Learning Field 1
                                                            </option>
                                                            <option value="Learning Field 2">Learning Field 2
                                                            </option>
                                                            <option value="Learning Field 3">Learning Field 3
                                                            </option>
                                                        </select>
                                                        <label for="floatingSelect">Select Campus</label>
                                                    </div>
                                                 </div>

                                                <div class="col-12 mb-2">
                                                    <div class="form-floating ">
                                                        <select class="form-select"
                                                            style="font-size: 13px; height: 50px;border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            id="floatingSelect"
                                                            aria-label="Floating label select example">
                                                            <option selected></option>
                                                            <option value="2021/2022">2021/2022</option>
                                                            <option value="2022/2023">2022/2023</option>
                                                            <option value="2023/2024">2023/2024</option>
                                                        </select>
                                                        <label for="floatingSelect">Select Yearly</label>
                                                    </div>
                                                </div>

                                                <div class="col-12 mb-2">
                                                    <div class="form-floating ">
                                                        <select class="form-select"
                                                            style="font-size: 13px; height: 50px;border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            id="floatingSelect"
                                                            aria-label="Floating label select example">
                                                            <option selected></option>
                                                            <option value="First Term">First Term</option>
                                                            <option value="Second Term">Second Term</option>
                                                            <option value="Third Term">Third Term</option>
                                                        </select>
                                                        <label for="floatingSelect">Select Termly</label>
                                                    </div>
                                                </div>

                                                <div class="col-12 mb-2">
                                                    <div class="form-floating ">
                                                        <select class="form-select"
                                                            style="font-size: 13px; height: 50px;border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            id="floatingSelect"
                                                            aria-label="Floating label select example">
                                                            <option selected></option>
                                                            <option value="First Term">Income</option>
                                                            <option value="Second Term">Expenses</option>
                                                        </select>
                                                        <label for="floatingSelect">Select Category</label>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div id="formtoappend" class="form-floating mb-2">
                                                        <input type="text" id="floatingInput" placeholder="name"
                                                            style="height: 50px; border: none; border-bottom: #b3b3b3 solid 1px;"
                                                            class="form-control form-control-sm">
                                                        <label for="floatingInput"
                                                            style="color: #afafaf; font-weight: 400;">Item
                                                            Name</label>
                                                    </div>
                                                    <a href="#" id="appendform"
                                                        style="float: right; text-decoration: none; font-weight: 500;">Add
                                                        More</a>
                                                </div>
                                            </div>



                                        </div>
                                        <div class="modal-footer mt-4">
                                            <button class="btn btn-sm btn-primary" data-bs-target="#budgetModal2"
                                                data-bs-toggle="modal" data-bs-dismiss="modal">Submit</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!---==================Modal Section=============================------>
                            <!---==================Modal Section=============================------>
                            <!---==================Modal Section=============================------>


                            <div class="col-sm-12 col-md-6 col-lg-4">
                                <div align="center" style="padding: 28px 0 0 0px;">
                                    <div class="renfinaceCard"
                                        style="width: 100%; border-radius: 15px; height: 170px;">
                                        <div style="padding: 10px;">
                                            <h6 style="margin-left: -120px; color: #ffffff;">Total Paid</h6>

                                            
                                                
                                                
                                            <div align="center" class="mt-4">
                                                <span style="font-size: 35px; font-weight: 500; color: #ffffff;" id="prosloadpendingwalletwithdrawer">
                                                </span>
                                                <br>

                                                
                                                <a 
                                                    style="font-size: 18px; margin-top: -13px; color: #ffffff; float: right; margin-right: 50px;cursor:pointer;"><i
                                                        class="fa fa-eye prosperwalletpendingshowbtn" aria-hidden="true"></i></a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-6 col-lg-4">
                                <div align="center" style="padding: 28px 0 0 0px;">
                                    <div class="renbluishCard"
                                        style="width: 95%; border-radius: 15px; height: 170px;">
                                        <div style=" padding: 10px">
                                            <h6 style="margin-left: -120px; color: #ffffff;">Total Debt</h6>

                                            <div align="center" class="mt-4">
                                                <span style="font-size: 35px; font-weight: 500; color: #ffffff;" id="prosloadwithrawnamountcontent">
                                                     </span>
                                                <br>
                                                <a
                                                    style="font-size: 18px; margin-top: -13px; color: #ffffff; float: right; margin-right: 25px;cursor:pointer;"><i
                                                        class="fa fa-eye proswithdrawnamount" aria-hidden="true"></i></a>
                                            </div>

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

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

            </div>
        </div>


        <div id="prosloadinputforfinancedashboard"></div>




       

