<!DOCTYPE html>
<html>
<head>
    <title>Cash Out Management</title>
    <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>
</head>
<body>

    <div class="small-container">
        <div class="tabs">
            <button class="tab-btn active" data-tab="cash-out-form-tab">Add Cash Outs</button>
            <button class="tab-btn" data-tab="display-tab">View Cash Outs</button>
        </div>

        <div id="cash-out-form-tab" class="tab-content">
          

            <div class="form-group">
                <label for="cash-out-date">Date:</label>
                <input type="date" id="cash-out-date" required>
            </div>

            <form id="cash-out-form">
                <table id="cash-out-table">
                    <thead>
                        <tr> <th>Amount</th>
                            <th>Note</th>
                           
                                                      <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="cash-out-rows">
                        <tr>
                            <td><input type="number" class="cash-out-amount" placeholder="Enter amount" required></td>
                         
                            <td><input type="text" class="cash-out-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 Cash Outs</button>
            </form>
        </div>

        <div id="display-tab" class="tab-content">
            <div class="search-cash-out">
              
                <div class="form-group">
                    <label for="search-date">Select Date:</label>
                    <input type="date" id="search-date" required>
                </div>
               
            </div>

            <div class="cash-out-results">
              
                <table id="cash-outs-display-table">
                    <thead>
                        <tr>
                            <th>Amount</th>
                            <th>Note</th>
                            
                          
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="cash-outs-display-rows">
                        </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="./js/cashOut.js"></script> <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get all tab buttons and tab content elements
            const tabButtons = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');
    
            // Function to handle tab switching
            function switchTab(tabId) {
                // Remove the active class from all buttons
                tabButtons.forEach(btn => btn.classList.remove('active'));
                // Add the active class to the clicked button
                const clickedButton = document.querySelector(`.tab-btn[data-tab="${tabId}"]`);
                if (clickedButton) {
                    clickedButton.classList.add('active');
                }
    
                // Hide all tab content sections
                tabContents.forEach(content => content.style.display = 'none');
    
                // Show the selected tab content
                document.getElementById(tabId).style.display = 'block';
            }
    
            // Add click listeners to tab buttons
            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    switchTab(tabId);
                });
            });
    
            // Initialize to show the first tab content (important!)
            switchTab('cash-out-form-tab'); // Show the form tab by default
        });
    </script>
</body>
</html>