<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Калькулятор зарплаты</title>

    <style>
        body {
            background-color: #1a1a1a;
            color: #ffffff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 10px auto; /* Центрирование по горизонтали и внутренний отступ сверху и снизу */
            max-width: 500px; /* Максимальная ширина страницы */
            padding: 0;
        }

        header {
            background-color: #333;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
        }

        h1 {
            margin: 0;
            color: #ffcc00;
            font-size: 28px;
        }

        main {
            margin: 20px;
        }

        input, button {
            width: 100%;
            max-width: 500px;
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 5px;
            display: block;
margin-right: 30px; /* отступ справа */
    margin-left: 10px;  /* отступ слева */
        }

        label {
            margin-bottom: 5px;
            display: block;
        }

        table {
            width: 100%;
            max-width: 500px;
            border-collapse: collapse;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        th, td {
            border: 1px solid #555;
            padding: 8px;
            text-align: center;
            max-width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        th {
            background-color: #333;
            color: #fff;
        }

        tr:hover {
            background-color: #555;
        }

        .delete-row {
            cursor: pointer;
            color: #ff6666;
            font-weight: bold;
            font-size: 18px;
            margin-left: 10px;
        }

        .delete-row:hover {
            color: #ff3333;
        }

        button {
            background-color: #4CAF50;
	    max-width: 550px;
	    padding: 8px;
            color: white;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #45a049;
        }

        #summaryRow {
            background-color: #333;
            color: #fff;
            font-weight: bold;
        }

        @media (max-width: 500px) {
    input, button {
        width: calc(100% - 20px); /* учитываем отступы справа и слева */
max-width: 370px;
    }

    th, td {
        max-width: none; /* убираем ограничение по ширине для ячеек таблицы */
        white-space: normal; /* разрешаем перенос текста в ячейках таблицы */
    }
}
    </style>
</head>

<body>

    <header>
        <h1>Калькулятор зарплаты</h1>
    </header>

    <section>
        <label for="inputDate">Дата:</label>
        <input type="date" id="inputDate">

        <label for="inputOrderNumber">Номер заказа:</label>
        <input type="text" id="inputOrderNumber" placeholder="Введите номер заказа">

        <label for="inputFianit1">Фианит (до 3):</label>
        <input type="number" id="inputFianit1" placeholder="Введите количество">

        <label for="inputFianit2">Фианит (3 и более):</label>
        <input type="number" id="inputFianit2" placeholder="Введите количество">

        <label for="inputNanoS">Нано S:</label>
        <input type="number" id="inputNanoS" placeholder="Введите количество">

        <label for="inputSemiprecious">Полудрагоценный:</label>
        <input type="number" id="inputSemiprecious" placeholder="Введите количество">

        <label for="inputPrecious">Драгоценный:</label>
        <input type="number" id="inputPrecious" placeholder="Введите количество">

        <button onclick="calculate()">Добавить в таблицу</button>

        <h2>Результаты:</h2>
        <table id="resultsTable">
            <thead>
                <tr>
                    <th>Дата</th>
                    <th>Номер наряда</th>
                    <th>Стоимость</th>
                    <th>*</th>
                </tr>
            </thead>
            <tbody id="resultsBody"></tbody>
        </table>

        <table id="summaryTable">
            <tbody>
                <tr id="summaryRow">
                    <td colspan="2">Итого</td>
                    <td id="totalCost"></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </section>

    <script>
        function calculate() {
            var currentDate = new Date();
            var formattedDate = currentDate.toISOString().split('T')[0];  // Формат: ГГГГ-ММ-ДД

            var inputOrderNumber = document.getElementById('inputOrderNumber').value;
            // Автоматически добавляем "АЮ-" перед номером заказа
            inputOrderNumber = "АЮ-" + inputOrderNumber;

            var inputFianit1 = parseFloat(document.getElementById('inputFianit1').value) || 0;
            var inputFianit2 = parseFloat(document.getElementById('inputFianit2').value) || 0;
            var inputNanoS = parseFloat(document.getElementById('inputNanoS').value) || 0;
            var inputSemiprecious = parseFloat(document.getElementById('inputSemiprecious').value) || 0;
            var inputPrecious = parseFloat(document.getElementById('inputPrecious').value) || 0;

            var totalCost = inputFianit1 * 2.2 + inputFianit2 * 6 + inputNanoS * 6 + inputSemiprecious * 7.2 + inputPrecious * 8.2;

            var results = JSON.parse(localStorage.getItem('calculatorResults')) || [];
            results.push({
                date: formattedDate,
                orderNumber: inputOrderNumber,
                fianit1: inputFianit1,
                fianit2: inputFianit2,
                nanoS: inputNanoS,
                semiprecious: inputSemiprecious,
                precious: inputPrecious,
                totalCost: totalCost.toFixed(2)
            });

            localStorage.setItem('calculatorResults', JSON.stringify(results));
            displayResults();
            updateSummary();
            clearFields();
        }

	function showStoneCount(index) {
            var results = JSON.parse(localStorage.getItem('calculatorResults')) || [];
            var item = results[index];

            var stoneCountMessage = "В наряде:\n" +
                                    "Фианит (до 3): " + item.fianit1 + "\n" +
                                    "Фианит (3 и более): " + item.fianit2 + "\n" +
                                    "Нано S: " + item.nanoS + "\n" +
                                    "Полудрагоценный: " + item.semiprecious + "\n" +
                                    "Драгоценный: " + item.precious;

            alert(stoneCountMessage);
        }

        function clearFields() {
            document.getElementById('inputDate').value = '';
            document.getElementById('inputOrderNumber').value = '';
            document.getElementById('inputFianit1').value = '';
            document.getElementById('inputFianit2').value = '';
            document.getElementById('inputNanoS').value = '';
            document.getElementById('inputSemiprecious').value = '';
            document.getElementById('inputPrecious').value = '';
        }

        function deleteRow(index) {
            var results = JSON.parse(localStorage.getItem('calculatorResults')) || [];
            results.splice(index, 1);
            localStorage.setItem('calculatorResults', JSON.stringify(results));
            displayResults();
            updateSummary();
        }

        function displayResults() {
            var resultsBody = document.getElementById('resultsBody');

            resultsBody.innerHTML = "";

            var results = JSON.parse(localStorage.getItem('calculatorResults')) || [];

            results.forEach(function (item, index) {
                var row = resultsBody.insertRow(resultsBody.rows.length);

                var cellDate = row.insertCell(0);
                var cellOrderNumber = row.insertCell(1);
                var cellTotalCost = row.insertCell(2);
                var cellAction = row.insertCell(3);

                cellDate.textContent = item.date;
                cellOrderNumber.textContent = item.orderNumber;
                cellTotalCost.textContent = item.totalCost;

		row.onclick = function() { showStoneCount(index); };

                var deleteButton = document.createElement("span");
                deleteButton.innerHTML = "&#10006;";
                deleteButton.className = "delete-row";
                deleteButton.onclick = function() { deleteRow(index); };

                cellAction.appendChild(deleteButton);
            });
        }

        function updateSummary() {
            var results = JSON.parse(localStorage.getItem('calculatorResults')) || [];
            var total = 0;

            results.forEach(function (item) {
                total += parseFloat(item.totalCost);
            });

            document.getElementById('totalCost').textContent = total.toFixed(2);
        }

        window.onload = function () {
            displayResults();
            updateSummary();
        };
    </script>

</body>
</html>