<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #eceff1;
height: 100vh;
margin: 0;
}
.center {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
button {
margin-top: 10px;
background-color: #4285F4;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #357ABD;
}
input[type="text"], input[type="password"], input[type="number"], select {
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="checkbox"] {
margin-top: 10px;
}
</style>
<title>Formularz</title>
</head>
<body>
<div id="login" style="display: block;">
Login: <input type="text" id="username"><br>
Hasło: <input type="password" id="password"><br>
<input type="checkbox"> Zapamiętaj hasło<br>
<button onclick="login()">Zaloguj</button>
</div>
<div id="chooseCompany" style="display: none;">
Wybierz Firmę:
<select id="company">
<option value="tømrermester">tømrermester</option>
</select>
<button onclick="nextPage('chooseCompany', 'rate')">Dalej</button>
</div>
<div id="rate" style="display: none;">
Stawka godzinowa w DKK: <input type="number" id="hourlyRate">
<button onclick="nextPage('rate', 'workType')">Dalej</button>
</div>
<div id="workType" style="display: none;">
<form method="post">
<select id="type" name="type" onchange="displayWorkFields()">
<option value="none">-- Wybierz --</option>
<option value="godzinowka">Godzinówka</option>
<option value="pakiet">Pakiet</option>
<option value="metry">Metry</option>
</select>
<div id="godzinowkaFields" style="display: none;">
Ilość godzin: <input type="number" id="hours"><br>
Rodzaj wykonywanej pracy: <input type="text" id="workDescription"><br>
Miejsce wykonywania: <input type="text" id="location">
<button type="button" onclick="calculateGodzinowka()">Wyślij</button>
</div>
<div id="pakietFields" style="display: none;">
Ile DKK za pakiet: <input type="number" id="pricePerPackage"><br>
Ile pakietów zrobionych: <input type="number" id="packagesCompleted"><br>
Ile osób robiło: <input type="number" id="peopleForPackage"><br>
Miejsce i nr mieszkania: <input type="text" id="flatDetailsPakiet">
<button type="button" onclick="calculatePakiet()">Wyślij</button>
</div>
<div id="metryFields" style="display: none;">
Ile metrów²: <input type="number" id="meters"><br>
Ile za m² w DKK: <input type="number" id="pricePerMeter"><br>
Ile osób robiło: <input type="number" id="peopleForMetry"><br>
Miejsce i nr mieszkania: <input type="text" id="flatDetailsMetry">
<button type="button" onclick="calculateMetry()">Wyślij</button>
</div>
<button type="submit">Wyślij</button>
</form>
</div>
<div id="confirmation" style="display: none;">
Godziny wysłane! Do zobaczenia ponownie.<br>
Suma wysłanych dzisiejszych godzin to: <span id="totalHours"><?php echo isset($totalHours) ? number_format($totalHours, 2) : '0.00'; ?>h</span>
</div>
<!-- Przycisk "Przegląd" -->
<div class="center">
<div id="preview" style="display: none;">
<a href="public_html/main.html">Przegląd</a>
</div>
</div>
<script>
function login() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
if (username === "111" && password === "111") {
nextPage("login", "chooseCompany");
} else {
alert("Nieprawidłowy login lub hasło!");
}
}
function nextPage(current, next) {
document.getElementById(current).style.display = "none";
document.getElementById(next).style.display = "block";
}
function displayWorkFields() {
let type = document.getElementById("type").value;
let fieldsToHide = ["godzinowkaFields", "pakietFields", "metryFields"];
for (let id of fieldsToHide) {
document.getElementById(id).style.display = "none";
}
if (type !== "none") {
document.getElementById(type + "Fields").style.display = "block";
}
}
function calculateGodzinowka() {
// kod obliczeń dla godzinówki
// Po obliczeniach, pokaż komunikat potwierdzający
document.getElementById("workType").style.display = "none";
document.getElementById("confirmation").style.display = "block";
// obliczenia
const totalHours = parseFloat(document.getElementById("hours").value);
document.getElementById("totalHours").textContent = totalHours.toFixed(2) + "h";
}
function calculatePakiet() {
const pricePerPackage = parseFloat(document.getElementById("pricePerPackage").value);
const packagesCompleted = parseFloat(document.getElementById("packagesCompleted").value);
const peopleForPackage = parseFloat