

<!-- Main Content without Sidebar -->
<div class="small-container">

    <style>

      /* Basic Styling - Customize as needed */
      .small-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* Tabs */
        .tabs {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .tab-btn {
            flex: 1;
            padding: 10px 20px;
            margin: 0 5px;
            background-color: #ffffff;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .tab-btn.active {
            background-color: #4CAF50;
            color: white;
            border-color: #4CAF50;
        }

        /* Tab Content */
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #ffffff;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="date"],
        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        /* Table Styles */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th, td {
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }

        th {
            background-color: #f2f2f2;
            text-align: center;
        }

        td {
            text-align: center;
        }

        /* Button Styles */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.3s ease;
        }

        .btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .btn:hover:not(:disabled) {
            background-color: #45a049;
        }


    </style>

        <!-- Tabs for Navigation -->
        <div class="tabs">
            <button class="tab-btn active" data-tab="expense-form-tab">Add Expenses</button>
            <button class="tab-btn" data-tab="display-tab">View Expenses</button>
        </div>

        <!-- Expense Form Tab -->
        <div id="expense-form-tab" class="tab-content">
          

            <!-- Date Field (Only One at the Top) -->
            <div class="form-group">
                <label for="expense-date">Date:</label>
                <input type="date" id="expense-date" required>
            </div>

            <form id="expense-form">
                <table id="expense-table">
                    <thead>
                        <tr>
                      
                          
                            <th>Amount</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="expense-rows">
                        <tr>
                            <td><input type="number" class="expense-amount" placeholder="Enter amount" required></td>
                         
                            <td><input type="text" class="expense-description" placeholder="Enter description" required></td>
                         
                            <td>
                                <button type="button" class="add-row-btn">+</button>
                                <button type="button" class="delete-row-btn">-</button>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <button type="button" id="save-all-btn" class="btn">Save All Expenses</button>
            </form>
        </div>

        <!-- Display Expenses Tab -->
        <div id="display-tab" class="tab-content" style="display: none;">
            <div class="row">
             
                <div class="form-group">
               
                    <input type="date" id="start-date" required>
                  </div>
                  <div class="form-group">
                    <input type="date" id="end-date" required>
                </div>
                <div class="form-group">
                <button id="search-expenses-btn" class="btn">Search</button>
                </div>
             
            </div>

            <div class="expense-results">
              
<div >
    
    <input type="text" id="search-expenses-input" placeholder="Search expenses..." />
 
    <strong>Total Expenses</strong> <span id="totalAmount" style="margin-left:20px; color:red;font-size: 16px;">0.00 </span>

  

</div>


                <table id="expenses-display-table">
                  
                    <thead>
                        <tr>  
                            <th>Date</th>
                            <th>Amount</th>
                            <th>Description</th>
                               <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="expenses-display-rows">
                        <!-- Dynamically populated -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="./js/expense.js"></script>

    <!-- Tab Switching Script -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
           
        });
    </script>
</body>
</html>
