<?php
/**
 * Registration form for TC-Eröffnungskomitee
 * @author: René Czerny - rene.czerny@gmx.at
 * 
 * To reuse form for new year, just change config.php accordingly. Make sure to check for right permissions!
 */
require_once('Db.class.php');
require_once('config.php');
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen"/>
    <link type="text/css" rel="stylesheet" href="css/custom.css" media="screen"/>
	<link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
	<link rel="icon" type="image/png" sizes="192x192"  href="favicons/android-icon-192x192.png">
	<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
	<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
	<link rel="manifest" href="favicons/manifest.json">
	<meta name="msapplication-TileColor" content="#ffffff">
	<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
	<meta name="theme-color" content="#ffffff">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Voranmeldung zum Eröffnungskomitee - Ball der Industrie und Technik <?= $BALLYEAR ?></title>
</head>

<body>
<header>
	<img src="img/logo.png" />
    <h1>Ball der Industrie und Technik <?= $BALLYEAR ?></h1>
	<h2 class="balldate"><?= $BALLDATE ?></h2>
	<?php
	if ($CLOSED) {
		echo "<h2>Die Voranmeldung zum Eröffnungskomitee ist für das Jahr $BALLYEAR schon geschlossen!</h2>";
	} else {
		
	?>
    <h2>Voranmeldung zum Eröffnungskomitee</h2>
</header>
<main>
    <?php
	// backend input validation 
    $errorMessage = '';
    if (!empty($_POST)) {
        if (isset($_POST['gender'])) {
            if ($_POST['gender'] !== 'm' && $_POST['gender'] !== 'w')
                $errorMessage .= "<br />" . "Geschlecht ist ungültig!";
        } else $errorMessage .= "<br />" . "Geschlecht wurde nicht ausgewählt!";
        if (!isset($_POST['birthdate_submit'])) $errorMessage .= "<br />" .  "Geburtsdatum wurde nicht ausgewählt!";
        else if (preg_match("/^[12][0-9]{3}-[0-1]?[0-9]-[0-3]?[0-9]$/", $_POST['birthdate_submit']) !== 1)
            $errorMessage .= "<br />" . "Geburtsdatums-Format ist ungültig.";
        if (!isset($_POST['firstname'])) $errorMessage .= "<br />" . "Vorname wurde nicht eingetragen!";
        if (!isset($_POST['data-protection'])) $errorMessage .= "<br />" . "Ein Zustimmen zur Datenschutzerklärung ist notwendig um sich für das Eröffnungskomitee zu bewerben!";
        if (!isset($_POST['lastname'])) $errorMessage .= "<br />" . "Nachname wurde nicht eingetragen!";
        if (!isset($_POST['address'])) $errorMessage .= "<br />" . "Adresse wurde nicht eingetragen!";
        if (!isset($_POST['zip'])) $errorMessage .= "<br />" . "Postleitzahl wurde nicht eingetragen!";
        if (!isset($_POST['city'])) $errorMessage .= "<br />" . "Ort wurde nicht eingetragen!";
        if (!isset($_POST['email'])) $errorMessage .= "<br />" . "Email-Adresse wurde nicht eingetragen!";
        else {
            if (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) $errorMessage .= "<br />" . "Email-Adresse ist ungültig!";
        }
        if (!isset($_POST['phone'])) $errorMessage .= "<br />" . "Telefon-Nummer wurde nicht eingetragen!";
        if (!isset($_POST['height'])) $errorMessage .= "<br />" . "Größe wurde nicht eingetragen!";
        else {
            if (filter_var($_POST['height'], FILTER_VALIDATE_INT, array("options" => array("min_range"=>100, "max_range"=>250))) === false)
                $errorMessage .= "<br />" . "Größe ist ungültig! Bitte gib deine Größe in Zentimeter an (min. 100 und max. 250 cm).";
        }
        if (!isset($_POST['occupation'])) $errorMessage .= "<br />" . "Studium / Beschäftigung wurde nicht eingetragen!";
		if (!isset($_POST['appointment'])) $errorMessage .= "<br />" . "Wunschtermin wurde nicht ausgewählt!";
        if (!isset($_FILES['photo-url'])) {
            $errorMessage .= "<br />" . "Portrait-Foto wurde nicht hochgeladen!";
        } else {
            // check uploaded photo
            if (!file_exists("photos/" . $BALLYEAR)) {
                mkdir("photos/" . $BALLYEAR, 0755, true);
            }
            $target_dir = "photos/" . $BALLYEAR . '/';
            $target_file = $target_dir . $_POST['lastname'] . '_' . $_POST['firstname'] . '_' . uniqid() . preg_replace('/[^a-zA-Z0-9_\.-]/', '', basename($_FILES["photo-url"]["name"]));
            $uploadOk = 1;
            $imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
            // Check if image file is an actual image or fake image
            $check = getimagesize($_FILES["photo-url"]["tmp_name"]);
            if ($check === false) {
                $errorMessage .= "<br />" . "Die hochgeladene Datei ist keine Bilddatei!";
            }
            // Check file size
            if ($_FILES["photo-url"]["size"] > 4000000) {
                $errorMessage .= "<br />" . "Das hochgeladene Foto darf maximal 4MB groß sein!";
                $uploadOk = 0;
            }
            // Allow certain file formats
            if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
                && $imageFileType != "gif" && $imageFileType != "tiff" && $imageFileType != "tif"
                && $imageFileType != "bmp"
            ) {
                $errorMessage .= "<br />" . "Nur folgende Dateitypen sind für das Foto erlaubt: JPG, JPEG, PNG, TIFF, BMP und GIF";
                $uploadOk = 0;
            }
            // Upload file
            if (!move_uploaded_file($_FILES["photo-url"]["tmp_name"], $target_file)) {
                $errorMessage .= "<br />" . "Die Datei konnte nicht hochgeladen werden! Bitte versuche es noch einmal.";
            }
        }
    }
 
    if (empty($_POST) || $errorMessage != "") {
		if ($errorMessage != "") {
			?>
	        <div class="error-message">
				<i class="material-icons">report_problem</i>
	            <p><?= $errorMessage ?></p><br />
				<p>Sollte das Problem bestehen, so schreibe bitte an <a href="mailto:bp@ball.tc">bp@ball.tc</a>.</p>
	        </div>
		<?php
		}
		// REGISTRATION FORM
        ?>
        <form class="registration-form s12" action="index.php" method="POST" enctype="multipart/form-data">
            <div class="row">
                <div class="switch input-field col s6">
                    <i class="material-icons prefix">account_circle</i>
                    <select id="gender" name="gender" required>
                        <option value="" disabled selected>Bitte auswählen</option>
                        <option value="m" <?= isset($_POST['gender']) && $_POST['gender'] == 'm' ? 'selected' : '' ?>>Männlich</option>
                        <option value="w" <?= isset($_POST['gender']) && $_POST['address'] == 'w' ? 'selected' : '' ?>>Weiblich</option>
                    </select>
                    <label>Geschlecht</label>
                </div>
                <div class="input-field col s6">
                    <i class="material-icons prefix">today</i>
                    <input id="birthdate" name="birthdate" type="text" class="datepicker validate" onfocus="javascript:openDP();" value="<?= isset($_POST['birthdate']) ? $_POST['birthdate'] : '' ?>" required>
                    <label for="birthdate">Geburtsdatum</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s6">
                    <i class="material-icons prefix"></i>
                    <input id="firstname" name="firstname" type="text" class="validate" maxlength="255" value="<?= isset($_POST['firstname']) ? $_POST['firstname'] : '' ?>" required>
                    <label for="firstname">Vorname</label>
                </div>
                <div class="input-field col s6">
                    <i class="material-icons prefix"></i>
                    <input id="lastname" name="lastname" type="text" class="validate" maxlength="255" value="<?= isset($_POST['lastname']) ? $_POST['lastname'] : '' ?>" required>
                    <label for="lastname">Nachname</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <i class="material-icons prefix">home</i>
                    <input id="address" name="address" type="text" class="validate" maxlength="255" value="<?= isset($_POST['address']) ? $_POST['address'] : '' ?>" required>
                    <label for="address">Adresse</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s4">
                    <i class="material-icons prefix"></i>
                    <input id="zip" name="zip" type="text" class="validate" maxlength="255" value="<?= isset($_POST['zip']) ? $_POST['zip'] : '' ?>" required>
                    <label for="zip">PLZ</label>
                </div>
                <div class="input-field col s8">
                    <i class="material-icons prefix"></i>
                    <input id="city" name="city" type="text" class="validate" maxlength="255" value="<?= isset($_POST['city']) ? $_POST['city'] : '' ?>" required>
                    <label for="city">Ort</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s6">
                    <i class="material-icons prefix">mail_outline</i>
                    <input id="email" name="email" type="email" data-error="Bitte eine gültige Email-Adresse eingeben"
                           class="validate" maxlength="255" value="<?= isset($_POST['email']) ? $_POST['email'] : '' ?>" required>
                    <label for="email">Email</label>
                </div>
                <div class="input-field col s6">
                    <i class="material-icons prefix">phone</i>
                    <input id="phone" name="phone" type="tel" class="validate" maxlength="255" value="<?= isset($_POST['phone']) ? $_POST['phone'] : '' ?>" required>
                    <label for="phone">Mobil-Telefon</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s4">
                    <i class="material-icons prefix">swap_vert</i>
                    <input type="number" name="height" id="height" class="validate" min="100" max="250"
                           value="<?= isset($_POST['height']) ? $_POST['height'] : '' ?>" required>
                    <label for="height">Größe in cm</label>
                </div>
                <div class="input-field col s8">
                    <i class="material-icons prefix">store</i>
                    <input type="text" name="occupation" id="occupation" class="validate" maxlength="255" value="<?= isset($_POST['occupation']) ? $_POST['occupation'] : '' ?>" required>
                    <label for="occupation">Studium / sonstige Beschäftigung</label>
                </div>
            </div>
            <div class="row">
                <div class="file-field input-field s6">
                    <div class="btn">
                        <span>Foto</span>
                        <input type="file" name="photo-url" id="photo-url">
                    </div>
                    <div class="file-path-wrapper s7">
                        <input class="file-path validate" placeholder="Bitte lade Dein Portrait-Foto hoch" type="text"
                               maxlength="255" required>
                    </div>
                </div>
            </div>

            <input class="with-gap" name="group1" type="radio" id="test3"  />

            <div class="row">
                <div class="input-field col s12">
                    <i class="material-icons prefix">assignment</i>
                    <span class="choose-appointment">Bitte wähle Deinen Vorstell-Termin aus:</span>
                    <input name="appointment" id="appointment1" type="radio" class="with-gap validate" value="<?= $VORSTELL_DATE1 ?>" <?= isset($_POST['appointment']) && $_POST['appointment'] == $VORSTELL_DATE1 ? 'checked' : '' ?> required>
                    <label for="appointment1"><?= $VORSTELL_DATE1 ?></label>
                    <input name="appointment" id="appointment2" type="radio" class="with-gap validate" value="<?= $VORSTELL_DATE2 ?>" <?= isset($_POST['appointment']) && $_POST['appointment'] == $VORSTELL_DATE2 ? 'checked' : '' ?> required>
                    <label for="appointment2"><?= $VORSTELL_DATE2 ?></label>
                    <input name="appointment" id="appointment3" type="radio" class="with-gap validate" value="<?= $VORSTELL_DATE3 ?>" <?= isset($_POST['appointment']) && $_POST['appointment'] == $VORSTELL_DATE3 ? 'checked' : '' ?> required>
                    <label for="appointment3"><?= $VORSTELL_DATE3 ?></label>
                </div>
            </div>
            <div class="row"> 
                <div class="col s12">
                    <p class="data-protection-paragraph">
                        <input type="checkbox" name="data-protection" id="data-protection" class="validate" onchange="dataProtectionValidation()" required>
                    <label for="data-protection">
                        <span>Ich habe die <a href="./Datenschutzerklärung.pdf" target="_blank">Datenschutzerklärung</a> gelesen und verstanden und stimme ihr vollinhaltlich zu.</span>
                    </label>
                    </p>
                    <!-- custom error message, as Materialze does not show native HTML5 validation message -->
                    <div class="ws-errorbox data-protection-error" style="display: none;" id="data-protection-error">
                        <p class="ws-errormessage">Um sich anzumelden ist es notwendig der Datenschutzerklärung zuzustimmen!</p></div>
                </div>
            </div>
            <div class="row">
                <div class="range-field col s6">
                    <i class="material-icons prefix"></i>
                    <button class="btn waves-effect waves-light" type="submit">Absenden
                        <i class="material-icons right">send</i>
                    </button>
                </div>
            </div>
        </form>
        <?php
    } else {
		echo "<div class=\"result-container\">";
        $db = new Db();
        // strip spaces and cut string length
        $gender = trim($_POST['gender']);
        $birthdate = trim($_POST['birthdate_submit']);
        $firstname = ucfirst(substr(trim($_POST['firstname']), 0, 255));
        $lastname = ucfirst(substr(trim($_POST['lastname']), 0, 255));
        $address = ucfirst(substr(trim($_POST['address']), 0, 255));
        $zip = substr(trim($_POST['zip']), 0, 255);
        $city = ucfirst(substr(trim($_POST['city']), 0, 255));
        $email = substr(trim($_POST['email']), 0, 255);
        $phone = substr(trim($_POST['phone']), 0, 255);
        $height = trim($_POST['height']);
        $occupation = substr(trim($_POST['occupation']), 0, 255);
		$appointment = substr(trim($_POST['appointment']), 0, 255);

        // result output starts here
        $showDates = true;
        $db = new Db();
		if ($gender === 'm') {
			echo "Lieber " . $firstname . "!<br /><br />";
		} else if($gender === 'w') {
			echo "Liebe " . $firstname . "!<br /><br />";
		}
		// check if entry already exists
        if ($db->alreadyExists($firstname, $lastname, $birthdate)) {
            ?>
            <span>Du hast Dich schon angemeldet. Ein erneutes Anmelden ist nicht möglich.<br /></span>
            <?php
        } else if (!$db->insertRegistration($gender, $birthdate, $firstname, $lastname, $address, $zip, $city, $email, $phone, $height, $occupation, $target_file, $appointment)) {
            echo "<p>Ein Fehler ist aufgetreten. Bitte versuche es noch einmal. Sollte das Problem bestehen, schreibe bitte an <a href=\"mailto:bp@ball.tc\">bp@ball.tc</a></p>";
            $showDates = false;
        } else {
            ?>
            <span>Vielen Dank für die Voranmeldung zum Eröffnungskomitee des Balles der Industrie und Technik <?= $BALLYEAR ?>!<br /></span>
            <?php
        }
        $db->close();
        if ($showDates) {
            ?>
			<span>Nachfolgend findest Du noch die wichtigsten Informationen.</span>
			<p class="heading"><strong>VORSTELLEN</strong></p>
            <p>Bitte komme zum ausgewählten Vorstell-Termin:</p>
            <ul>
                <li><i class="material-icons prefix">assignment</i><?= $VORSTELL_DATE1 ?><?php if ($appointment == $VORSTELL_DATE1) echo "<strong> — diesen hast Du ausgewählt!</strong>"; ?></li>
                <li><i class="material-icons prefix">assignment</i><?= $VORSTELL_DATE2 ?><?php if ($appointment == $VORSTELL_DATE2) echo "<strong> — diesen hast Du ausgewählt!</strong>"; ?></li>
                <li><i class="material-icons prefix">assignment</i><?= $VORSTELL_DATE3 ?><?php if ($appointment == $VORSTELL_DATE3) echo "<strong> — diesen hast Du ausgewählt!</strong>"; ?></li>
            </ul>
            <p>Das Vorstellen findet in den Clubräumlichkeiten des Techniker-Cercle statt:<br /><br />
            <span class="tc-address"><i class="material-icons">home</i><em>Michaeler-Platz - unter der Michaeler-Kuppel<br />
            Gottfried-von-Einem Stiege, 1. Stock, 1010 Wien</em></span><br /><br />
			<p class="heading"><strong>DRESSCODE</strong></p>
			<p>Bitte beachte den Dresscode:</p>
			<span class="dresscode"><i class="material-icons">perm_identity</i><em>Herren im Anzug mit Krawatte<br />
			Damen elegant</em></span><br /><br />
			<span>Als ersten Schritt kannst du schon den <a href="https://www.facebook.com/ballpraesident" target="_blank">Ballpräsidenten auf Facebook</a>  adden, wo unsere Veranstaltungen organisiert werden. <br />Wir freuen uns darauf, Dich kennenzulernen!<br/><br/>
            Die Ballpräsidenten des Techniker-Cercle<br /></span>
			<a href="mailto:bp@ball.tc">bp@ball.tc</a>
            </p>
			<p>
				<strong>P.s.</strong>: Es wird keine Email als Anmeldebestätigung verschickt.
                Bitte beachte, dass diese Voranmeldung noch keine Garantie für eine Teilnahme ist, da die verfügbaren Plätze limitiert sind.
			</p>
            <?php
			// send email
			$subject = "Voranmeldung zum Eröffnungskomitee des Balles der Industrie und Technik " . $BALLYEAR;
			$message = "<html><head><title>Voranmeldung zum Eröffnungskomitee des Balles der Industrie und Technik $BALLYEAR</title></head><body>";
			if ($gender === 'm') {
				$message .= "Lieber " . $firstname . "!\r\n";
			} else if($gender === 'w') {
				$message .= "Liebe " . $firstname . "!\r\n";
			}
			$message .= "<p>Vielen Dank für die Voranmeldung zum Eröffnungskomitee des Balles der Industrie und Technik $BALLYEAR.<br />";
			$message .= "Hier noch die wichtigsten Infos:</p>";
			$message .= "<p style=\"font-size:large\">VORSTELLEN</p>";
			$message .= "<p>Bitte komme zum ausgewählten Vorstell-Termin:</p><ul>";
			$message .= "<li>$VORSTELL_DATE1";
			if ($appointment == $VORSTELL_DATE1) $message .= " — diesen hast Du ausgewählt!";
			$message .= "</li>";
			$message .= "<li>$VORSTELL_DATE2";
			if ($appointment == $VORSTELL_DATE2) $message .= " — diesen hast Du ausgewählt!";
			$message .= "</li>";
			$message .= "<li>$VORSTELL_DATE3";
			if ($appointment == $VORSTELL_DATE3) $message .= " — diesen hast Du ausgewählt!";
			$message .= "</li>";
			$message .= "</ul>";
			$message .= "<p>Das Vorstellen findet in den Clubräumlichkeiten des Techniker-Cercle statt:</p>";
			$message .= "<p><em>Michaeler-Platz - unter der Michaeler-Kuppel<br />";
			$message .= "Gottfried-von-Einem Stiege, 1. Stock, 1010 Wien</em></p>";
			$message .= "<p style=\"font-size:large\">DRESSCODE</p>";
			$message .= "<p>Bitte beachte den Dresscode:</p>";
			$message .= "<p>Herren im Anzug mit Krawatte<br />";
			$message .= "Damen elegant</p>";
			$message .= "<p>Wir freuen uns darauf, Dich kennenzulernen!</p>";
			$message .= "<p>Die Ballpräsidenten des Techniker-Cercle<br />";
			$message .= "bp@ball.tc</p>";
			$message .= "</body></html>";
			$headers = "MIME-Version: 1.0\r\nContent-type: text/html; charset=UTF-8\r\nFrom: noreply@ball.tc\r\n";
            // mailing is disabled, as too often those emails don't arrive
			// mail($email, $subject, $message, $headers);
        }
		echo "</div>";
    }
}
    ?>
</main>
<footer class="page-footer">
	&copy; <?= date('Y'); ?> <a target="_blank" href="http://www.techniker-cercle.at/">Techniker-Cercle</a> - Reitschulgasse 2 - 1010 Wien - <a href="mailto:bp@ball.tc">bp@ball.tc</a>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/js-webshim/minified/polyfiller.js"></script>
<script type="text/javascript">
    webshim.activeLang('de');
    webshim.setOptions('forms', {
        lazyCustomMessages: true,
        iVal: {
            //add config to find right wrapper
            fieldWrapper: '.input-field',

            // add materialize specific classes
            successWrapperClass: 'valid',
            errorWrapperClass: 'invalid',

            //general iVal cfg
            sel: '.registration-form',
            handleBubble: 'hide' // hide error bubble
        }
    });
    webshim.polyfill("forms");
    $(document).ready(function () {
        $('select').material_select();
    });
	var maxDate = new Date();
	maxDate.setYear(maxDate.getFullYear() - 17);
	var minDate = new Date();
	minDate.setYear(minDate.getFullYear() - 30);
    var dp = $('.datepicker').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 50, // Creates a dropdown of 50 years to control year
        closeOnSelect: false,
        closeOnClear: true,
        onSet: function (ele) {
            if (ele.select) {
                this.close();
            }
        },
        monthsFull: ['Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
        monthsShort: ['Jän', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
        weekdaysFull: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
        weekdaysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
        labelMonthNext: 'Nächster Monat',
        labelMonthPrev: 'Vorheriger Monat',
        labelMonthSelect: 'Wähle einen Monat aus',
        labelYearSelect: 'Wähle ein Jahr aus',
        format: 'd. mmmm yyyy',
        formatSubmit: 'yyyy-mm-dd',
        firstDay: 1,
        today: 'Heute',
        clear: 'Löschen',
        close: 'Ende',
        editable: true,
		min: minDate,
		max: maxDate,
        <?php
        if (isset($_POST['birthdate_submit'])) {
        ?>
selected: '<?= $_POST['birthdate_submit'] ?>'
        <?php
        }
        ?>
    });
	function openDP() {
		dp.pickadate('picker').open();
	}
    function dataProtectionValidation() {
        if (!document.getElementById('data-protection').checked) {
            document.getElementById('data-protection-error').style.display = 'block';
            console.log('false');
        } else {
            document.getElementById('data-protection-error').style.display = 'none';
            console.log('true');
        }
    }
</script>
</body>
</html>
