@extends('layouts.mainlayoutmovil')

@section('content')
    <section id="pago-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12 elemento-fonrm-uno vh-50 shadow rounded mt-3 mb-3">
                    <div class="row d-flex" style="padding:0px;">

                        <div class="col-md-6  p-5">
                            <h3 class="pb-4">Tus Datos</h2>
                                <div class="d-flex justify-content- txt-precio">
                                    <p style="margin-right:10px;"><strong>Nombre:</strong></p>
                                    <p>{{ strtoupper($request->name) }}</p>
                                </div>

                                <div class="d-flex justify-content- txt-precio">
                                    <p style="margin-right:10px;"><strong>Correo electrónico: </strong></p>
                                    <p>{{ strtoupper($request->email) }}</p>
                                </div>


                                @if ($request->phone != '')
                                    <div class="d-flex justify-content- txt-precio">
                                        <p style="margin-right:10px;"><strong>Teléfono: </strong></p>
                                        <p>{{ strtoupper($request->phone) }}</p>
                                    </div>
                                @endif

                                <h3 class="pb-4">Información del contrato a pagar</h2>
                                    <div class="d-flex txt-precio">
                                        <p style="margin-right:10px;"><strong>NIA: </strong></p>
                                        <p style="margin-right:10px;">{{ ucfirst($responseGetSaldo['VNIA']) }}</p>
                                        <p style="margin-right:10px;"><strong>Número de Cliente: </strong></p>
                                        <p>{{ $request->client }}</p>
                                    </div>
                                    <div class=" txt-precio">
                                        <p><strong>Nombre del titular: </strong></p>
                                        <p>{{ ucfirst($responseGetSaldo['vNOMBRE']) }}</p>
                                    </div>
                                    <hr>
                                    <div class=" txt-precio">
                                        <p><strong>Dirección: </strong></p>
                                        <p>{{ $responseGetSaldo['vDIRECCION'] }}</p>
                                    </div>
                                    <hr>
                                    <div class=" txt-precio d-flex">
                                        <p><strong>Saldo: </strong></p>
                                        <p style="margin-right:10px;">${{ number_format($responseGetSaldo['vSALDO'], 2) }}
                                        </p>
                                        @if ($request->otracantidad != '')
                                            <p style="margin-right:10px;"><strong>Cantidad a abonar: </strong></p>
                                            <p style="margin-right:10px;">${{ number_format($request->otracantidad, 2) }}
                                            </p>
                                        @endif
                                    </div>
                                    @if ($responseGetSaldo['vSALDO'] < 0)
                                        <div class=" txt-precio">
                                            <p style="color: #ffff0b;">Su recibo presenta un saldo negativo , favor de
                                                verificar el saldo que desea abonar.</p>
                                        </div>
                                    @endif
                                    <hr>
                                    <div class=" txt-precio">
                                        <p><strong>Vencimiento: </strong></p>
                                        <p>{{ $responseGetSaldo['vigencia'] }}</p>
                                    </div>
                                    <hr>
                                    <form id="home-form" method="POST" enctype="multipart/form-data">
                                        {{ csrf_field() }}
                                        <input type="hidden" name="client" value="{{ $request->client }}">
                                        <input type="hidden" name="email" value="{{ $request->email }}">
                                        <input type="hidden" name="name" value="{{ $request->name }}">
                                        <input type="hidden" name="phone" value="{{ $request->phone }}">

                                        <div class="form-group">
                                            <input type="number" min="1" step="any"
                                                value="{{ $request->otracantidad != '' ? $request->otracantidad : $responseGetSaldo['vSALDO'] }}"
                                                name="otracantidad">
                                        </div>
                                        <button class="btn btn-primary" type="submit">
                                            <i class="fa fa-refresh" aria-hidden="true"></i> Abonar otra cantidad</button>
                                    </form>
                        </div>
                        <div class="col-md-6 fondo-form-dos shadow rounded">

                            @if (floatval($responseGetSaldo['vSALDO']) == 0.0 && !isset($request->otracantidad))
                                <style>
                                    .spinner {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 100%;
                                        height: 50px;
                                        margin: 20px 0;
                                    }

                                    .spinner>div {
                                        width: 15px;
                                        height: 15px;
                                        background-color: #007bff;
                                        border-radius: 100%;
                                        display: inline-block;
                                        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
                                        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
                                        margin: 0 5px;
                                    }

                                    .spinner .bounce1 {
                                        -webkit-animation-delay: -0.32s;
                                        animation-delay: -0.32s;
                                    }

                                    .spinner .bounce2 {
                                        -webkit-animation-delay: -0.16s;
                                        animation-delay: -0.16s;
                                    }

                                    @-webkit-keyframes sk-bouncedelay {

                                        0%,
                                        80%,
                                        100% {
                                            -webkit-transform: scale(0)
                                        }

                                        40% {
                                            -webkit-transform: scale(1.0)
                                        }
                                    }

                                    @keyframes sk-bouncedelay {

                                        0%,
                                        80%,
                                        100% {
                                            -webkit-transform: scale(0);
                                            transform: scale(0);
                                        }

                                        40% {
                                            -webkit-transform: scale(1.0);
                                            transform: scale(1.0);
                                        }
                                    }
                                </style>

                                <div class="spinner">
                                    <div class="bounce1"></div>
                                    <div class="bounce2"></div>
                                    <div class="bounce3"></div>
                                </div>
                            @else
                                <div class="row align-items-center" style="height: 100%;">
                                    <div class="col-md-12">
                                        <form action="{{ config('aguakan.mp_url') }}" method="POST">
                                            <input name="nia" id="nia" value="{{ $paymentData['nia'] }}"
                                                type="hidden">
                                            <input name="num_client" id="num_client"
                                                value="{{ $paymentData['num_client'] }}" type="hidden">
                                            <input name="mp_order" id="mp_order" type="hidden"
                                                value="{{ $paymentData['mp_order'] }}">
                                            <input name="mp_reference" id="mp_reference" type="hidden"
                                                value="{{ $paymentData['mp_reference'] }}">
                                            <input name="mp_amount" id="mp_amount" type="hidden"
                                                value="{{ $paymentData['mp_amount'] }}">
                                            <input name="mp_customername" id="mp_customername" type="hidden"
                                                value="{{ $paymentData['mp_customername'] }}">
                                            {{-- Id del ambiente preproductivo  15066 --}}
                                            <input name="mp_account" id="mp_account" type="hidden"
                                                value="{{ $paymentData['mp_account'] }}">
                                            <input name="mp_product" id="mp_product" type="hidden"
                                                value="{{ $paymentData['mp_product'] }}">
                                            {{-- División Organizacional - Default 0 --}}
                                            <input name="mp_node" id="mp_node" type="hidden"
                                                value="{{ $paymentData['mp_node'] }}">
                                            {{-- Concepto 1 pago en línea --}}
                                            <input name="mp_concept" id="mp_concept" type="hidden"
                                                value="{{ $paymentData['mp_concept'] }}">
                                            {{-- 1 para pesos mexicanos --}}
                                            <input name="mp_currency" id="mp_currency" type="hidden" value="1">
                                            {{-- firma mp_order+mp_reference+mp_amount --}}
                                            <input name="mp_signature" id="mp_signature" type="hidden"
                                                value="{{ $paymentData['mp_signature'] }}">
                                            <input name="mp_phone" id="mp_phone" type="hidden"
                                                value="{{ $paymentData['mp_phone'] }}">
                                            <input name="mp_email" id="mp_email" type="hidden"
                                                value="{{ $paymentData['mp_email'] }}">
                                            <input name="mp_urlsuccess" id="mp_urlsuccess" type="hidden"
                                                value="{{ $paymentData['mp_urlsuccess'] }}">
                                            <input name="mp_urlfailure" id="mp_urlfailure" type="hidden"
                                                value="{{ $paymentData['mp_urlfailure'] }}">
                                            <input type="hidden" name="agk_array_solpagos"
                                                value="{{ $paymentData['agk_array_solpagos'] }}">
                                            <input type="hidden" name="agk_tipo_pago"
                                                value="{{ $paymentData['agk_tipo_pago'] }}">
                                            <button name="btn"
                                                class="form-control form-control-sm btn btn-custom-sm btn-primary d-block"
                                                type="submit">Realizar mi pago</button>
                                        </form>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection