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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 4.6 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>

    <title>Tip Calculator</title>
</head>

<body>
    <div class="container">
        <h1>Tip Calculator</h1>

        <div class="row mb-2">

            <div class="col">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Total Cost</span>
                    </div>
                    <input id="costinput" value="100" type="number" class="form-control">
                    </>
                </div>
            </div>
            <!-- col -->
        </div>
        <!-- row -->

        <div class="row mt-3">
            <div class="col-md-6">
                <select class="form-control" id="numppl">
                    <option value="questionways">Split the Tip How many Ways</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3" selected>3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <script>
                        for(let i = 6 ; i <= 12; i++) {
                        let option= "<option value='"+i + "'>"+i+"</option>";
                        document.write(option);
                        }
                    </script>
                </select>
            </div>
            <!-- col-md-6 -->






            <div class="col-md-6">

                <select class="form-control" id="tipselect">
                    <option value="questiontip">How Was Your Service</option>
                    <option value="30"> 30% (outstanding) </option>
                    <option value="20"> 20% (Good) </option>
                    <option value="15"> 15% (It was OK) </option>
                    <option value="5"> 5% (Terrible) </option>
                    <option value="-1">Custom</option>
                </select>

            </div>
            <!-- col-md-6 -->

        </div>
        <!-- row -->





        <div class="row mt-2 d-none" id="customTipWrapper">

            <div class="col">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Custom Tip Amount</span>
                    </div>
                    <input type="number" class="form-control" id="tipcustomamount" />
                    <div class="input-group-append">
                        <span class="input-group-text">%</span>
                    </div>

                </div>
            </div>
            <!-- col -->
        </div>
        <!-- row -->


        <div class="row mt-3 mb-3 ">

            <div class="col bg-primary rounded text-white p-4 d-none" id="feedback">
                Total Tip
            </div>
            <!-- col -->
        </div>
        <!-- row -->


        <button type="button" id="calcbttn" class="btn btn-secondary btn-lg btn-block">Calculate</button>

        <script>
            let feedbackDiv = document.getElementById("feedback");
             let tipSelectElem = document.getElementById("tipselect");
             let custTipWraperDiv = document.getElementById("customTipWrapper");
            let custTipInput = document.getElementById("tipcustomamount");
            
            
             tipSelectElem.addEventListener("change", selectChange );
            
            
            window.addEventListener("load", function(){ document.getElementById("costinput").select(); })
            
            
            document.getElementById("calcbttn").addEventListener("click", go);
            
            document.getElementById("tipcustomamount").addEventListener("keyup",function(){
					if(this.value > 100)
					{
					event.preventDefault();
					console.log("cannot give more than 100% tip")
					this.select();
					feedbackDiv.classList.remove("d-none");
					feedbackDiv.classList.remove("bg-primary");
					feedbackDiv.classList.add("bg-danger");
					feedbackDiv.classList.add("d-block");
					feedbackDiv.innerHTML= "Total tip percent cannot exceed 100."
					return ;
					}
					else{

					feedbackDiv.classList.add("d-none");
					feedbackDiv.classList.add("bg-primary");
					feedbackDiv.classList.remove("bg-danger");
					feedbackDiv.classList.remove("d-block");
					feedbackDiv.innerHTML= "Total Tip."

					}


					} );



					function go( ){
					//reboot feedback div
					 feedbackDiv.classList.remove("d-block");
					 feedbackDiv.classList.add("d-none");
					 feedbackDiv.classList.remove("bg-danger");
					 feedbackDiv.classList.add("bg-primary");


					//totalCost
					let cost= document.getElementById("costinput").value
					let numPpl= document.getElementById("numppl").value;
					let tipChoice = tipSelectElem.value;
					let customTipAmount = custTipInput.value;

					 if(cost =="")
					{
					feedbackDiv.classList.add("d-block");
					feedbackDiv.classList.remove("d-none");
					feedbackDiv.classList.remove("bg-primary");
					feedbackDiv.classList.add("bg-danger");
					feedbackDiv.innerHTML= "Enter a cost";
					document.getElementById("costinput").focus();
					return;
					}
					 if(numPpl== "questionways")
					{
					feedbackDiv.classList.add("d-block");
					feedbackDiv.classList.remove("d-none");
					feedbackDiv.classList.remove("bg-primary");
					feedbackDiv.classList.add("bg-danger");
					feedbackDiv.innerHTML= "Choose how many ways to split the tip, please";
					return;
					}

					if(tipChoice  == "questiontip")
					{
					feedbackDiv.classList.add("d-block");
					feedbackDiv.classList.remove("d-none");
					feedbackDiv.classList.remove("bg-primary");
					feedbackDiv.classList.add("bg-danger");
					feedbackDiv.innerHTML= "Please chose a tip option";
					return;
					}

					else if(tipChoice  == "-1")
					{

					if(customTipAmount =="")
					{
					feedbackDiv.classList.add("d-block");
					feedbackDiv.classList.remove("d-none");
					feedbackDiv.classList.remove("bg-primary");
					feedbackDiv.classList.add("bg-danger");
					feedbackDiv.innerHTML= "Enter a number for custom tip percentage";
					custTipInput.focus();
					return;
					}//user left custom tip input field empty


					}// enc of custom tip


					//calculate costs
					//totalCost
					// cost , numPpl,  tipChoice ,  customTipAmount;
					console.log("cost : " + cost)
					console.log("numPpl : " + numPpl)
					let actualTipPercent =  tipChoice == -1 ?  customTipAmount : tipChoice

					//console.log("tipChoice: " + tipChoice)
					//console.log("customTipAmount : " + customTipAmount)
					console.log("actualTipPercent : " + actualTipPercent);
					cost = parseFloat(cost)
					let tipDecimal = parseFloat( actualTipPercent)/100;
					let totalPlusTip = cost * tipDecimal + cost;
					console.log("totalPlusTip  : " + totalPlusTip);
					let perPerson = totalPlusTip/parseFloat(numPpl);
					feedbackDiv.classList.add("d-block");
					feedbackDiv.classList.remove("d-none");
					feedbackDiv.classList.remove("bg-primary");
					feedbackDiv.classList.add("bg-danger");
					feedbackDiv.classList.add("d-block");
					feedbackDiv.innerHTML= " Each person should pay : <i>$" + perPerson.toFixed(2) + "</i>";  
            
            }
            
            
             function selectChange (evt){
             
             
					custTipWraperDiv.classList.add("d-none");
					custTipWraperDiv.classList.remove("d-block");


					console.log(tipSelectElem.value);
					if(tipSelectElem.value ==  "-1")
					{
					console.log("custom") ;
					  custTipWraperDiv.classList.add("d-block");
            }
            }
        </script>



    </div>
    <!-- .container end-->



</body>



<!-- Bootstrap .bundle includes popper -->

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>


<script src="main.js"></script>
<script type="module" src="main2.mjs"></script>

</html>