@extends('dashboard.layouts.app')

@section('title', 'Empresas de ' . $user->name)

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Empresas de {{ $user->name }}`}" class="mb-6">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2>
      <nav>
        <ol class="flex items-center gap-1.5">
          <li>
            <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard.index') }}">
              Dashboard
              <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          </li>
          <li>
            <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard.usuarios.index') }}">
              Usuarios
              <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          </li>
          <li class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
        </ol>
      </nav>
    </div>
  </div>
  <!-- Breadcrumb End -->

  <!-- Información del Usuario -->
  <div class="mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
    <div class="flex items-center gap-4">
      <div class="w-16 h-16 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
        <i data-lucide="user" class="w-8 h-8 text-gray-600 dark:text-gray-400"></i>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">{{ $user->name }}</h3>
        <p class="text-gray-600 dark:text-gray-300">{{ $user->email }}</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">
          Roles: {{ $user->getRoleNames()->implode(', ') ?: 'Sin roles asignados' }}
        </p>
      </div>
    </div>
  </div>

  <!-- Mensajes de confirmación -->
  @if(session('success'))
    <div class="mb-6 rounded-lg border border-success-200 bg-success-50 p-4 dark:border-success-800 dark:bg-success-900/30">
      <div class="flex items-center gap-2">
        <i data-lucide="check-circle" class="w-5 h-5 text-success-600 dark:text-success-400"></i>
        <p class="text-sm font-medium text-success-800 dark:text-success-200">{{ session('success') }}</p>
      </div>
    </div>
  @endif
  @if(session('error'))
    <div class="mb-6 rounded-lg border border-error-200 bg-error-50 p-4 dark:border-error-800 dark:bg-error-900/30">
      <div class="flex items-center gap-2">
        <i data-lucide="alert-circle" class="w-5 h-5 text-error-600 dark:text-error-400"></i>
        <p class="text-sm font-medium text-error-800 dark:text-error-200">{{ session('error') }}</p>
      </div>
    </div>
  @endif
  @if(session('info'))
    <div class="mb-6 rounded-lg border border-info-200 bg-info-50 p-4 dark:border-info-800 dark:bg-info-900/30">
      <div class="flex items-center gap-2">
        <i data-lucide="info" class="w-5 h-5 text-info-600 dark:text-info-400"></i>
        <p class="text-sm font-medium text-info-800 dark:text-info-200">{{ session('info') }}</p>
      </div>
    </div>
  @endif
  @if(session('warning'))
    <div class="mb-6 rounded-lg border border-warning-200 bg-warning-50 p-4 dark:border-warning-800 dark:bg-warning-900/30">
      <div class="flex items-center gap-2">
        <i data-lucide="alert-triangle" class="w-5 h-5 text-warning-600 dark:text-warning-400"></i>
        <p class="text-sm font-medium text-warning-800 dark:text-warning-200">{{ session('warning') }}</p>
      </div>
    </div>
  @endif

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Empresas que Administra -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
      <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90 flex items-center gap-2">
          <i data-lucide="crown" class="w-5 h-5 text-yellow-600 dark:text-yellow-400"></i>
          Empresas que Administra ({{ $empresasAdministradas->count() }})
        </h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
          Empresas donde el usuario es administrador principal
        </p>
      </div>
      
      <div class="p-6">
        @if($empresasAdministradas->count() > 0)
          <div class="space-y-4">
            @foreach($empresasAdministradas as $empresa)
              <div class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div>
                  <h4 class="font-medium text-gray-800 dark:text-white/90">{{ $empresa->nombre }}</h4>
                  <p class="text-sm text-gray-500 dark:text-gray-400">{{ $empresa->ruc ?: 'Sin RUC' }}</p>
                </div>
                <form method="POST" action="{{ route('dashboard.usuarios.empresas.remover-administrador', $user->public_id) }}" class="inline" onsubmit="return confirm('¿Estás seguro de que quieres remover a este usuario como administrador de esta empresa?')">
                  @csrf
                  <input type="hidden" name="empresa_id" value="{{ $empresa->id }}">
                  <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-error-300 bg-white text-error-700 hover:bg-error-50 dark:border-error-600 dark:bg-gray-800 dark:text-error-400 dark:hover:bg-error-900/20 transition duration-200" title="Remover como administrador">
                    <i data-lucide="user-x" class="w-4 h-4"></i>
                  </button>
                </form>
              </div>
            @endforeach
          </div>
        @else
          <div class="text-center py-8">
            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
              <i data-lucide="building" class="w-8 h-8 text-gray-400"></i>
            </div>
            <p class="text-gray-500 dark:text-gray-400">No administra ninguna empresa</p>
          </div>
        @endif
      </div>
    </div>

    <!-- Empresas donde es Operativo -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
      <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90 flex items-center gap-2">
          <i data-lucide="briefcase" class="w-5 h-5 text-blue-600 dark:text-blue-400"></i>
          Empresas donde es Operativo ({{ $empresasOperativas->count() }})
        </h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
          Empresas donde el usuario tiene acceso operativo
        </p>
      </div>
      
      <div class="p-6">
        @if($empresasOperativas->count() > 0)
          <div class="space-y-4">
            @foreach($empresasOperativas as $empresa)
              <div class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div>
                  <h4 class="font-medium text-gray-800 dark:text-white/90">{{ $empresa->nombre }}</h4>
                  <p class="text-sm text-gray-500 dark:text-gray-400">{{ $empresa->ruc ?: 'Sin RUC' }}</p>
                  <p class="text-xs text-gray-400 dark:text-gray-500">
                    Asignado: {{ $empresa->pivot->fecha_asignacion }}
                  </p>
                </div>
                <form method="POST" action="{{ route('dashboard.usuarios.empresas.remover-operativo', $user->public_id) }}" class="inline" onsubmit="return confirm('¿Estás seguro de que quieres remover a este usuario de esta empresa?')">
                  @csrf
                  <input type="hidden" name="empresa_id" value="{{ $empresa->id }}">
                                                          <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-error-300 bg-white text-error-700 hover:bg-error-50 dark:border-error-600 dark:bg-gray-800 dark:text-error-400 dark:hover:bg-error-900/20 transition duration-200" title="Remover de empresa">
                      <i data-lucide="user-x" class="w-4 h-4"></i>
                    </button>
                </form>
              </div>
            @endforeach
          </div>
        @else
          <div class="text-center py-8">
            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
              <i data-lucide="users-2" class="w-8 h-8 text-gray-400"></i>
            </div>
            <p class="text-gray-500 dark:text-gray-400">No es operativo en ninguna empresa</p>
          </div>
        @endif
      </div>
    </div>
  </div>

  <!-- Asignar Nuevas Empresas -->
  @if($empresasDisponibles->count() > 0)
    <div class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
      <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90 flex items-center gap-2">
          <i data-lucide="plus-circle" class="w-5 h-5 text-green-600 dark:text-green-400"></i>
          Asignar Nuevas Empresas
        </h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
          Empresas disponibles para asignar a este usuario
        </p>
      </div>
      
      <div class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- Asignar como Operativo -->
          <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
            <h4 class="font-medium text-gray-800 dark:text-white/90 mb-4 flex items-center gap-2">
              <i data-lucide="user-plus" class="w-4 h-4 text-blue-600 dark:text-blue-400"></i>
              Asignar como Operativo
            </h4>
            <form method="POST" action="{{ route('dashboard.usuarios.empresas.asignar-operativo', $user->public_id) }}" class="space-y-4">
              @csrf
              <div>
                <label for="empresa_operativo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Seleccionar Empresa
                </label>
                <select id="empresa_operativo" name="empresa_id" required class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('empresa_id') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror">
                  <option value="">Seleccione una empresa</option>
                  @foreach($empresasDisponibles as $empresa)
                    <option value="{{ $empresa->id }}">{{ $empresa->nombre }} ({{ $empresa->ruc ?: 'Sin RUC' }})</option>
                  @endforeach
                </select>
                @error('empresa_id')
                  <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
                @enderror
              </div>
              
              <div>
                <label for="fecha_asignacion" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Fecha de Asignación
                </label>
                <input type="date" id="fecha_asignacion" name="fecha_asignacion" required value="{{ date('Y-m-d') }}" class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('fecha_asignacion') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror">
                @error('fecha_asignacion')
                  <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
                @enderror
              </div>
              
              <button type="submit" class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-3 focus:ring-blue-500/10 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-200">
                <i data-lucide="user-plus" class="w-4 h-4"></i>
                Asignar como Operativo
              </button>
            </form>
          </div>

          <!-- Asignar como Administrador -->
          @if($user->hasRole('admin'))
            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
              <h4 class="font-medium text-gray-800 dark:text-white/90 mb-4 flex items-center gap-2">
                <i data-lucide="shield" class="w-4 h-4 text-purple-600 dark:text-purple-400"></i>
                Asignar como Administrador
              </h4>
              <form method="POST" action="{{ route('dashboard.usuarios.empresas.asignar-administrador', $user->public_id) }}" class="space-y-4">
                @csrf
                <div>
                  <label for="empresa_admin" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Seleccionar Empresa
                  </label>
                  <select id="empresa_admin" name="empresa_id" required class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('empresa_id') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror">
                    <option value="">Seleccione una empresa</option>
                    @foreach($empresasDisponibles as $empresa)
                      <option value="{{ $empresa->id }}">{{ $empresa->nombre }} ({{ $empresa->ruc ?: 'Sin RUC' }})</option>
                    @endforeach
                  </select>
                  @error('empresa_id')
                    <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
                  @enderror
                </div>
                
                <button type="submit" class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-3 focus:ring-blue-500/10 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-200">
                  <i data-lucide="shield" class="w-4 h-4"></i>
                  Asignar como Administrador
                </button>
              </form>
            </div>
          @else
            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gray-50 dark:bg-gray-900/20">
              <h4 class="font-medium text-gray-800 dark:text-white/90 mb-4 flex items-center gap-2">
                <i data-lucide="shield-off" class="w-4 h-4 text-gray-500 dark:text-gray-400"></i>
                Asignar como Administrador
              </h4>
              <div class="text-center py-8">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
                  <i data-lucide="shield-off" class="w-8 h-8 text-gray-400"></i>
                </div>
                <p class="text-gray-500 dark:text-gray-400 mb-2">Usuario sin rol de administrador</p>
                <p class="text-sm text-gray-400 dark:text-gray-500">
                  Solo usuarios con rol "admin" pueden ser asignados como administradores de empresas.
                </p>
              </div>
            </div>
          @endif
        </div>
      </div>
    </div>
  @else
    <div class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
      <div class="text-center">
        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
          <i data-lucide="check" class="w-8 h-8 text-gray-400"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
          No hay empresas disponibles
        </h3>
        <p class="text-gray-500 dark:text-gray-400">
          El usuario ya está asignado a todas las empresas disponibles o no hay empresas activas en el sistema.
        </p>
      </div>
    </div>
  @endif
</div>
@endsection