@extends('layouts.app')

@section('content')
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
<div class="dashboard d-flex">
  <div class="main_content_wrap w-100">
    <div class="main_content pl_24 pr_24 pb_60 w-100">
      <div class="price_section">
        <div class="container-fluid">
          <h4 class="mb-4">Tarifa Actual</h4>

          <div class="pricing_table_embed">
            @if($pricingTableId && $publishableKey)
              <stripe-pricing-table
                  pricing-table-id="{{ $pricingTableId }}"
                  publishable-key="{{ $publishableKey }}">
              </stripe-pricing-table>
            @endif
  
            <div class="price_section container-fluid" x-data="{ billing: 'monthly' }">
              <div class="d-flex justify-content-start align-items-center mb-4 gap-2">
                <button
                  :class="billing === 'monthly' ? 'btn btn-primary' : 'btn btn-outline-primary'"
                  @click="billing = 'monthly'"
                >
                  Mensualmente
                </button>
                <button
                  :class="billing === 'annual' ? 'btn btn-primary' : 'btn btn-outline-primary'"
                  @click="billing = 'annual'"
                >
                  Anualmente
                </button>
              </div>

              @if(isset($checkouts) && count($checkouts) > 0)
                <div class="row">
                  @foreach($checkouts as $planName => $planData)
                    <div class="col-md-4">
                      <div class="card p-3 shadow-sm mb-4">
                        <h5 class="mb-1">{{ $planName }}</h5>
                        <small class="text-muted">{{ $planData['description'] }}</small>

                        <div x-show="billing === 'monthly'" class="mt-3">
                          <h3 class="font-weight-bold">{{ $planData['monthly']['price'] }}</h3>
                          <a
                            href="{{ $planData['monthly']['url_monthly'] }}"
                            class="btn btn-primary mt-2"
                          >
                            Suscribirse
                          </a>
                        </div>

                        <div x-show="billing === 'annual'" class="mt-3">
                          <h3 class="font-weight-bold">{{ $planData['annual']['price'] }}</h3>
                          <a
                            href="{{ $planData['annual']['url_annual'] }}"
                            class="btn btn-success mt-2"
                          >
                            Suscribirse
                          </a>
                        </div>
                      </div>
                    </div>
                  @endforeach
                </div>
              </div>
            @else
              <p class="text-danger">No hay planes disponibles.</p>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection