{% extends "base.html" %}
{% block title %}Add Device — Battery Tracker{% endblock %}

{% block content %}
<h1>{% if prefill_parent %}Add Sub-component to {{ prefill_parent.name }}{% else %}Add Device{% endif %}</h1>

<div class="card">
  <form method="post" action="{{ url_for('device_add') }}">
    {% if prefill_parent %}
    <input type="hidden" name="parent_id" value="{{ prefill_parent.id }}">
    <p class="text-muted" style="margin-bottom:0.75rem;">
      Adding as a sub-component of <a href="{{ url_for('device_detail', device_id=prefill_parent.id) }}">{{ prefill_parent.name }}</a>.
    </p>
    {% endif %}
    <div class="form-group">
      <label for="name">Device Name <span class="text-danger">*</span></label>
      <input type="text" id="name" name="name" value="{{ form_name|default('') }}"
             placeholder="e.g. Game Controller" required>
    </div>

    {% if not prefill_parent %}
    <div class="form-group">
      <label style="display:flex;align-items:center;gap:0.5rem;font-weight:normal;cursor:pointer;">
        <input type="checkbox" id="has-subcomponents" onchange="toggleSubcomponents(this)">
        This device has sub-components (batteries tracked per sub-component, not directly)
      </label>
    </div>
    {% endif %}

    <div id="battery-fields">
    <div class="form-group">
      <label for="battery_slots">Battery Slots <span class="text-danger">*</span></label>
      <input type="number" id="battery_slots" name="battery_slots"
             value="{{ form_slots|default(1) }}" min="1" required>
    </div>

    <div class="form-group">
      <label for="battery-size-select">Battery Size <span class="text-danger">*</span></label>
      {% set _preset_sizes = ['AA','AAA','C','D','9V','CR2032','CR2025','CR2016','18650','14500','16340','26650','LR44/AG13'] %}
      {% set _cur_size = form_battery_size|default('') %}
      <select id="battery-size-select" onchange="metaSelectChanged(this,'battery_size')">
        <option value="">— select —</option>
        {% for s in _preset_sizes %}
        <option value="{{ s }}" {% if _cur_size == s %}selected{% endif %}>{{ s }}</option>
        {% endfor %}
        {% for s in device_battery_sizes|default([]) %}
          {% if s not in _preset_sizes %}
        <option value="{{ s }}" {% if _cur_size == s %}selected{% endif %}>{{ s }}</option>
          {% endif %}
        {% endfor %}
        <option value="__new__" {% if _cur_size and _cur_size not in _preset_sizes %}selected{% endif %}>Other…</option>
      </select>
      <input type="text" id="battery_size" name="battery_size" value="{{ _cur_size }}"
             placeholder="e.g. CR123A"
             style="display:{% if _cur_size and _cur_size not in _preset_sizes %}''{% else %}none{% endif %};margin-top:0.4rem;">
    </div>
    </div><!-- #battery-fields -->

    {% if not prefill_parent %}
    <div class="form-group">
      <label>Type</label>
      {% set _preset_types = ['Remote Control','Game Controller','Flashlight','Lock','Sensor','Toy','Clock','Smoke Detector'] %}
      {% set _cur_type = form_device_type|default('') %}
      <select id="device-type-select" onchange="metaSelectChanged(this,'device_type')">
        <option value="">— none —</option>
        {% for opt in _preset_types %}
        <option value="{{ opt }}" {% if _cur_type == opt %}selected{% endif %}>{{ opt }}</option>
        {% endfor %}
        {% for opt in device_types|default([]) %}
          {% if opt not in _preset_types %}
        <option value="{{ opt }}" {% if _cur_type == opt %}selected{% endif %}>{{ opt }}</option>
          {% endif %}
        {% endfor %}
        <option value="__new__" {% if _cur_type and _cur_type not in _preset_types and _cur_type not in device_types|default([]) %}selected{% endif %}>Other…</option>
      </select>
      <input type="text" id="device_type" name="device_type" value="{{ _cur_type }}"
             placeholder="Enter device type"
             style="display:{% if _cur_type and _cur_type not in _preset_types %}''{% else %}none{% endif %};margin-top:0.4rem;">
    </div>

    <div class="form-group">
      <label>Location</label>
      {% set _cur_loc = form_location|default('') %}
      <select id="location-select" onchange="metaSelectChanged(this,'location')">
        <option value="">— none —</option>
        {% for loc in device_locations|default([]) %}
        <option value="{{ loc }}" {% if _cur_loc == loc %}selected{% endif %}>{{ loc }}</option>
        {% endfor %}
        {% if _cur_loc and _cur_loc not in device_locations|default([]) %}
        <option value="{{ _cur_loc }}" selected>{{ _cur_loc }}</option>
        {% endif %}
        <option value="__new__">➕ New location…</option>
      </select>
      <input type="text" id="location" name="location" value="{{ _cur_loc }}"
             placeholder="e.g. Living Room, Bedroom"
             style="display:none;margin-top:0.4rem;">
    </div>
    {% endif %}

    <div class="form-group">
      <label for="notes">Notes</label>
      <textarea id="notes" name="notes" placeholder="Optional notes…">{{ form_notes|default('') }}</textarea>
    </div>

    <div class="form-actions">
      <button class="btn btn-primary" type="submit">Add Device</button>
      <a class="btn btn-secondary" href="{{ url_for('device_list') }}">Cancel</a>
    </div>
  </form>
</div>

<script>
function toggleSubcomponents(cb) {
  var fields = document.getElementById('battery-fields');
  var slots = document.getElementById('battery_slots');
  var size = document.getElementById('battery_size');
  if (cb.checked) {
    fields.style.display = 'none';
    slots.value = '0';
    slots.removeAttribute('required');
    slots.removeAttribute('min');
    size.value = '';
    size.removeAttribute('required');
  } else {
    fields.style.display = '';
    slots.value = '1';
    slots.setAttribute('required', '');
    slots.setAttribute('min', '1');
    size.setAttribute('required', '');
  }
}

function metaSelectChanged(sel, inputId) {
  var input = document.getElementById(inputId);
  if (sel.value === '__new__') {
    input.style.display = '';
    input.value = '';
    input.focus();
  } else {
    input.style.display = 'none';
    input.value = sel.value;
  }
}
</script>
{% endblock %}