@extends('layouts.app')

@section('content')
<div class="dashboard d-flex">

  <!-- Main Content -->
  <div class="main_content_wrap w-100">

    <!-- Main Content Body -->
    <div class="main_content p-3">
      <section class="app_section section_padding_bg">
        <div class="container-fluid">
          <div class="d-flex justify-content-between mb-4">
            <h2>Listado de Planes Stripe</h2>
            <a href="{{ route('plan_stripes.create') }}" class="button">Nuevo Plan</a>
          </div>

          <div class="table_wrap">
            <table>
              <thead>
                <tr>
                  <th>Nombre</th>
                  <th>Precio Mensual</th>
                  <th>Precio Anual</th>
                  <th>Tokens</th>
                  <th>Estado</th>
                  <th>Acciones</th>
                </tr>
              </thead>
              <tbody>
                @foreach($planes as $plan)
                <tr>
                  <td class="plan-name">{{ $plan->name }}</td>
                  <td>
                   {{ number_format($plan->monthly_price, 2) }} € / mes
                  </td>
                  <td>
                    {{ number_format($plan->annual_price, 2) }} € / año
                  </td>
                  <td>
                    {{ number_format($plan->tokens) }}
                  </td>
                  <td>
                    <form action="{{ route('plan_stripes.toggle-status', $plan->id) }}" method="POST" style="display:inline;">
                      @csrf
                      <button type="submit" class="button {{ $plan->activo ? 'buttonRed' : 'buttonGreen' }}">
                        {{ $plan->activo ? 'Desactivar' : 'Activar' }}
                      </button>
                    </form>
                  </td>
                  <td><a href="{{ route('plan_stripes.edit', $plan->id) }}" class="button">Editar</a></td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
@endsection

<style>
.plan-name {
  font-size: 1.2em;
  font-weight: bold;
}
</style>