<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Landmark Sign Up</title>
    <link rel="stylesheet" th:href="@{css/landmarkFormStyle.css}">
    <link rel="stylesheet" th:href="@{css/templatingstyle.css}">


</head>
<body>
<header th:insert="~{/towns/Templating.html :: header}"></header>
<hr style="height:20px; visibility:hidden;" />
<H2 id="landmarkFormTitle"> Interested in joining our trails? Sign up Here! </H2>
<main>
<!--    Form used to submit potential landmarks for trails-->
    <form action="/landmarkSub" id="landmarkSubmission" name="landmarkSubmission" method="post" th:object="${landmarkData}" onsubmit="return landmarkFormValidation()">

        <br>
        <label>Business Name:
           <input type="text" th:field="*{landmarkName}" placeholder="Business name here...">
        </label><br>
        <div th:errors="*{landmarkName}" th:if="${#fields.hasErrors('landmarkName')}">ErrorLandmarkName</div>
        <br><label>Contact Address:
            <input type="text" th:field="*{landmarkEmail}" placeholder="E-mail here...">
        </label><br>
        <div th:errors="*{landmarkEmail}" th:if="${#fields.hasErrors('landmarkEmail')}">ErrorEmail</div>
        <br><label>Please Describe Your Business:<br>
            <textarea th:field="*{landmarkDescription}" rows="18" cols="70" placeholder="Max 200 words please..."></textarea>
        </label><br><br>
        <label>Your Location:
            <select th:field="*{landmarkLocation}">
                <option value="" disabled selected>Select Location</option>
                <option value="Caerphilly">Caerphilly</option>
                <option value="Risca">Risca</option>
                <option value="Penarth">Penarth</option>
            </select>
        </label><br><br>
        <label>Trail:
            <select th:field="*{trailID}">
                <option value=0 disabled selected>Select Trail</option>
                <option value=0101>(Caerphilly) Castle Trail</option>
                <option value=0102>(Caerphilly) Pub Trail</option>
                <option value=0103>(Caerphilly) Heritage Trail</option>
                <option value=0201>(Risca) Heritage and Culture Trail</option>
                <option value=0301>(Penarth) Esplanade Trail</option>
            </select>

        </label><br><br>


        <input type="submit">
        <hr style="height:0px; visibility:hidden;" />
    </form>

    <hr style="height:40px; visibility:hidden;" />
</main>

<script>




// verification function of the above form
    function landmarkFormValidation(){
        var pass=true;
        var trail = document.forms["landmarkSubmission"]["trailID"].value
        var location = document.forms["landmarkSubmission"]["landmarkLocation"].value
        var description = document.forms["landmarkSubmission"]["landmarkDescription"].value;
        var descriptionWrdCount=description.split(" ").length
        if (descriptionWrdCount>200){
            alert('Please keep your description to a maximum of 200 words.');
            pass = false;
        }

        if (trail==0){ // values of 0 and "" used to ensure default drop down option isn't submittable
            alert('Invalid trail selected. \nPlease select the trail you wish to join.');
            pass = false;
        }

        if (location==""){
            alert('Invalid location selected. \nPlease select the location you wish to join.');

            pass = false; // ensure correct trail is selected in accordance to the town it takes place in

        } if ( (location=="Caerphilly" & (parseInt(trail/100)!==1)) ||
            (location=="Risca" & (parseInt(trail/100)!==2)) ||
            (location=="Penarth" & (parseInt(trail/100)!==3)) ){
            alert('Trail unavailable in your current location. \nPlease choose an available trail');
            pass = false;
        }

        return pass;
    }


</script>
<footer th:insert="~{/towns/Templating.html :: footer}"></footer>
</body>
</html>