<main>
        <h1 id="title">Expense Tracker</h1>

        <form onsubmit="return false;" class="inputs">    
            <label for="name">Name:</label>
            <input type="text" name="place" id="place" placeholder="Store or reason" required>

            <div class="inputsSection">
                <div class="inputItem" id="typeItem">
                    <label for="type">Type:</label>
                    <select id="type" name="type">
                        <option value="Cash">Cash</option>
                        <option value="Debit">Debit Card</option>
                        <option value="Credit">Credit Card</option>
                        <option value="Check">Check</option>
                    </select>
                </div>

                <div class="inputItem" id="amountItem">
                    <label for="amount">Amount:</label>
                    <p>$ <input type="number" name="amount" id="amount" min="0" value="0">
                    </p>                    
                </div>
        
                <div class="inputItem" id="dateItem">
                    <label for="date">Date:</label>
                    <input type="date" name="date" id="date" required>
                </div>
            </div>
                
            <button id="addReport">Add Expense</button>
        </form>

        <table class="expense-table">
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Name</th>
                    <th>Date</th>
                    <th>Amount</th>
                    <th></th>
                </tr>
            </thead>

            <tbody id="tableBody">
            </tbody>
         </table>
    </main>    

*, *::after, *::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

:root{
    --main-color: rgb(159, 58, 206);
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1{
    margin-top: 50px;
    color: var(--main-color);
    text-transform: uppercase;
    font-size: 2rem;
}

.inputs{
    display: flex;
    flex-direction: column;
    width: 500px;
}

.inputsSection{
    margin: 10px 0;
    display: flex;
}

.inputItem{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.inputItem:nth-child(2){
    margin: 0 10px;
}

p{
    display: flex;
    align-items: center;
}

#amountItem input{
    margin-left: 5px;
    width: 100%;
}

#typeItem{
    width: 200px;
}

#dateItem{
    width: 200px;
}

input, select{
    height: 30px;
    padding-left: 5px;
}

/*Remove number arrows*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
/************************/

#addReport{
    margin-top: 10px;
    cursor: pointer;
    background-color: var(--main-color);
    outline: none;
    border: none;
    padding: 10px;
    font-weight: bold;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: white;
    border-radius: 30px;
    box-shadow: inset -2px -2px rgba(0, 0, 0, 0.589), 2px 2px 5px rgba(110, 110, 110, 0.788);
    transition: all 0.2s;
}

#addReport:active{
    transform: translateY(3px);
}

#addReport:hover{
    outline: 1px solid black;
}

.deleteButton{
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: rgb(214, 12, 12);
    color: white;
}

.deleteButton:hover{
    transform: scale(1.2);
}

.deleteButton:active{
    background-color: rgb(122, 11, 11);
}


.expense-table {
    margin-top: 30px;
    min-width: 500px;
    border-collapse: collapse;
    font-size: .9rem;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(125, 125, 125, 0.5);
}

.expense-table thead tr{
    background-color: var(--main-color);
    color: white;
    font-weight: bold;
    text-align: left;
}

.expense-table td,
.expense-table th{
    padding: 15px;
}

.expense-table tbody tr{
    border-bottom: 1px solid #bebebe;
}

.expense-table tbody tr:nth-of-type(even){
    background-color: #f3f3f3;
}

.expense-table tbody tr:last-child{
    border-bottom: 5px solid var(--main-color);
}

.expense-table tbody td{
    border-right: 1px solid #bebebe;
}

.expense-table tbody tr td:last-child{
    text-align: center;
}

const table = document.getElementById("tableBody");
const type = document.getElementById("type");
const name = document.getElementById("place");
const date = document.getElementById("date");
const amount = document.getElementById("amount");
const addButton = document.getElementById("addReport");

function ClearFields(){
    name.value = "";
    amount.value = 0;
    date.value = undefined;
    type.value = "Cash";
}

addButton.addEventListener("click", () => {
    if(!date.value || name.value == "") return;
    addElementToTable(type, name, date, amount);
});

function addElementToTable(type, name, date, amount){
    let tr = document.createElement("tr");

    let tdType = document.createElement("td");
    let tdName = document.createElement("td");
    let tdDate = document.createElement("td");
    let tdAmount = document.createElement("td");
    let tdButton = document.createElement("td");


    let txtType = document.createTextNode(type.value);
    let txtName = document.createTextNode(name.value);
    let txtDate = document.createTextNode(date.value);
    let txtAmount = document.createTextNode("$"+amount.value);
    let button = document.createElement("button");

    button.classList.add("deleteButton");
    button.innerHTML = "✖";
    button.addEventListener("click", () => {
        tr.remove();
    });

    tdType.appendChild(txtType);
    tdName.appendChild(txtName);
    tdDate.appendChild(txtDate);
    tdAmount.appendChild(txtAmount);
    tdButton.appendChild(button);

    tr.appendChild(tdType);
    tr.appendChild(tdName);
    tr.appendChild(tdDate);
    tr.appendChild(tdAmount);
    tr.appendChild(tdButton);

    table.appendChild(tr);

    setTimeout(ClearFields, 100);
}