@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">
                                    <h3 class="section-heading">Realizar Pedido</h3>
                                </div>        
                                @include_layout('pay.form')                                                        
                                
                            </div>
                            <div class="col-12 mt-2">
                                @include_layout('pay.products')
                            </div>
                        </div>
                    </form>
                    
                    <div class="row d-block" >
                        @include_layout('pay.btns')                                              
                    </div>
                </div>
            </div>
        </div>    
    </main>        
@endsection

@section('js')
    <script src="{{ asset('plugins/jquery-validate/jquery.validate.min.js') }}"></script>           
    <script src="{{ asset('plugins/jquery-validate/messages_es.js') }}"></script>        
        
    <script>
        $(document).ready(function() {        

            form_obj = $('#checkout_form').validate({
                rules: {
                    
                },
                messages: {                   
                    
                },
                submitHandler: function(form) {                                        
                    checkoutApp.save();
                }
            });

        });
        
        var checkoutApp = createApp({
            delimiters: ['${', '}'],
            data() {
                return {
                    products:[],
                    form: {   
                        names: '',
                        email: '',
                        mobile: '',
                        address: ''                        
                    },
                    loading: false,
                    loading_html: sw_loading,
                    save_loading:false
                }
            },
            mounted(){                    
                this.products_load();
            },
            computed: {
                total_items() {                
                    let quanty_total = this.products.reduce((acumulador, item) => acumulador + item.quanty, 0);                
                    return quanty_total;
                },
                total() {
                    return this.products.reduce((acumulador, item) => acumulador + (item.price_sale * item.quanty), 0);
                }
            },
            methods: {            
                products_load(){
                    @if(!empty($products))
                        this.products = @json($products);
                    @else
                        this.products = JSON.parse(localStorage.getItem('cart_products')) || [];
                    @endif
                    
                    let $this = this;
                    $this.loading = true;
                    axios.post("{{ url('carrito/list') }}", {
                        products: this.products
                    }).then(response => {                    
                        $this.products = response.data.products;
                        
                        $this.loading = false;                    
                    }).catch(error =>{        
                        Toast.fire({
                            icon: 'error',
                            title: 'Error al cargar los productos del carrito'
                        });
                        $this.loading = false;                       
                        console.log(error);                        
                    });  
                },              
                save(){
                    let $this = this;

                    let products_save = this.products.map(row => { 
                        return {
                            product_id: row.product_id,
                            parent_id: row.parent_id,
                            quanty: row.quanty
                        }
                    });
                    this.save_loading = true;
                    axios.post("{{ url('pagar/save') }}", {
                        products: products_save,
                        user: this.form,
                        _token: '{{ csrf_token() }}'
                    }).then(response => {                    
                        
                        if(response.data.status == 'success' && response.data.id){
                            sw_redirect("{{ url('pagar/completado')}}/"+response.data.id);
                        }

                        $this.save_loading = false;                    
                    }).catch(error =>{   
                        Toast.fire({
                            icon: 'error',
                            title: 'No se ha podido crear el pedido'
                        });     
                        $this.save_loading = false;                       
                        console.log(error);                        
                    });  
                },
                number_to_price(data){
                    return numberToPrice(data);                
                }

            }
        }).mount('#checkout-page');     
    </script>
@endsection