@extends('layouts.mainlayout')

@section('content')
    <section id="pago-section">
        <div class="container">
            <div class="row">
                @if (session('status-sin'))
                    <div class="col-md-12  vh-50 shadow rounded mt-3 mb-3">

                        <div class="alert alert-primary">
                            <strong>{{ session('status-sin') }}</strong>
                        </div>
                    </div>
                @endif
                <div class="col-md-12 elemento-fonrm-uno shadow rounded mt-3 mb-3">

                    <div class="row" style="padding:0px;">
                        <div class="col-md-6 p-5">
                            <h3 class="pb-4">Tus Datos</h3>
                            <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</h3>
                            <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>

                            <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 (floatval($responseGetSaldo['vSALDO']) <= 0)
                                <div class=" txt-precio">
                                    <p style="color: #ffff0b;">Tu cuenta no presenta adeudos, agrega una cantidad
                                        para realizar un abono</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">
                                {{ 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">
                                    <div class="input-group">
                                        <input type="number" min="1" step="any" class="form-control"
                                            value="{{ $request->otracantidad != '' ? $request->otracantidad : $responseGetSaldo['vSALDO'] }}"
                                            name="otracantidad" placeholder="Cantidad">

                                        <button class="btn btn-primary" type="submit">
                                            <i class="fa fa-refresh" aria-hidden="true"></i>
                                            Otra Cantidad
                                        </button>
                                    </div>
                                </div>


                            </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
                                @if (!empty($paymentData))
                                    <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
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection