<!DOCTYPE html>
<html lang="en"> 
<head>
    <title>Sharefolio - Enter Income Details</title>
    
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta name="description" content="Sharefolio">
    <meta name="author" content="Ivan YeH">    
    <!-- <link rel="shortcut icon" href="favicon.ico">  -->
    
    <!-- FontAwesome JS-->
    <!-- <script defer src="assets/plugins/fontawesome/js/all.min.js"></script> -->
    <script defer src="{{ url_for('static', filename='assets/plugins/fontawesome/js/all.min.js') }}"></script>
    
    <!-- App CSS -->  
    <!-- <link id="theme-style" rel="stylesheet" href="assets/css/portal.css"> -->
    <link id="theme-style" rel="stylesheet" href="{{ url_for('static', filename='assets/css/portal.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/modern.css') }}">
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
</head> 

<body class="app">   	
    <header class="app-header fixed-top">	   	            
        <div class="app-header-inner">  
	        <div class="container-fluid py-2">
		        <div class="app-header-content"> 
				    <div class="col-auto">
					    <a id="sidepanel-toggler" class="sidepanel-toggler d-inline-block d-xl-none" href="#">
						    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg>
					    </a>
				    </div>
		        </div><!--//row-->
	            </div><!--//app-header-content-->
	        </div><!--//container-fluid-->
        </div><!--//app-header-inner-->
        <div id="app-sidepanel" class="app-sidepanel"> 
	        <div id="sidepanel-drop" class="sidepanel-drop"></div>
	        <div class="sidepanel-inner d-flex flex-column">
		        <a href="#" id="sidepanel-close" class="sidepanel-close d-xl-none">&times;</a>
		        <div class="app-branding">
		            <a class="app-logo loading" href="/portfolio"><span class="logo-text">Sharefolio</span></a>
		        </div><!--//app-branding-->  
		        
			    <nav id="app-nav-main" class="app-nav app-nav-main flex-grow-1">
				    <ul class="app-menu list-unstyled accordion" id="menu-accordion">
					    <li class="nav-item">
					        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
					        <a class="nav-link loading" href="{{ url_for('portfolio') }}">
						        <span class="nav-icon"><i class="fa-solid fa-chart-column"></i></span>
		                        <span class="nav-link-text">Portfolio</span>
					        </a><!--//nav-link-->
					    </li><!--//nav-item-->
					    
					    <li class="nav-item">
					        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
					        <a class="nav-link loading" href="{{ url_for('holdings') }}">
								<span class="nav-icon" href><i class="fa-solid fa-hand-holding-dollar"></i></span>
		                         <span class="nav-link-text">Holdings</span>
					        </a><!--//nav-link-->
					    </li><!--//nav-item-->
						<li class="nav-item has-submenu">
					        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
					        <a class="nav-link submenu-toggle" href="#" data-bs-toggle="collapse" data-bs-target="#submenu-1" aria-expanded="false" aria-controls="submenu-1">
						        <span class="nav-icon"><i class="fa-solid fa-money-bill-transfer"></i></span>
		                         <span class="nav-link-text">Transactions</span>
		                         <span class="submenu-arrow">
		                             <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
	  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
	</svg>
	                             </span><!--//submenu-arrow-->
					        </a><!--//nav-link-->
					        <div id="submenu-1" class="show submenu submenu-1" data-bs-parent="#menu-accordion">
						        <ul class="submenu-list list-unstyled">
							        <li class="submenu-item"><a class="submenu-link loading" href="{{ url_for('trades') }}">Trades</a></li>
							        <li class="submenu-item"><a class="submenu-link active loading" href="{{ url_for('incomes') }}">Incomes</a></li>
						        </ul>
					        </div>
					    </li><!--//nav-item-->
						
						
				    </ul><!--//app-menu-->
			    </nav><!--//app-nav-->
			    
				<div class="app-sidepanel-footer">
				    <nav class="app-nav app-nav-footer">
					    <ul class="app-menu footer-menu list-unstyled">
						    <li class="nav-item">
						        <a class="nav-link" href="/info">
							        <span class="nav-icon">
										<i class="fa fa-info"></i>
									</span>
			                        <span class="nav-link-text">Help &amp; FAQ</span>
						        </a><!--//nav-link-->
						    </li><!--//nav-item-->
						    <li class="nav-item">
						        <a class="nav-link" href="/settings">
							        <span class="nav-icon">
										<i class="fa fa-cogs"></i>
									</span>
			                        <span class="nav-link-text">Settings</span>
						        </a><!--//nav-link-->
						    </li><!--//nav-item-->
						    <li class="nav-item">
						        <a class="nav-link" href="{{ url_for('index') }}">
							        <span class="nav-icon">
										<i class="fa fa-home"></i>
									</span>
			                        <span class="nav-link-text">Home</span>
						        </a><!--//nav-link-->
						    </li><!--//nav-item-->
					    </ul><!--//footer-menu-->
				    </nav>
			    </div><!--//app-sidepanel-footer-->
		       
	        </div><!--//sidepanel-inner-->
	    </div><!--//app-sidepanel-->
    </header><!--//app-header-->
    
    <div class="app-wrapper">
	    <div class="container-xl">
			<div class="app-content pt-3 p-md-3 p-lg-4">
				<div class="col-auto">
					<h1 class="app-page-title mb-0">Enter A New Income</h1>
					<br>
				</div>

					<form method="POST" action="{{ url_for('add_income') }}" class="row g-3">

						<!-- Income Date -->
						<div class="col-md-4">
							<label for="date" class="form-label">Date</label>
							<input type="date" id="date" name="date" class="form-control" required>
						</div>

						<!-- Holding -->
						<div class="col-md-4">
							<label for="holding" class="form-label">Holding</label>
							<select id="holding" name="holding" class="form-select" required>
								<option value="" disabled selected>Select a Holding</option>
								{% for ticker, exchange, currency in holdings %}
									<option value="{{ ticker }}|{{ exchange }}|{{ currency }}">
										{{ ticker }} ({{ exchange_names[exchange] }}, {{ currency }} {{ currency_icons[currency] }})
									</option>
								{% endfor %}
							</select>
						</div>

						<!-- FX -->
						<div class="col-md-4">
							<label for="fx" class="form-label">FX (Base ÷ Asset) (optional)</label>
							<input type="number" step="any" id="fx" name="fx" class="form-control">
						</div>

						<!-- Amount -->
						<div class="col-md-4">
							<label for="amount" class="form-label">Amount</label>
							<input type="number" step="any" id="amount" name="amount" class="form-control" required>
						</div>

						<!-- Tax Credit -->
						<div class="col-md-4">
							<label for="imputation" class="form-label">Tax Credit</label>
							<input type="number" step="any"  id="imputation" name="imputation" class="form-control" required>
						</div>

						<!-- Fees -->
						<div class="col-md-4">
							<label for="fees" class="form-label">Fees</label>
							<input type="number" step="any" id="fees" name="fees" class="form-control" required>
						</div>

						<!-- Note -->
						<div class="col-12">
							<label for="note" class="form-label">Note (optional)</label>
							<textarea id="note" name="note" class="form-control" rows="2"></textarea>
						</div>

						<!-- DRP Toggle -->
						<div class="col-12">
							<div class="form-check">
								<input type="checkbox" class="form-check-input" id="drp-toggle" name="add_drp">
								<label class="form-check-label" for="drp-toggle">
									Add Dividend/Distribution Reinvestment Trade?
								</label>
							</div>
						</div>

						<!-- DRP Fields -->
						<div id="drp-fields" style="display: none;" class="row g-3">
							<div class="col-md-4">
								<label for="drp_date" class="form-label">Reinvestment Date</label>
								<input type="date" id="drp_date" name="drp_date" class="form-control drp-required">
							</div>
							<div class="col-md-4">
								<label for="drp_quantity" class="form-label">Quantity Received</label>
								<input type="number" step="any"  id="drp_quantity" name="drp_quantity" class="form-control drp-required">
							</div>
							<div class="col-md-4">
								<label for="drp_price" class="form-label">Price</label>
								<input type="number" step="any" id="drp_price" name="drp_price" class="form-control drp-required">
							</div>
							<div class="col-md-4">
								<label for="drp_fx" class="form-label">FX (Base ÷ Asset) (optional)</label>
								<input type="number" step="any" id="drp_fx" name="drp_fx" class="form-control">
							</div>
							<div class="col-md-4">
								<label for="drp_fees" class="form-label">Fees</label>
								<input type="number" step="any" id="drp_fees" name="drp_fees" class="form-control drp-required">
							</div>
						</div>

						<!-- Buttons -->
						<div class="col-md-2">
							<button type="submit" class="btn app-btn-primary">Add Income</button>
						</div>

						<div class="col-md-2">
							<a class="btn app-btn-secondary" href="/incomes">Cancel</a>
						</div>
					</form>

					<script>
						document.getElementById("drp-toggle").addEventListener("change", function () {
							const drpFields = document.getElementById("drp-fields");
							const isChecked = this.checked;

							// Show or hide DRP fields container
							drpFields.style.display = isChecked ? "flex" : "none";

							// Toggle required attribute for all .drp-required fields
							const requiredFields = drpFields.querySelectorAll(".drp-required");
							requiredFields.forEach(field => {
								if (isChecked) {
									field.setAttribute("required", "required");
								} else {
									field.removeAttribute("required");
								}
							});
						});
					</script>

			</div>
		</div>
	    
	    <footer class="app-footer">
		    <div class="container text-center py-3">
		         <!--/* This template is free as long as you keep the footer attribution link. If you'd like to use the template without the attribution link, you can buy the commercial license via our website: themes.3rdwavemedia.com Thank you for your support. :) */-->
            <small class="copyright">Developed by <a class="app-link" href="https://www.linkedin.com/in/ivan-yeh-58367122b/" target="_blank">Ivan Yeh</a></small><br><small class="text-muted" style="opacity:0.55;">Prices may be delayed up to 30 minutes.</small>
		       
		    </div>
	    </footer><!--//app-footer-->
    </div><!--//app-wrapper-->    					


	<!-- JavaScript -->
	<script src="{{ url_for('static', filename='assets/plugins/popper.min.js') }}"></script>
	<script src="{{ url_for('static', filename='assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>

	<!-- Charts JS -->
	<script src="{{ url_for('static', filename='assets/plugins/chart.js/chart.min.js') }}"></script>
	<script src="{{ url_for('static', filename='assets/js/index-charts.js') }}"></script>

	<!-- Page-Specific JS -->
	<script src="{{ url_for('static', filename='assets/js/app.js') }}"></script>

	{% include "loading.html" %}

</body>
</html> 

