<?php 
//include SITE_ROOT.'./header-footer/header.php';
// in 2021 we started sending custom VORs, where we'd select the month(s) we wanted updated, and just show those.    (The scenario is that someone's been a member for a while, or perhaps
// stopped paying us and lapsed, and we're catching up, or there's a missed month way back or something.)
// so we're creating a fresh page and GIUD, and it'll only show the months we want.



require_once "MU_database2024.php";
$dbObject = new MySQLDB();  //The database connection
$dbObject->logger->logDebug($_SERVER["SCRIPT_FILENAME"] . " Info: ".print_r($_REQUEST, true));

// get the people related to this GUID
$MessageID = $_GET['MessageID'];
$Method = $_GET['method'];
$UnverifiedMonthCount = 0;

$q0 = "select count(*) from Custom_VOR_GUID where GUID = ?";

$PrelimQuery  = $dbObject->connection->prepare($q0);
$PrelimQuery->bindValue(1, $MessageID);
$PrelimQuery->execute();
$GUIDCount = $PrelimQuery->fetchColumn();

if ($GUIDCount > 0) {
    
    $q = "  select distinct concat(cap_first(T.FirstName),' ', cap_first(T.LastName)) TenantName, T.UserID, PM_Name(L.PropertyManagerID) LLName, ";
    $q = $q." GetMonthNameFromID(LP.MonthID) MonthName, concat(GetMonthNameFromID(LP.MonthID),' ',GetYearFromID(LP.MonthID)) RentMonth,  ";
    $q = $q." IsDate(LP.VerifiedDate) IsVerified, LP.VerifiedDate, L.USPSAddress1, L.USPSAddress2, PM.PropertyManagerID, GetMonthNameFromID(LP.MonthID) ThisMonthName,  ";
    $q = $q." concat(GetMonthNameFromID(LP.MonthID),' ',GetYearFromID(LP.MonthID)) ThisRentMonth,  LP.Amount, LP.PaymentID  ";
    $q = $q."  from   Custom_VOR_GUID V inner join Custom_VOR_GUID_LeasePayment VLP on V.CustomVORID = VLP.CustomVORID";
        $q = $q." inner join lease_payment LP on LP.PaymentID = VLP.LeasePaymentID ";
    $q = $q."    inner join lease L on L.LeaseID = LP.LeaseID ";
    $q = $q."    inner join propertymanager PM on PM.PropertyManagerID = V.PropertyManagerID ";
    $q = $q."    inner join tenant T on T.UserID = L.TenantID ";
    $q = $q."    where V.GUID = ?";  
    $q = $q." order by L.LeaseID, LP.MonthID ";

    
    $MonthlyUpdateInfoQuery = $dbObject->connection->prepare($q);
    $MonthlyUpdateInfoQuery->bindValue(1, $MessageID);
    $MonthlyUpdateInfoQuery->execute();
    $MonthlyUpdateData = $MonthlyUpdateInfoQuery->fetchAll(PDO::FETCH_BOTH);
    
    if (!isset($MonthlyUpdateData)) {
        //  need to figure out how to handle a no-found row.  Bounce to a semi-404.
        print "no data found.";
    } else {
        /*
        // debug data
        print "<table border=1>\r\n";
        foreach ($MonthlyUpdateData as $MU_Row)
        {
            print "<tr>\r\n";
            for ($i=0; $i<8; $i++)
            {
            print "<td>".$MU_Row[$i]."</td>";
            }
            print "</tr>\r\n";
        }
        
        print "</table>\r\n";
        */
        // go through these and see if anything needs updating.  If not, just show a simple "you're good!" page with a link to revise.
        $TenantCount = 0;
        $LastTenantName = "";
        $LastMonthID = 0;
        $FirstMonthName = "";
        foreach ($MonthlyUpdateData as $MU_Row) {
            $LLName = $MU_Row["LLName"];
            $LLID = $MU_Row["PropertyManagerID"];
            if ($MU_Row["TenantName"] != $LastTenantName) {
                if ($TenantCount == 0)
                    $TenantName = $MU_Row["TenantName"];
                else
                    $TenantName = $TenantName." and ".$MU_Row["TenantName"];
                $TenantCount++;
                $LastTenantName = $MU_Row["TenantName"];
                $MonthName = $MU_Row["ThisRentMonth"];
                $RentAmount = $MU_Row["Amount"];
            }
			$UnverifiedMonthCount++;
            /*if ($MU_Row["IsVerified"] != 1) {
                if ($FirstMonthName == "")
                    $FirstMonthName = $MU_Row["RentMonth"];
                $UnverifiedMonthCount++;
                //print "Unverified Mohths: ".$UnverifiedMonthCount;
            }*/
        }
    }
} else {
    // ok, we may need to bounce somewhere else 
        header('Location: not_home_v.php'); 
}
?>
<!DOCTYPE html>


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="icon" type="image/x-icon" href="//rentalkharma.com/formsite2015/images/favicon.ico">
        <!-- <link href="../css/main2.css" rel="stylesheet" type="text/css" /> --> <!-- Should be included in every page. Carries CSS of header-footer -->
        
    <title>Rental Kharma Monthly Updates</title>
    
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="./css/main.css">
    
    <link rel="stylesheet" href="./pikaday/css/pikaday.css">
    <link rel="stylesheet" href="./pikaday/css/site.css">
    
 <html  lang="en-US" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" webdriver="true"> 
