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

@section('title','Carrito de compras')

@section('content')
        
    <main id="MainContent" class="content-for-layout">

        
        <div class="cart-page mt-48" id="cartPageApp">
            
            <div class="container">
                <h3>Carrito de compras</h3>
                <div class="cart-page-wrapper mt-4">
                    <div class="row">
                        <div class="col-12">
                            <table class="cart-table w-100">
                                <thead>
                                  <tr>
                                    <th class="cart-caption heading_18">Producto</th>
                                    <th class="cart-caption heading_18"></th>
                                    <th class="cart-caption text-center heading_18 d-none d-md-table-cell">Cantidad</th>
                                    <th class="cart-caption text-end heading_18">SubTotal</th>
                                  </tr>
                                </thead>                    
                                <tbody>
                                    <template  v-for="(item, index) in products">
                                        @include_layout('cart.item')
                                    </template >
                                </tbody>
                            </table>
                            <template v-if="loading == true">
                                <div v-html="loading_html"></div>
                            </template>

                            <template v-if="products.length === 0 && loading == false">
                                @include_layout('cart._empty')
                            </template>
                            <hr />
                            <div v-if="products.length > 0 " v-cloak >
                                Cantidad de productos: ${ total_items }
                            </div>
                        </div>
                        <div class=" col-12">
                            <div class="cart-total-area" >                                
                                <div class="cart-total-box mt-4">
                                    <div class="subtotal-item subtotal-box">
                                        <h4 class="subtotal-title">Subtotal:</h4>
                                        <p class="subtotal-value" v-cloak >$ ${ number_to_price(total) }</p>
                                    </div>
                                    <!--<div class="subtotal-item shipping-box">
                                        <h4 class="subtotal-title">Shipping:</h4>
                                        <p class="subtotal-value">$10.00</p>
                                    </div> 
                                    <div class="subtotal-item discount-box">
                                        <h4 class="subtotal-title">Discount:</h4>
                                        <p class="subtotal-value">$100.00</p>
                                    </div>
                                    -->
                                    <hr />
                                    <div class="subtotal-item discount-box">
                                        <h4 class="subtotal-title">Total:</h4>
                                        <p class="subtotal-value" v-cloak ><b>$ ${ number_to_price(total) }</b></p>
                                    </div>
                                    <p class="shipping_text">El envío se calculará al finalizar la compra</p>
                                    <div class="d-flex justify-content-center mt-4 ">
                                        <a href="{{ url('pagar')}}" class="btn position-relative btn-primary text-uppercase px-5">
                                            Realizar Pedido
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    
    </main>
        
@endsection

@section('js')
   
    <script>
        const cartPageApp = createApp({
            delimiters: ['${', '}'],
            extends: cartBase,     
            data() {
                
            },        
            methods: {
                
            }
        }).mount('#cartPageApp');
    </script>
@endsection