@extends('template.layoutAdmin', ['activeButton'=>'pagos'])
@section('title')
    {{  trans('payments.pagosTarjetaTitulo') }}
@endsection

@section('cabecera')
@include('system.payments.cabecera')
@endsection

@section('style')
    <style>
        .stripe-connect {
        background: #635bff;
        display: inline-block;
        height: 38px;
        text-decoration: none;
        width: 180px;

        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;

        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;

        -webkit-font-smoothing: antialiased;
        }

        .stripe-connect span {
        color: #ffffff;
        display: block;
        font-family: sohne-var, "Helvetica Neue", Arial, sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 14px;
        padding: 11px 0px 0px 24px;
        position: relative;
        text-align: left;
        }

        .stripe-connect:hover {
        background: #7a73ff;
        }

        .stripe-connect.slate {
        background: #0a2540;
        }

        .stripe-connect.slate:hover {
        background: #425466;
        }

        .stripe-connect.white {
        background: #ffffff;
        }

        .stripe-connect.white span {
        color: #0a2540;
        }

        .stripe-connect.white:hover {
        background: #f6f9fc;
        }

        .stripe-connect span::after {
        background-repeat: no-repeat;
        background-size: 49.58px;
        content: "";
        height: 20px;
        left: 62%;
        position: absolute;
        top: 28.95%;
        width: 49.58px;
        }

        /* Logos */
        .stripe-connect span::after {
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 468 222.5' style='enable-background:new 0 0 468 222.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M414,113.4c0-25.6-12.4-45.8-36.1-45.8c-23.8,0-38.2,20.2-38.2,45.6c0,30.1,17,45.3,41.4,45.3 c11.9,0,20.9-2.7,27.7-6.5v-20c-6.8,3.4-14.6,5.5-24.5,5.5c-9.7,0-18.3-3.4-19.4-15.2h48.9C413.8,121,414,115.8,414,113.4z M364.6,103.9c0-11.3,6.9-16,13.2-16c6.1,0,12.6,4.7,12.6,16H364.6z'/%3E%3Cpath class='st0' d='M301.1,67.6c-9.8,0-16.1,4.6-19.6,7.8l-1.3-6.2h-22v116.6l25-5.3l0.1-28.3c3.6,2.6,8.9,6.3,17.7,6.3 c17.9,0,34.2-14.4,34.2-46.1C335.1,83.4,318.6,67.6,301.1,67.6z M295.1,136.5c-5.9,0-9.4-2.1-11.8-4.7l-0.1-37.1 c2.6-2.9,6.2-4.9,11.9-4.9c9.1,0,15.4,10.2,15.4,23.3C310.5,126.5,304.3,136.5,295.1,136.5z'/%3E%3Cpolygon class='st0' points='223.8,61.7 248.9,56.3 248.9,36 223.8,41.3 '/%3E%3Crect x='223.8' y='69.3' class='st0' width='25.1' height='87.5'/%3E%3Cpath class='st0' d='M196.9,76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7,15.9-6.3,19-5.2v-23C214.5,68.1,202.8,65.9,196.9,76.7z'/%3E%3Cpath class='st0' d='M146.9,47.6l-24.4,5.2l-0.1,80.1c0,14.8,11.1,25.7,25.9,25.7c8.2,0,14.2-1.5,17.5-3.3V135 c-3.2,1.3-19,5.9-19-8.9V90.6h19V69.3h-19L146.9,47.6z'/%3E%3Cpath class='st0' d='M79.3,94.7c0-3.9,3.2-5.4,8.5-5.4c7.6,0,17.2,2.3,24.8,6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6 C67.5,67.6,54,78.2,54,95.9c0,27.6,38,23.2,38,35.1c0,4.6-4,6.1-9.6,6.1c-8.3,0-18.9-3.4-27.3-8v23.8c9.3,4,18.7,5.7,27.3,5.7 c20.8,0,35.1-10.3,35.1-28.2C117.4,100.6,79.3,105.9,79.3,94.7z'/%3E%3C/g%3E%3C/svg%3E");
        }

        .stripe-connect.white span::after {
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 468 222.5' style='enable-background:new 0 0 468 222.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%230A2540;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M414,113.4c0-25.6-12.4-45.8-36.1-45.8c-23.8,0-38.2,20.2-38.2,45.6c0,30.1,17,45.3,41.4,45.3 c11.9,0,20.9-2.7,27.7-6.5v-20c-6.8,3.4-14.6,5.5-24.5,5.5c-9.7,0-18.3-3.4-19.4-15.2h48.9C413.8,121,414,115.8,414,113.4z M364.6,103.9c0-11.3,6.9-16,13.2-16c6.1,0,12.6,4.7,12.6,16H364.6z'/%3E%3Cpath class='st0' d='M301.1,67.6c-9.8,0-16.1,4.6-19.6,7.8l-1.3-6.2h-22v116.6l25-5.3l0.1-28.3c3.6,2.6,8.9,6.3,17.7,6.3 c17.9,0,34.2-14.4,34.2-46.1C335.1,83.4,318.6,67.6,301.1,67.6z M295.1,136.5c-5.9,0-9.4-2.1-11.8-4.7l-0.1-37.1 c2.6-2.9,6.2-4.9,11.9-4.9c9.1,0,15.4,10.2,15.4,23.3C310.5,126.5,304.3,136.5,295.1,136.5z'/%3E%3Cpolygon class='st0' points='223.8,61.7 248.9,56.3 248.9,36 223.8,41.3 '/%3E%3Crect x='223.8' y='69.3' class='st0' width='25.1' height='87.5'/%3E%3Cpath class='st0' d='M196.9,76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7,15.9-6.3,19-5.2v-23C214.5,68.1,202.8,65.9,196.9,76.7z'/%3E%3Cpath class='st0' d='M146.9,47.6l-24.4,5.2l-0.1,80.1c0,14.8,11.1,25.7,25.9,25.7c8.2,0,14.2-1.5,17.5-3.3V135 c-3.2,1.3-19,5.9-19-8.9V90.6h19V69.3h-19L146.9,47.6z'/%3E%3Cpath class='st0' d='M79.3,94.7c0-3.9,3.2-5.4,8.5-5.4c7.6,0,17.2,2.3,24.8,6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6 C67.5,67.6,54,78.2,54,95.9c0,27.6,38,23.2,38,35.1c0,4.6-4,6.1-9.6,6.1c-8.3,0-18.9-3.4-27.3-8v23.8c9.3,4,18.7,5.7,27.3,5.7 c20.8,0,35.1-10.3,35.1-28.2C117.4,100.6,79.3,105.9,79.3,94.7z'/%3E%3C/g%3E%3C/svg%3E");
        }

        /* Please remove from your implementation. Used to display the white button on the white background */
        .stripe-connect.white {
        left: 1px;
        position: relative;
        top: 1px;
        }

        /* Please remove from your implementation. Used to display the white button on the white background */
        .div {
        background-color: #e5e5e5;
        height: 40px;
        width: 182px;

        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        }
        .parrafoDashboard{
            font-size: 13px;
            margin:0;
        }
        .infDashboard{
            font-size: 22px;
             margin:0;
        }
        .parrafoButton{
            padding-left: 8px;
        }
    </style>
