<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
    <title>[DEMO]Huurregistratieformulier</title>
    <meta http-equiv="Content-Type" content="text/html;">
    <link href="assets/css/styleverhuur.css" rel="stylesheet" type="text/css">
    <script src="https://www.w3schools.com/lib/w3.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="assets/js/datepicker-nl.js"></script>
    <script src="assets/js/moment-with-locales.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="assets/js/Familiecontrole.js"></script>
    <script src="assets/js/datecalc.js"></script>
    <script src="assets/js/veranderwaardes.js"></script>
    <script>
        window.onload = function() {
            b=0;
        };
        $( function() {$('.datum').datepicker().on('change', function(){
            $(this).blur();
        });
        });
    </script>

</head>
<body>
<div class="center">
    <form action="includes/verwerkformulier.php" method="post">
        <table class="tableverhuur" border="0" cellpadding="0" cellspacing="0">
            <h2><?php
                if (isset($_SESSION['error']))
                {
                    echo $_SESSION['error'];
                    unset($_SESSION['error']);
                }
                ?></h2>
            <h1>SOURCE CODE: <a href="https://git.dennisvandermeulen.nl/Dennis/DEMO_verhuurformulier">Klik hier</a></h1>
            <h1>[DEMO] Huurregistratie</h1>
            <p>Met dit formulier zend je je huurgegevens naar de penningmeester. Na controle van deze gegevens
            door de penningmeester ontvang je een factuur.
            Deze factuur moet onder vermelding van het factuurnummer
                binnen twee weken betaald worden.</p>
            <br>
            <h1>Algemene Gegevens</h1>
            <tr>
                <td class="eenzesde">
                    Volledige naam:
                </td>
                <td>
                    <input class="eenvierde" type="text" name="Naam" placeholder="Volledige naam" required>
                </td>
            </tr>
            <tr>
                <td class="eenzesde">
                    Emailadres:
                </td>
                <td>
                    <input class="eenvierde" type="email" name="Email" placeholder="Emailadres" required>
                </td>
            <tr>
            </tr>
            <p>Selecteer hieronder of je familie bent of niet.</p>
            <tr>
                <td>Familie:</td>
                <td id="ruimte"><input type="radio" name="type" value="Ja" onclick="fam(); calculatea();" required></td>
            </tr>
            <tr>
                <td>Geen familie:</td>
                <td id="ruimte"><input type="radio" name="type" value="Nee" onclick="notfam(); calculatea();" ></td>
            </tr>
            <tr>
            <tr> <tr><td><h1>Huur</h1></td></tr>
            <tr> <td colspan="2"><p>Hier geef je de gehele huurperiode op. Een weekend kan uitsluitend in zijn geheel gehuurd
                worden en bestaat uit drie nachten. </></td>
            <tr>
               
            </tr>    
                <td> Begin huurperiode:</td>
                <td><input class="eenvierde datum" type="text" id="datumaankomst" name="datumaankomst"
                           onchange="date();calculatea();" required autocomplete="off">
                </td>
            </tr>
            <tr>
                <td> Einde huurperiode:</td>
                <td><input class="eenvierde datum" type="text" id="datumvertrek" name="datumvertrek"
                           onchange="date();calculatea();" required autocomplete="off">
            </tr>
            <tr>
                <td><br></td>
            </tr>
        </table>
        <table class="tableverhuur" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td class="eenzesde"></td>
                <th class="">Aantal</th>
                <th class="eenzesde">Kosten</th>
                <th class="">Totaal</th>
            </tr>
            <tr>
            <td>Startbedrag:</td>
                <td><input type="text" name="aantalstart" id="startbedrag" value="0" required readonly></td>
                <td>
                    <div id="bedrag1"></div>
                </td>
                <td><input type="text" name="totaalstart" id="totaalstart" value="0" required readonly></td>
            </tr>
            <tr>
            <td>Huurperiode</td>
                <td><input type="text" name="aantalnachten" id="aantalnachten" value="0" required readonly></td>
                <td>
                    <div id="bedrag2"></div>
                </td>
                <td><input type="text" name="totaalnachten" id="totaalnachten" value="0" required readonly></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td style="text-align: right">Totaal Huur:</td>
                <td><input type="text" name="totaalhuur" id="totaalhuur" value="0" required readonly></td>
            </tr>
        </table>

        <!--    Totaal moet toegevoegd worden-->
        <div id="formuliergen"></div>

        <table class="tableverhuur" border="0" cellpadding="0" cellspacing="0">
            <h1>Extra Kosten</h1>
            <p></p>
            <tr>
                <td class="eenzesde"></td>
                <th class="eenzesde">Aantal</th>
                <th>Kosten</th>
                <th>Totaal</th>
            </tr>
            <tr>
                <td>Overige kosten:</td>
                <td><input type="number" name="overig" id="overig" value="" autocomplete="off" oninput="calculatec();">
                </td>
                <td>
                    <center>x &euro;1</center>
                </td>
                <td><input type="text" name="totaaloverig" id="totaaloverig" value="0" readonly></td>
            </tr>
            <tr>
                <td>Kruiwagens hout:</td>
                <td><input type="number" name="hout" id="hout" value="" autocomplete="off" oninput="calculatec();"></td>
                <td>
                    <center>x &euro;5</center>
                </td>
                <td><input type="text" name="totaalhout" id="totaalhout" value="0" readonly></td>
            </tr>
        </table>

        <table class="tableverhuur" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <h1>Opmerkingen</h1>
            </tr>
            <p>We zijn benieuwd naar opmerkingen en suggesties. Als er iets is wat kapot is gegaan of moet worden gerepareerd of vervangen, meld dit dan hieronder. </p>
            <tr>
                <td>
                    Opmerkingen:
                </td>
                <td>
                    <textarea name="opmerkingen" rows="4" cols="60"></textarea>
                </td>
            </tr>
            <tr>
                <td><br></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" name="Verstuur" value="Verstuur" id="verstuur"></td>
            </tr>
        </table>
    </form>
</div>
<script>
    w3.includeHTML();
</script>
</body>
</html>