@extends(config('app.layout').'.layouts.web')

@section('title','Realizar Pedido')

@section('content')    
    <main id="MainContent" class="content-for-layout">
        <div class="checkout-page mt-48" id="checkout-page">
            <div class="container">
                <div class="checkout-page-wrapper">
                    <form id="checkout_form" method="POST" class="shipping-address-form common-form">
                        <div class="row">
                            <div class="col-12">
                                <div class="section-header mb-3 text-center">
                                    <h3 class="section-heading">Tu pedido ha sido recibido</h3>
                                </div>        
                                <div class="row">
                                    <div class="col-5 mt-3 ">
                                        Número Pedido: 
                                        <span class="sw-text-info">{{ str_pad($order['number'],5, "0", STR_PAD_LEFT) }}</span>
                                    </div>
                                    <div class="col-7 mt-3 ">
                                        Fecha: 
                                        <span class="sw-text-info">{{ $order['date_time']}}</span>
                                    </div>
                                </div>   
                                <div class="row">                                    
                                    <div class="col-6  mt-3 ">
                                        Total: 
                                        <span class="sw-text-info">$ {{ number_to_price($order['total']) }}</span>
                                    </div>
                                </div>                                        

                            </div>
                            <div class="col-12 mt-3">
                                <div class="text-center"><h4>Resumen</h4></div>
                                <table style="width:100%">
                                                                        <tr class="border-bottom">
                                        <td>
                                        </td>
                                        <td class="text-end align-bottom pt-3 h5">$ 0</td>
                                    </tr>   
                                </table>
                                <br />
                                <div class="text-center">                                   
                                    <button type="button" class="btn btn-success" onclick="send_whatsapp(); return false">
                                        <table>
                                            <tr>
                                                <td nowrap>Enviar pedido por whatsapp</td>
                                                <td><i class="bi bi-whatsapp fs-2 ms-2"></i></td>
                                            </tr>
                                        </table>                                         
                                    </button>
                                </div>
                                <br />
                                <div class="text-center">
                                    <a href="{{ url('categorias')}}">Seguir Comprando</a>
                                </div>
                            </div>
                        </div>
                    </form>                   
                    
                </div>
            </div>
        </div>    
    </main>        
@endsection

@section('css')
    <style>
        .sw-text-info{
            font-size: 20px;
            font-weight: 400;
        }
    </style>
@endsection
@section('js')
           
    <script>
        var order = @json($order);
        console.log(order);
        
        function send_whatsapp(){
            let cel_number = '{{ $config_web['info']['whatsapp']}}';

            let men = "Hola, soy "+ order.user.data.names+"\n" + 
                "quiero hacer este pedido: \n\n";
            let total = 0;
            let subtotal = 0;
            order.products.map(function(value, key) {                
                men = men + " - " + value.quanty +" " + value.product_name + ", $" + numberToPrice(value.total,0) +"\n";
                total = parseInt(total) + parseInt(value.total);
            });

            men = men + "\n TOTAL: *" + numberToPrice(total,0)+"* \n\n" +
                "Mis datos son: \n" + 
                "Nombre: " + order.user.data.names + "\n" + 
                "Teléfono: " + order.user.data.mobile + "\n" +
                "Email: " + order.user.data.email + "\n" +
                "Dirección: " + order.user.data.address + "\n" 
        
            men = encodeURI(men);
                        
            window.location.href = 'https://wa.me/'+cel_number+'?text='+men;
            
        }

        $(document).ready(function() {        
          

        });        
        
    </script>
@endsection