{HEADER}



<main id="main">



  <section class="pt-5 mt-5 pb-2">

    <div class="container aos-init aos-animate" data-aos="fade-up">

      <div class="section-title pt-4 pb-2">

        <h3>MI PEDIDO</h3>

      </div>

    </div>

    <div class="container text-secondary"

      style="background: linear-gradient(180deg, #FFF 0%, #F6F6F6 52%, #F2F2F2 100%); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.25);">

      <form id="frmPedido">

        {MENUTIPO}

        <div class="row">

          <div class="col-md-6">

            <div class="card mb-2">

              <div class="card-header">

                <b>Tipo de Entrega</b>

              </div>

              <div class="card-body  p-2">

                <input type="hidden" id="te" name="te[on]" value=1>

                <script>

                  function entrega(tipo) {

                    $('#te').val(tipo);

                  }

                </script>



                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">

                  <li class="nav-item" role="presentation">

                    <button class="nav-link active" id="pills-recoger-tab" data-bs-toggle="pill"

                      data-bs-target="#pills-recoger" type="button" role="tab" aria-controls="pills-recoger"

                      aria-selected="false" onclick="entrega('1')">Recoger</button>

                  </li>

                  <li class="nav-item" role="presentation">

                    <button class="nav-link" id="pills-llevar-tab" data-bs-toggle="pill" data-bs-target="#pills-llevar"

                      type="button" role="tab" aria-controls="pills-llevar" aria-selected="true"

                      onclick="entrega('2')">Llevar</button>

                  </li>

                  <li class="nav-item" role="presentation">

                    <button class="nav-link" id="pills-mesa-tab" data-bs-toggle="pill" data-bs-target="#pills-mesa"

                      type="button" role="tab" aria-controls="pills-mesa" aria-selected="false"

                      onclick="entrega('3')">Reservar</button>

                  </li>

                </ul>

                <div class="tab-content" id="pills-tabContent">

                  <div class="tab-pane fade show active" id="pills-recoger" role="tabpanel"

                    aria-labelledby="pills-recoger-tab">

                    <div class="row">

                      <div class="col-12">

                        <p>Le enviaremos un <b>LOCALIZADOR</b> para retirar su pedido en nuestro establecimiento.</p>

                      </div>

                    </div>

                  </div>

                  <div class="tab-pane fade" id="pills-llevar" role="tabpanel" aria-labelledby="pills-llevar-tab">

                    <div class="row">

                      <div class="col-12">

                        <label for="domicilio" class="form-label">Domicilio</label>

                        <input type="text" class="form-control" id="domicilio" name="te[2][domicilio]" placeholder="Escriba aquí">

                      </div>

                      <div class="col-md-8">

                        <label for="localidad" class="form-label">Localidad</label>

                        <input type="text" class="form-control" id="localidad" name="te[2][localidad]" placeholder="">

                      </div>

                      <div class="col-md-4">

                        <label for="codpos" class="form-label">Cod.Postal</label>

                        <input type="text" class="form-control" id="codpos" name="te[2][codpos]" placeholder="" min="35139" max="38913">>

                      </div>

                    </div>

                  </div>

                  <div class="tab-pane fade" id="pills-mesa" role="tabpanel" aria-labelledby="pills-mesa-tab">

                    <h4>Información de la Reserva:</h4>

                    <div class="row">

                      <div class="col-6">

                        <div class="input-group has-validation">

                          <span class="input-group-text">Personas</span>

                          <select class="form-select" name="te[3][comensales]">

                            <option selected value="">Seleccionar...</option>

                            <option value="1">1</option>

                            <option value="2">2</option>

                            <option value="3">3</option>

                            <option value="4">4</option>

                            <option value="5">5+</option>

                          </select>

                        </div>

                      </div>

                      <div class="col-6">

                        <div class="input-group has-validation">

                          <span class="input-group-text">Hora</span>

                          <input type="time" name="te[3][hora]">

                          <div class="invalid-feedback">Es obligatorio.</div>

                        </div>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </div>

          </div>

          <div class="col-md-6">

            <div class="card mb-2">

              <div class="card-header">

                <b>Método de Pago</b>

              </div>

              <div class="card-body  p-2">

                <input type="hidden" id="mp" name="mp" value=1>

                <script>

                  function pago(tipo) {

                    $('#mp').val(tipo);

                  }

                </script>

                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">

                  <li class="nav-item" role="presentation">

                    <button class="nav-link active" id="pills-pasarela-tab" data-bs-toggle="pill"

                      data-bs-target="#pills-pasarela" type="button" role="tab" aria-controls="pills-pasarela"

                      aria-selected="false" onclick="pago('1')">Pasarela</button>

                  </li>

                  <li class="nav-item" role="presentation">

                    <button class="nav-link" id="pills-bizum-tab" data-bs-toggle="pill" data-bs-target="#pills-bizum"

                      type="button" role="tab" aria-controls="pills-bizum" aria-selected="true"

                      onclick="pago('2')">Bizum</button>

                  </li>

                  <li class="nav-item" role="presentation">

                    <button class="nav-link" id="pills-paypal-tab" data-bs-toggle="pill" data-bs-target="#pills-paypal"

                      type="button" role="tab" aria-controls="pills-paypal" aria-selected="false"

                      onclick="pago('3')">PayPal</button>

                  </li>

                </ul>

                <div class="tab-content" id="pills-tabContent">

                  <div class="tab-pane fade show active" id="pills-pasarela" role="tabpanel"

                    aria-labelledby="pills-pasarela-tab">

                    <h4>Cuenta Banco: {EMP_CCC}</h4>

                  </div>

                  <div class="tab-pane fade" id="pills-paypal" role="tabpanel" aria-labelledby="pills-paypal-tab">

                    <h4>Cuenta PayPal: {EMP_PAYPAL}</h4>

                  </div>

                  <div class="tab-pane fade" id="pills-bizum" role="tabpanel" aria-labelledby="pills-bizum-tab">

                    <h4>Número Bizum: {EMP_BIZUM}</h4>

                  </div>

                </div>

              </div>

            </div>

          </div>

          <div class="col-12 mb-3">

            <div class="form-check">

              <input type="checkbox" class="form-check-input" id="save-info">

              <label class="form-check-label" for="save-info">Guarde esta información para la próxima vez</label>

            </div>

            <hr class="my-4">

            <div class="d-grid gap-2 col-6 mx-auto">

              <button class="btn btn-sm btn-outline-success" type="button" onclick="run('cart-terminar','Terminar','Pedido')">TERMINAR

                PEDIDO</button>

            </div>

            <div id="divTerminar"></div>

          </div>

        </div>

      </form>

    </div>

  </section>



</main><!-- End #main -->



{FOOTER}