@extends('dashboard.layouts.app')

@section('title', 'Facturación')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Facturació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 -->

  @if($suscripcion)
    <!-- Información de Facturación -->
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
      <!-- Datos de Facturación -->
      <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">
          Información de Facturación
        </h3>
        
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
              Nombre o Razón Social
            </label>
            <input type="text" 
                   value="{{ auth()->user()->nombre }}" 
                   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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800"
                   placeholder="Nombre o razón social">
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
              RUC
            </label>
            <input type="text" 
                   maxlength="11"
                   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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800"
                   placeholder="12345678901">
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
              Dirección Fiscal
            </label>
            <textarea rows="3"
                      class="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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800"
                      placeholder="Dirección completa para facturación"></textarea>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
              Email para Facturación
            </label>
            <input type="email" 
                   value="{{ auth()->user()->email }}" 
                   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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800"
                   placeholder="email@empresa.com">
          </div>
        </div>

        <div class="mt-6 flex items-center gap-3">
          <button type="button" 
                  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="save" class="w-4 h-4"></i>
            Guardar Cambios
          </button>
        </div>
      </div>

      <!-- Resumen de Facturación -->
      <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">
          Resumen de Facturación
        </h3>
        
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">Plan Actual:</span>
            <span class="font-medium text-gray-800 dark:text-white/90">{{ $suscripcion->plan->nombre }}</span>
          </div>
          
          <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">Precio Mensual:</span>
            <span class="font-medium text-gray-800 dark:text-white/90">S/ {{ number_format($suscripcion->precio_mensual, 2) }}</span>
          </div>
          
          <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">Estado:</span>
            <span class="inline-flex items-center rounded-full px-2 py-1 text-xs 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
              @else bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200
              @endif">
              {{ $suscripcion->estado_formateado }}
            </span>
          </div>
          
          <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">Próxima Facturación:</span>
            <span class="font-medium text-gray-800 dark:text-white/90">
              @if($suscripcion->fecha_fin)
                {{ $suscripcion->fecha_fin->format('d/m/Y') }}
              @else
                No definida
              @endif
            </span>
          </div>
        </div>

        <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
          <h4 class="font-medium text-gray-800 dark:text-white/90 mb-3">Método de Pago</h4>
          <div class="space-y-2">
            <div class="flex items-center">
              <input type="radio" id="transferencia" name="metodo_pago" value="transferencia" class="mr-2">
              <label for="transferencia" class="text-sm text-gray-800 dark:text-white/90">Transferencia Bancaria</label>
            </div>
            <div class="flex items-center">
              <input type="radio" id="tarjeta" name="metodo_pago" value="tarjeta" class="mr-2">
              <label for="tarjeta" class="text-sm text-gray-800 dark:text-white/90">Tarjeta de Crédito/Débito</label>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Historial de Facturas -->
    <div class="mt-6 overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="flex flex-col gap-4 px-6 py-4 sm:flex-row sm:items-center sm:justify-between border-b border-gray-200 dark:border-gray-800">
        <div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
            Historial de Facturas
          </h3>
        </div>
      </div>

      <div class="p-6">
        <div class="text-center py-8">
          <i data-lucide="receipt" 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">Sistema de Facturación en Desarrollo</h4>
          <p class="text-gray-500 dark:text-gray-400 mb-4">
            El sistema de facturación automática estará disponible próximamente. 
            Por ahora, las facturas se generan manualmente.
          </p>
          <div class="flex items-center justify-center gap-3">
            <button type="button" 
                    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="download" class="w-4 h-4"></i>
              Solicitar Factura
            </button>
            <button type="button" 
                    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="mail" class="w-4 h-4"></i>
              Contactar Soporte
            </button>
          </div>
        </div>
      </div>
    </div>
  @else
    <div class="text-center py-12">
      <i data-lucide="credit-card" class="mx-auto h-16 w-16 text-gray-400 mb-4"></i>
      <h3 class="text-lg font-medium text-gray-800 dark:text-white/90 mb-2">No tienes una suscripción activa</h3>
      <p class="text-gray-500 dark:text-gray-400 mb-6">Necesitas una suscripción para acceder a la información de facturación</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>
@endsection