<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькуляция фаершоу — Mardis Calc</title>
<link rel="stylesheet" href="assets/fonts/phosphor-icons/src/css/icons.css">
<link rel="stylesheet" href="css/kit.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="page-header">
<div class="container">
<h1 class="page-header-title"><i class="ph ph-fire"></i> Mardis Calc</h1>
<p class="page-header-subtitle">Калькуляция переменных для фаершоу</p>
</div>
</header>
<main class="container">
<section class="section">
<h2 class="section-title">Параметры шоу</h2>
<div class="form-grid">
<div class="form-group">
<label class="label">
Общая сумма (S)
<input type="number" class="input" id="input-s" step="0.01" placeholder="0.00">
</label>
</div>
<div class="form-group">
<label class="label">
Пиротехника (Pz)
<input type="number" class="input" id="input-pz" step="0.01" placeholder="0.00">
</label>
</div>
<div class="form-group">
<label class="label">
Титан (Tz)
<input type="number" class="input" id="input-tz" step="0.01" placeholder="0.00">
</label>
</div>
<div class="form-group">
<label class="label">
Керосин за литр (Lz)
<input type="number" class="input" id="input-lz" step="0.01" placeholder="0.00">
</label>
</div>
<div class="form-group">
<label class="label">
Литры керосина (Nl)
<input type="number" class="input" id="input-nl" step="0.01" placeholder="0.00">
</label>
</div>
<div class="form-group">
<label class="label">
Зарплата артиста (Z)
<input type="number" class="input" id="input-z" step="0.01" placeholder="0.00">
</label>
</div>
<div class="form-group">
<label class="label">
Количество артистов (Na)
<input type="number" class="input" id="input-na" step="1" placeholder="0" readonly>
</label>
</div>
</div>
<div class="block mt-4">
<fieldset class="fieldset">
<legend class="legend">Роялти (автоматический расчёт)</legend>
<div class="form-grid">
<div class="form-group">
<label class="label">
Организация (Rom) 10%
<input type="number" class="input" id="input-rom" step="0.01" readonly>
</label>
</div>
<div class="form-group">
<label class="label">
Постановщик (Rop) 5%
<input type="number" class="input" id="input-rop" step="0.01" readonly>
</label>
</div>
<div class="form-group">
<label class="label">
Техник (Rot) 5%
<input type="number" class="input" id="input-rot" step="0.01" readonly>
</label>
</div>
<div class="form-group">
<label class="label">
Комиссионер (Rok) 10%
<input type="number" class="input" id="input-rok" step="0.01" readonly>
</label>
</div>
</div>
</fieldset>
</div>
<div id="calc-message" class="input-info mt-4"></div>
</section>
<section class="section">
<h2 class="section-title">Артисты и роли</h2>
<div class="block form-group">
<label class="label">
Добавить артиста
<div class="select-wrap">
<select class="input select" id="artist-select">
<option value="">Выберите артиста...</option>
</select>
</div>
</label>
<button class="btn btn-accent mt-2" type="button" id="btn-add-artist">
<i class="ph ph-plus"></i> Добавить
</button>
</div>
<div class="table-wrapper mt-4">
<table class="table table-compact" id="artists-table">
<caption class="table-caption">Участники шоу</caption>
<thead class="table-head">
<tr class="table-row">
<th scope="col">Артист</th>
<th scope="col">Артист (Z)</th>
<th scope="col">Организатор (Rom)</th>
<th scope="col">Постановщик (Rop)</th>
<th scope="col">Техник (Rot)</th>
<th scope="col">Комиссионер (Rok)</th>
<th scope="col">Выплата</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="table-body" id="artists-tbody">
<tr class="table-row table-row-muted" id="empty-row">
<td colspan="8" class="text-center">Нет добавленных артистов</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="section">
<h2 class="section-title">Итоговый расчёт</h2>
<div class="description-list compact">
<div class="dl-row">
<dt class="dl-key">Материальные расходы</dt>
<dd class="dl-value" id="summary-materials">0.00</dd>
</div>
<div class="dl-row">
<dt class="dl-key">Чистая сумма (Base)</dt>
<dd class="dl-value" id="summary-base">0.00</dd>
</div>
<div class="dl-row">
<dt class="dl-key">Всего роялти</dt>
<dd class="dl-value" id="summary-royalties">0.00</dd>
</div>
<div class="dl-row">
<dt class="dl-key">Зарплаты артистов</dt>
<dd class="dl-value" id="summary-salaries">0.00</dd>
</div>
<div class="dl-row dl-row-highlight">
<dt class="dl-key">Общая сумма (S)</dt>
<dd class="dl-value" id="summary-s">0.00</dd>
</div>
</div>
</section>
<section class="section">
<h2 class="section-title">Действия</h2>
<div class="block">
<button class="btn btn-secondary" type="button" id="btn-export">
<i class="ph ph-download-simple"></i> Экспорт JSON
</button>
<button class="btn btn-secondary" type="button" id="btn-import-trigger">
<i class="ph ph-upload-simple"></i> Импорт JSON
</button>
<input type="file" id="btn-import-file" accept="application/json" hidden>
<button class="btn btn-danger" type="button" id="btn-reset">
<i class="ph ph-arrow-counter-clockwise"></i> Сброс
</button>
</div>
</section>
</main>
<script src="gnexus-ui-kit/dist/js/gnexus-ui-kit.js"></script>
<script>
window.__ARTISTS__ = [
{ "name": "Алексей" },
{ "name": "Мария" },
{ "name": "Дмитрий" },
{ "name": "Анна" },
{ "name": "Иван" },
{ "name": "Елена" },
{ "name": "Сергей" },
{ "name": "Ольга" },
{ "name": "Павел" },
{ "name": "Наталья" }
];
</script>
<script src="js/app.js"></script>
</body>
</html>
