@extends('voyager::master')
@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style type="text/css">
    .bs-callout {
        padding: 20px;
        margin: 20px 0;
        border: 1px solid #eee;
        border-left-width: 5px;
        border-radius: 3px;
    }
    *.bs-callout:empty {
       padding: 20px;
       margin: 0px;
       border: none;
    }
    .bs-callout h4 {
        margin-top: 0;
        margin-bottom: 5px;
    }
    .bs-callout p:last-child {
        margin-bottom: 0;
    }
    .bs-callout code {
        border-radius: 3px;
    }
    .bs-callout+.bs-callout {
        margin-top: -5px;
    }
    .bs-callout-danger {
        border-left-color: #d9534f;
    }
    .bs-callout-danger h4 {
        color: #d9534f;
    }
    @media only screen and (min-width: 768px) {
        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
    }
    label {
        color: black;
    }
    legend {
        background: #093F70;
        color: white;
        padding: 10px 15px;
    }
</style>
@endsection
@section('breadcrumbs')
<ol class="breadcrumb hidden-xs">
   <li class="active">
      <a href="{{ route('voyager.dashboard') }}"><i class="voyager-boat"></i>
      {{ __('voyager::generic.dashboard') }}</a>
   </li>
   <li class="">
      <a href=""><i class="voyager-bug"></i>
      CheckoutPrueba</a>
   </li>
</ol>
@endsection
@section('page_header')
<div class="container-fluid">
   <h1 class="page-title">
      <i class="voyager-bug"></i> CheckoutPrueba
   </h1>
   @include('voyager::multilingual.language-selector')
</div>
@stop
@section('content')
<div class="col-md-12">
   <div class="panel panel-bordered">
      <div class="panel-body">
         <div class="table-responsive">
            <form accept-charset="UTF-8" id="formPagoPse" autocomplete="on">
                @csrf
                <input type="hidden" id="token_pse" name="token_pse" value="{{ $data->acceptance_token }}">
               <div class="box box-primary">
                  <div class="box-body">
                     <input name="identificadorFormulario" type="hidden" value="0">
                     <input id="tercero" name="tercero" type="hidden" value="10346">
                     <input id="empresa" name="empresa" type="hidden" value="1002">
                     <input id="tipo_estado" name="tipo_estado" type="hidden">
                     <div class="row" style="display: none !important;">
                        <div class="col-md-8 col-md-offset-4">
                           <div id="field_tarifaGeneral" class="form-group">
                              <label for="tarifaGeneral">
                              datos
                              </label>
                              <select class="form-control" id="tarifaGeneral" name="tarifaGeneral"></select>
                           </div>
                        </div>
                     </div><fieldset>
                        <legend><i class="fa fa-money"></i> Datos generales del recibo</legend>
                        <div class="row">
                            <div class="form-group col-md-12 {{ $errors->has('valor') ? 'has-error' : '' }}">
                            </div>
                            <div class="col-md-4">
                                <div id="field_numero_factura" class="form-group">
                                   <label for="numero_factura">
                                   Número de factura <span class="badge badge-info">Requerido</span>
                                   </label>
                                   <input id="numero_factura" class="form-control form-control" readonly="" name="numero_factura" type="text" value="">
                                </div>
                             </div>
                             <div class="col-md-4">
                                 <div id="field_valor_factura" class="form-group">
                                    <label for="valor_factura">
                                    Monto a pagar <span class="badge badge-info">Requerido</span>
                                    </label>
                                    <input id="valor_factura" class="form-control form-control" readonly="" name="valor_factura" type="text" value="">
                                 </div>
                              </div>
                        </div>
                     </fieldset>
                     <fieldset>
                        <legend><i class="fa fa-info-circle"></i> Información Del pagador</legend>
                        <div class="row">
                           <div class="col-md-6">
                              <div id="field_banco_select" class="form-group">
                                 <label for="banco_select">
                                 Banco o Billetera digital <span class="badge badge-info">Requerido</span>
                                 </label>
                                 <select class="form-control select-tipo-bancos" style="width: 100%" id="banco_select" name="banco_select">
                                    @foreach ($bancos_pse as $banco)
                                        <option value="{{ $banco->financial_institution_code }}">{{ $banco->financial_institution_name }}</option>
                                    @endforeach
                                 </select>
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div id="field_tipoPersona" class="form-group">
                                 <label for="tipoPersona">
                                 Tercero de Cliente <span class="badge badge-info">Requerido</span>
                                 </label>
                                 <select class="form-control select-tipo-persona" style="width: 100%" id="tipoPersona" name="tipoPersona">
                                    <option value="0" selected="selected">PERSONA NATURAL</option>
                                    <option value="1">PERSONA JURÍDICA</option>
                                 </select>
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div id="field_tipoIdentidad" class="form-group">
                                 <label for="tipoIdentidad">
                                 Documento de Identificación <span class="badge badge-info">Requerido</span>
                                 </label>
                                 <select class="form-control select-tipo-identidad" style="width: 100%" id="tipoIdentidad" name="tipoIdentidad">
                                    <option value="CC" selected="selected">C.C. (CÉDULA DE CIUDADANÍA)</option>
                                    <option value="NIT">NIT (NÚMERO IDENTIFICACIÓN TRIBUTARIA)</option>
                                 </select>
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div id="field_numero_identificacion" class="form-group">
                                 <label for="numero_identificacion">
                                 Número de Identificación <span class="badge badge-info">Requerido</span>
                                 </label>
                                 <input id="numero_identificacion" class="form-control form-control" name="numero_identificacion" type="number" value="" placeholder="111111111">
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div id="field_nombre" class="form-group">
                                 <label for="nombre">
                                 Nombre del Titular
                                 </label>
                                 <input id="nombre" class="form-control form-control" name="nombre" type="text" value="" placeholder="CARLOS PEPITO PEREZ">
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div id="field_telefono" class="form-group">
                                 <label for="telefono">
                                 Número de Teléfono
                                 </label>
                                 <input id="telefono" class="form-control form-control" name="telefono" type="number" value="" placeholder="3100000000">
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div id="field_direccion" class="form-group">
                                 <label for="direccion">
                                 Dirección
                                 </label>
                                 <input id="direccion" class="form-control form-control" name="direccion" type="text" value="" placeholder="Calle 00 #00 - 00 Este">
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div id="field_customer_email" class="form-group">
                                 <label for="customer_email">
                                 Correo Electrónico
                                 </label>
                                 <input id="customer_email" class="form-control form-control" name="customer_email" type="email" value="" placeholder="pepito@gmail.com">
                              </div>
                           </div>
                        </div>
                     </fieldset>
                     {{-- <hr> --}}
                     <div class="form-check">
                      <input class="form-check-input" type="checkbox" value="" id="check_terminos">
                      <label class="form-check-label" for="check_terminos">
                        Acepto haber leído los <a target="_blank" href="{{ $data->permalink }}">Términos y Condiciones y la Política de Privacidad</a> para hacer este pago.
                      </label>
                    </div>
                     <hr>
                  </div>
                  <div class="box-footer">
                     {{-- <input name="Guardar" value="Borrador" class="btn btn-primary pull-right" style="margin-left:15px;" type="submit"> --}}
                     {{-- <input class="btn btn-primary waybox-button pull-right" name="Guardar" value="Definitivo" style="margin-left:15px;" type="submit"> --}}
                     <button class="btn waybox-button pull-left" disabled="disabled" style="margin-left:15px;" type="submit" id="btnPagar">Paga con <strong>PSE</strong></button>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
