{% extends "admin/layout.html" %}
{% block title %}Settings | {{ brand_short_name }}{% endblock %}
{% block admin_title %}Ajustes del sistema{% endblock %}
{% block admin_content %}
<section class="adm-section space-y-4" style="max-width:48rem;">
  <div>
    <h2 class="text-2xl font-semibold text-neutral-900">Configuración del sistema</h2>
    <p class="mt-2 text-sm text-neutral-600">Datos de transferencia y banners. El usuario solo ve una cuenta al pagar, según el monto.</p>
  </div>

  <form method="post" enctype="multipart/form-data" class="space-y-4 border border-pink-100 bg-white p-6 shadow-lg shadow-neutral-900/5">
    {{ form.hidden_tag() }}

    <div class="space-y-3 border border-neutral-200 bg-neutral-50 p-4">
      <div>
        <h3 class="text-lg font-semibold text-neutral-900">Cuenta A · montos $50 a $350</h3>
        <p class="text-sm text-neutral-600">Uso interno. El usuario no ve este título.</p>
      </div>
      <div class="grid gap-4 sm:grid-cols-2">
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">Banco</label>
          {{ form.recharge_bank_name_300_500(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.recharge_bank_name_300_500 or "") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">Titular</label>
          {{ form.recharge_account_holder_300_500(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.recharge_account_holder_300_500 or "") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">Cuenta</label>
          {{ form.recharge_account_number_300_500(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.recharge_account_number_300_500 or "") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">CLABE</label>
          {{ form.recharge_clabe_300_500(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.recharge_clabe_300_500 or "") }}
        </div>
      </div>
    </div>

    <div class="space-y-3 border border-neutral-200 bg-neutral-50 p-4">
      <div>
        <h3 class="text-lg font-semibold text-neutral-900">Cuenta B · montos $351 a $1,000</h3>
        <p class="text-sm text-neutral-600">Uso interno. El usuario no ve este título.</p>
      </div>
      <div class="grid gap-4 sm:grid-cols-2">
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">Banco</label>
          {{ form.recharge_bank_name_501_1000(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.recharge_bank_name_501_1000 or "") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">Titular</label>
          {{ form.recharge_account_holder_501_1000(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.recharge_account_holder_501_1000 or "") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">Cuenta</label>
          {{ form.recharge_account_number_501_1000(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.recharge_account_number_501_1000 or "") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">CLABE</label>
          {{ form.recharge_clabe_501_1000(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.recharge_clabe_501_1000 or "") }}
        </div>
      </div>
    </div>

    <div class="space-y-3 border border-neutral-200 bg-neutral-50 p-4">
      <div>
        <h3 class="text-lg font-semibold text-neutral-900">Cuenta C · montos $1,001 a $5,000</h3>
        <p class="text-sm text-neutral-600">Uso interno. El usuario no ve este título.</p>
      </div>
      <div class="grid gap-4 sm:grid-cols-2">
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">Banco</label>
          {{ form.recharge_bank_name_1001_2000(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.recharge_bank_name_1001_2000 or "") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">Titular</label>
          {{ form.recharge_account_holder_1001_2000(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.recharge_account_holder_1001_2000 or "") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">Cuenta</label>
          {{ form.recharge_account_number_1001_2000(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.recharge_account_number_1001_2000 or "") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">CLABE</label>
          {{ form.recharge_clabe_1001_2000(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.recharge_clabe_1001_2000 or "") }}
        </div>
      </div>
    </div>

    <div class="space-y-3 border border-neutral-200 bg-neutral-50 p-4">
      <div>
        <h3 class="text-lg font-semibold text-neutral-900">Cuenta D · montos $5,001 en adelante</h3>
        <p class="text-sm text-neutral-600">Uso interno. El usuario no ve este título.</p>
      </div>
      <div class="grid gap-4 sm:grid-cols-2">
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">Banco</label>
          {{ form.bank_name(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.bank_name or "") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">Titular</label>
          {{ form.account_holder(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.account_holder or "") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">Cuenta</label>
          {{ form.account_number(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.account_number or "") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">CLABE</label>
          {{ form.clabe(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.clabe or "") }}
        </div>
      </div>
    </div>

    <div class="space-y-3 border border-neutral-200 bg-neutral-50 p-4">
      <div>
        <h3 class="text-lg font-semibold text-neutral-900">WhatsApp de atención</h3>
        <p class="text-sm text-neutral-600">Hasta 3 enlaces. Al tocar WhatsApp, el usuario entra a uno al azar.</p>
      </div>
      <div class="grid gap-4 sm:grid-cols-1">
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">WhatsApp 1</label>
          {{ form.whatsapp_support_url(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.whatsapp_support_url or "", placeholder="https://wa.me/52...") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">WhatsApp 2 (opcional)</label>
          {{ form.whatsapp_support_url_2(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.whatsapp_support_url_2 or "", placeholder="https://wa.me/52...") }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700">WhatsApp 3 (opcional)</label>
          {{ form.whatsapp_support_url_3(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.whatsapp_support_url_3 or "", placeholder="https://wa.me/52...") }}
        </div>
      </div>
    </div>

    <div class="grid gap-4 sm:grid-cols-2">
      <div>
        <label class="mb-2 block text-sm font-medium text-neutral-700">Enlace de soporte (Telegram)</label>
        {{ form.telegram_support_url(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.telegram_support_url or "", placeholder="https://t.me/soporte...") }}
        <p class="mt-1 text-xs text-neutral-500">Atención directa al usuario.</p>
      </div>
      <div>
        <label class="mb-2 block text-sm font-medium text-neutral-700">Enlace de grupo (Telegram)</label>
        {{ form.telegram_group_url(class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]", value=system_config.telegram_group_url or "", placeholder="https://t.me/+...") }}
        <p class="mt-1 text-xs text-neutral-500">Comunidad oficial de usuarios.</p>
      </div>
    </div>

    <div class="space-y-3 border border-neutral-200 bg-neutral-50 p-4">
      <div>
        <h3 class="text-lg font-semibold text-neutral-900">Horario de retiros</h3>
        <p class="text-sm text-neutral-600">Selecciona los días disponibles y define el rango de atención. Todos los horarios usan la zona horaria CDMX (Ciudad de México).</p>
      </div>
      <div class="grid gap-4 sm:grid-cols-2">
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700" for="withdrawal_start_time">Inicio</label>
          <input
            id="withdrawal_start_time"
            name="withdrawal_start_time"
            type="time"
            class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]"
            value="{{ system_config.withdrawal_start_time or '10:00' }}"
          >
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-neutral-700" for="withdrawal_end_time">Fin</label>
          <input
            id="withdrawal_end_time"
            name="withdrawal_end_time"
            type="time"
            class="w-full border border-neutral-300 bg-white px-4 py-3 text-neutral-900 outline-none focus:border-[#760f3d]"
            value="{{ system_config.withdrawal_end_time or '19:00' }}"
          >
        </div>
      </div>
      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        {% set withdrawal_days = {
          'monday': system_config.withdrawal_monday if system_config.withdrawal_monday is not none else True,
          'tuesday': system_config.withdrawal_tuesday if system_config.withdrawal_tuesday is not none else True,
          'wednesday': system_config.withdrawal_wednesday if system_config.withdrawal_wednesday is not none else True,
          'thursday': system_config.withdrawal_thursday if system_config.withdrawal_thursday is not none else True,
          'friday': system_config.withdrawal_friday if system_config.withdrawal_friday is not none else True,
          'saturday': system_config.withdrawal_saturday if system_config.withdrawal_saturday is not none else True,
          'sunday': system_config.withdrawal_sunday if system_config.withdrawal_sunday is not none else False,
        } %}
        {% for key, label in [('monday', 'Lunes'), ('tuesday', 'Martes'), ('wednesday', 'Miércoles'), ('thursday', 'Jueves'), ('friday', 'Viernes'), ('saturday', 'Sábado'), ('sunday', 'Domingo')] %}
          <label class="flex cursor-pointer items-center gap-3 rounded-2xl border border-neutral-200 bg-white px-4 py-3 text-sm font-medium text-neutral-800">
            <input type="checkbox" name="withdrawal_days" value="{{ key }}" class="h-4 w-4 rounded border-neutral-300 text-[#760f3d] focus:ring-[#760f3d]" {% if withdrawal_days[key] %}checked{% endif %}>
            <span>{{ label }}</span>
          </label>
        {% endfor %}
      </div>
    </div>

    <div class="grid gap-4 sm:grid-cols-2">
      <div class="space-y-2">
        <label class="block text-sm font-medium text-neutral-700">Banner de inicio</label>
        {{ form.home_banner_file(class="w-full border border-dashed border-neutral-300 bg-neutral-50 px-4 py-3 text-sm text-neutral-700 file:mr-4 file:border-0 file:bg-[#760f3d] file:px-4 file:py-2 file:text-white hover:file:bg-[#5d0c30]") }}
        <p class="text-xs text-neutral-500">Se muestra en el inicio del usuario.</p>
        {% if system_config and (system_config.home_banner_image or system_config.banner_image) %}
          <div
            class="banner-shell aspect-[3.4/1] h-auto border border-neutral-200"
          >
            <img src="{{ url_for('static', filename=system_config.home_banner_image or system_config.banner_image) }}" alt="Banner de inicio" class="banner-media absolute inset-0">
          </div>
        {% endif %}
      </div>

      <div class="space-y-2">
        <label class="block text-sm font-medium text-neutral-700">Banner de equipo</label>
        {{ form.team_banner_file(class="w-full border border-dashed border-neutral-300 bg-neutral-50 px-4 py-3 text-sm text-neutral-700 file:mr-4 file:border-0 file:bg-[#760f3d] file:px-4 file:py-2 file:text-white hover:file:bg-[#5d0c30]") }}
        <p class="text-xs text-neutral-500">Se muestra en la sección de equipo.</p>
        {% if system_config and system_config.team_banner_image %}
          <div
            class="banner-shell aspect-[3.4/1] h-auto border border-neutral-200"
          >
            <img src="{{ url_for('static', filename=system_config.team_banner_image) }}" alt="Banner de equipo" class="banner-media absolute inset-0">
          </div>
        {% endif %}
      </div>

      <div class="space-y-2">
        <label class="block text-sm font-medium text-neutral-700">Banner VIP</label>
        {{ form.vip_banner_file(class="w-full border border-dashed border-neutral-300 bg-neutral-50 px-4 py-3 text-sm text-neutral-700 file:mr-4 file:border-0 file:bg-[#760f3d] file:px-4 file:py-2 file:text-white hover:file:bg-[#5d0c30]") }}
        <p class="text-xs text-neutral-500">Anuncio al entrar a la página VIP.</p>
        {% if system_config and system_config.vip_banner_image %}
          <div
            class="banner-shell aspect-[3.4/1] h-auto border border-neutral-200"
          >
            <img src="{{ url_for('static', filename=system_config.vip_banner_image) }}" alt="Banner VIP" class="banner-media absolute inset-0">
          </div>
        {% endif %}
      </div>
    </div>

    <div class="flex justify-end">
      {{ form.submit(class="rounded-full bg-[#760f3d] px-5 py-3 font-semibold text-white transition hover:bg-[#5d0c30]") }}
    </div>
  </form>
</section>
{% endblock %}