@extends('layouts.app')

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

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

    @if($errors->any())
    <div class="alert alert-danger">
      <ul>
        @foreach($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
    @endif

    <!-- main_content -->
    <div class="main_content pl_24 pr_24 pb_60 w-100">
      <form action="{{ route('plan_stripes.update', $planStripe->id) }}" method="POST">
        @csrf
        @method('PUT')
        <!-- Create Plan Section -->
        <div class="create_user_page">
          <div class="container-fluid">
            <div class="row">
              <div class="col-lg-12">
                <div class="Create_user section_padding_bg">
                  <div class="container-fluid">
                    <div class="form_groups d-flex gap_24 pb_20 align-items-center">
                      <div class="form_group w-100">
                        <label for="planName" class="d-flex pb_10">Nombre del plan</label>
                        <input id="planName" name="nombre" type="text" class="input_field w-100" placeholder="" value="{{ $planStripe->name }}" required>
                      </div>
                    </div>
                    
                    <div class="form_groups d-flex gap_24 pb_20 align-items-center">
                      <div class="form_group w-100">
                        <label for="description" class="d-flex pb_10">Descripción del plan</label>
                        <input id="description" name="descripcion" type="text" class="input_field w-100" placeholder="" value="{{ $planStripe->description }}" required>
                      </div>
                    </div>

                    <div class="form_groups d-flex gap_24 pb_20 align-items-center">
                      <div class="form_group w-33">
                        <label for="tokens" class="d-flex pb_10">Numero de tokens</label>
                        <input id="tokens" name="num_tokens" type="number" class="input_field w-100" placeholder="0" value="{{ $planStripe->tokens }}" required min="0">
                      </div>
                      <div class="form_group w-33">
                        <label for="priceMontly" class="d-flex pb_10">Precio Mensual</label>
                        <input id="priceMontly" name="precio_mensual" type="text" class="input_field w-100" placeholder="00.00" value="{{ $planStripe->monthly_price }}" required inputmode="decimal" 
                        oninput="this.value = this.value.replace(',', '.').replace(/[^0-9.]/g, '');">
                      </div>
                      <div class="form_group w-33">
                        <label for="priceYear" class="d-flex pb_10">Precio Anual</label>
                        <input id="priceYear" name="precio_anual" type="text" class="input_field w-100" placeholder="00.00" value="{{ $planStripe->annual_price }}" required inputmode="decimal" 
                        oninput="this.value = this.value.replace(',', '.').replace(/[^0-9.]/g, '');">
                     </div>
                    </div>

                    <div class="form_group d-flex justify-content-between align-items-center">
                      <p class="text-warning message-size mb-0" style="font-size: 16px; font-weight: bold; color: #ff9900; margin-right:5px;">
                      Nota: Si se modifica el Plan, será necesario actualizar la tabla de tarifas en Stripe.
                      </p>
                      <button type="submit" class="button">Guardar</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection