@extends('front.front')
@section('title','Dickiss | Nota de pago')
@section('css')
<style>
    .mercadopago-button{
        background: #00c88b !important;
    }
</style>
@endsection
@section('content')
    @section('img-header','http://www.dickissbarbershop.com/wp-content/uploads/2020/02/Logo_White_dickiss.png')    
    @section('titulo-descripcion')
    <div class="titulo_header">
        COME MEET US
    </div>
    <div class="subtitulo_header">
        NOTA DE PAGO
    </div>
    <div class="row m-0">
        <div class="offset-lg-6 col-lg-6 col-12 cuadro_descripcion">
            <h1>EL DÍA A DÍA DE UN HOMBRE MODERNO</h1>
            <p>Cuidarse es parte de mantener todo bajo control. ¡Como un verdadero rey! por eso te ayudamos con algunos artículos que pueden hacer más fácil el día a día de un hombre. Hablamos de temas que facilitan el cuidado de tu imagen, tu persona, tu cuerpo y tu bienestar. Alimentamos de manera continua este espacio, que aunque no estés en nuestro lugar, puedas seguir cuidándote.</p>
        </div>
    </div>
    @endsection
    <div class="tarjetas_servicios">
        <div class="row">
            <div class="col-12 text-center mb-5">
                {{-- <h1 class="subtituloPaso"></h1>
                <br> --}}
                <h2 class="subtituloPaso">Al aceptar tu cita quedará confirmada</h2>
                <br />
                @include('flash::message') 
            </div>            
        </div>        
    </div>
    <div class="container">
        <div class="row">            
            <div class="col-12 col-lg-6 text-center">                
                <img width="50%" src="http://www.dickissbarbershop.com/wp-content/uploads/2020/01/corona.png" alt="">                
            </div>
            <div class="col-12 col-lg-6 nota-pago">
                <center><h1 class="tituloPaso">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 nota_pago_items"><b>NOMBRE:</b> <span>{!! $nombre !!}</span></h5>
                            </li>
                            <li>
                                <h5 class="card-title nota_pago_items"><b>SERVICIO:</b> <span>{!! $servicio !!}</span></h5>
                            </li>
                            <li>
                                <h5 class="card-title nota_pago_items"><b>ESPECIALISTA:</b> <span>{!! $empleado !!}</span></h5>
                            </li>
                            <li>
                                <h5 class="card-title nota_pago_items" ><b>FECHA:</b> <span id="fechita">{!! $fecha_español !!}</span></h5>
                            </li>
                            <li>
                                <h5 class="card-title nota_pago_items"><b>HORA:</b> <span>{!! date("g:i a",strtotime($hour))!!}</span></h5>
                            </li>
                        </ul>
                        <h5 class="card-title nota_pago_items" 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">
                            <input type="hidden" value="approved" name="payment_status">
                            
                            <button href="#" style="float:right" class="btnPasos">RESERVAR</button>
                        </form>                        
                        {{-- <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>       
    </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