@extends('layouts.dashboard', ['menu_activo' => 'drop_configuracion'])

@section('contenido')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">Configuración</h1>
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{url('admin')}}">Inicio</a></li>
            <li class="breadcrumb-item">Drop</li>
            <li class="breadcrumb-item active">Configuración</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <!-- Main row -->
      <div class="row">
        <section class="col-lg-12">

          <div class="card">
            <div class="card-header">
              <div class="row">
                <div class="col">
                  <h3 class="card-title">
                    Pago de publicaciones
                  </h3>
                </div>
                <div class="col text-right">

                </div>  
              </div>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-12">
                    <div id="cardPaymentBrick_container"></div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </section>
</div>
@endsection

@section('scripts')
  <script src="https://sdk.mercadopago.com/js/v2"></script>
  <script>
    const mp = new MercadoPago('{{env("MP_PUBLIC_KEY")}}');
    const bricksBuilder = mp.bricks({theme: 'bootstrap'});
    const renderCardPaymentBrick = async (bricksBuilder) => {

    const settings = {
      locale: 'es',
      initialization: {
        amount: {{$monto}}, // monto a ser pago
      },
      customization: {
         paymentMethods: {
           creditCard: 'all',
           debitCard: 'all',
         },
       },
      callbacks: {
        onReady: () => {
          /*
            Callback llamado cuando Brick esté listo.
            Aquí puedes ocultar loadings de su sitio, por ejemplo.
          */
        },
        onSubmit: (cardFormData) => {
          // callback llamado cuando el usuario haga clic en el botón enviar los datos

          // ejemplo de envío de los datos recolectados por el Brick a su servidor
          $.ajax({
            type:'POST',
            url:"{{url('drop/configuracion/pago/publicaciones')}}",
            headers: {
                  "Content-Type": "application/json",
                },
            body: JSON.stringify(cardFormData)
          }).done(function(result)
          {
            if(result.status == "rejected")
            {
              ttf_notificacion(result.status_detail, 'error');
              reject();
            }else
            {
              resolve();
            }
          });
        },
        onError: (error) => { 
          // callback llamado para todos los casos de error de Brick
          console.error(error);
        },
      },
    };
    const cardPaymentBrickController = await bricksBuilder.create('cardPayment', 'cardPaymentBrick_container', settings);
  };
  renderCardPaymentBrick(bricksBuilder);
  </script>
@endsection