{% extends "base.html" %}
{% load static %}

{% block title %}Контакты — Tender360{% endblock %}
{% block meta_description %}Контакты Tender360. Свяжитесь с нами для консультации по тендерному сопровождению. Телефон, email, адрес. Получите профессиональную помощь в участии в тендерах.{% endblock %}
{% block meta_keywords %}контакты Tender360, связь с компанией, консультация по тендерам, телефон для тендеров{% endblock %}
{% block canonical_url %}https://tender360.ru/contacts/{% endblock %}

{% block extra_css %}
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.contacts-page {
  padding: 48px 0 60px;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  min-height: calc(100vh - 200px);
}

.contacts-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.contacts-header {
  text-align: center;
  margin-bottom: 50px;
}

.contacts-title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 900;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #50be87 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: -1px;
}

.contacts-subtitle {
  font-size: 18px;
  color: #666;
  font-weight: 600;
}

.contacts-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 50px;
}

.contacts-info {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e9eef3;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
}

.contacts-info h2 {
  font-size: 18px;
  font-weight: 900;
  color: #1e3c72;
  margin-bottom: 12px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e8edf3;
}

.contact-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.contact-icon {
  width: 32px;
  height: 32px;
  background: #eaf3ff;
  border: 1px solid #d7e6ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1976d2;
  flex-shrink: 0;
}

.contact-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.contact-details h3 {
  font-size: 11px;
  font-weight: 800;
  color: #7a8a9a;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.contact-details p {
  font-size: 15px;
  font-weight: 700;
  color: #1e3c72;
  margin: 0;
  line-height: 1.4;
}

.contact-details a {
  color: #1e3c72;
  text-decoration: none;
  transition: color 0.3s;
}

.contact-details a:hover {
  color: #50be87;
}

.contact-form {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e9eef3;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
}

.contact-form h2 {
  font-size: 18px;
  font-weight: 900;
  color: #1e3c72;
  margin-bottom: 10px;
}

.contact-form p {
  color: #64748b;
  margin-bottom: 12px;
  font-size: 13px;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  font-weight: 700;
  color: #44556b;
  margin-bottom: 4px;
  font-size: 12px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e3eaf2;
  border-radius: 10px;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  background: #f9fbff;
  transition: all 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1976d2;
  background: #fff;
  box-shadow: 0 0 0 3px #1976d222;
}

.form-group textarea {
  resize: vertical;
  min-height: 96px;
}

/* Стили для чекбокса согласия */
.contact-form .form-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
}

.contact-form .form-check-input {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 0 !important;
  margin-top: 0.25rem !important;
  cursor: pointer;
  border: 2px solid #1976d2 !important;
  background-color: #fff !important;
  border-radius: 4px !important;
  flex-shrink: 0;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  transition: all 0.2s ease;
}

.contact-form .form-check-input:checked {
  background-color: #50be87 !important;
  border-color: #50be87 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.contact-form .form-check-input:focus {
  border-color: #50be87 !important;
  box-shadow: 0 0 0 3px rgba(80, 190, 135, 0.25) !important;
  outline: none !important;
}

.contact-form .form-check-label {
  color: #44556b !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  cursor: pointer;
  flex: 1;
  font-weight: 500;
}

.contact-form .form-check-label a {
  color: #1976d2 !important;
  text-decoration: underline !important;
  font-weight: 600;
}

.contact-form .form-check-label a:hover {
  color: #50be87 !important;
}

/* Исключение для чекбоксов - не применяем стили input к чекбоксам */
.form-group input[type="checkbox"] {
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.form-submit {
  width: 100%;
  padding: 11px;
  background: linear-gradient(135deg, #1976d2 0%, #2a5298 100%);
  color: #fff;
  border: none;
  border-radius: 32px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.form-submit:hover {
  background: linear-gradient(135deg, #50be87 0%, #2a5298 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(30, 60, 114, 0.3);
}

.map-container {
  background: white;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.map-container h2 {
  font-size: 28px;
  font-weight: 900;
  color: #1e3c72;
  margin-bottom: 20px;
  text-align: center;
}

.map-wrapper {
  position: relative;
  width: 100%;
  height: 450px;
  border-radius: 16px;
  overflow: hidden;
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.working-hours {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  padding: 30px;
  border-radius: 20px;
  color: white;
  margin-top: 40px;
}

.working-hours h2 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 20px;
  color: #ffd700;
}

.hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.hours-item {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.hours-day {
  font-weight: 700;
}

.hours-time {
  color: #ffd700;
  font-weight: 600;
}

@media (max-width: 992px) {
  .contacts-content {
    grid-template-columns: 1fr;
  }
  
  .hours-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .contacts-page {
    padding: 40px 0;
  }
  
  .contacts-info,
  .contact-form {
    padding: 30px 20px;
  }
  
  .contacts-title {
    font-size: 28px;
  }
  
  .map-wrapper {
    height: 300px;
  }
}
</style>
{% endblock %}

{% block content %}
<section class="contacts-page">
  <div class="contacts-container">
    <div class="contacts-header">
      <h1 class="contacts-title">Контакты</h1>
      <p class="contacts-subtitle">Свяжитесь с нами удобным способом</p>
    </div>
    
    <div class="contacts-content">
      <!-- Контактная информация -->
      <div class="contacts-info">
        <h2>Наши контакты</h2>
        
        <div class="contact-item">
          <div class="contact-icon">
            <svg viewBox="0 0 24 24" fill="none">
              <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="currentColor" stroke-width="2"/>
              <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="contact-details">
            <h3>Юридический адрес</h3>
            <p>ИП Латыпов И.М.<br>г. Уфа, ул. Бакалинская, 7/1</p>
          </div>
        </div>
        
        <div class="contact-item">
          <div class="contact-icon">
            <svg viewBox="0 0 24 24" fill="none">
              <path d="M3 5C3 3.89543 3.89543 3 5 3H8.27924C8.70967 3 9.09181 3.27543 9.22792 3.68377L10.7257 8.17721C10.8831 8.64932 10.6694 9.16531 10.2243 9.38787L7.96701 10.5165C9.06925 12.9612 11.0388 14.9308 13.4835 16.033L14.6121 13.7757C14.8347 13.3306 15.3507 13.1169 15.8228 13.2743L20.3162 14.7721C20.7246 14.9082 21 15.2903 21 15.7208V19C21 20.1046 20.1046 21 19 21H18C9.71573 21 3 14.2843 3 6V5Z" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="contact-details">
            <h3>Телефон</h3>
            <p><a href="tel:89874994064">8 987 499 40 64</a></p>
          </div>
        </div>
        
        <div class="contact-item">
          <div class="contact-icon">
            <svg viewBox="0 0 24 24" fill="none">
              <path d="M3 8L10.89 13.26C11.2187 13.4793 11.6049 13.5963 12 13.5963C12.3951 13.5963 12.7813 13.4793 13.11 13.26L21 8M5 19H19C19.5304 19 20.0391 18.7893 20.4142 18.4142C20.7893 18.0391 21 17.5304 21 17V7C21 6.46957 20.7893 5.96086 20.4142 5.58579C20.0391 5.21071 19.5304 5 19 5H5C4.46957 5 3.96086 5.21071 3.58579 5.58579C3.21071 5.96086 3 6.46957 3 7V17C3 17.5304 3.21071 18.0391 3.58579 18.4142C3.96086 18.7893 4.46957 19 5 19Z" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="contact-details">
            <h3>Email</h3>
            <p><a href="mailto:{{ company_email }}">{{ company_email }}</a></p>
          </div>
        </div>
        
        <div class="contact-item">
          <div class="contact-icon">
            <svg viewBox="0 0 24 24" fill="none">
              <path d="M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="contact-details">
            <h3>Режим работы</h3>
            <p>Пн-Пт: 9:00 - 18:00<br>Сб-Вс: Выходной</p>
          </div>
        </div>
      </div>
      
      <!-- Форма обратной связи -->
      <div class="contact-form">
        <h2>Напишите нам</h2>
        <p>Заполните форму, и мы свяжемся с вами в ближайшее время</p>
        
        <form method="post" action="{% url 'main:contact_request' %}" class="ajax-form">
          {% csrf_token %}
          
          <input type="hidden" name="request_type" value="message">
          <input type="text" name="website" style="display:none" tabindex="-1" autocomplete="off">
          
          <div class="form-group">
            <label for="name">Ваше имя *</label>
            <input type="text" id="name" name="name" required>
          </div>
          
          <div class="form-group">
            <label for="phone">Телефон *</label>
            <input type="tel" id="phone" name="phone" required>
          </div>
          
          <div class="form-group">
            <label for="email">Email *</label>
            <input type="email" id="email" name="email" required>
          </div>
          
          <div class="form-group">
            <label for="message">Сообщение (до 100 символов)</label>
            <textarea id="contacts_message" name="message" placeholder="Расскажите, чем мы можем вам помочь..." maxlength="100" rows="3"></textarea>
            <small style="display: block; margin-top: 5px; color: #64748b; font-size: 0.85rem;"><span id="contacts_message_count">0</span>/100 символов</small>
          </div>
          
          <div class="form-group">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="contacts_personal_data_consent" name="personal_data_consent" required>
              <label class="form-check-label" for="contacts_personal_data_consent" style="font-size: 0.875rem;">
                Я даю согласие на обработку моих персональных данных в соответствии с <a href="/disclaimer/" target="_blank" style="text-decoration: underline;">Федеральным законом № 152-ФЗ «О персональных данных»</a> и ознакомился с <a href="/disclaimer/" target="_blank" style="text-decoration: underline;">условиями использования сайта</a>
              </label>
            </div>
          </div>
          
          <button type="submit" class="form-submit">Отправить сообщение</button>
        </form>
      </div>
    </div>
    
    <!-- Карта -->
    <div class="map-container">
      <h2>Мы на карте</h2>
      <div class="map-wrapper">
        <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Aef4f3e2d1c0b9a8d7e6f5a4b3c2d1e0f&amp;source=constructor&amp;ll=55.991363%2C54.716154&amp;z=16&amp;l=map&amp;pt=55.991363,54.716154,pm2rdm" width="100%" height="450" frameborder="0"></iframe>
      </div>
    </div>
    
    <!-- Часы работы (декоративный блок) -->
    <div class="working-hours">
      <h2>📅 График работы</h2>
      <div class="hours-grid">
        <div class="hours-item">
          <span class="hours-day">Понедельник</span>
          <span class="hours-time">9:00 - 18:00</span>
        </div>
        <div class="hours-item">
          <span class="hours-day">Вторник</span>
          <span class="hours-time">9:00 - 18:00</span>
        </div>
        <div class="hours-item">
          <span class="hours-day">Среда</span>
          <span class="hours-time">9:00 - 18:00</span>
        </div>
        <div class="hours-item">
          <span class="hours-day">Четверг</span>
          <span class="hours-time">9:00 - 18:00</span>
        </div>
        <div class="hours-item">
          <span class="hours-day">Пятница</span>
          <span class="hours-time">9:00 - 18:00</span>
        </div>
        <div class="hours-item">
          <span class="hours-day">Суббота</span>
          <span class="hours-time">Выходной</span>
        </div>
        <div class="hours-item">
          <span class="hours-day">Воскресенье</span>
          <span class="hours-time">Выходной</span>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
// Плавная прокрутка
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    const href = this.getAttribute('href');
    if (href !== '#' && href.length > 1) {
      const target = document.querySelector(href);
      if (target) {
        e.preventDefault();
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  });
});

// Инициализация формы на странице контактов
document.addEventListener('DOMContentLoaded', function() {
  // Установка времени начала заполнения формы
  const form = document.querySelector('.contact-form .ajax-form');
  if (form) {
    const startTimeField = form.querySelector('.form-start-time');
    if (!startTimeField) {
      const hiddenInput = document.createElement('input');
      hiddenInput.type = 'hidden';
      hiddenInput.name = 'form_start_time';
      hiddenInput.className = 'form-start-time';
      hiddenInput.value = Date.now() / 1000;
      form.appendChild(hiddenInput);
    }
    
    // Счетчик символов для поля сообщения
    const messageField = document.getElementById('contacts_message');
    const messageCounter = document.getElementById('contacts_message_count');
    if (messageField && messageCounter) {
      messageField.addEventListener('input', function() {
        messageCounter.textContent = this.value.length;
        if (this.value.length > 95) {
          messageCounter.style.color = '#dc3545'; // красный при приближении к лимиту
        } else {
          messageCounter.style.color = '#64748b'; // серый
        }
      });
    }
  }
});
</script>
{% endblock %}