@extends('layouts.mainlayout')
<style media="screen">
.aux-landing-wrapper{display: block; height: auto; width: 100%; padding: 50px 0; font-family: 'Lato', sans-serif!important;}
.aux-landing-wrapper h1,
.aux-landing-wrapper h2,
.aux-landing-wrapper h3,
.aux-landing-wrapper h4,
.aux-landing-wrapper h5,
.aux-landing-wrapper h6,
.aux-landing-wrapper p{font-family: 'Lato', sans-serif!important;}
.aux-landing-wrapper h3{ font-size: 18px; margin: 5px 0!important;}
.box-aux-left{background-color: #ffffff; padding:0; border-top-left-radius: 15px; border-bottom-left-radius: 15px; color: #ffffff!important; overflow: hidden;}
.aux-landing-wrapper p{font-size:12px!important;}
img.custom-logo-promo{ max-width: 80%;}
.box-aux-right{background-color: #ffffff; padding: 90px 45px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
.area-content{display: block; padding: 20px; background: rgb(246,39,39);background: linear-gradient(128deg, rgba(246,39,39,1) 0%, rgba(159,49,41,1) 100%);}
.box-espacio-info{ padding: 10px; display: block; background-color: rgba(102, 5, 5, 0.45); border-radius: 5px; margin-bottom: 20px;}
.box-espacio-info p{margin: 0;}
.top-banner-box{
  background-color: #ffffff;
  display: block;
  padding: 20px;
  text-align: center;
  border-top-left-radius: 15px;
  border:solid 1px #ffffff!important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.top-banner-box img.custom-logo-promo{
  margin: 0 auto;
}

.top-banner-box h3{
text-align: left!important;
padding-top: 20px;
color: #535353;
font-size: 16px;
}

@media screen and (max-width:767px){.box-aux-left{border-top-left-radius: 15px;border-top-right-radius: 15px;border-bottom-left-radius: 0;}
.box-aux-right{border-bottom-right-radius: 15px;border-bottom-left-radius: 15px;border-top-right-radius: 0px;padding:20px!important;}
}

span.bold-red {
    color: red;
    font-weight: bold;
}
</style>
@section('content')
<section class="aux-landing-wrapper">
  <div class="container">
    <div class="row no-gutters align-items-center ">
      <div class="col-md-5 offset-md-1 aux-b-left">
        <div class="box-aux-left shadow-lg">
          <div class="top-banner-box">
         
          <img src=" {{asset('assets/img/logo-aguakan.png')}}" alt="logo" class="img-fluid header-logo">
            <img src="{{asset('assets/img/logo-promocion.png')}}" alt="Promoción de Noviembre" class="custom-logo-promo">
            <h3>Ponte al día con tu servicio.<br>
              <strong>Este súper fin, Aguakan tiene <span class="bold-red">{{ $descuento }}%</span> descuento especial para ti.</strong><br> Aprovecha esta oportunidad única.</h3>
          </div>

          <div class="area-content">

          <!-- BLoque sitio -->

          <h3 class="pb-2">Tus Datos</h3>
          <div class="box-espacio-info">

            <div class="d-flex txt-precio">
              <p style="margin-right:10px;"><strong>Nombre:</strong></p>
              <p>{{  ucfirst($responseGetSaldo['vNOMBRE']) }}</p>
            </div>

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

             <div class="d-flex justify-content- txt-precio">
              <p style="margin-right:10px;"><strong>Teléfono: </strong></p>
              <p>{{ $telefono }}</p>
             </div>

          </div><!--box-espacio-info-->


          <h3 class="pb-2">Información del contrato a pagar</h3>
          <div class="box-espacio-info">

            <div class=" 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>{{  $client }}</p>
            </div>

          </div><!--box-espacio-info-->

          <div class="box-espacio-info">

            <div class=" txt-precio">
                <p><strong>Nombre del titular:</strong></p>
                <p>{{  ucfirst($responseGetSaldo['vNOMBRE']) }}</p>
            </div>

            <div class=" txt-precio">
                <p><strong>Dirección: </strong></p>
                <p>{{ $responseGetSaldo['vDIRECCION'] }}</p>
            </div>

          </div><!--box-espacio-info-->

            <!-- BLoque sitio -->
          </div><!--area-content-->
        </div><!--box-aux-left-->
      </div><!--col-md-6-->
      <div class="col-md-6 aux-b-right ">
        <div class="box-aux-right shadow-lg">
        <iframe src="{{ $someUrl }}" width="100%" height="585" class="border-0"></iframe> 
        </div><!--box-aux-right-->
      </div><!--col-md-6-->
    </div>
  </div>
</section>





@endsection