@extends('public.layouts.app')

@section('title', 'Planes y Precios - ' . config('app.name'))

@section('content')
<div class="container py-5">
  <!-- Header de la página -->
  <div class="text-center mb-5">
    <h1 class="mb-3">Planes y Precios</h1>
    <p class="lead text-muted">Elige el plan perfecto para tu empresa. Todos incluyen prueba gratuita de 30 días.</p>
  </div>

  <!-- Planes de Precios -->
  @include('public.components.pricing-cards', ['planes' => $planes])

  <!-- Comparación de Planes -->
  @if(isset($planes) && $planes->count() > 0)
    <div class="row mb-5">
      <div class="col-12">
        <div class="card border-0 shadow-sm">
          <div class="card-header bg-primary text-white">
            <h3 class="mb-0 text-center">Comparación Detallada de Planes</h3>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-hover mb-0">
                <thead class="table-light">
                  <tr>
                    <th class="border-0">Características</th>
                    @foreach($planes as $plan)
                      <th class="border-0 text-center">{{ $plan->nombre }}</th>
                    @endforeach
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><strong>Precio Anual</strong></td>
                    @foreach($planes as $plan)
                      <td class="text-center">
                        @if($plan->precio_mensual > 0)
                          <strong>S/ {{ number_format($plan->precio_mensual, 0) }}</strong>
                        @else
                          <strong>Gratis</strong>
                        @endif
                      </td>
                    @endforeach
                  </tr>
                  
                  <tr>
                    <td><strong>Usuarios Gestor</strong></td>
                    @foreach($planes as $plan)
                      <td class="text-center">
                        @if($plan->tieneLimiteGestores())
                          {{ $plan->getLimiteGestores() }}
                        @else
                          Ilimitados
                        @endif
                      </td>
                    @endforeach
                  </tr>
                  <tr>
                    <td><strong>Empresas</strong></td>
                    @foreach($planes as $plan)
                      <td class="text-center">
                        @if($plan->tieneLimiteEmpresas())
                          {{ $plan->getLimiteEmpresas() }}
                        @else
                          Ilimitadas
                        @endif
                      </td>
                    @endforeach
                  </tr>
                  <tr>
                    <td><strong>Almacenamiento</strong></td>
                    @foreach($planes as $plan)
                      <td class="text-center">
                        @if($plan->tieneLimiteAlmacenamiento())
                          {{ $plan->getLimiteAlmacenamiento() }} GB
                        @else
                          Ilimitado
                        @endif
                      </td>
                    @endforeach
                  </tr>
                  <tr>
                    <td><strong>Funcionalidades</strong></td>
                    @foreach($planes as $plan)
                      <td class="text-center">
                        Ilimitadas
                      </td>
                    @endforeach
                  </tr>
                  <tr>
                    <td><strong>Personalización</strong></td>
                    @foreach($planes as $plan)
                      <td class="text-center">
                        @if($plan->nombre === 'Básico')
                          Logo personalizado
                        @else
                          Logo y colores
                        @endif
                      </td>
                    @endforeach
                  </tr>
                  <tr>
                    <td><strong>Panel Administrativo</strong></td>
                    @foreach($planes as $plan)
                      <td class="text-center">
                        <i class="fas fa-check text-success"></i>
                      </td>
                    @endforeach
                  </tr>
                  <tr>
                    <td><strong>Gestión de Usuarios</strong></td>
                    @foreach($planes as $plan)
                      <td class="text-center">
                        <i class="fas fa-check text-success"></i>
                      </td>
                    @endforeach
                  </tr>
                  <tr>
                    <td><strong>Notificaciones Email</strong></td>
                    @foreach($planes as $plan)
                      <td class="text-center">
                        <i class="fas fa-check text-success"></i>
                      </td>
                    @endforeach
                  </tr>
                  <tr>
                    <td><strong>Exportación de Datos</strong></td>
                    @foreach($planes as $plan)
                      <td class="text-center">
                        <i class="fas fa-check text-success"></i>
                      </td>
                    @endforeach
                  </tr>
                  <tr>
                    <td><strong>Configuración Avanzada</strong></td>
                    @foreach($planes as $plan)
                      <td class="text-center">
                        <i class="fas fa-check text-success"></i>
                      </td>
                    @endforeach
                  </tr>
                  <tr class="table-primary">
                    <td><strong>Acción</strong></td>
                    @foreach($planes as $plan)
                      <td class="text-center">
                        <a href="{{ route('register') }}?plan={{ $plan->public_id }}" 
                           class="btn @if($plan->nombre === 'Popular') btn-primary @else btn-outline-primary @endif btn-sm">
                          <i class="fas fa-rocket me-1"></i>Seleccionar
                        </a>
                      </td>
                    @endforeach
                  </tr>

                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  @endif

  <!-- Preguntas Frecuentes -->
  <div class="row mb-5">
    <div class="col-12">
      <h2 class="text-center mb-4">Preguntas Frecuentes</h2>
      <div class="accordion" id="faqAccordion">
        <div class="accordion-item">
          <h2 class="accordion-header" id="faq1">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
              ¿Puedo cambiar de plan en cualquier momento?
            </button>
          </h2>
          <div id="collapse1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
              Sí, puedes cambiar de plan en cualquier momento. Los cambios se aplicarán en el próximo ciclo de facturación. Si cambias a un plan más costoso, solo pagarás la diferencia proporcional.
            </div>
          </div>
        </div>
        
        <div class="accordion-item">
          <h2 class="accordion-header" id="faq2">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
              ¿Qué incluye la prueba gratuita de 30 días?
            </button>
          </h2>
          <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
              La prueba gratuita incluye acceso completo a todas las funcionalidades del plan que elijas, sin restricciones. No se requiere tarjeta de crédito para comenzar.
            </div>
          </div>
        </div>
        
        <div class="accordion-item">
          <h2 class="accordion-header" id="faq3">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
              ¿Ofrecen descuentos para organizaciones sin fines de lucro?
            </button>
          </h2>
          <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
              Sí, ofrecemos descuentos especiales para organizaciones sin fines de lucro y entidades educativas. Contáctanos para más información.
            </div>
          </div>
        </div>
        
        <div class="accordion-item">
          <h2 class="accordion-header" id="faq4">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4">
              ¿Puedo cancelar mi suscripción en cualquier momento?
            </button>
          </h2>
          <div id="collapse4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
              Sí, puedes cancelar tu suscripción en cualquier momento desde tu panel de administración. No hay penalidades por cancelación.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- CTA Final -->
  <div class="row">
    <div class="col-12">
      <div class="card bg-primary text-white text-center border-0">
        <div class="card-body py-5">
          <h3 class="mb-3">¿Listo para comenzar?</h3>
          <p class="lead mb-4">Únete a cientos de empresas que ya confían en nuestro servicio</p>
          <a href="{{ route('register') }}" class="btn btn-light btn-lg">Comenzar Prueba Gratuita</a>
        </div>
      </div>
    </div>
  </div>
</div>

@push('styles')
<style>
.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

.pricing-header {
  margin-bottom: 1rem;
}

.accordion-button:not(.collapsed) {
  background-color: #e7f1ff;
  color: #0d6efd;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
</style>
@endpush
@endsection