<?php
?>
<!doctype html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Z113 - Diament z cegiełek</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
    <h1>Zadanie Z113</h1>
    <h2>Autor: Jakub Grzegorczyk</h2>
</header>
<div class="box">
    <p>Program rysuje na stronie figurę w kształcie diamentu. Danymi wejściowymi są:</p>
    <ul>
        <li>wzór cegiełki - jako łańcuch znaków.</li>
        <li>ilość cegiełek w najdłuższym rzędzie (maksymalnie 50).</li>
    </ul>
</div>
<div class="box">
    <form action="index.php" method="post">
        <fieldset>
            <label for="brick">Wprowadź symbol cegły</label>
            <input type="text" name="brick" id="brick" value="[==]">
            <label for="mostBricks">Wprowadź liczbę wierszy</label>
            <input type="number" name="mostBricks" id="mostBricks" max="50" value="12">
        </fieldset>
        <button type="submit">Rysuj diament</button>
    </form>
</div>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $brick = htmlspecialchars($_POST['brick']);
    $mostBricks = htmlspecialchars($_POST['mostBricks']);

    echo '<div class="box" style="text-align:center;">';
    echo '<span id="bricks" style="text-align:center; justify-content: center;">';
    for ($i = 0; $i < $mostBricks; $i++) {
        echo str_repeat($brick, $i + 1) . '<br>';
    }
    for ($i = $mostBricks - 2; $i >= 0; $i--) {
        echo str_repeat($brick, $i + 1) . '<br>';
    }
    echo '</span>';
    echo '</div>';
}
?>
</body>
</html>
