<%@page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>

<html>

<head>
    <title>Witamy w Mandala Center</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script language="JavaScript">

        function submitForm(genreShowInputId) {
            var genreShowInput = document.getElementById(genreShowInputId);
            var showId = genreShowInput.value;
            if (showId == "--Select--") {
                return;
            }
            var showIdInput = document.getElementById("showIdInput");
            showIdInput.value = showId;
            var form = document.getElementById("theform");
            form.submit();
        }

    </script>

</head>

<body>

    Witamy w <font size="+2"><i><b>Mandala Center</b></i></font> -- najbardziej fascynującym i zróżnicowanym obiekcie rozrywkowym Metropolis.

    <br/><p>(Proszę pamiętać, że w tej przykładowej aplikacji dostępne jest jedynie przedstawienie teatralne "Romeo i Julia")</p>

    <form id="theform" action="displayShow.html" method="post">
        <input id="showIdInput" type="hidden" name="showId"/>
    </form>

    <table border="0">

    <c:forEach items="${genres}" var="genre">
        <c:if test="${not empty genre.shows}">
            <tr>
                <td><c:out value="${genre.name}"/>: </td>
                <td>
                    <select id="genreShowInput<c:out value="${genre.id}"/>" style="width: 150px;" name="showId">
                        <option value="--Select--">-- Proszę wybrać --</option>
                        <c:forEach items="${genre.shows}" var="show">
                            <option value="<c:out value="${show.id}"/>"><c:out value="${show.name}"/></option>
                        </c:forEach>
                    </select>
                    <input type="button" value="Dalej" onClick="submitForm('genreShowInput<c:out value="${genre.id}"/>');"/>
                </td>
            </tr>
            <p/>
        </c:if>
    </c:forEach>

    </table>

</body>

</html>