</head>
<?php 

    
    
?>


</head>
<body>
<style>
.blink {
    -webkit-animation: blink .75s linear infinite;
    -moz-animation: blink .75s linear infinite;
    -ms-animation: blink .75s linear infinite;
    -o-animation: blink .75s linear infinite;
    animation: blink .75s linear infinite;
}
</style>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
    <script src="./pikaday/pikaday.js"></script>

<div class="header-image">
  <a href="https://www.rentalkharma.com/"><img src="./images/Rental-Kharma-Logo1.png"></a>
  <div class="small_banner"></div>
  
</div>

<input type="hidden" id="PropertyManagerID" value="" />


<input type="hidden" id="MessageID" value="<?php echo $MessageID ?>" />
<div class="tabcontainer" id= "tabcontainer">
<h1>Monthly Rent Update for <?php print $LLName; ?></h1>
  
    <div class="topnav" id="myTopnav">
        <button class="tablinks" onclick="showBlock(event, 'Tenants')"   id="defaultOpen" >My Tenants</button>
        <!-- <button class="tablinks" onclick="showBlock(event, 'Preferences')">Preferences</button>-->
        <button class="tablinks" onclick="showBlock(event, 'Details')"   id="alternateOpen" >Rent Details</button>
        <button class="tablinks" onclick="showBlock(event, 'Contact')">Contact RK</button>
        <button class="tablinks" onclick="showBlock(event, 'About')">What we do</button>
        <button class="tablinksicon"   onclick="doHamburger()">&#9776;</a>
    </div> 
     
        
            <div id="Tenants" class="tabcontent">
              
              <h2>Hello, and thanks for taking a quick moment to report your renters' payment status. We're sure you know how much they appreciate your helping them establish good credit with their on time rent payments.</h2>
              <p style="color:orangered; font-weight: bold; font-size: x-large; padding-top: 25px;">This is different from the usual rent verification -- please note the specific months we are asking you about!</p>
              <br>
              
                <?php 
                for ($i = 0; $i < $UnverifiedMonthCount; $i++) {
                    print "<div id=\"ConfirmedMonth_".$i."\" style=\"display:none\">";
                    print "    <h3>You have confirmed your answer for <span style='color:orangered'>".$MonthlyUpdateData[$i]["TenantName"]."</span> for the month of <span style='color:orangered'>".$MonthlyUpdateData[$i]["ThisRentMonth"]."</span> (Refresh to undo) Thank you!</h3>";
                    print "</div>";
                    print "<div id=\"AnswerMonth_".$i."\">";
                    print "<h2>This is about your tenant <span style='color:orangered'>".$MonthlyUpdateData[$i]["TenantName"]."</span> for the month of <span style='color:orangered'>".$MonthlyUpdateData[$i]["ThisRentMonth"]."</span></h2>";
                    print "<h3>Has this tenant paid his/her rent of $".$MonthlyUpdateData[$i]["Amount"]." for ".$MonthlyUpdateData[$i]["ThisRentMonth"]." on time, or less than 30 days late?</h3>";
                
                    ?>
              
                <div class="answerbox">
                    <input type="hidden" name="PaymentID_<?php echo $i ?>" id="PaymentID_<?php echo $i ?>" value="<?php echo $MonthlyUpdateData[$i]["PaymentID"]; ?>">
                    <input type="hidden" name="Tenant_<?php echo $i ?>" id="Tenant_<?php echo $i ?>" value="<?php echo $MonthlyUpdateData[$i]["UserID"]; ?>">
                    <input type="hidden" name="MonthLabel_<?php echo $i ?>" id="MonthLabel_<?php echo $i ?>" value="<?php echo $MonthlyUpdateData[$i]["TenantName"]." for ".$MonthlyUpdateData[$i]["ThisRentMonth"]; ?>">
                    <button class="rentbutton" id="OnTimeButton_<?php echo $i ?>" onclick="MUButtonClick('OnTimeButton',<?php echo $i ?>)" style="background-color:Green">Yes, on time</button>
                    <div id="OnTimeConfirm_<?php echo $i ?>" style="display:none;" >
                    <button class="confirmbutton" onclick="ConfirmMUClick('OnTime',<?php echo $i ?>)" id="ConfirmOnTimeButton_<?php echo $i ?>" style="background-color:Green">Confirm</button>
                    </div>
                </div>
                <div class="answerbox">
                    <button class="rentbutton" onclick="MUButtonClick('LateButton',<?php echo $i ?>)" id="LateButton_<?php echo $i ?>" style="background-color:Orange">Paid, but late</button>
                    <div id="LateConfirm_<?php echo $i ?>" style="display:none;" >
                    <div class="followupQuestion"><h3>OK. Now, how late?</h3> <select id="Lateness_<?php echo $i ?>">
                        <option value="30">Under 30 days late</option>
                        <option value="31">31-60 days late</option>
                        <option value="61">61-90 days late</option>
                        <option value="91">91-120 days late</option>
                        <option value="121">More than 120 days late</option>
                        </select> 
                        </div>
                        <div style="display:inline-block" >
                        <button class="confirmbutton" onclick="ConfirmMUClick('Late',<?php echo $i ?>)" style="background-color:Orange">Confirm</button>
                        </div>
                    </div>
                </div>
              
              <!-- <div class="answerbox">
                <button class="rentbutton" onclick="MUButtonClick('MoveOutButton')" id="MoveOutButton" style="background-color:Orange">Moved Out</button>
                <div id="MoveOutConfirm" style="display:none;" >
                  <div class="followupQuestion"><h3>When did they move out?</h3> 
                  <input type="text" id="MoveOutDate">
                  </div>
                  <div class="followupQuestion"><h3>Was their rent paid up?</h3> 
                  <select id="LeaseStatusCode">
                      <option value="0">Yes</option>
                      <option value="11">They owe rent</option>
                      <option value="12">Transferred to collections</option>
                      <option value="99">Other</option>
                      
                    </select> 
                    
                    </div>
                    <div class="followupQuestion"><h3>Add any extra details if needed:</h3> 
                        <textarea rows="4" cols="35" id="MoveOutDetails"> </textarea>
                    </div>
                    <div style="display:inline-block" >
                      <button class="confirmbutton" onclick="ConfirmMUClick('MoveOut')" style="background-color:Orange">Confirm</button>
                    </div>
                </div>
                </div> -->
                <div class="answerbox">
                    <button class="rentbutton" onclick="MUButtonClick('ComplicatedButton', <?php echo $i ?>)" id="ComplicatedButton_<?php echo $i ?>" style="background-color:Orange">It's complicated</button>
                    <div id="ComplicatedConfirm_<?php echo $i ?>" style="display:none;" >
                    <div class="followupQuestion"><h3>OK, what's the situation?</h3> 
                    <textarea rows="4" cols="35" id="ComplicatedAnswer_<?php echo $i ?>"> </textarea>
                    </div>
                    
                        <div style="display:inline-block" >
                        <button class="confirmbutton" onclick="ConfirmMUClick('Complicated',<?php echo $i ?>)" style="background-color:Orange">Confirm</button>
                        </div>
                    </div>
                </div>
                <div class="answerbox">
                    <button class="rentbutton" onclick="MUButtonClick('NotPaidButton',<?php echo $i ?>)" id="NotPaidButton_<?php echo $i ?>" style="background-color:Red">Has Not Paid</button>
                    <div id="NotPaidConfirm_<?php echo $i ?>" style="display:none;" >
                    <button class="confirmbutton" onclick="ConfirmMUClick('NotPaid',<?php echo $i ?>)" id="ConfirmNotPaidButton_<?php echo $i ?>" style="background-color:Red">Confirm</button>
                    </div>
                </div>
                    <?php 
                    print "</div>";
                    print "<hr>";
                }  // closing for loop from line 178 
                ?>
            </div>

            <div  style="display:none; text-align: center;" id="WaitBox" ><h3 >Please wait while we process your answers.  Thank you for confirming!<br><span class="blink">(Don't close this window!)</span></h3>
                <img src="images/ajax-loader_opq.gif" />
            </div>
			<!-- 
            <div id="Preferences" class="tabcontent">
              <h2>How would you like us to contact you for updates?</h2>
                <h3>  We'll need to get in touch with you every month.  What's the best way to do it?</h3>
                <div class="answerbox">
                <button class="rentbutton" id="EmailButton" onclick="ContactButtonClick('EmailButton')" style="background-color:Green">Email me</button>
                <div id="EmailConfirm" style="display:none;" >
                  <div class="followupQuestion"><h3>Email address:</h3> 
                  <input type="text" id="EmailAddress" value="someAddress@yahoo.com" >
                  </div>
                  
                    <div style="display:inline-block" >
                      <button class="confirmbutton" onclick="ConfirmClick('Email')" style="background-color:Green">Confirm</button>
                    </div>
                </div>
              </div>
              <div class="answerbox">
                <button class="rentbutton" id="TextButton" onclick="ContactButtonClick('TextButton')" style="background-color:Green">Text me</button>
                <div id="TextConfirm" style="display:none;" >
                  <div class="followupQuestion"><h3>Cell number:</h3> 
                  <input type="text" id="TextNumber" value="(222)-555-4444">
                  </div>
                  
                    <div style="display:inline-block" >
                      <button class="confirmbutton" onclick="ConfirmClick('Text')" style="background-color:Green">Confirm</button>
                    </div>
                </div>
              </div>
              
              <div class="answerbox">
                <button class="rentbutton" id="PhoneButton" onclick="ContactButtonClick('PhoneButton')" style="background-color:Green">Call me</button>
                <div id="PhoneConfirm" style="display:none;" >
                  <div class="followupQuestion"><h3>Phone number:</h3> 
                  <input type="text" id="PhoneNumber" value="(222)-555-4444">
                  </div>
                  
                    <div style="display:inline-block" >
                      <button class="confirmbutton" onclick="ConfirmClick('Phone')" style="background-color:Green">Confirm</button>
                    </div>
                </div>
              </div>
              
              <div class="answerbox">
                <button class="rentbutton" id="FaxButton" onclick="ContactButtonClick('FaxButton')" style="background-color:Green">Fax me</button>
                <div id="FaxConfirm" style="display:none;" >
                  <div class="followupQuestion"><h3>Fax number:</h3> 
                  <input type="text" id="FaxNumber" value="(222)-555-4444" >
                  </div>
                  
                    <div style="display:inline-block" >
                      <button class="confirmbutton" onclick="ConfirmClick('Fax')" style="background-color:Green">Confirm</button>
                    </div>
                </div>
              </div>
            </div>
            -->


            <div id="About" class="tabcontent">
              <h2>What Rental Kharma does</h2>
              <br>
                <h3>Your tenant(s), <?php echo $TenantName ?>, has hired us to maintain a record of their rent payments to you.  We then report their rental payment history, good or bad, to Trans Union and Equifax
                and it becomes a part of their credit report.  We use this to help them improve their credit score!  <a href="https://www.rentalkharma.com">Learn more</a></h3>
            </div>

        
            <div id="Details" class="tabcontent">
              
                <h2>Rent Details for <?php print $TenantName ?></h2>
                <div class="answerbox">
                    <?php 
                    $LastTenantName = "";
                    $TenantCount = 0;
                    if (is_array($MonthlyUpdateData)) {
                        foreach ($MonthlyUpdateData as $MU_Row) {
                            if ($MU_Row["TenantName"] != $LastTenantName) {
                                $LastTenantName = $MU_Row["TenantName"];
                                if ($TenantCount > 0)
                                print "</ul>\r\n";
                                $TenantCount++; 
                                print "<h3> Payment History for ".$TenantName." at ".$MU_Row["USPSAddress1"]."</h3>\r\n";
                                print "<ul>\r\n";
                            }
                            if ($MU_Row["IsVerified"] == 1)
                                print "<li>&bull;&nbsp;".$MU_Row["RentMonth"]." confirmed on ".$MU_Row["VerifiedDate"]."</li>\r\n";
                            else 
                                print "<li>&bull;&nbsp;".$MU_Row["RentMonth"]." <b>NOT confirmed</b>.</li>\r\n";
                        } 
                        print "<ul>\r\n";
                    }     
                    ?>
                </div>
              </div>

        
        <div id="Contact" class="tabcontent">
          <h3>Contact Rental Kharma Support</h3>
          <a name="form1612304568" id="formAnchor1612304568"></a>
            <script type="text/javascript" src="https://fs30.formsite.com/include/form/embedManager.js?1612304568"></script>
            <script type="text/javascript">
            EmbedManager.embed({
                key: "https://fs30.formsite.com/res/showFormEmbed?EParam=iGs2D6QRb6KSoHptnLU28gfFJIaUFMUjngbtbHWZMa4%3D&1612304568",
                width: "100%",
                prePopulate: {"3":"<?php print $LLName ?>","8":"<?php print $MessageID ?>","9":"<?php print $LLID ?>"},
                mobileResponsive: true
            });
            </script>
        </div>
</div>
    
</div>
<script type="text/javascript" >

// Get the element with id="defaultOpen" and click on it
<?php if ($UnverifiedMonthCount == 0) {      ?>
    document.getElementById("alternateOpen").click();
<?php } else {  ?>
    document.getElementById("defaultOpen").click();
<?php } ?>
var unconfirmedMonthCount ;
    var submitData;
$( document ).ready(function() {
    unconfirmedMonthCount = <?php echo $UnverifiedMonthCount; ?>;
    submitData = [];
    
});

function clearAllButtons(inputButton, rowNumber)
{
        
    OnTimeButton = document.getElementById("OnTimeButton"+"_"+rowNumber);
    NotPaidButton = document.getElementById("NotPaidButton"+"_"+rowNumber);
    LateButton = document.getElementById("LateButton"+"_"+rowNumber);
    ComplicatedButton = document.getElementById("ComplicatedButton"+"_"+rowNumber);
    MoveOutButton = document.getElementById("MoveOutButton"+"_"+rowNumber);
    if (inputButton != OnTimeButton)
    {
        document.getElementById("OnTimeConfirm"+"_"+rowNumber).style.display="none";
        document.getElementById("OnTimeConfirm"+"_"+rowNumber).parentNode.style.border = "none";
        OnTimeButton.style.color="white";
        OnTimeButton.style.backgroundColor = "green";
    }
    if (inputButton != NotPaidButton)
    {
        document.getElementById("NotPaidConfirm"+"_"+rowNumber).style.display="none";
        document.getElementById("NotPaidConfirm"+"_"+rowNumber).parentNode.style.border = "none";
        NotPaidButton.style.color="white";
        NotPaidButton.style.backgroundColor="red";
    }
    if (inputButton != LateButton)
    {
        document.getElementById("LateConfirm"+"_"+rowNumber).style.display="none";
        document.getElementById("LateConfirm"+"_"+rowNumber).parentNode.style.border = "none";
        LateButton.style.color="white";
        LateButton.style.backgroundColor="orange";
    }
    if (inputButton != ComplicatedButton)
    {
        document.getElementById("ComplicatedConfirm"+"_"+rowNumber).style.display="none";
        document.getElementById("ComplicatedConfirm"+"_"+rowNumber).parentNode.style.border = "none";
        ComplicatedButton.style.color="white";
        ComplicatedButton.style.backgroundColor="orange";
    }
    /*
    if (inputButton != MoveOutButton)
    {
        document.getElementById("MoveOutConfirm"+"_"+rowNumber).style.display="none";
        document.getElementById("MoveOutConfirm"+"_"+rowNumber).parentNode.style.border = "none";
        MoveOutButton.style.color="white";
        MoveOutButton.style.backgroundColor="orange";
    }
    */
}

function clearAllContactButtons(inputButton)
{
        
    EmailButton = document.getElementById("EmailButton");
    TextButton= document.getElementById("TextButton");
    PhoneButton = document.getElementById("PhoneButton");
    FaxButton = document.getElementById("FaxButton");
    
    if (inputButton != EmailButton)
    {
        document.getElementById("EmailConfirm").style.display="none";
        document.getElementById("EmailConfirm").parentNode.style.border = "none";
        EmailButton.style.color="white";
        EmailButton.style.backgroundColor = "green";
    }
    if (inputButton != TextButton)
    {
        document.getElementById("TextConfirm").style.display="none";
        document.getElementById("TextConfirm").parentNode.style.border = "none";
        TextButton.style.color="white";
        TextButton.style.backgroundColor="green";
    }
    if (inputButton != PhoneButton)
    {
        document.getElementById("PhoneConfirm").style.display="none";
        document.getElementById("PhoneConfirm").parentNode.style.border = "none";
        PhoneButton.style.color="white";
        PhoneButton.style.backgroundColor="green";
    }
    if (inputButton != FaxButton)
    {
        document.getElementById("FaxConfirm").style.display="none";
        document.getElementById("FaxConfirm").parentNode.style.border = "none";
        FaxButton.style.color="white";
        FaxButton.style.backgroundColor="green";
    }
    
}

function MUButtonClick(elementName, rowNumber)
{
    var elementActualID = elementName + "_" + rowNumber;
    //alert("MUButtonClick: " + elementName + "_" + rowNumber);
    buttonClicked = document.getElementById(elementActualID);
    clearAllButtons(buttonClicked, rowNumber);
    confirmDivName = elementActualID.replace("Button","Confirm");
    //alert("Confirm Div: " + confirmDivName)
    confirmDiv = document.getElementById(confirmDivName);
    parentDiv = confirmDiv.parentNode;
    //alert("Confirm Parent Div: " + parentDiv.id)
    var isPressed = (buttonClicked.style.color=="black");
    if (isPressed)
    {
        confirmDiv.style.display = "none";
        buttonClicked.style.color="white";
        parentDiv.style.border = "none";
        var curColor = buttonClicked.style.backgroundColor;
        var newColor;
        switch (curColor.toLowerCase())
        {
            case "lime": newColor = "green"; break;
            case "gold": newColor = "orange"; break;
            case "lightpink": newColor = "red"; break;
        }
        buttonClicked.style.backgroundColor = newColor;
    } else
    {
        confirmDiv.style.display = "block";
        buttonClicked.style.color="black";
        parentDiv.style.border ="1px solid black";
        var curColor = buttonClicked.style.backgroundColor;
        switch (curColor.toLowerCase())
        {
            case "green": newColor = "lime"; break;
            case "orange": newColor = "gold"; break;
            case "red": newColor = "lightpink"; break;
        }
        buttonClicked.style.backgroundColor = newColor;
    }
}

function ContactButtonClick(elementName)
{
    
    buttonClicked = document.getElementById(elementName);
    clearAllContactButtons(buttonClicked);
    confirmDivName = elementName.replace("Button","Confirm");
    confirmDiv = document.getElementById(confirmDivName);
    parentDiv = confirmDiv.parentNode;
    var isPressed = (buttonClicked.style.color=="black");
    if (isPressed)
    {
        confirmDiv.style.display = "none";
        buttonClicked.style.color="white";
        parentDiv.style.border = "none";
        var curColor = buttonClicked.style.backgroundColor;
        var newColor;
        switch (curColor.toLowerCase())
        {
            case "lime": newColor = "green"; break;
            case "gold": newColor = "orange"; break;
            case "lightpink": newColor = "red"; break;
        }
        buttonClicked.style.backgroundColor = newColor;
    } else
    {
        confirmDiv.style.display = "block";
        buttonClicked.style.color="black";
        parentDiv.style.border ="1px solid black";
        var curColor = buttonClicked.style.backgroundColor;
        switch (curColor.toLowerCase())
        {
            case "green": newColor = "lime"; break;
            case "orange": newColor = "gold"; break;
            case "red": newColor = "lightpink"; break;
        }
        buttonClicked.style.backgroundColor = newColor;
    }
}

function ConfirmMUClick(ConfirmType, rowNumber)
{
 //ConfirmType MoveOut|OnTime|NotPaid|Complicated|Late    
    //var params = {};
     
     var bConfirmed=false;
     var params;
     var _paymentIDElementID = "#PaymentID_"+rowNumber;
     var _tenantIDElementID = "#TenantID_"+rowNumber;
     var _latenessElementID = "#Lateness_"+rowNumber;
     var _complicatedAnswerElementID = "#ComplicatedAnswer_"+rowNumber;
     var _moveOutDateElementID = "#MoveOutDate_"+rowNumber;
     var _moveOutDetailsElementID = "#MoveOutDetails_"+rowNumber;
     var _moveOutStatusElementID = "#LeaseStatusCode_"+rowNumber;
     var _moveOutStatusTextElementID = "#LeaseStatusCode_" + rowNumber + " option:selected";
     var _monthLabelElementID = "#MonthLabel_" + rowNumber;
 
 
     var _paymentID = $(_paymentIDElementID).val();
     var _tenantID =$(_tenantIDElementID).val();
	 var _monthLabel = $(_monthLabelElementID).val();
     //alert("payment ID: " + _paymentID);
     //alert("Unconfirmed months: " + unconfirmedMonthCount);
     switch (ConfirmType)
     {
         case "OnTime":
           var _messageID = $("#MessageID").val();
           params = { result: ConfirmType, "MessageID":_messageID, "Method":"WWW", "PaymentID":_paymentID, "TenantID":_tenantID, "MonthLabel":_monthLabel};
           bConfirmed=true;
           break;
         case "NotPaid":
         var _messageID = $("#MessageID").val();
           params = { result: ConfirmType, "MessageID":_messageID, "Method":"WWW", "PaymentID":_paymentID, "TenantID":_tenantID, "MonthLabel":_monthLabel};
           bConfirmed=true;
           break;
         case "Late":
         var _messageID = $("#MessageID").val();
           var _lateAmount = $(_latenessElementID).val();
           params = { result: ConfirmType, lateAmount:_lateAmount, "MessageID":_messageID, "Method":"WWW", "PaymentID":_paymentID, "TenantID":_tenantID, "MonthLabel":_monthLabel };
           bConfirmed=true;
           break;
         case "MoveOut":
           var _moveOutDate = $(_moveOutDateElementID).val();
           var _moveOutStatus = $(_moveOutStatusElementID).val();
           var _moveOutStatusText =  $().text(_moveOutStatusTextElementID);
           var _messageID = $("#MessageID").val();
           var _moveOutDetails = $(_moveOutDetailsElementID).val();
           if (!isDate(_moveOutDate))
           {
               alert("Please enter a move-out date.");
               return;
           }
           if (_moveOutStatus == "99" && _moveOutDetails.trim() == "")
           {
               alert("You selected 'Other' as their status upon move-out.  Please tell us a little more about what's going on in the text box.");
               return;
           }
           params = { result: ConfirmType, "moveOutDate":_moveOutDate, "moveOutStatus":_moveOutStatus , "moveOutStatusText":_moveOutStatusText , "MessageID":_messageID, "Method":"WWW", "complicatedAnswer":_moveOutDetails, "PaymentID":_paymentID, "TenantID":_tenantID, "MonthLabel":_monthLabel};
           bConfirmed=true;
           break;
         case "Complicated":
           var _messageID = $("#MessageID").val();
           var _textBox = $(_complicatedAnswerElementID).val();
           //var _PropertyManagerID = $("#PropertyManagerID").val();
           params = { result: ConfirmType, "complicatedAnswer":_textBox,  "MessageID":_messageID, "Method":"WWW", "PaymentID":_paymentID, "TenantID":_tenantID, "MonthLabel":_monthLabel };
           bConfirmed=true;
           break;
     }
     if (bConfirmed)
     {
        unconfirmedMonthCount--;
        submitData[rowNumber] = params;
        showDivConfirmed(rowNumber);
     }
           
     if (unconfirmedMonthCount < 1)
     {
         // submit
             
            //submitData[0] = <?php echo $UnverifiedMonthCount; ?>;
            //alert("Parameters: " + JSON.stringify(submitData)); 
            $("#WaitBox").show();
            var posting = $.post( "MU_Custom_Confirm_2021_c.php", JSON.stringify(submitData) );
         
                // Put the results in a div
                posting.done(function( data, status ) {
              //alert(data);
              //if (data.includes("successfully"))
              //{
                $("#WaitBox").hide();
                  alert(data);
              //}
          });
 
     }

}

function ConfirmClick(ContactType)
{
    // confirmtype: Fax|Text|Email|Phone
      var _messageID = $("#MessageID").val();
     switch (ContactType)
    {
         case "Phone":
            var _ContactInfo = $("#PhoneNumber").val();
            break;
         case "Text":
            var _ContactInfo = $("#TextNumber").val();
            break;
         case "Email":
            var _ContactInfo = $("#EmailAddress").val();
            break;
         case "Fax":
            var _ContactInfo = $("#FaxNumber").val();
            break;
    }
    var params = { "ContactType": ContactType, "ContactInfo":_ContactInfo, "MessageID":_messageID };
    //alert("Parameters: " + JSON.stringify(params)); 
    var posting = $.post( "MU_Preferences_2017_c.php", params );
        // Put the results in a div
        posting.done(function( data, status ) {
        //alert(data);
        //if (data.includes("successfully"))
        //{
            // showBlock(event, 'Signups');
            alert(data);
        //}
    });
}


function showBlock(evt, divName) {
    const mq = window.matchMedia( "(max-width:600px)" );
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
        if (mq.matches)
        {
            tablinks[i].style.display = "none";
        }
    }
    document.getElementById(divName).style.display = "block";
    evt.currentTarget.className += " active";
    if (mq.matches)
    {
        evt.currentTarget.style.display = "block";
    }
    
    
}

function showDivConfirmed(rowNumber) {
    var answerDivName; 
    var confirmedDivName;
    answerDivName = "AnswerMonth_" + rowNumber;
    confirmedDivName = "ConfirmedMonth_" + rowNumber;
    
    document.getElementById(answerDivName).style.display = "none";
    document.getElementById(confirmedDivName).style.display = "block";
}


/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function doHamburger() {
    var i, tablinks;
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.display = "block";
    }
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
} 

function closeHamburger() {
    var x = document.getElementById("myTopnav");
        x.className = "topnav";
} 

function isDate(d)
{
    
    d2 = moment(d, 'YYYY-MM-DD');
    return d2.isValid();
    
}    
    var picker = new Pikaday(
    {
        field: document.getElementById('MoveOutDate'),
        firstDay: 1,
        minDate: new Date(2010,01,01),
        maxDate: new Date(2026, 12, 31),
        yearRange: [2014,2026],
		
    });

 
</script>
     
</body>
</html> 