sozday-predlozhenie-dlya-pla/script.js

let vacations = [];

document.getElementById('vacationForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const vacation = {
    id: Date.now(),
    country: document.getElementById('country').value.trim(),
    city: document.getElementById('city').value.trim(),
    dateFrom: document.getElementById('dateFrom').value,
    dateTo: document.getElementById('dateTo').value,
    budget: parseFloat(document.getElementById('budget').value) || 0,
    hotel: document.getElementById('hotel').value.trim(),
    tickets: document.getElementById('tickets').value.trim()
  };
  
  vacations.unshift(vacation);
  renderCards();
  updateStats();
  this.reset();
});

function renderCards() {
  const grid = document.getElementById('cardsGrid');
  const emptyState = document.getElementById('emptyState');
  
  if (vacations.length === 0) {
    grid.innerHTML = '';
    emptyState.style.display = 'block';
    return;
  }
  
  emptyState.style.display = 'none';
  
  grid.innerHTML = vacations.map(v => {
    const days = calculateDays(v.dateFrom, v.dateTo);
    const dates = formatDateRange(v.dateFrom, v.dateTo);
    
    return `
      <div class="vacation-card">
        <div class="card-location">
          <div class="flag-icon">🌍</div>
          <div class="location-info">
            <h3>${escapeHtml(v.country)}</h3>
            <p>${escapeHtml(v.city)}</p>
          </div>
        </div>
        
        <div class="card-details">
          <div class="detail-row">
            <span class="d-icon">📅</span>
            <span>${dates} <strong>(${days} дн.)</strong></span>
          </div>
          ${v.hotel ? `
          <div class="detail-row">
            <span class="d-icon">🏨</span>
            <span>${escapeHtml(v.hotel)}</span>
          </div>
          ` : ''}
          ${v.tickets ? `
          <div class="detail-row">
            <span class="d-icon">🎫</span>
            <span>${escapeHtml(v.tickets)}</span>
          </div>
          ` : ''}
        </div>
        
        <div class="card-budget">
          <span class="budget-label">Бюджет</span>
          <span class="budget-value">$${v.budget.toLocaleString()}</span>
        </div>
        
        <div class="card-actions">
          <button class="btn-delete" onclick="deleteVacation(${v.id})">
            🗑️ Удалить
          </button>
        </div>
      </div>
    `;
  }).join('');
}

function deleteVacation(id) {
  if (confirm('Удалить этот вариант?')) {
    vacations = vacations.filter(v => v.id !== id);
    renderCards();
    updateStats();
  }
}

function updateStats() {
  const total = vacations.length;
  const avg = total > 0 
    ? Math.round(vacations.reduce((sum, v) => sum + v.budget, 0) / total)
    : 0;
  
  document.getElementById('totalCount').textContent = total;
  document.getElementById('avgBudget').textContent = avg > 0 ? `$${avg.toLocaleString()}` : '$0';
}

function calculateDays(from, to) {
  const start = new Date(from);
  const end = new Date(to);
  const diff = end - start;
  return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
}

function formatDateRange(from, to) {
  const options = { day: 'numeric', month: 'short' };
  const fromStr = new Date(from).toLocaleDateString('ru-RU', options);
  const toStr = new Date(to).toLocaleDateString('ru-RU', options);
  return `${fromStr} — ${toStr}`;
}

function formatDate(dateStr) {
  return new Date(dateStr).toLocaleDateString('ru-RU', { 
    day: 'numeric', 
    month: 'long', 
    year: 'numeric' 
  });
}

function escapeHtml(text) {
  if (!text) return '';
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

function exportToExcel() {
  if (vacations.length === 0) {
    alert('Сначала добавьте варианты отпуска');
    return;
  }
  
  const headers = ['Страна', 'Город', 'Дата вылета', 'Дата возвращения', 'Дней', 'Бюджет ($)', 'Отель', 'Билеты'];
  const rows = vacations.map(v => [
    v.country,
    v.city,
    formatDate(v.dateFrom),
    formatDate(v.dateTo),
    calculateDays(v.dateFrom, v.dateTo),
    v.budget,
    v.hotel,
    v.tickets
  ]);
  
  const csvContent = '\uFEFF' + [
    headers.join(';'),
    ...rows.map(row => row.map(cell => '"' + String(cell || '').replace(/"/g, '""') + '"').join(';'))
  ].join('\n');
  
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'otpusk_plan.csv';
  link.click();
}

updateStats();
renderCards();