{% extends 'base.html.twig' %}

{% block title %}{{ usuario ? 'Editar Usuario' : 'Nuevo Usuario' }}{% endblock %}
{% block page_title %}{{ usuario ? 'Editar Usuario' : 'Nuevo Usuario' }}{% endblock %}

{% block body %}
  {% set userPhoto = usuario and usuario.foto ? '/' ~ usuario.foto|trim('/') : null %}

  <div class="mx-auto max-w-7xl space-y-6">
    <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
      <div>
        <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Administracion</p>
        <h2 class="mt-2 text-3xl font-semibold text-secondary-900">{{ usuario ? 'Editar usuario' : 'Nuevo usuario' }}</h2>
        <p class="mt-2 text-sm text-secondary-500">Gestiona perfil, foto, asignaciones de sitio y permisos granulares.</p>
      </div>
      <a href="{{ path('usuario_index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-secondary-200 px-4 py-2 text-sm font-medium text-secondary-700 transition hover:bg-secondary-50">
        Volver al listado
      </a>
    </div>

    <form method="post" enctype="multipart/form-data" id="user_form" class="grid gap-6 xl:grid-cols-[360px_minmax(0,1fr)]">
      <aside class="space-y-6">
        <section class="overflow-hidden rounded-[2rem] border border-secondary-200 bg-white shadow-sm">
          <div class="border-b border-secondary-200 px-6 py-5">
            <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Perfil</p>
            <h3 class="mt-2 text-xl font-semibold text-secondary-900">Identidad del usuario</h3>
          </div>
          <div class="space-y-5 px-6 py-6">
            <div class="flex flex-col items-center gap-4 rounded-[1.5rem] bg-secondary-50 px-5 py-6 text-center">
              {% if userPhoto %}
                <img src="{{ userPhoto }}" alt="{{ usuario.nombre }}" class="h-28 w-28 rounded-[1.75rem] object-cover shadow-lg">
              {% else %}
                <div class="flex h-28 w-28 items-center justify-center rounded-[1.75rem] bg-primary-600 text-3xl font-semibold text-white shadow-lg">
                  {{ usuario ? usuario.nombre|slice(0, 2)|upper : 'NU' }}
                </div>
              {% endif %}
              <div>
                <p class="text-base font-semibold text-secondary-900">{{ usuario ? usuario.nombre : 'Nuevo usuario' }}</p>
                <p class="mt-1 text-sm text-secondary-500">La foto se guarda como referencia en base de datos y archivo en uploads.</p>
              </div>
            </div>

            <div>
              <label for="foto" class="form-label">Foto de perfil</label>
              <input type="file" id="foto" name="foto" accept="image/png,image/jpeg,image/webp,image/gif" class="form-control">
              <p class="mt-2 text-xs text-secondary-500">Formatos permitidos: JPG, PNG, WEBP o GIF. Maximo 3 MB.</p>
            </div>

            {% if userPhoto %}
              <label class="flex items-center gap-3 rounded-2xl border border-secondary-200 bg-secondary-50 px-4 py-3 text-sm text-secondary-700">
                <input type="checkbox" name="foto_eliminar" value="1" class="h-4 w-4 rounded border-secondary-300 text-primary-600">
                Quitar foto actual
              </label>
            {% endif %}

            <div>
              <label for="nombre" class="form-label">Nombre completo *</label>
              <input type="text" id="nombre" name="nombre" value="{{ usuario ? usuario.nombre : '' }}" required class="form-control" placeholder="Ejemplo: Juan Perez">
            </div>

            <div>
              <label for="email" class="form-label">Email *</label>
              <input type="email" id="email" name="email" value="{{ usuario ? usuario.email : '' }}" required class="form-control" placeholder="usuario@empresa.com">
            </div>

            <div>
              <label for="password" class="form-label">Contrasena {{ usuario ? '' : '*' }}</label>
              <input type="password" id="password" name="password" {{ usuario ? '' : 'required' }} class="form-control" placeholder="{{ usuario ? 'Deja en blanco para no cambiarla' : 'Minimo 8 caracteres' }}">
              {% if usuario %}
                <p class="mt-2 text-xs text-secondary-500">Solo escribe una nueva contrasena si deseas reemplazar la actual.</p>
              {% endif %}
            </div>

            <label class="flex items-center gap-3 rounded-2xl border border-secondary-200 bg-white px-4 py-3 text-sm text-secondary-700">
              <input type="checkbox" id="activo" name="activo" value="1" {{ (usuario and usuario.activo) or not usuario ? 'checked' : '' }} class="h-4 w-4 rounded border-secondary-300 text-primary-600">
              Usuario activo
            </label>
          </div>
        </section>
      </aside>

      <div class="space-y-6">
        <section class="overflow-hidden rounded-[2rem] border border-secondary-200 bg-white shadow-sm">
          <div class="border-b border-secondary-200 px-6 py-5">
            <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Sitios y roles</p>
            <h3 class="mt-2 text-xl font-semibold text-secondary-900">Asignacion operativa</h3>
            <p class="mt-2 text-sm text-secondary-500">Marca los sitios a los que tendra acceso y el rol principal dentro de cada uno.</p>
          </div>
          <div class="px-6 py-6">
            {% if sitios|length > 0 %}
              <div class="space-y-3">
                {% for sitio in sitios %}
                  {% set isChecked = asignaciones_actuales[sitio.id] is defined %}
                  {% set currentRole = isChecked ? asignaciones_actuales[sitio.id].rol_id : '' %}
                  <div x-data="{ checked: {{ isChecked ? 'true' : 'false' }} }" class="rounded-[1.5rem] border border-secondary-200 bg-secondary-50/80 px-4 py-4 transition hover:border-secondary-300 hover:bg-white">
                    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                      <label for="sitio_{{ sitio.id }}" class="flex items-start gap-3 cursor-pointer">
                        <input type="checkbox" id="sitio_{{ sitio.id }}" name="sitios[]" value="{{ sitio.id }}" x-model="checked" @change="if (checked && $refs.roleSelect.value === '') { $refs.roleSelect.selectedIndex = 1; }" class="mt-1 h-4 w-4 rounded border-secondary-300 text-primary-600">
                        <span>
                          <span class="block text-sm font-semibold text-secondary-900">{{ sitio.nombre }}</span>
                          <span class="mt-1 block text-xs text-secondary-500">{{ sitio.cliente.nombre }}</span>
                        </span>
                      </label>

                      <div class="w-full lg:w-64">
                        <label class="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-secondary-500">Rol</label>
                        <select name="roles[{{ sitio.id }}]" x-ref="roleSelect" :required="checked" class="form-control text-sm">
                          <option value="">Selecciona un rol...</option>
                          {% for rol in assignable_roles %}
                            <option value="{{ rol.id }}" {{ currentRole == rol.id ? 'selected' : '' }}>{{ rol.nombre }}</option>
                          {% endfor %}
                        </select>
                      </div>
                    </div>
                  </div>
                {% endfor %}
              </div>
            {% else %}
              <div class="rounded-[1.5rem] border border-dashed border-secondary-200 px-4 py-10 text-center text-sm text-secondary-500">No hay sitios disponibles para asignar.</div>
            {% endif %}
          </div>
        </section>

        <section class="overflow-hidden rounded-[2rem] border border-secondary-200 bg-white shadow-sm" x-data="permissionsHandler({{ usuario and usuario.accesos ? usuario.accesos|raw : '{}' }})">
          <div class="border-b border-secondary-200 px-6 py-5">
            <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Seguridad</p>
            <h3 class="mt-2 text-xl font-semibold text-secondary-900">Permisos granulares</h3>
            <p class="mt-2 text-sm text-secondary-500">Define lo que puede ver, editar o eliminar por modulo.</p>
          </div>

          <input type="hidden" name="accesos" :value="JSON.stringify(permissions)">

          <div class="space-y-6 px-6 py-6">
            <template x-for="group in groups" :key="group.name">
              <div class="overflow-hidden rounded-[1.5rem] border border-secondary-200">
                <div class="border-b border-secondary-200 bg-secondary-50 px-5 py-4">
                  <h4 class="text-sm font-semibold uppercase tracking-[0.18em] text-secondary-700" x-text="group.name"></h4>
                </div>
                <div class="overflow-x-auto">
                  <table class="min-w-full divide-y divide-secondary-200">
                    <thead class="bg-white">
                      <tr>
                        <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-[0.18em] text-secondary-500">Modulo</th>
                        <th class="px-5 py-3 text-center text-xs font-semibold uppercase tracking-[0.18em] text-secondary-500">Ver</th>
                        <th class="px-5 py-3 text-center text-xs font-semibold uppercase tracking-[0.18em] text-secondary-500">Editar</th>
                        <th class="px-5 py-3 text-center text-xs font-semibold uppercase tracking-[0.18em] text-secondary-500">Eliminar</th>
                      </tr>
                    </thead>
                    <tbody class="divide-y divide-secondary-100 bg-white">
                      <template x-for="module in group.modules" :key="module.id">
                        <tr class="hover:bg-secondary-50 transition">
                          <td class="px-5 py-4 text-sm font-medium text-secondary-900" x-text="module.label"></td>
                          <td class="px-5 py-4 text-center">
                            <input type="checkbox" class="h-5 w-5 rounded border-secondary-300 text-primary-600" :checked="hasPermission(module.id, 'ver')" @change="togglePermission(module.id, 'ver')">
                          </td>
                          <td class="px-5 py-4 text-center">
                            <input type="checkbox" class="h-5 w-5 rounded border-secondary-300 text-primary-600" :checked="hasPermission(module.id, 'editar')" @change="togglePermission(module.id, 'editar')">
                          </td>
                          <td class="px-5 py-4 text-center">
                            <input type="checkbox" class="h-5 w-5 rounded border-secondary-300 text-primary-600" :checked="hasPermission(module.id, 'eliminar')" @change="togglePermission(module.id, 'eliminar')">
                          </td>
                        </tr>
                      </template>
                    </tbody>
                  </table>
                </div>
              </div>
            </template>
          </div>
        </section>

        <div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
          <a href="{{ path('usuario_index') }}" class="inline-flex items-center justify-center rounded-2xl border border-secondary-200 px-5 py-3 text-sm font-medium text-secondary-700 transition hover:bg-secondary-50">Cancelar</a>
          <button type="submit" class="inline-flex items-center justify-center rounded-2xl bg-primary-600 px-5 py-3 text-sm font-medium text-white shadow-sm transition hover:bg-primary-700">
            {{ usuario ? 'Actualizar usuario' : 'Crear usuario' }}
          </button>
        </div>
      </div>
    </form>
  </div>

  <script>
    function permissionsHandler(initialPermissions) {
      return {
        permissions: initialPermissions || {},
        groups: [
          {
            name: 'Operaciones principales',
            modules: [
              { id: 'proveedor', label: 'Proveedores' },
              { id: 'documento', label: 'Documentos' },
              { id: 'pago', label: 'Pagos' },
              { id: 'anticipo', label: 'Anticipos' },
              { id: 'oc', label: 'Ordenes de compra' }
            ]
          },
          {
            name: 'Reportes',
            modules: [
              { id: 'rep_antiguedad', label: 'Antiguedad de saldos' },
              { id: 'rep_estado', label: 'Estado de cuenta' },
              { id: 'rep_resumen_prov', label: 'Resumen de proveedores' }
            ]
          },
          {
            name: 'Catalogos',
            modules: [
              { id: 'banco', label: 'Bancos' },
              { id: 'cuenta', label: 'Cuentas bancarias' },
              { id: 'pais', label: 'Paises' },
              { id: 'condpago', label: 'Condiciones de pago' },
              { id: 'regimen', label: 'Regimen fiscal' },
              { id: 'imp', label: 'Impuestos' },
              { id: 'ret', label: 'Retenciones' },
              { id: 'cc', label: 'Centros de costo' },
              { id: 'proy', label: 'Proyectos' },
              { id: 'tdoc', label: 'Tipos de documento' },
              { id: 'moneda', label: 'Monedas' },
              { id: 'tc', label: 'Tipos de cambio' }
            ]
          }
        ],
        hasPermission(module, action) {
          return this.permissions[module] && this.permissions[module][action];
        },
        togglePermission(module, action) {
          if (!this.permissions[module]) {
            this.permissions[module] = {};
          }
          this.permissions[module][action] = !this.permissions[module][action];
          this.permissions = { ...this.permissions };
        }
      }
    }
  </script>
{% endblock %}