@extends('layout')
@section('content')
    <div class="my-4">
        <div class="container">
            <div class="row">
                <!-- shopping cart section -->
                <div class="col-lg-8 mb-6 mb-md-0">
                    <div class="d-flex flex-column theme-border-radius theme-bg-white theme-box-shadow mb-4">
                        <!-- title section -->
                        <div class="d-flex justify-content-between p-3 border-bottom align-items-center">
                            <span class="fs-4 fw-bold">@translate('cartModal', 'cart_title')
                                <span class="fs-6 theme-text-accent-one">({{ count($currentUser->cartItems) }}
                                    @translate('cartModal', 'cart_quantity'))</span>
                            </span>
                            <span class="fw-bold">@translate('cartModal', 'cart_total_sum')<i
                                    class="bi bi-currency-euro"></i>{{ $totalItemPrice }}</span>
                        </div>
                        <!-- manage address section -->
                        <div class="d-flex flex-column justify-content-between p-3">
                            @if (count($currentUser->cartItems) > 0)
                                <div class="mb-3">
                                    <!-- items list -->
                                    @foreach ($currentUser->cartItems as $cartItem)
                                        <div class="border list-group-item p-3 mb-3"
                                            data-cart-item-id="{{ $cartItem->id }}" u-init="
                                    Livewire.on('itemChanged', (event)=>{
                                        console.log(event[0]);
                                        if(!event[0][1]) location.reload();
                                    });
                                    ">
                                            <!-- row -->
                                            <div class="row align-items-center">
                                                <div class="col-6 col-md-2">
                                                    <img src="{{ @$cartItem->vehiclePart->photo }}" loading="lazy"
                                                        alt="Parts" class="img-fluid">
                                                </div>
                                                <div class="col-6 col-md-6 col-lg-5">
                                                    <a href="javascript:void(0)" class="text-reset">
                                                        <p class="mb-0 font-small">{{ $cartItem->vehiclePart->name }}</p>
                                                    </a>
                                                    {{-- <span><small class="text-muted font-extra-small">Not returnable</small></span> --}}
                                                </div>
                                                <div
                                                    class="col-6 col-md-3 col-lg-3 px-0 d-flex flex-column align-items-center justify-content-center">
                                                    <div
                                                        class="input-group input-spinner d-inline-flex justify-content-center">
                                                        <span class="button-minus btn btn-sm">-</span>
                                                        <input type="text" value="{{ $cartItem->count }}"
                                                            class="quantity-field form-control-sm form-input"
                                                            oninput="document.getElementById('cardWireData').dispatchEvent(new CustomEvent('update-cart', {detail:[{{ $cartItem->id }}, +this.value]}));">
                                                        <span class="button-plus btn btn-sm">+</span>
                                                    </div>
                                                    <div class="mt-2 small lh-1"> <a href="javascript:void(0)"
                                                            class="text-decoration-none text-inherit"
                                                            onclick="document.getElementById('cardWireData').dispatchEvent(new CustomEvent('delete-item', {detail:{{ $cartItem->id }}})); return false;">
                                                            <span class="me-1 align-middle"><i
                                                                    class="bi bi-trash"></i></span>
                                                            <span
                                                                class="text-muted font-extra-small">@translate('cartModal', 'cart_remove')</span></a>
                                                    </div>
                                                </div>
                                                <div class="col-6 col-md-2">
                                                    <span style="display: flex;justify-content: center"><i
                                                            class="bi bi-currency-euro"></i>{{ number_format($cartItem->vehiclePart->price + ceil($cartItem->vehiclePart->price * 21) / 100, 2) }}</span>
                                                    {{-- <div class="text-decoration-line-through text-muted small">$26.00</div> --}}
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="mt-4">
                                    <div class="row">
                                        <div class="col-12 col-lg-4">
                                        </div>
                                        <div class="col-12 col-lg-8">
                                            <div class="d-flex justify-content-end custom-button">
                                                <form action="@localeUrl('checkout.view')" method="get">
                                                    @foreach ($currentUser->cartItems as $i => $cartItem)
                                                        <input type="hidden" name="cartItem[{{ $i }}][id]"
                                                            value="{{ $cartItem->id }}">
                                                        <input type="hidden" name="cartItem[{{ $i }}][count]"
                                                            value="{{ $cartItem->count }}">
                                                    @endforeach
                                                    <button type="submit"
                                                        class="theme-border custom-btn-primary font-small button-effect px-4">
                                                        @translate('cartModal', 'cart_proceed')
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <p style="text-align: center; margin: 0;">@translate('cartModal', 'cart_empty')</p>
                            @endif
                        </div>
                    </div>
                </div>
                <!-- cart summary section -->
                <div class="col-lg-4">
                    <div class="d-flex flex-column theme-border-radius theme-bg-white theme-box-shadow mb-4">
                        <!-- title section -->
                        <div class="d-flex justify-content-between p-3 border-bottom">
                            <span class="fs-4 fw-bold">@translate('cartModal', 'cart_summary_title')</span>
                        </div>
                        <!-- price details -->
                        <div class="p-3">
                            @foreach ($charges as $charge)
                                <div class="border-bottom pt-2">
                                    <div class="row">
                                        <div class="col-12 col-md-6 col-lg-8 font-small">
                                            <p class="mb-2 @if ($charge[1] < 0) text-success @endif">
                                                {{ $charge[0] }}</p>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-4 font-small">
                                            <div class="d-flex justify-content-end align-items-end">
                                                <div
                                                    class="product-price mb-2 @if ($charge[1] < 0) text-success @endif">
                                                    @if ($charge[1] < 0)
                                                        -
                                                    @endif
                                                    <i class="bi bi-currency-euro"></i><span
                                                        class="ms-1">{{ number_format(abs($charge[1]), 2) }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div class="pt-2">
                                <div class="row">
                                    <div class="col-12 col-md-6 col-lg-8">
                                        <p class="mb-2 fw-bold">@translate('cartModal', 'cart_total_sum')</p>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4">
                                        <div class="d-flex justify-content-end align-items-end">
                                            <div class="product-price mb-2 fw-bold">
                                                <i class="bi bi-currency-euro"></i><span
                                                    class="ms-1">{{ number_format($finalPrice, 2) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection