{% extends "base.html" %}
{% block title %}{% if entry %}Modifier{% else %}Nouvelle entrée{% endif %}{% endblock %}
{% block content %}

<h1 class="text-xl font-bold mb-4">
  {% if entry %}Modifier le {{ entry.date }}{% else %}Nouvelle journée{% endif %}
</h1>

<form method="POST" class="space-y-5">

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Date</label>
    <input type="date" name="date"
           value="{{ entry.date.isoformat() if entry else today }}"
           class="w-full border rounded-lg px-3 py-2 text-sm" required>
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-2">Type de journée</label>
    <div class="grid grid-cols-3 gap-2">
      {% for value, label in day_types %}
      <label class="cursor-pointer">
        <input type="radio" name="day_type" value="{{ value }}"
               {% if entry and entry.day_type == value %}checked{% elif not entry and value == 'WORK' %}checked{% endif %}
               class="sr-only peer"
               onchange="updateJourneyVisibility(this.value)">
        <div class="text-center text-sm py-2 px-1 rounded-lg border-2 border-gray-200
                    peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700
                    hover:border-gray-300 transition">
          {{ label }}
        </div>
      </label>
      {% endfor %}
    </div>
  </div>

  <div id="journey-section"
       class="{% if entry and entry.day_type in day_types_without_journey %}hidden{% endif %}">
    <label class="block text-sm font-medium text-gray-700 mb-1">Trajet domicile-travail</label>
    <select name="journey_profile_id" id="journey_profile_id"
            onchange="updateMotorVehicleVisibility(this.value)"
            class="w-full border rounded-lg px-3 py-2 text-sm">
      <option value="">— Pas de déplacement —</option>
      {% for jid, jdata in journeys.items() %}
      <option value="{{ jid }}"
              data-has-motor="{{ 'true' if 'moteur' in jdata.distances else 'false' }}"
              {% if entry and entry.journey_profile_id == jid %}selected{% endif %}>
        {{ jdata.name }}
        ({% for v, d in jdata.distances.items() %}{{ d }} km {{ v }}{% if not loop.last %} + {% endif %}{% endfor %})
      </option>
      {% endfor %}
    </select>
  </div>

  <div id="motor-vehicle-section" class="{% if not entry or not entry.motor_vehicle_id %}hidden{% endif %}">
    <label class="block text-sm font-medium text-gray-700 mb-1">Véhicule à moteur utilisé</label>
    <div class="grid grid-cols-2 gap-2">
      {% for vid, vdata in motor_vehicles.items() %}
      <label class="cursor-pointer">
        <input type="radio" name="motor_vehicle_id" value="{{ vid }}"
               {% if entry and entry.motor_vehicle_id == vid %}checked{% endif %}
               class="sr-only peer">
        <div class="text-center text-sm py-2 px-1 rounded-lg border-2 border-gray-200
                    peer-checked:border-orange-500 peer-checked:bg-orange-50 peer-checked:text-orange-700
                    hover:border-gray-300 transition">
          {{ vdata.name }}
        </div>
      </label>
      {% endfor %}
    </div>
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-2">Plages horaires</label>
    <div id="time-slots" class="space-y-2">
      {% if entry and entry.time_slots %}
        {% for slot in entry.time_slots %}
        <div class="flex gap-2 items-center time-slot-row">
          <input type="time" name="start_time" value="{{ slot.start_time.strftime('%H:%M') }}"
                 class="flex-1 border rounded-lg px-3 py-2 text-sm">
          <span class="text-gray-400">→</span>
          <input type="time" name="end_time" value="{{ slot.end_time.strftime('%H:%M') }}"
                 class="flex-1 border rounded-lg px-3 py-2 text-sm">
          <button type="button" onclick="this.closest('.time-slot-row').remove()"
                  class="text-red-400 hover:text-red-600 text-xl leading-none">×</button>
        </div>
        {% endfor %}
      {% else %}
        <div class="flex gap-2 items-center time-slot-row">
          <input type="time" name="start_time" class="flex-1 border rounded-lg px-3 py-2 text-sm">
          <span class="text-gray-400">→</span>
          <input type="time" name="end_time" class="flex-1 border rounded-lg px-3 py-2 text-sm">
          <button type="button" onclick="this.closest('.time-slot-row').remove()"
                  class="text-red-400 hover:text-red-600 text-xl leading-none">×</button>
        </div>
      {% endif %}
    </div>
    <button type="button" onclick="addTimeSlot()"
            class="mt-2 text-sm text-blue-600 hover:underline">+ Ajouter une plage</button>
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Commentaire</label>
    <textarea name="comment" rows="2"
              class="w-full border rounded-lg px-3 py-2 text-sm"
              placeholder="Formation, déplacement exceptionnel...">{{ entry.comment if entry and entry.comment else '' }}</textarea>
  </div>

  <div class="flex gap-3 pt-2">
    <button type="submit"
            class="flex-1 bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
      Enregistrer
    </button>
    <a href="/" class="flex-1 text-center bg-gray-100 text-gray-700 py-3 rounded-lg font-semibold hover:bg-gray-200 transition">
      Annuler
    </a>
  </div>
</form>

<script>
const NO_JOURNEY_TYPES = {{ day_types_without_journey | list | tojson }};

function updateJourneyVisibility(dayType) {
  const journeySection = document.getElementById('journey-section');
  const hidden = NO_JOURNEY_TYPES.includes(dayType);
  journeySection.classList.toggle('hidden', hidden);
  if (hidden) {
    updateMotorVehicleVisibility('');
  } else {
    const select = document.getElementById('journey_profile_id');
    if (select) updateMotorVehicleVisibility(select.value);
  }
}

function updateMotorVehicleVisibility(journeyId) {
  const section = document.getElementById('motor-vehicle-section');
  const select = document.getElementById('journey_profile_id');
  const selectedOption = select ? select.querySelector(`option[value="${journeyId}"]`) : null;
  const hasMotor = selectedOption && selectedOption.dataset.hasMotor === 'true';
  section.classList.toggle('hidden', !hasMotor);
}

function addTimeSlot() {
  const container = document.getElementById('time-slots');
  const row = document.createElement('div');
  row.className = 'flex gap-2 items-center time-slot-row';
  row.innerHTML = `
    <input type="time" name="start_time" class="flex-1 border rounded-lg px-3 py-2 text-sm">
    <span class="text-gray-400">→</span>
    <input type="time" name="end_time" class="flex-1 border rounded-lg px-3 py-2 text-sm">
    <button type="button" onclick="this.closest('.time-slot-row').remove()"
            class="text-red-400 hover:text-red-600 text-xl leading-none">×</button>
  `;
  container.appendChild(row);
}
</script>
{% endblock %}