%stash css=>["/proc/spay/storep.css"];
%stash js => ["/proc/spay/stripe.js"];
<script src="https://js.stripe.com/v3/"></script>

<section class="ibottom">
  <p class="nombre"><%= $nombre %></p> 
  <p class="tit"><%= $municipio %>,  <%= $federativa %></p> 
</section>

<section class="item flex"> 
  <div id="cover" hidden></div>
 
  <article class=iimage> 
    <p class="txt"><%= $subnombre %></p> 
    <img class="small" src= "/proc/spay/img/<%= $cimga %>"> 
    <p class="txt"><%= $descripcion %></p> 
  </article>
  
  <article class=iinfo>
    <p class="fecha"><%= $fecha %></p> 
    <p class="promo"><%= $promo %></p> 
    <p class="existencia">
    <% if    ($cupo > 10) { =%> <p class="eok"></p>  <% } =%>
    <% elsif ($cupo >= 5) {  =%> <p class="elow">¡Nos quedan pocos!</p>  <% } =%>
    <% elsif ($cupo == 0) { =%> <p class="eldep">¡Agotado!</p> <% } =%> 

    <form onSubmit="return false" id="cform">
      <p class="precio">Costo por asistente: $<span id='cu'></span> pesos</p> 
      <ul class="form-style-1">
        <li>
          <label>Numero de asistentes</label>
          <input type="number" min=1 max=10 name="mq" class="field-mini" value=1  /> 
          <span id="anum"></span>
        </li>
        <li>
          <label>Nombre Completo <span class="required">*</span></label>
          <input type="text" id="mname"  name="mname" class="field-long" placeholder="Nombre" /> 
        </li>
        <li>
          <label>Email <span class="required">*</span></label>
          <input id="mmail" type="Correo" name="mmail" class="field-long" />
        </li>
        <li>
          <label>Talla de ropa</span></label>
           <input id="r1" type="radio" name="talla" value="CH" >CH
           <input id="r2" type="radio" name="talla" value="M" checked>M
           <input id="r3" type="radio" name="talla" value="G">G  
        </li>
        <li>
          <label>Observaciones</label>
          <textarea name="obs" id="obs" class="field-long field-textarea" placeholder=""></textarea>
        </li>
        <li>
          <p class="total">Total = $ <span id='gt' ></span> pesos </p>
        </li>
        <li>
          <input id='cinfob' type="submit" value="Atras" hidden />
          <input id='cinfo' type="submit" value="Siguiente" />
        </li>
      </ul>
    </form>

    <div id="cplan" class="plan" hidden >
      <p class="plan">Planes de pago</p>
      <form onSubmit="return false" class="form-style-1" id="plform">
        <label class="nobold" for="ra">
          <input name="pl" id="pl" type="radio" value="0" checked>
          Pago de contado
        </label>
        <label class="nobold" for="rb">
          <input name="pl" id="pl" type="radio" value="1">3 meses 
        </label>
        <label class="nobold" for="rc">
          <input name="pl" id="pl" type="radio" value="2">6 meses
        </label>
        <label  class="nobold" for="rd">
          <input name="pl" id="pl" type="radio" value="3">9 meses
        </label>
        <input id="payment-intent-id" type="hidden" />
      </form>
      <p class="total">Total = $ <span id='gtc' ></span> pesos </p>
      <button class="fbutton" id="timebutton">Confirmar</button>
    </div>

    <div id="ccard" class="cardinfo" hidden=true>
      <p class="card">Datos de la tarjeta</p>
      <ul class="form-style-1" id="details">
        <li>
          <label>Nombre del titular </label>
          <input id="cardholder-name" type="text" placeholder="Cardholder name">
        </li>
        <!-- placeholder for Elements -->
        <li>
          <label>Numero de tarjeta </label>
          <div id="card-element"></div>
        </li>
        <li>
          <button class="fbutton"  id="card-button">Siguiente</button>
        </li>
      </ul> 
    </div>

    <div id="cmsg" class="message" hidden>
      <div id="result">
        <p id="status-message"></p>
      </div>
    </div>

  </article>
</section> 
<section class="bdat"> </section>


<script type="text/javascript">
  var stripe = Stripe('<%= $stripe_sk_public %>');
  var cu=<%= $precio %>;
  var tid=<%= $tid %>;
  var meses=<%= $meses %>; 
  var descuento=<%= $descuento %>;
  var desc_estado=<%= $desc_estado %>;
</script>