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

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

{% block body %}
  <div class="max-w-6xl mx-auto">
    {# Breadcrumb #}
    <nav class="mb-6">
      <ol class="flex items-center space-x-2 text-sm">
        <li><a href="{{ path('usuario_index') }}" class="text-primary-600 hover:text-primary-700">Usuarios</a></li>
        <li class="text-secondary-400">/</li>
        <li class="text-secondary-600">{{ usuario ? 'Editar' : 'Nuevo' }}</li>
      </ol>
    </nav>

    <form method="post" id="user_form">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {# Left Column - User Basic Info #}
        <div class="lg:col-span-1">
          <div class="bg-white rounded-2xl shadow-sm border border-secondary-200 p-6">
            <h3 class="text-lg font-semibold text-secondary-900 mb-4">Información Básica</h3>

            <div class="space-y-4">
              {# Nombre #}
              <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="Ej: Juan Pérez">
              </div>

              {# Email #}
              <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>

              {# Password #}
              <div>
                <label for="password" class="form-label">
                  Contraseña {{ usuario ? '' : '*' }}
                </label>
                <input type="password" id="password" name="password"
                      {{ usuario ? '' : 'required' }} class="form-control"
                      placeholder="{{ usuario ? 'Dejar en blanco para no cambiar' : 'Mínimo 8 caracteres' }}">
                {% if usuario %}
                  <p class="mt-1 text-xs text-secondary-500">Dejar en blanco si no desea cambiar</p>
                {% endif %}
              </div>

              {# Activo #}
              <div class="flex items-center">
                <input type="checkbox" id="activo" name="activo" value="1"
                      {{ (usuario and usuario.activo) or not usuario ? 'checked' : '' }}
                      class="w-4 h-4 text-primary-600 border-secondary-300 rounded">
                <label for="activo" class="ml-2 text-sm text-secondary-900">Usuario activo</label>
              </div>
            </div>
          </div>
        </div>

        {# Right Column - Permisos #}
        <div class="lg:col-span-2 space-y-6">
          {# Site Roles #}
          <div class="bg-white rounded-2xl shadow-sm border border-secondary-200 p-6">
            <div class="flex items-center justify-between mb-4">
              <div>
                <h3 class="text-lg font-semibold text-secondary-900">Asignación de Sitios</h3>
                <p class="text-sm text-secondary-500 mt-1">Selecciona los sitios y el rol principal para cada uno</p>
              </div>
            </div>

            {% if sitios|length > 0 %}
              <div class="space-y-2 max-h-96 overflow-y-auto">
                {% for sitio in sitios %}
                  {% set is_checked = asignaciones_actuales[sitio.id] is defined %}
                  {% set current_rol = is_checked ? asignaciones_actuales[sitio.id].rol_id : '' %}

                  <div x-data="{ checked: {{ is_checked ? 'true' : 'false' }} }"
                       class="flex items-center gap-3 p-3 bg-secondary-50 rounded-lg hover:bg-secondary-100 transition-colors">
                    <input type="checkbox" name="sitios[]" value="{{ sitio.id }}"
                          x-model="checked"
                          @change="if(checked && $refs.roleSelect.value === '') $refs.roleSelect.selectedIndex = 1"
                          class="w-4 h-4 text-primary-600"
                          id="sitio_{{ sitio.id }}">
                    <label for="sitio_{{ sitio.id }}" class="flex-1 cursor-pointer">
                      <div class="font-medium text-secondary-900">{{ sitio.nombre }}</div>
                      <div class="text-xs text-secondary-600">{{ sitio.cliente.nombre }}</div>
                    </label>
                    <select name="roles[{{ sitio.id }}]"
                            x-ref="roleSelect"
                            :required="checked"
                            class="form-control w-48 text-sm"
                            :class="{'border-red-300': checked && $refs.roleSelect.value === ''}">
                      <option value="">Select Rol...</option>
                      {% for rol in assignable_roles %}
                        <option value="{{ rol.id }}" {{ current_rol == rol.id ? 'selected' : '' }}>
                          {{ rol.nombre }}
                        </option>
                      {% endfor %}
                    </select>
                  </div>
                {% endfor %}
              </div>
            {% else %}
              <div class="text-center py-8 bg-secondary-50 rounded-lg">
                <svg class="mx-auto h-12 w-12 text-secondary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                </svg>
                <p class="mt-2 text-sm font-medium text-secondary-900">No hay sitios disponibles</p>
                <p class="mt-1 text-xs text-secondary-600">Crea sitios primero para poder asignar permisos</p>
              </div>
            {% endif %}
          </div>

          {# Granular Permissions (Accesos) #}
          <div class="bg-white rounded-2xl shadow-sm border border-secondary-200 p-6"
               x-data="permissionsHandler({{ usuario and usuario.accesos ? usuario.accesos : '{}' }})">
            <div class="flex items-center justify-between mb-4">
              <div>
                <h3 class="text-lg font-semibold text-secondary-900">Permisos Granulares (Accesos)</h3>
                <p class="text-sm text-secondary-500 mt-1">Define qué puede hacer el usuario en cada módulo (Solo para Operadores/Admins)</p>
              </div>
            </div>

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

            <div class="space-y-6">
              <template x-for="group in groups" :key="group.name">
                <div class="border border-secondary-200 rounded-xl overflow-hidden">
                  <div class="bg-secondary-50 px-6 py-3 border-b border-secondary-200">
                    <h4 class="font-semibold text-secondary-900" 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-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase tracking-wider w-1/2">Módulo</th>
                          <th class="px-6 py-3 text-center text-xs font-medium text-secondary-500 uppercase tracking-wider">Ver</th>
                          <th class="px-6 py-3 text-center text-xs font-medium text-secondary-500 uppercase tracking-wider">Editar</th>
                          <th class="px-6 py-3 text-center text-xs font-medium text-secondary-500 uppercase tracking-wider">Eliminar</th>
                        </tr>
                      </thead>
                      <tbody class="bg-white divide-y divide-secondary-200">
                        <template x-for="module in group.modules" :key="module.id">
                          <tr class="hover:bg-secondary-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-secondary-900">
                              <div class="flex items-center">
                                <span x-text="module.label"></span>
                              </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                              <label class="inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="form-checkbox rounded text-primary-600 focus:ring-primary-500 w-5 h-5 border-secondary-300 transition duration-150 ease-in-out"
                                       :checked="hasPermission(module.id, 'ver')"
                                       @change="togglePermission(module.id, 'ver')">
                              </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                              <label class="inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="form-checkbox rounded text-primary-600 focus:ring-primary-500 w-5 h-5 border-secondary-300 transition duration-150 ease-in-out"
                                       :checked="hasPermission(module.id, 'editar')"
                                       @change="togglePermission(module.id, 'editar')">
                              </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                              <label class="inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="form-checkbox rounded text-primary-600 focus:ring-primary-500 w-5 h-5 border-secondary-300 transition duration-150 ease-in-out"
                                       :checked="hasPermission(module.id, 'eliminar')"
                                       @change="togglePermission(module.id, 'eliminar')">
                              </label>
                            </td>
                          </tr>
                        </template>
                      </tbody>
                    </table>
                  </div>
                </div>
              </template>
            </div>
          </div>

          {# Actions #}
          <div class="pt-6 flex items-center justify-end gap-3">
            <a href="{{ path('usuario_index') }}" class="btn btn-outline-secondary">
              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
              Cancelar
            </a>
            <button type="submit" class="btn btn-primary">
              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              {{ usuario ? 'Actualizar' : 'Crear' }} Usuario
            </button>
          </div>
        </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: 'Antigüedad de Saldos' },
            { id: 'rep_estado', label: 'Estado de Cuenta' },
            { id: 'rep_resumen_prov', label: 'Resumen de Proveedores' }
          ]
        },
        {
          name: 'Catálogos',
          modules: [
            { id: 'banco', label: 'Bancos' },
            { id: 'cuenta', label: 'Cuentas Bancarias' },
            { id: 'condpago', label: 'Condiciones de Pago' },
            { 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>
      </div>
    </form>
  </div>
{% endblock %}