@extends('dashboard.layouts.app')

@section('title', 'Planes de Suscripción')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Planes de Suscripción`}">
    <div class="mb-6 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.suscripcion.index') }}">
              Suscripción
              <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 -->

  <!-- Mensajes Flash -->
  @if(session('success'))
    <div class="mb-6 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg dark:bg-green-900/30 dark:border-green-800 dark:text-green-300">
      <div class="flex items-center">
        <i data-lucide="check-circle" class="w-5 h-5 mr-2"></i>
        <span>{{ session('success') }}</span>
      </div>
    </div>
  @endif

  @if(session('warning'))
    <div class="mb-6 bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded-lg dark:bg-yellow-900/30 dark:border-yellow-800 dark:text-yellow-300">
      <div class="flex items-center">
        <i data-lucide="alert-triangle" class="w-5 h-5 mr-2"></i>
        <span>{{ session('warning') }}</span>
      </div>
    </div>
  @endif

  @if(session('error'))
    <div class="mb-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg dark:bg-red-900/30 dark:border-red-800 dark:text-red-300">
      <div class="flex items-center">
        <i data-lucide="x-circle" class="w-5 h-5 mr-2"></i>
        <span>{{ session('error') }}</span>
      </div>
    </div>
  @endif

  <!-- Plan Actual -->
  @if($suscripcionActual)
    <div class="mb-8 overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
      <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white/90">
        Tu Plan Actual
      </h3>
      <div class="flex items-center justify-between">
        <div>
          <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ $suscripcionActual->plan->nombre }}</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">{{ $suscripcionActual->plan->descripcion }}</p>
          <p class="text-lg font-semibold text-gray-800 dark:text-white/90">
            @if($suscripcionActual->precio_mensual > 0)
              S/ {{ number_format($suscripcionActual->precio_mensual, 2) }} / año
            @else
              Gratis
            @endif
          </p>
        </div>
        <span class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium
          @if($suscripcionActual->estado === 'activa') bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500
          @elseif($suscripcionActual->estado === 'prueba_gratuita') bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-500
          @else bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200
          @endif">
          {{ $suscripcionActual->estado_formateado }}
        </span>
      </div>
    </div>
  @endif

  <!-- Planes Disponibles -->
  <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
    @foreach($planes as $plan)
      <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]
        @if($suscripcionActual && $suscripcionActual->plan_id === $plan->id) ring-2 ring-blue-500 @endif">
        
        <!-- Header del Plan -->
        <div class="mb-6 text-center">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white/90">{{ $plan->nombre }}</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">{{ $plan->descripcion }}</p>
          <div class="text-3xl font-bold text-blue-600 dark:text-blue-400">
            @if($plan->precio_mensual > 0)
              S/ {{ number_format($plan->precio_mensual, 2) }}
              <span class="text-sm font-normal text-gray-500 dark:text-gray-400">/ año</span>
            @else
              Gratis
            @endif
          </div>
        </div>

        <!-- Características -->
        <div class="mb-6 space-y-3">
          @if($plan->caracteristicas && count($plan->caracteristicas) > 0)
            @foreach($plan->caracteristicas as $caracteristica)
              <div class="flex items-center">
                <i data-lucide="check" class="mr-3 h-4 w-4 text-success-600 dark:text-success-400"></i>
                <span class="text-sm text-gray-800 dark:text-white/90">{{ $caracteristica }}</span>
              </div>
            @endforeach
          @else
            <div class="flex items-center">
              <i data-lucide="info" class="mr-3 h-4 w-4 text-gray-500 dark:text-gray-400"></i>
              <span class="text-sm text-gray-500 dark:text-gray-400">No hay características definidas</span>
            </div>
          @endif
          
          <!-- Límites del Plan -->
          <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
            <h4 class="text-sm font-medium text-gray-800 dark:text-white/90 mb-2">Límites del Plan:</h4>
            <div class="space-y-2">
              <div class="flex justify-between text-xs">
                <span class="text-gray-600 dark:text-gray-400">Empresas:</span>
                <span class="text-gray-800 dark:text-white/90">
                  @if($plan->empresas_permitidas)
                    {{ $plan->empresas_permitidas }}
                  @else
                    Ilimitado
                  @endif
                </span>
              </div>
              @if($plan->usuarios_limite)
              <div class="flex justify-between text-xs">
                <span class="text-gray-600 dark:text-gray-400">Usuarios:</span>
                <span class="text-gray-800 dark:text-white/90">{{ $plan->usuarios_limite }}</span>
              </div>
              @endif

            </div>
          </div>
        </div>

        <!-- Botón de Acción -->
        <div class="text-center">
          @if($suscripcionActual && $suscripcionActual->plan_id === $plan->id)
            <button disabled 
                    class="w-full rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-500 cursor-not-allowed dark:bg-gray-800 dark:text-gray-400">
              Plan Actual
            </button>
          @else
            @php
              $empresasActivas = auth()->user()->empresasAdministradas()->where('activa', true)->count();
              $excedeLimite = $plan->empresas_permitidas && $empresasActivas > $plan->empresas_permitidas;
            @endphp
            
            @if($excedeLimite)
              <div class="mb-3 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:border-red-800">
                <p class="text-xs text-red-700 dark:text-red-300">
                  <i data-lucide="alert-triangle" class="w-3 h-3 inline mr-1"></i>
                  Tienes {{ $empresasActivas }} empresas activas, pero este plan solo permite {{ $plan->empresas_permitidas }}.
                </p>
              </div>
            @endif
            
            <a href="{{ route('dashboard.suscripcion.solicitar-cambio', ['plan_id' => $plan->public_id]) }}" 
               class="w-full inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 font-medium transition duration-200
                 @if($excedeLimite)
                   bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-3 focus:ring-red-500/10 dark:bg-red-600 dark:hover:bg-red-700
                 @else
                   bg-blue-600 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
                 @endif"
               @if($excedeLimite) onclick="return false;" style="pointer-events: none;" @endif>
              @if($suscripcionActual)
                Solicitar Cambio de Plan
              @else
                Seleccionar Plan
              @endif
            </a>
          @endif
        </div>
      </div>
    @endforeach
  </div>

  <!-- Información Adicional -->
  <div class="mt-8 overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
    <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white/90">
      Información Importante
    </h3>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
      <div>
        <h4 class="font-medium text-gray-800 dark:text-white/90 mb-2">Cambio de Plan</h4>
        <ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
          <li>• Los cambios de plan se aplican inmediatamente</li>
          <li>• Se calcula automáticamente el prorrateo</li>
          <li>• Se validan los límites antes del cambio</li>
          <li>• No se pierden datos al cambiar de plan</li>
        </ul>
      </div>
      <div>
        <h4 class="font-medium text-gray-800 dark:text-white/90 mb-2">Validaciones</h4>
        <ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
          <li>• Se verifica que no excedas los límites</li>
          <li>• Se valida que el plan esté disponible</li>
          <li>• Se previene cambiar al mismo plan</li>
          <li>• Se registra auditoría del cambio</li>
        </ul>
      </div>
    </div>
  </div>
</div>
@endsection