@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
        @if(count($errors) > 0)
        <div class="row">
          <div class="col-12">
            <div class="alert alert-warning alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <p> {{  trans('restaurantes.corregirErrores') }} </p>
                  <ul>
                    @foreach ($errors->all() as $message)
                      <li>{{ $message }}</li>
                    @endforeach
                  </ul>
            </div>
          </div>
        </div>
      @endif
    </div>

    <div class="col-md-12">
        <div class="box">
            <div class="box-header">
                {{-- <div class="col-md-12"> --}}
                    <div class="row">
                        <div class="col-md-10">
                            <h1>
                                <small> {{  trans('payments.configPagosTarjeta') }}
                                    {{-- <span class="font-weight-400">{{auth()->user()->userName}}</span> --}}
                                </small>
                            </h1>
                        </div>
                    </div>
                {{-- </div> --}}
            </div>

            <div class="box-body">
                <div class="row" id="allservices">
                    @foreach ($tipoPagoGeneral as $item)
                        @if ($item->idServicio == 22 && $item->electronico != 2 )
                            <div class="col text-center">
                                <div class="row">
                                    <div class="col text-center">
                                        {{  trans('payments.ordenar') }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col text-center">
                                        <label class="switch">
                                            @php
                                                $estadoOrdenarelectronico = false;
                                                if(!empty($tipoPagoOrdenar)){
                                                    if($tipoPagoOrdenar->electronico == 1)
                                                    {
                                                        $estadoOrdenarelectronico = true;
                                                    }
                                                }
                                            @endphp
                                            <input  type="checkbox"
                                                    name="ordenar"
                                                    onclick="changeStateService(22)"
                                                    id="ordenar" value=""
                                                    class="success"
                                                    {!!  !empty($tipoPagoOrdenar) && $estadoOrdenarelectronico ? 'checked="true"': '' !!}
                                                    {{ !empty($tipoPagoOrdenar) && $tipoPagoOrdenar->electronico == 2 ? 'disabled':'' }}>
                                            <span class="slider round"></span>
                                        </label>
                                    </div>
                                </div>

                            </div>
                        @endif
                        @if ($item->idServicio == 23 && $item->electronico != 2)
                            <div class="col text-center">
                                <div class="row">
                                    <div class="col text-center">
                                        {{  trans('payments.paraLlevar') }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col text-center">
                                    <label class="switch">
                                        @php
                                            $estadoParallevarelectronico = false;
                                            if(!empty($tipoPagoParaLlevar))
                                            {
                                                if($tipoPagoParaLlevar->electronico == 1)
                                                {
                                                    $estadoParallevarelectronico = true;
                                                }
                                            }
                                        @endphp
                                        <input  type="checkbox"
                                                name="paraLlevar"
                                                onclick="changeStateService(23)"
                                                id="paraLlevar" value=""
                                                class="success"
                                                {!! !empty($tipoPagoParaLlevar) && $estadoParallevarelectronico ? 'checked="true"': '' !!}
                                                {{ !empty($tipoPagoParaLlevar) && $tipoPagoParaLlevar->electronico == 2 ? 'disabled':'' }}>
                                        <span class="slider round"></span>
                                    </label>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if ($item->idServicio == 24 && $item->electronico != 2)
                            <div class="col text-center">
                                <div class="row">
                                    <div class="col text-center">
                                        {{  trans('payments.domicilio') }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col text-center">
                                        <label class="switch">
                                            @php
                                                $estadoDomicilioelectronico = false;
                                                if(!empty($tipoPagoDomicilio)){
                                                    if($tipoPagoDomicilio->electronico == 1)
                                                    {
                                                        $estadoDomicilioelectronico = true;
                                                    }
                                                }
                                            @endphp
                                            <input  type="checkbox"
                                                    name="domicilios"
                                                    onclick="changeStateService(24)"
                                                    id="domicilios" value=""
                                                    class="success"
                                                    {!! !empty($tipoPagoDomicilio) && $estadoDomicilioelectronico? 'checked="true"': '' !!}
                                                    {{ !empty($tipoPagoDomicilio) && $tipoPagoDomicilio->electronico == 2 ? 'disabled':'' }}>
                                            <span class="slider round"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
                <hr>
                @if (env('MULTISERVER') == "US")
                    <div id="content-config" >
                        <div class="row">
                            <div class="col-md-12">
                                <div class="info-box">
                                    <div class="col-md-12">
                                        <div class="row">
                                            {{-- <div    class="col-md-2"
                                                    style=" display: flex;
                                                            /* justify-content: flex-end; */
                                                            align-items: center!important;">
                                            </div> --}}
                                            <div class="col-md-5 lh-base" style="padding-top:12px">
                                                <div class="row">
                                                    <div class="col-md-2" style=" display: flex;
                                                    justify-content: flex-end;
                                                    align-items: center!important;">
                                                        <img src="{{env('Image').'/'.env('SERVIDOR').'/'.env('MULTISERVER').'/imagenGeneros/imagenMan/man.png'}}" width= "55px" heigth= "55px" alt="">
                                                    </div>
                                                    <div class="col-md">
                                                        {{-- <p style="font-size: 13px; margin:0;">Delivery pilot since Apr 2021</p> --}}
                                                        <h2 style="font-size: 20px; margin:0;">{{ $dataUser->business_profile->name ?? Auth::user()->userName}}</h2>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-2" style="padding-top:12px">
                                                <p style="font-size: 13px; margin:0;" class="d-flex justify-content-center"> {{  trans('payments.balancePendiente') }} </p>
                                                <p style="font-size: 22px; margin:0;" class="d-flex justify-content-center">$ {{ $balancePending }}</p>
                                            </div>
                                            <div class="col-md-2" style="padding-top:12px">
                                                <p style="font-size: 13px; margin:0;" class="d-flex justify-content-center"> {{  trans('payments.balanceDisponible') }} </p>
                                                <p style="font-size: 22px; margin:0;" class="d-flex justify-content-center">$ {{ $balanceAvailable == 0 ? '0.00':$balanceAvailable }}</p>
                                            </div>
                                            @if ($dataUser != null)
                                                @if ($infoStripe->state_stripe == "ACTIVE")
                                                    <div class="col-md-3" style="padding-top:12px">
                                                        <button type="button" class="btn btn-warning btn-lg pt-1 pb-1 pl-30 pr-30" style="font-size: 17px" {!! $balanceAvailable == 0 ? 'disabled':'href="'.route('payments.online.payout').'"' !!}>Pay out now</button>
                                                        <p style="font-size: 13px; padding-left: 8px;"> {{  trans('payments.cuentaVerificada') }} </p>
                                                    </div>
                                                @else
                                                    <div class="col-md-3" style="padding-top:12px">
                                                        <button disabled type="button" class="btn btn-warning btn-lg pt-1 pb-1 pl-30 pr-30" style="font-size: 17px"> {{  trans('payments.pagaAhora') }} </button>
                                                        <p style="font-size: 13px; padding-left: 8px;"> {{  trans('payments.verificacion') }} </p>
                                                    </div>
                                                @endif
                                            @else
                                                <div class="col-md-3" style="padding-top:24px">
                                                    <a onclick="createAccount()" class="stripe-connect"><span> {{  trans('payments.conectar') }} </span></a>
                                                </div>
                                            @endif

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if ($dataUser != null)

                            @if ($infoStripe->state_stripe == "ACTIVE")

                                <div class="col-md-12">
                                    <table class="table-responsive table-bordered table">
                                        <thead>
                                            <tr>
                                                <td> {{  trans('payments.referencia') }} </td>
                                                <td> {{  trans('payments.nombreCliente') }} </td>
                                                <td> {{  trans('payments.dia') }} </td>
                                                <td> {{  trans('payments.monto') }} </td>
                                                <td> {{  trans('payments.estado') }} </td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if (count($pagos) > 0)
                                                @foreach ($pagos as $item)
                                                    @php
                                                        $dataJson = json_decode($item->message, true);
                                                        // dd($dataJson['metadata']['nombreUsuario']);
                                                    @endphp
                                                    <tr>
                                                        <td># {{ $item->orderId }}</td>
                                                        <td>{{ $dataJson['metadata']['nombreUsuario'] ?? "" }}</td>
                                                        <td>{{ date('d/m/Y h:m a', $dataJson['created']) }}</td>
                                                        <td>$ {{ $dataJson['amount'] / 100 }}</td>
                                                        <td>{{ $item->state }}</td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr>
                                                    <td colspan="3" class="text-center"> {{  trans('payments.sinPagosRealizados') }} </td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>

                            @else
                                <div class="col-md-12 text-center">
                                    @if (!$dataUser->details_submitted || !$dataUser->charges_enabled || !$dataUser->payouts_enabled)
                                        @if (count($dataUser->requirements->errors) > 0)
                                            <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')}} 😒 --}}
                                                @foreach ($dataUser->requirements->errors as $item)
                                                    - {{ $item->reason }}
                                                @endforeach
                                                <br><br>
                                                {{  trans('payments.stripe') }}
                                            </div>
                                        @endif
                                        {{-- <a type="button" href="{{ \App\Helpers\ConectionStripe::getLinkAccessLogin($dataUser->id)->url }}" target="_blank" class="btn btn-success"><span>Login in Stripe</span></a>    --}}
                                        <div class="col-md-12 text-center">
                                            <a type="button" href="https://dashboard.stripe.com/login" target="_blank" class="btn btn-success"> <span> {{  trans('payments.loginStripe') }} </span></a>
                                            <p style="font-size: 13px; padding-left: 8px;"> {{  trans('payments.visitaStripe') }} </p>
                                        </div>
                                    @endif
                                </div>
                            @endif
                        @else
                            {{-- <a onclick="createAccount()" class="stripe-connect"><span>Connect with</span></a> --}}
                        @endif
                    </div>
                @endif

                @if(env('MULTISERVER') == "CO")
                    <div id="tbActualizar">
                        @include('system.payments.online.novuepay')
                    </div>
                    {{-- <div class="col-md-12 text-center">
                        <h5>En construcción...</h5>
                    </div> --}}
                @endif
            </div>
        </div>
    </div>
</div>
{{-- <div class="row" id="porServicio">
    <div class="col">
        <div class="box">
            <div class="box-header">Activar por servicio</div>
            <div class="box-body">
            </div>
        </div>
    </div>
</div> --}}
@endsection

@section('js')
<script>
    function changeConfig()
    {
      var host = "{{$_SERVER["HTTP_HOST"]}}";
      $.ajax({
          url: UrlHost_+"/administrator/payments/online/ajax/changeStatus",
          type: 'post',
          dataType: 'json',
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          beforeSend: function () {
              swal({
                  title: " {{  trans('payments.cargando') }} ",
                  text: " {{  trans('payments.espereUnMomento') }} ",
                  showConfirmButton: false
              });
          },
          success: function(response){
              if (response.code == 200) {
                  if($('#online_config').is(':checked') ) {
                      $("#online_config").prop("checked", false);
                      $('#content-config').css('display', '');
                      $('#porServicio').css('display','');
                      /* if(!response.hasRes)
                      {
                          $('#guardarResolucion').modal({backdrop: 'static', keyboard: false})
                      } */
                  }else{
                      $("#online_config").attr("checked", true);
                      $('#content-config').css('display', 'none');
                      $('#porServicio').css('display','none');

                  }
              }else {
                  swal("Error!", response.message, "info");
              }
              swal.close();
          },
          error: function(xhr){
              swal("Error!", " {{  trans('payments.errorMessage') }} ", "error");
          }
      });
    }

    function createAccount()
    {
      var host = "{{$_SERVER["HTTP_HOST"]}}";
      $.ajax({
          url: UrlHost_+"/administrator/payments/online/ajax/createAccount",
          type: 'post',
          dataType: 'json',
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          beforeSend: function () {
              swal({
                  title: " {{  trans('payments.cargando') }} ",
                  text: " {{  trans('payments.espereUnMomento') }} ",
                  showConfirmButton: false
              });
          },
          success: function(response){
              if (response.code == 200) {
                  window.open(response.data, '_blank');
              }else {
                  if(response.code == 202)
                  {
                    window.open(response.data, '_blank');
                  }else{
                    swal("Error!", response.message, "info");
                  }
              }
              swal.close();
          },
          error: function(xhr){
              swal("Error!", " {{  trans('payments.errorMessage') }}", "error");
          }
      });
    }
    function changeStateService(id) {
        if(id == 22 ){
            $("#ordenar").attr("checked", true);
        }
        if(id == 23 ){
            $("#paraLlevar").attr("checked", true);
        }

        if(id == 24 ){
            $("#domicilios").attr("checked", true);
        }
        var host = "{{$_SERVER["HTTP_HOST"]}}";
      $.ajax({
          url: UrlHost_+"/administrator/payments/online/ajax/changeStatus/servicio",

        data:{
            service:id
        },
          type: 'post',
          dataType: 'json',
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          beforeSend: function () {
              swal({
                  title: " {{  trans('payments.cargando') }} ",
                  text: " {{  trans('payments.espereUnMomento') }} ",
                  showConfirmButton: false
              });
          },
          success: function(response){
              if (response.code == 200) {
                  $("#allservices").load(location.href+" #allservices>*","");

                  swal.close();
              }else {
                  $("#allservices").load(location.href+" #allservices>*","");
                  swal("Error!", response.message, "info");
              }

          },
          error: function(xhr){
            $("#allservices").load(location.href+" #allservices>*","");
            swal("Error!", " {{  trans('payments.espereUnMomento') }} ", "error");
          }
      });
    }

</script>
@endsection