@extends('front.front')
@section('title','Belle Allure | agradecimiento')
@section('content')
<style>
.mercadopago-button{
    background: #e15aa9 !important;
}
</style>
    <div class="parallax">
        <nav class="navbar navbar-expand-lg navbar-light " id="navegador">
            <div class="container d-flex flex-column flex-md-row justify-content-between franja_top" style="max-width: 100% !important;padding-right:0px;padding-left:0px;">
                <a itemprop="url" href="http://belleallure.com.mx/inicio/" style="height: 84px; visibility: visible;">
                    <img itemprop="image" class="mobile_sitcky" src="http://belleallure.com.mx/inicio/wp-content/uploads/2019/09/logoBelleAllure.png" alt="Logo"  id="imagen_sticky">
                </a>
                <div class="menu">
                    <a class="py-2 d-none d-md-inline-block nav-link" href="http://belleallure.com.mx/inicio/">inicio</a>
                    <a class="py-2 d-none d-md-inline-block nav-link" href="http://belleallure.com.mx/inicio/index.php/nosotros/">nosotros</a>
                    <a class="py-2 d-none d-md-inline-block nav-link" href="http://belleallure.com.mx/inicio/index.php/servicios/">servicios</a>
                    <a class="py-2 d-none d-md-inline-block active nav-link" href="http://belleallure.com.mx/spa/public/reservaciones">reservaciones</a>
                    <a class="py-2 d-none d-md-inline-block nav-link" href="http://belleallure.com.mx/inicio/index.php/contact-us/">contacto</a>
                </div>
            </div>
        </nav>
        <div class="container">
            <h1 style="color:#67666a" id="reservacion">
                <span >nota de pago</span>
            </h1>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="contenido">                                       
                    <h1 >¿Quieres realizar el pago <br>para que tus citas queden confirmadas?<h1>
                    <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque officia quisquam consectetur aliquamb<br> quia consequuntur facilis iure tempore! Nostrum rem dolorem placeat hic quam consectetur repellat, optio ut vero aliquam. </p>
                    @include('flash::message') 
                </div>
            </div>
            <div class="col-12 col-lg-6">
                {{-- <center><h1>Pagos<h1></center> --}}
                <img width="100%" src="http://belleallure.com.mx/inicio/wp-content/uploads/2019/09/lapSpa.png" alt="">
                {{-- <br>
                <br> --}}
                {{-- <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active color" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
                        aria-selected="true">tarjeta de crédito</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link color" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
                        aria-selected="false">paypal</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link color" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
                        aria-selected="false">oxxo</a>
                    </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel"  style="text-decoration-line:none!important;">
                            <h4 class="pago">Ingresa tu número de tarjeta:</h4>
                            <input id="tarjet" class="form-control" type="text" name="tarjet" value=""  style="width:40%"  placeholder="9999-9999-9999"/>
                            <br>
                            <br>
                            <button  type="button" id="tarjet_card"  class="btn stilo_boton" data-toggle="modal" >pagar</button>
                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" style="text-decoration-line:none!important;">
                            <h4 class="pago">Irás a la página oficial de paypal para realizar tu pago.</h4>
                            <br>
                            <br>
                            <button  type="button" id="paypal"  class="btn stilo_boton" data-toggle="modal" >pagar</button>
                        </div>
                        <div class="tab-pane fade" id="contact" role="tabpanel" style="text-decoration-line:none!important;">
                        <h4 class="pago">Ingresa tu número de referencia:</h4>
                            <input id="referencesOxxo" class="form-control" type="text" name="tarjet" value=""  style="width:40%"  placeholder="9999-9999-9999"/>
                            <br>
                            <br>
                            <button  type="button" id="oxxo"  class="btn stilo_boton" data-toggle="modal" >pagar</button>
                        </div>
                    </div>
                </ul> --}}
            </div>
            <div class="col-12 col-lg-6">
            <center><h1>Reservación<h1></center>
                <br>
                <br>
                <div class="card bg-light mb-3" id="carrito">
                    <div class="card-header">Cita</div>
                    <div class="card-body">
                        <ul style="font-size:11px; color:#67666a">
                            <li>                                
                                <h5 class="card-title"><b>nombre:</b> <span>{!! $nombre !!}</span></h5>
                            </li>
                            <li>
                                <h5 class="card-title"><b>servicio:</b> <span>{!! $servicio !!}</span></h5>
                            </li>
                            <li>
                                <h5 class="card-title"><b>especialista:</b> <span>{!! $empleado !!}</span></h5>
                            </li>
                            <li>
                                <h5 class="card-title" ><b>fecha:</b> <span id="fechita">{!! $fecha_español !!}</span></h5>
                            </li>
                            <li>
                                <h5 class="card-title"><b>hora:</b> <span>{!! date("g:i a",strtotime($hour))!!}</span></h5>
                            </li>
                        </ul>
                        <h5 class="card-title" style="text-align:right;"><b>Total:</b> <span>${!! $precio !!}</span></h5>
                        <form class="text-right" action="{!! url('agradecimiento') !!}" method="POST">
                            @csrf
                            <input type="hidden" value="{!! $nombre !!}" name="nombre">
                            <input type="hidden" value="{!! $servicio !!}" name="servicio">
                            <input type="hidden" value="{!! $empleado !!}" name="empleado">
                            <input type="hidden" value="{!! $fecha_español !!}" name="fecha_español">
                            <input type="hidden" value="{!! $hour !!}" name="hour">
                            <input type="hidden" value="{!! $precio !!}" name="precio">
                            <input type="hidden" value="{!! $id_cita !!}" name="id_cita">
                            <script
                             src="https://www.mercadopago.com.mx/integrations/v1/web-payment-checkout.js"
                             data-preference-id="{!! $preference->id !!}">
                            </script>
                        </form>
                    </div>
                </div>
            </div>            
            <div class="col-12">
                <div class="contenido1">
                    <h1>Ve más de nuestros servicios</h1>
                        <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque officia quisquam consectetur aliquamb<br> quia consequuntur facilis iure tempore! Nostrum rem dolorem placeat hic quam consectetur repellat, optio ut vero aliquam. </p>
                </div>
            </div>
        </div>
       
        <div class="row contenido2">
            <div class="col-lg-3">
                <img src="http://belleallure.com.mx/inicio/wp-content/uploads/2019/09/s1.jpg" alt="" style="width:100%;">
                <br>
                <h4>Faciales</h4>
                <p class="p">  Da el primer paso para obtener un rostro hidratado, luminoso y libre de imperfecciones embellece tu piel fortaleciendo las fibras de elastina y estimula la producción de colágeno combate los radicales libres y estimula la actividad celular programando un facial de acuerdo a tus necesidades.</p>
            </div>
            <div class="col-lg-3">
                <img src="http://belleallure.com.mx/inicio/wp-content/uploads/2019/09/s2.jpg" alt="" style="width:100%;">
                <br>
                <h4>Cortes</h4>
                <p class="p">  Quieres realzar la belleza natural de tus pestañas? Las extensiones son tu mejor opción, ya que podrás utilizarlas por un largo periodo de tiempo siendo resistentes contra el agua, cómodas prácticas y muy naturales. Así tu rutina de maquillaje será mucho más sencilla.</p>
            </div>
            <div class="col-lg-3">
                <img src="http://belleallure.com.mx/inicio/wp-content/uploads/2019/09/s3.jpg" alt="" style="width:100%;">
                <br>
                <h4>Masajes</h4>
                <p class="p">  
Luce un figura envidiable y reduce esas medidas de más, en la clínica Belle Allure tenemos el tratamiento adecuado para ti, acude a una valoración sin costo y comienza ya.</p>
            </div>
            <div class="col-lg-3">
                <img src="http://belleallure.com.mx/inicio/wp-content/uploads/2019/09/s4.jpg" alt="" style="width:100%;">
                <br>
                <h4>Depilación</h4>
                <p class="p"> Elimina el vello de cualquier parte del cuerpo y luce espectacular. contamos con la mejor tecnología para obtener los mejores resultados, el sistema shr combina laser diodo y luz pulsada en un tratamiento progresivo e indoloro.</p>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
<script src="{!! asset('files_custom/assets/input-mask/jquery.inputmask.js')!!}"></script>
<script>
    $('#tarjet').inputmask({mask: "9999-9999-9999"});
    $('#referencesOxxo').inputmask({mask: "9999-9999-9999"});
</script>
@endsection