@extends('dashboard.layouts.app')

@section('title', 'Mi Suscripción')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Mi 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 class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
        </ol>
      </nav>
    </div>
  </div>
  <!-- Breadcrumb End -->

  <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
    <!-- Resumen de Suscripción -->
    <div class="lg:col-span-2">
      <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="mb-6 flex items-center justify-between">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
            Resumen de Suscripción
          </h3>
          @if($suscripcion)
            <span class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium
              @if($suscripcion->estado === 'activa') bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500
              @elseif($suscripcion->estado === 'prueba_gratuita') bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-500
              @elseif($suscripcion->estado === 'suspendida') bg-error-50 text-error-700 dark:bg-error-500/15 dark:text-error-500
              @else bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200
              @endif">
              {{ $suscripcion->estado_formateado }}
            </span>
          @endif
        </div>

        @if($suscripcion)
          <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
            <!-- Plan Actual -->
            <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
              <h4 class="mb-3 font-medium text-gray-800 dark:text-white/90">Plan Actual</h4>
              <div class="space-y-2">
                <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ $suscripcion->plan->nombre }}</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $suscripcion->plan->descripcion }}</p>
                <p class="text-lg font-semibold text-gray-800 dark:text-white/90">
                  S/ {{ number_format($suscripcion->precio_mensual, 2) }} / mes
                </p>
              </div>
            </div>

            <!-- Período de Prueba -->
            <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
              <h4 class="mb-3 font-medium text-gray-800 dark:text-white/90">Período de Prueba</h4>
              <div class="space-y-2">
                <div>
                  <span class="text-sm text-gray-500 dark:text-gray-400">Inicio:</span>
                  <p class="font-medium text-gray-800 dark:text-white/90">
                    {{ $suscripcion->fecha_inicio->format('d/m/Y') }}
                  </p>
                </div>
                @if($suscripcion->fecha_fin)
                  <div>
                    <span class="text-sm text-gray-500 dark:text-gray-400">Vencimiento:</span>
                    <p class="font-medium text-gray-800 dark:text-white/90">
                      {{ $suscripcion->fecha_fin->format('d/m/Y') }}
                    </p>
                  </div>
                @endif
                @if($suscripcion->diasRestantes() !== null)
                  <div>
                    <span class="text-sm text-gray-500 dark:text-gray-400">Días restantes:</span>
                    <p class="font-medium text-gray-800 dark:text-white/90">
                      {{ $suscripcion->diasRestantes() }} días
                    </p>
                  </div>
                @endif
              </div>
            </div>
          </div>

          <!-- Acciones Rápidas -->
          <div class="mt-6 flex flex-wrap gap-3">
            <a href="{{ route('dashboard.suscripcion.planes') }}" 
               class="inline-flex items-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="refresh-cw" class="w-4 h-4"></i>
              Cambiar Plan
            </a>
            
            <a href="{{ route('dashboard.suscripcion.uso') }}" 
               class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">
              <i data-lucide="bar-chart-3" class="w-4 h-4"></i>
              Ver Uso
            </a>
            
            {{-- <a href="{{ route('dashboard.suscripcion.facturacion') }}" 
               class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">
              <i data-lucide="receipt" class="w-4 h-4"></i>
              Facturación
            </a> --}}
            
            <a href="{{ route('dashboard.suscripcion.historial-solicitudes') }}" 
               class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">
              <i data-lucide="file-text" class="w-4 h-4"></i>
              Historial de Solicitudes
            </a>

            @if($suscripcion->estado === 'activa')
              <form action="{{ route('dashboard.suscripcion.cancelar') }}" method="POST" class="inline">
                @csrf
                <button type="submit" 
                        class="inline-flex items-center gap-2 px-4 py-2 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 dark:border-red-600 dark:text-red-400 dark:hover:bg-red-900/20"
                        onclick="return confirm('¿Estás seguro de que quieres cancelar tu suscripción?')">
                  <i data-lucide="x-circle" class="w-4 h-4"></i>
                  Cancelar Suscripción
                </button>
              </form>
            @endif
          </div>
        @else
          <div class="text-center py-8">
            <i data-lucide="credit-card" class="mx-auto h-16 w-16 text-gray-400 mb-4"></i>
            <h4 class="text-lg font-medium text-gray-800 dark:text-white/90 mb-2">No tienes una suscripción activa</h4>
            <p class="text-gray-500 dark:text-gray-400 mb-4">Selecciona un plan para comenzar a usar nuestros servicios</p>
            <a href="{{ route('dashboard.suscripcion.planes') }}" 
               class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 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">
              Ver Planes Disponibles
            </a>
          </div>
        @endif
      </div>
    </div>

    <!-- Estadísticas de Uso -->
    <div class="lg:col-span-1">
      <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
        <h3 class="mb-6 text-lg font-semibold text-gray-800 dark:text-white/90">
          Uso Actual
        </h3>

        <div class="space-y-4">
          <!-- Empresas -->
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-gray-500 dark:text-gray-400">Empresas Activas</p>
              <p class="text-lg font-semibold text-gray-800 dark:text-white/90">
                {{ $estadisticas['empresas_activas'] }}
              </p>
            </div>
            <div class="h-8 w-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
              <i data-lucide="building" class="h-4 w-4 text-blue-600 dark:text-blue-400"></i>
            </div>
          </div>

          <!-- Reclamos -->
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-gray-500 dark:text-gray-400">Total Reclamos</p>
              <p class="text-lg font-semibold text-gray-800 dark:text-white/90">
                {{ $estadisticas['total_reclamos'] }}
              </p>
            </div>
            <div class="h-8 w-8 rounded-full bg-warning-100 dark:bg-warning-900/30 flex items-center justify-center">
              <i data-lucide="clock" class="h-4 w-4 text-warning-600 dark:text-warning-400"></i>
            </div>
          </div>

          <!-- Reclamos Este Mes -->
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-gray-500 dark:text-gray-400">Este Mes</p>
              <p class="text-lg font-semibold text-gray-800 dark:text-white/90">
                {{ $estadisticas['reclamos_este_mes'] }}
              </p>
            </div>
            <div class="h-8 w-8 rounded-full bg-success-100 dark:bg-success-900/30 flex items-center justify-center">
              <i data-lucide="calendar" class="h-4 w-4 text-success-600 dark:text-success-400"></i>
            </div>
          </div>

          <!-- Pendientes -->
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-gray-500 dark:text-gray-400">Pendientes</p>
              <p class="text-lg font-semibold text-gray-800 dark:text-white/90">
                {{ $estadisticas['reclamos_pendientes'] }}
              </p>
            </div>
            <div class="h-8 w-8 rounded-full bg-error-100 dark:bg-error-900/30 flex items-center justify-center">
              <i data-lucide="alert-circle" class="h-4 w-4 text-error-600 dark:text-error-400"></i>
            </div>
          </div>
        </div>

        <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
          <a href="{{ route('dashboard.suscripcion.uso') }}" 
             class="text-sm text-blue-600 dark:text-blue-400 hover:underline">
            Ver estadísticas detalladas →
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection