<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Daily-Sales Counter application with search, backup, password protection, and theme toggle functionality."> 
    <meta name="author" content="M.Uzair">
    <title>Daily Sales</title> 
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>

<body class="light">
    <div class="container">
        <!-- Header Section -->
        <header>
            <h1><i class="fas fa-check-circle"></i> Daily Sales</h1>
            <!-- Theme Toggle Button -->
            <button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle Theme">
                <span id="sun-icon" class="icon" aria-hidden="true">&#9728;</span>
                <span id="moon-icon" class="icon" aria-hidden="true">&#9789;</span>
            </button>
        </header>

        <!-- Search Section -->
        <div class="search-section">
            <input type="text" id="searchInput" placeholder="Search tasks..." oninput="searchTasks()" aria-label="Search tasks">
            <button id="searchBtn" class="btn" aria-label="Search Tasks"><i class="fas fa-search"></i></button>
        </div>

        <!-- Input Section -->
        <div class="input-section">
            <input type="text" id="taskInput" placeholder="Enter your task here..." aria-label="Enter new task">
            <div class="buttons-right">
                <button id="addTaskBtn" class="btn" aria-label="Add New Task"><i class="fas fa-plus"></i> Add</button>
                <button id="backupBtn" class="btn" aria-label="Backup Tasks"><i class="fas fa-cloud-upload-alt"></i> Backup</button>
            </div>
        </div>

        <!-- Task List -->
        <section class="task-list">
            <ul id="taskList" aria-live="polite"></ul>
        </section>

        <!-- Calculate Button -->
        <button id="calculateBtn">Calculate</button>

        <!-- Payment Popup -->
    <div id="paymentPopup" class="payment-popup">
        <div class="payment-popup-content">
        <h3>Payment Details</h3>
        <div class="total">
            Outgoing Payments: <span id="outgoingTotal">Rs: 0</span>
        </div>
        <div class="total">
            Receiving Payments: <span id="receivingTotal">Rs: 0</span>
        </div>
        <button class="close-btn" onclick="paymentPopup.style.display='none'">Close</button>
        </div>
    </div>

    <br/>

        <!-- Clear All Button -->
        <button id="clearAllBtn" class="btn clear-btn" aria-label="Clear All Tasks"><i class="fas fa-trash-alt"></i> Clear All Tasks</button>

        <!-- Footer Section -->
        <footer>
            <p><strong><em>@Developed By M.Uzair</em></strong></p>
        </footer>
    </div>

    <!-- Password Popup -->
    <div class="popup" id="passwordPopup" aria-hidden="true">
        <div class="popup-content">
            <h2><i class="fas fa-lock"></i> Enter Password</h2>
            <input type="password" id="passwordInput" placeholder="Enter Password" aria-label="Enter Password">
            <button id="confirmPasswordBtn" class="btn" aria-label="Confirm Password"><i class="fas fa-check"></i> Confirm</button>
            <button id="cancelPasswordBtn" class="btn" aria-label="Cancel Password Entry"><i class="fas fa-times"></i> Cancel</button>
            <p id="errorMessage" class="error-message" aria-live="assertive"></p>
        </div>
    </div>

    <!-- Edit Popup -->
    <div class="popup" id="editPopup" aria-hidden="true">
        <div class="popup-content">
            <h2><i class="fas fa-edit"></i> Edit Task</h2>
            <input type="text" id="editInput" placeholder="Edit Task" aria-label="Edit Task">
            <button id="confirmEditBtn" class="btn" aria-label="Save Edit"><i class="fas fa-save"></i> Save</button>
            <button id="cancelEditBtn" class="btn" aria-label="Cancel Edit"><i class="fas fa-times"></i> Cancel</button>
        </div>
    </div>

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

</html>
