<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Калькулятор пар с днями недели</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>
    body {
      font-family: 'Arial', sans-serif;
      max-width: 900px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f5f7fa;
      color: #333;
    }
    h1 {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 30px;
    }
    .container {
      background: white;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .month-selector {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .month-nav {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .month-title {
      font-size: 20px;
      font-weight: bold;
      min-width: 180px;
      text-align: center;
    }
    button.icon {
      background: none;
      border: none;
      cursor: pointer;
      color: #3498db;
      font-size: 24px;
      padding: 5px;
    }
    .calendar {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
      margin-bottom: 25px;
    }
    .calendar-header {
      text-align: center;
      font-weight: bold;
      color: #7f8c8d;
      padding: 10px 0;
    }
    .calendar-day {
      padding: 12px 0;
      text-align: center;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s;
      position: relative;
      border: 1px solid #eee;
    }
    .calendar-day:hover {
      background: #f0f8ff;
    }
    .calendar-day.empty {
      visibility: hidden;
    }
    .selected {
      background: #3498db20;
      border-color: #3498db;
    }
    .day-number {
      font-weight: bold;
    }
    .day-week {
      font-size: 10px;
      color: #7f8c8d;
      margin-top: 2px;
    }
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 25px;
    }
    .control-group {
      flex: 1;
      min-width: 220px;
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: #2c3e50;
    }
    input, select {
      width: 95%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 16px;
    }
    .checkbox-group {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }
    button.primary {
      background: #3498db;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.2s;
      display: block;
      margin: 0 auto;
    }
    button.primary:hover {
      background: #2980b9;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 25px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    th, td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #ecf0f1;
    }
    th {
      background: #f8f9fa;
      font-weight: bold;
    }
    tr:hover {
      background: #f8f9fa;
    }
    .total {
      font-weight: bold;
      font-size: 20px;
      margin-top: 25px;
      text-align: right;
      color: #2ecc71;
    }
    .half-pair {
      color: #e74c3c;
      font-size: 12px;
      margin-left: 5px;
    }
    .pair-types-container {
      margin-bottom: 20px;
    }
    .pair-type-item {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
    }
    .pair-type-item input {
      flex: 1;
    }
    .pair-type-item button {
      background: #e74c3c;
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
    }
    .add-pair-type {
      background: #2ecc71 !important;
      margin-top: 10px;
    }
    @media (max-width: 600px) {
      .month-selector {
        flex-direction: column;
        gap: 10px;
      }
      .calendar-day {
        padding: 8px 0;
      }
      .day-week {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>📊 Калькулятор заработка за пары</h1>
    
    <div class="month-selector">
      <div class="month-nav">
        <button class="icon" id="prev-month"><span class="material-icons">chevron_left</span></button>
        <div class="month-title" id="current-month">Март 2024</div>
        <button class="icon" id="next-month"><span class="material-icons">chevron_right</span></button>
      </div>
      <select id="month-select" style="width: 120px;"></select>
      <select id="year-select" style="width: 80px;"></select>
    </div>
    
    <div class="calendar" id="calendar"></div>
    
    <div class="pair-types-container" id="pair-types-container">
      <h3>Типы пар:</h3>
      <div id="pair-types-list">
        <!-- Здесь будут динамически добавляться типы пар -->
      </div>
      <button class="primary add-pair-type" id="add-pair-type">Добавить тип пар</button>
    </div>
    
    <div id="selected-days"></div>
    
    <button class="primary" id="calculate">Рассчитать заработок</button>
    
    <div id="result"></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const calendarEl = document.getElementById('calendar');
      const selectedDaysEl = document.getElementById('selected-days');
      const calculateBtn = document.getElementById('calculate');
      const resultEl = document.getElementById('result');
      const prevMonthBtn = document.getElementById('prev-month');
      const nextMonthBtn = document.getElementById('next-month');
      const monthSelect = document.getElementById('month-select');
      const yearSelect = document.getElementById('year-select');
      const currentMonthEl = document.getElementById('current-month');
      const pairTypesList = document.getElementById('pair-types-list');
      const addPairTypeBtn = document.getElementById('add-pair-type');
      
      let currentDate = new Date();
      let currentMonth = currentDate.getMonth();
      let currentYear = currentDate.getFullYear();
      let selectedDays = {};
      let pairTypes = [
        { id: 1, name: 'МКА', rate: 500 },
        { id: 2, name: 'РПО', rate: 900 }
      ];
      
      const months = [
        'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
        'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
      ];
      
      const weekdaysShort = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
      const weekdaysFull = ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'];
      
      // Получить день недели для даты
      function getWeekday(year, month, day) {
        const date = new Date(year, month, day);
        return date.getDay(); // 0 (Вс) - 6 (Сб)
      }
      
      // Форматирование даты
      function formatDate(year, month, day, full = false) {
        const weekday = getWeekday(year, month, day);
        return full 
          ? `${weekdaysFull[weekday]}, ${day} ${months[month]} ${year}`
          : `${weekdaysShort[weekday]}, ${day} ${months[month]}`;
      }
      
      function initSelectors() {
        months.forEach((month, index) => {
          const option = document.createElement('option');
          option.value = index;
          option.textContent = month;
          if (index === currentMonth) option.selected = true;
          monthSelect.appendChild(option);
        });
        
        for (let year = currentYear - 2; year <= currentYear + 3; year++) {
          const option = document.createElement('option');
          option.value = year;
          option.textContent = year;
          if (year === currentYear) option.selected = true;
          yearSelect.appendChild(option);
        }
      }
      
      function updateCalendar() {
        calendarEl.innerHTML = '';
        
        // Заголовки дней недели
        ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'].forEach(day => {
          const dayEl = document.createElement('div');
          dayEl.className = 'calendar-header';
          dayEl.textContent = day;
          calendarEl.appendChild(dayEl);
        });
        
        const firstDay = new Date(currentYear, currentMonth, 1).getDay();
        const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
        
        // Пустые ячейки для начала месяца
        const startDay = firstDay === 0 ? 6 : firstDay - 1;
        for (let i = 0; i < startDay; i++) {
          const emptyEl = document.createElement('div');
          emptyEl.className = 'calendar-day empty';
          calendarEl.appendChild(emptyEl);
        }
        
        // Дни месяца
        for (let day = 1; day <= daysInMonth; day++) {
          const weekday = getWeekday(currentYear, currentMonth, day);
          const dayEl = document.createElement('div');
          dayEl.className = 'calendar-day';
          
          const dayNumber = document.createElement('div');
          dayNumber.className = 'day-number';
          dayNumber.textContent = day;
          dayEl.appendChild(dayNumber);
          
          const dateKey = `${currentYear}-${currentMonth}-${day}`;
          if (selectedDays[dateKey]) {
            dayEl.classList.add('selected');
          }
          
          dayEl.addEventListener('click', () => {
            dayEl.classList.toggle('selected');
            const dateKey = `${currentYear}-${currentMonth}-${day}`;
            if (selectedDays[dateKey]) {
              delete selectedDays[dateKey];
            } else {
              // Создаем объект для хранения количества пар каждого типа
              const pairsData = { half: false };
              pairTypes.forEach(type => {
                pairsData[type.id] = 0;
              });
              selectedDays[dateKey] = pairsData;
            }
            renderSelectedDays();
          });
          
          calendarEl.appendChild(dayEl);
        }
        
        currentMonthEl.textContent = `${months[currentMonth]} ${currentYear}`;
        monthSelect.value = currentMonth;
        yearSelect.value = currentYear;
      }
      
      function renderPairTypes() {
        pairTypesList.innerHTML = '';
        
        pairTypes.forEach((type, index) => {
          const typeItem = document.createElement('div');
          typeItem.className = 'pair-type-item';
          
          const nameInput = document.createElement('input');
          nameInput.type = 'text';
          nameInput.value = type.name;
          nameInput.placeholder = 'Название типа пар';
          nameInput.addEventListener('change', () => {
            type.name = nameInput.value;
            renderSelectedDays(); // Обновляем отображение выбранных дней
          });
          
          const rateInput = document.createElement('input');
          rateInput.type = 'number';
          rateInput.value = type.rate;
          rateInput.placeholder = 'Ставка';
          rateInput.addEventListener('change', () => {
            type.rate = parseFloat(rateInput.value) || 0;
          });
          
          const deleteBtn = document.createElement('button');
          deleteBtn.textContent = '×';
          deleteBtn.addEventListener('click', () => {
            if (pairTypes.length > 1) { // Не удаляем последний тип
              pairTypes.splice(index, 1);
              renderPairTypes();
              renderSelectedDays();
            } else {
              alert('Должен остаться хотя бы один тип пар!');
            }
          });
          
          typeItem.appendChild(nameInput);
          typeItem.appendChild(rateInput);
          typeItem.appendChild(deleteBtn);
          
          pairTypesList.appendChild(typeItem);
        });
      }
      
      function renderSelectedDays() {
        selectedDaysEl.innerHTML = '<h3>Выбранные дни:</h3>';
        
        for (const dateKey in selectedDays) {
          const [year, month, day] = dateKey.split('-').map(Number);
          const dayContainer = document.createElement('div');
          dayContainer.style.marginBottom = '15px';
          dayContainer.style.padding = '15px';
          dayContainer.style.border = '1px solid #eee';
          dayContainer.style.borderRadius = '8px';
          
          const dayTitle = document.createElement('h4');
          dayTitle.textContent = formatDate(year, month, day, true);
          dayContainer.appendChild(dayTitle);
          
          // Создаем поля ввода для каждого типа пар
          pairTypes.forEach(type => {
            const typeLabel = document.createElement('label');
            typeLabel.textContent = `Пары ${type.name}:`;
            dayContainer.appendChild(typeLabel);
            
            const typeInput = document.createElement('input');
            typeInput.type = 'number';
            typeInput.value = selectedDays[dateKey][type.id] || 0;
            typeInput.min = '0';
            typeInput.step = '0.5';
            typeInput.addEventListener('change', () => {
              selectedDays[dateKey][type.id] = parseFloat(typeInput.value) || 0;
            });
            dayContainer.appendChild(typeInput);
          });
          
          const checkboxGroup = document.createElement('div');
          checkboxGroup.className = 'checkbox-group';
          
          const halfCheckbox = document.createElement('input');
          halfCheckbox.type = 'checkbox';
          halfCheckbox.id = `half-${dateKey}`;
          halfCheckbox.checked = selectedDays[dateKey].half;
          halfCheckbox.addEventListener('change', () => {
            selectedDays[dateKey].half = halfCheckbox.checked;
          });
          
          const halfLabel = document.createElement('label');
          halfLabel.htmlFor = `half-${dateKey}`;
          halfLabel.textContent = 'Учитывать как половинные пары (40 мин)';
          
          checkboxGroup.appendChild(halfCheckbox);
          checkboxGroup.appendChild(halfLabel);
          dayContainer.appendChild(checkboxGroup);
          
          selectedDaysEl.appendChild(dayContainer);
        }
      }
      
      calculateBtn.addEventListener('click', () => {
        let total = 0;
        let tableHTML = `
          <table>
            <tr>
              <th>Дата</th>
              ${pairTypes.map(type => `<th>Пары ${type.name}</th>`).join('')}
              <th>Заработок</th>
            </tr>
        `;
        
        for (const dateKey in selectedDays) {
          const [year, month, day] = dateKey.split('-').map(Number);
          const isHalf = selectedDays[dateKey].half;
          
          let dayTotal = 0;
          let pairsCells = '';
          
          // Рассчитываем для каждого типа пар
          pairTypes.forEach(type => {
            const pairsCount = parseFloat(selectedDays[dateKey][type.id]) || 0;
            const rate = type.rate;
            const typeEarnings = isHalf ? pairsCount * rate * 0.5 : pairsCount * rate;
            dayTotal += typeEarnings;
            
            pairsCells += `
              <td>${pairsCount}${isHalf ? '<span class="half-pair">(½)</span>' : ''}</td>
            `;
          });
          
          total += dayTotal;
          
          tableHTML += `
            <tr>
              <td>${formatDate(year, month, day)}</td>
              ${pairsCells}
              <td>${dayTotal.toFixed(2)} руб</td>
            </tr>
          `;
        }
        
        tableHTML += `</table>`;
        tableHTML += `<div class="total">Итого: ${total.toFixed(2)} руб</div>`;
        
        resultEl.innerHTML = tableHTML;
      });
      
      addPairTypeBtn.addEventListener('click', () => {
        const newId = pairTypes.length > 0 ? Math.max(...pairTypes.map(t => t.id)) + 1 : 1;
        pairTypes.push({
          id: newId,
          name: `Тип ${newId}`,
          rate: 500
        });
        renderPairTypes();
      });
      
      prevMonthBtn.addEventListener('click', () => {
        if (currentMonth === 0) {
          currentMonth = 11;
          currentYear--;
        } else {
          currentMonth--;
        }
        updateCalendar();
      });
      
      nextMonthBtn.addEventListener('click', () => {
        if (currentMonth === 11) {
          currentMonth = 0;
          currentYear++;
        } else {
          currentMonth++;
        }
        updateCalendar();
      });
      
      monthSelect.addEventListener('change', () => {
        currentMonth = parseInt(monthSelect.value);
        updateCalendar();
      });
      
      yearSelect.addEventListener('change', () => {
        currentYear = parseInt(yearSelect.value);
        updateCalendar();
      });
      
      // Инициализация
      initSelectors();
      renderPairTypes();
      updateCalendar();
    });
  </script>
</body>
</html>