@php
    $carts = \App\Models\Cart::getCart();
    $total = \App\Models\Cart::getTotal();
@endphp
@section('title', 'CARRITO DE COMPRAS')
<div class="row mb-3">
    <div class="col-xl-8">
        <div class="row align-items-center gy-3 mb-3">
            <div class="col-sm">
                <div>
                    <h5 class="fs-14 mb-0">Su Carrito ({{ count($carts) }} Artículos)</h5>
                </div>
            </div>
            <div class="col-sm-auto">
                <a href="/" class="link-primary text-decoration-underline">Seguir comprando</a>
            </div>
        </div>

        @foreach ($carts as $cart)
            <div class="card product">
                <div class="card-body">
                    <div class="row gy-3">
                        <div class="col-sm-auto">
                            <div class="avatar-lg bg-light rounded p-1">
                                <img src="/media/producto/{{ $cart->associatedModel->image->path }}" alt=""
                                    class="img-fluid d-block">
                            </div>
                        </div>
                        <div class="col-sm">
                            <h5 class="fs-14 text-truncate"><a href="ecommerce-product-detail.html"
                                    class="text-body">{{ $cart->name }}</a></h5>
                            <ul class="list-inline text-muted">
                                <li class="list-inline-item">Estado del producto :
                                    @if ($cart->associatedModel->status != 1)
                                        <span class="badge text-danger">No disponible</span>
                                    @else
                                        <span class="badge text-success">Disponible</span>
                                    @endif
                                </li>
                            </ul>

                            <div class="input-step">
                                <button type="button" wire:click="increment({{ $cart->id }})"
                                    class="minus material-shadow">–</button>
                                <input type="number" class="product-quantity" value="{{ $cart->quantity }}"
                                    min="0" max="100">
                                <button type="button" wire:click="increment({{ $cart->id }})"
                                    wire:click="increment({{ $cart->id }})" class="plus material-shadow">+</button>
                            </div>
                        </div>
                        <div class="col-sm-auto">
                            <div class="text-lg-end">
                                <p class="text-muted mb-1">Precio Divisa:</p>
                                <h5 class="fs-14"><span id="ticket_price"
                                        class="product-price">{{ money($cart->associatedModel->price) }}</span></h5>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- card body -->
                <div class="card-footer">
                    <div class="row align-items-center gy-3">
                        <div class="col-sm">
                            <div class="d-flex flex-wrap my-n1">
                                <div>
                                    <a href="#" class="d-block text-body p-1 px-2"
                                        wire:click='remove({{ $cart->id }})'><i
                                            class="ri-delete-bin-fill text-muted align-bottom me-1"></i> Eliminar</a>
                                </div>

                            </div>
                        </div>
                        <div class="col-sm-auto">
                            <div class="d-flex align-items-center gap-2 text-muted">
                                <div>Total USD:</div>
                                <h5 class="fs-14 mb-0"><span
                                        class="product-line-price">{{ money($cart->quantity * $cart->price) }}</span>
                                </h5>
                            </div>
                            <div class="d-flex align-items-center gap-2 text-muted">
                                <div>Total Bs:</div>
                                <h5 class="fs-14 mb-0"><span
                                        class="product-line-price">{{ moneyBS($cart->quantity * $cart->price * tasa()) }}</span>
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end card footer -->
            </div>
        @endforeach
        <!-- end card -->


        <div class="text-end mb-4">
            <a href="/front/checkout" class="btn btn-success btn-label right ms-auto"><i
                    class="ri-arrow-right-line label-icon align-bottom fs-16 ms-2"></i> Registrar pago</a>
        </div>
    </div>
    <!-- end col -->

    <div class="col-xl-4">
        <div class="sticky-side-div">
            <div class="card">
                <div class="card-header border-bottom-dashed">
                    <div class="col-lg-12">
                        <div class="btn-group">
                            <a href="/front/cart" class="btn btn-warning">Carrito de compras</a>
                            <a href="/front/wishlist" class="btn btn-success">Ver Favoritos</a>
                            <a href="#" wire:click="logout()" class="btn btn-danger"><i
                                    class="mdi mdi-logout me-2"></i> Salir
                                del sistema</a>
                        </div>
                    </div>
                </div>

                <div class="card-body pt-2">
                    <div class="table-responsive">
                        <table class="table table-borderless mb-0">
                            <tbody>
                                <tr>
                                    <td>Sub Total :</td>
                                    <td class="text-end" id="cart-subtotal">{{ money($total) }}</td>
                                </tr>
                                <tr>
                                    <td>Tasa del día:</td>
                                    <td class="text-end" id="cart-subtotal">{{ moneyBS(tasa()) }}</td>
                                </tr>
                                <tr class="table-active">
                                    <th>Total (USD) :</th>
                                    <td class="text-end">
                                        <span class="fw-semibold" id="cart-total">
                                            {{ money($total) }}
                                        </span>
                                    </td>
                                </tr>
                                <tr class="table-active">
                                    <th>Total (Bs) :</th>
                                    <td class="text-end">
                                        <span class="fw-semibold" id="cart-total">
                                            {{ moneyBS($total * tasa()) }}
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- end table-responsive -->
                </div>
            </div>


        </div>