@extends('template.layoutAdmin')

@section('style')
  <style media="screen">
  .pagination{
    display:inline-block;
    padding-left:0;
    margin: 10px 0 -10px 0;
  }
  .pagination>li{
    display:inline
  }
  .pagination li a,.pagination li span{
    position:relative;
    float:left;
    padding:6px 12px;
    margin: 0 -1px 0 -1px;
    line-height:1.42857143;
    color:#337ab7;
    text-decoration:none;
    background-color:#fff;
    border:1px solid #ddd
  }
  .pagination li:first-child a,.pagination li:first-child span{
    margin-left:0;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px
  }
  .pagination li:last-child a,.pagination li:last-child span{
    border-top-right-radius:4px;
    border-bottom-right-radius:4px
  }
  .pagination li a:focus,.pagination li a:hover,.pagination li span:focus,.pagination li span:hover{
    z-index:2;
    color:#23527c;
    background-color:#eee!important;
    border-color:#eee;
  }
  .pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{
    z-index:3;
    color:#fff;
    cursor:default;
    background-color:#337ab7!important;
    border-color:#337ab7;
  }
  .pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{
    color:#777;
    cursor:not-allowed;
    background-color:#fff;
    border-color:#ddd
  }
  .pagination-lg li a,.pagination-lg li span{
    padding:10px 16px;
    font-size:18px;
    line-height:1.3333333
  }
  .pagination-lg li:first-child>a,.pagination-lg li:first-child span{
    border-top-left-radius:6px;
    border-bottom-left-radius:6px
  }
  .pagination-lg li:last-child a,.pagination-lg li:last-child span{
    border-top-right-radius:6px;
    border-bottom-right-radius:6px
  }
  </style>
@endsection

@section('title')
  {{  trans('pagos.detallePagosOnline') }}
@endsection

@section('cabecera')
  <div class="row">
    <div class="col-6">
        <h1 style="margin: 15px 0 10px 0;">
            <a href="{{ url()->previous() }}" class="btn btn-default btn-sm"> <i class="fa fa-arrow-left"></i> {{  trans('pagos.regresar') }} </a>
        </h1>
    </div>
    <div class="col-6 text-right">
      <h1>

          <small> {{  trans('pagos.numeroReferencia') }} <span class="font-weight-500">{{$data->id}}</span></small>

      </h1>
    </div>
  </div>
@endsection

@section('contenido')
    <div class="row">
        <div class="col-12">
            @if(Session::has('message'))
                <div class="alert alert-success alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    😉 {{Session::get('message')}} 😉
                </div>
            @endif
            @if(Session::has('message_error'))
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    😓 {{Session::get('message_error')}} 😒
                </div>
            @endif
        </div>
      </div>
      <div class="row">
          <div class="col-md-3"></div>
        <div class="col-md-6">
          <div class="box">
            <div class="box-header">
                <div class="row">
                    <div class="col-md-10">
                        <h3 class="box-title font-weight-300"> {{  trans('pagos.datosPago') }} </h3>
                    </div>
                    <div class="col-md-2 text-right">
                        <span class="badge" style="background:{{$data->status != "DECLINED" ? "GREEN":"RED"}}">{{$data->status != "DECLINED" ? "APROBADO":"DECLINADO"}}</span>
                    </div>
                </div>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-md-4 text-center">
                        <h5 class="font-weight-500"> {{  trans('pagos.referenciaFactura') }} </h5>
                        <h5 class="font-weight-300"># {{$data->reference}}</h5>
                    </div>
                    <div class="col-md-4 text-center">
                        <h5 class="font-weight-500"> {{  trans('pagos.metodoPago') }} </h5>
                    <h5 class="font-weight-300">{{$data->payment_method_type}}</h5>
                    </div>
                    <div class="col-md-4 text-center">
                        <h5 class="font-weight-500"> {{  trans('pagos.pesoCantidad') }} </h5>
                    <h5 class="font-weight-300">{{$data->currency}} - $ {{substr("".$data->amount_in_cents, 0, -2)}}</h5>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-6 text-center">
                        <h5 class="font-weight-500"> {{  trans('pagos.fechaRealizacion') }}	</h5>
                        <h5 class="font-weight-300">{{$data->created_at}}</h5>
                    </div>
                    <div class="col-md-6 text-center">
                        <h5 class="font-weight-500"> {{  trans('pagos.respuestaPago') }} </h5>
                        <h5 class="font-weight-300">{{$data->status_message}}</h5>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <a class="btn btn-info" href="{{route('detallePedidos', $idPedido)}}"> {{  trans('pagos.detallePedido') }} </a>
                    </div>
                </div>
            </div>
          </div>
        </div>
        <div class="col-md-3"></div>
      </div>

@endsection

@section('js')
  <script type="text/javascript">
    function cambiarIdEstado(idEstado, idDetallePedido)
    {
      $("#idEstado").val(idEstado);
      $("#idDetalle").val(idDetallePedido);
      $("#cambiaridEstado").modal('show');
    }
    function cambiarEstado()
    {
      var idEstado = $("#idEstado").val();
      var idDetalle = $("#idDetalle").val();
      var host = "{{$_SERVER["HTTP_HOST"]}}";
      var data = {
        "idEstado": idEstado,
        "idDetalle": idDetalle
      }
      $.ajax({
          url: UrlHost_+"/administrator/cambio/estado/pedido",
          data: data,
          type: 'post',
          dataType: 'json',
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          beforeSend: function () {
            swal({
                title: " {{  trans('pagos.cargando') }}	",
                text: " {{  trans('pagos.espereUnMomento') }} ",
                showConfirmButton: false
            });
          },
          success: function(response){
              if (response.code == 200) {
                $("#cambiaridEstado").modal('hide');
                $("#detallePedido").load(location.href+" #detallePedido>*","");
              }else{
                swal("Error!", response.message, "info");
              }
              swal.close();
          },
          error: function(xhr){
            swal("Error!", " {{  trans('pagos.errorMessage') }} ", "error");
          }
      });
    }
  </script>
@endsection