@endsection
@section('javascript')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript" src="https://checkout.wompi.co/widget.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js">
</script><script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
   // Swal.fire({
   //    title: 'Error!',
   //    text: 'Do you want to continue',
   //    icon: 'error',
   //    confirmButtonText: 'Cool',
   //    footer: '<a href="">Why do I have this issue?</a>'
   // });
    $('.empresas').select2();
    $('#tipoPersona').select2();
    $('#tipoIdentidad').select2();
   //  $('.empresas').select2({
   //     placeholder: "Seleccione Una Opción",
   //     allowClear: false,
   //     tags: false,
   //     width: 500,
   //  });
    $('#banco_select').select2();
   //  $('#banco_select').select2({
   //      placeholder: "Seleccione Un Banco",
   //      allowClear: true,
   //      tags: false,
   //      width: 500,
   //  });

    $('#valor_factura').inputmask('decimal', {
        'alias': 'numeric',
        'groupSeparator': ',',
        'autoGroup': false,
        'digits': 0,
        'radixPoint': ".",
        'digitsOptional': true,
        'allowMinus': false,
        'prefix': '$ ',
        'placeholder': '0',
        'numericInput': true,
        'removeMaskOnSubmit': true,
        'rightAlign': false,
        'min': 1000,
        'max': 99999999999,
        'greedy': true,
        'automask': true
    });
    $("form").submit(function (event) {
        var formData = {
            amount_in_cents: $("#valor_factura").val(),
            acceptance_token: $("#token_pse").val(),
            currency: "COP",
            customer_email: $("#customer_email").val(),
            user_type: 0, // Tipo de persona, natural (0) o jurídica (1)
            user_legal_id_type: "CC", // Tipo de documento, CC o NIT
            user_legal_id: $("#numero_identificacion").val(), // Número de documento
            financial_institution_code: $("#banco_select").val(), // Código (`code`) de la institución financiera
            payment_description: "Pago de ICA, ref: "+$("#numero_factura").val(), // Nombre de lo que se está pagando. Máximo 30 caracteres
            reference: $("#numero_factura").val()
         };
         console.log(formData);
         Swal.fire({
            title: '¿Estás seguro?',
            text: "Realizar pago ICA por "+$("#valor_factura").val(),
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Confirmar',
            cancelButtonText: 'Cancelar'
         })
         .then((result) => {
            if (result.isConfirmed) {
               $.ajax({
                  type: "POST", // la variable type guarda el tipo de la peticion GET,POST,..
                  url: "http://localhost/api-pagos/public/api/v1/ica/create-transaction",
                  data: formData,
                  dataType: "json",
                  encode: true,// data recive un objeto con la informacion que se enviara al servidor
                  success:function(response) { //success es una funcion que se utiliza si el servidor retorna informacion
                     for(let value of Object.keys(response.messages)){
                        console.log(value);
                        console.log(response.messages[value][0]);
                        Swal.fire({
                           title: 'Transacción fallida',
                           text: response.messages[value][0],
                           icon: 'error',
                           confirmButtonText: 'Aceptar',
                           footer: '<a href="">En caso de emergencia comunicate con el área de soporte</a>'
                        });
                     }
                  }
               });
            }
         });
         event.preventDefault();
    });
    $("#check_terminos").click(function() {
        var checked_status = this.checked;
        if (checked_status == true) {
            $("#btnPagar").removeAttr("disabled");
        } else {
            $("#btnPagar").attr("disabled", "disabled");
        }
    });
});
</script>
@endsection