<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $pattern = $_POST['pattern'];
    $rowNum = $_POST['rowNum'];
    $customPattern = $_POST['customPattern'];
    $pattern = htmlspecialchars($pattern);
}
?>
<!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>Z114 - Pusty Diament</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
    <h1>Zadanie Z114</h1>
    <h2>Autor: Jakub Grzegorczyk</h2>
</header>
<div class="box">
    <h3>Cel</h3>
    <p>Stwórz stronę internetową, która generuje wzór w kształcie diamentu (romboidalny układ) z "cegiełek", gdzie środek diamentu pozostaje pusty, a "cegły" tworzą tylko obrzeże.</p>
    <h3>Wymagania</h3>
    <ol>
        <li>
            Strona zawiera formularz HTML z następującymi elementami:
            <ul>
                <li>Lista rozwijana (<code>&ltselect&gt</code>) z predefiniowanymi wzorami "cegły" (np. <code>[==]</code>, <code>{**}</code>, <code><##></code>, <code>@@@</code>) oraz opcją "Inny wzór".
                </li>
                <li>Pole tekstowe do wprowadzenia własnego wzoru "cegły", jeśli wybrano "Inny wzór".</li>
                <li>Pole numeryczne do określenia liczby wierszy diamentu (od 1 do 50).</li>
                <li>Przycisk "Rysuj pusty diament" do przesłania formularza metodą POST.</li>
            </ul>
        </li>
        <li>
            Po przesłaniu formularza, PHP generuje diament:
            <ul>
                <li>Górna część: od 1 "cegły" w pierwszym wierszu do pełnej szerokości w środkowym wierszu.</li>
                <li>Dolna część: symetryczne zwężanie od środkowego wiersza do 1 "cegły".</li>
                <li>W wierszach dłuższych niż 1 "cegły" pojawiają się tylko na początku i końcu, a środek pozostaje pusty.</li>
            </ul>
        </li>
        <li>
            Stylizacja CSS:
            <ul>
                <li>"Cegły" (<code>span class="cegla"</code>) mają tło, cień i efekt skalowania przy najechaniu myszą.</li>
                <li>Puste miejsca w środku diamentu muszą mieć dynamiczną szerokość równą szerokości wybranej "cegły" (użyj np. niewidocznych &ltspan&gt z taką samą stylizacją).</li>
                <li>Strona ma estetyczne tło (np. gradient) i wyśrodkowany układ.</li>
            </ul>
        </li>
    </ol>
    <h3>Przykład wyniku</h3>
    <p>Dla wzoru [==] i 5 wierszy:</p>
    <pre>
       [==]
    [==]  [==]
 [==]        [==]
    [==]  [==]
       [==]
    </pre>
    <h3>Wskazówki</h3>
    <ul>
        <li>Użyj pętli w PHP do generowania wierszy diamentu.</li>
        <li>Zadbaj o to, by odstępy w środku były proporcjonalne do rozmiaru "cegły" (np. poprzez ukryte elementy).</li>
        <li>Przetestuj różne wzory "cegły" (krótkie i długie), aby upewnić się, że układ działa poprawnie.</li>
    </ul>
    <h3>Dodatkowe wyzwanie (opcjonalne)</h3>
    <p>Dodaj walidację, aby upewnić się, że własny wzór "cegły" nie jest pusty i ma maksymalnie 10 znaków.</p>
</div>
<div class="box">
    <form action="index.php" method="post">
        <fieldset>
            <legend>Wybierz wzór:</legend>
            <label for="pattern">Wzór:</label>
            <select name="pattern" id="pattern">
                <option value="[==]">[==]</option>
                <option value="{**}">{**}</option>
                <option value="<##>"><##></option>
                <option value="@@@">@@@</option>
                <option value="custom">Inny wzór</option>
            </select>
            <label for="customPattern">Inny wzór:</label>
            <input type="text" name="customPattern" id="customPattern">
            <label for="rowNum">Ilość Wierszy:</label>
            <input type="number" name="rowNum" id="rowNum" min="1" max="50">
        </fieldset>
        <button type="submit">Rysuj pusty diament</button>
    </form>
</div>
</body>
<script>
    const patternSelect = document.getElementById('pattern');
    const customPatternInput = document.getElementById('customPattern');
    const customPatternLabel = document.querySelector('label[for="customPattern"]');

    function toggleCustomPattern() {
        if (patternSelect.value === 'custom') {
            customPatternInput.style.display = 'inline-block';
            customPatternLabel.style.display = 'inline-block';
        } else {
            customPatternInput.style.display = 'none';
            customPatternLabel.style.display = 'none';
        }
    }

    // Ukryj pole przy załadowaniu strony
    toggleCustomPattern();

    // Nasłuchuj zmian w select
    patternSelect.addEventListener('change', toggleCustomPattern);
</script>
</html>
