@extends('front.layout.app')
@section('title', 'Cart Page')
@section('content')
    @php
        $total = '0';

    @endphp
    <section class="inner-banner">
        <img src="{{ asset('front/assets/images/inner-bg.webp') }}" alt="image" class="img-fluid w-100 h-100">
        <div class="container">
            <div class="inner-banner__content">
                <div class="row">
                    <div class="col-lg-6">
                        <h1 class="font-bold">Cart</h1>
                        <p>
                            It is a long established fact that a reader will be distracted by the readable content of a
                            page when looking at its layout.
                        </p>
                        <div class="btn-group">
                            <a href="about.php" class="themeBtn">Learn More</a>
                            <a href="contact.php" class="themeBtn">Contact Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="inner-banner__bottom">
            <div class="container">
                <ul class="bottom__links d-flex align-items-center justify-content-start">
                    <li><a href="{{ route('front.index') }}"><span><i class="fas fa-home"></i></span> Home</a></li>
                    <li><a href="#"><span><i class="fas fa-angle-right"></i></span> Cart</a></li>
                </ul>
            </div>
        </div>
    </section>

    <section class="cart-section padd-y">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    @forelse ($cart_data as $item)
                        @php $total = $total + ($item->qty * $item->price) @endphp
                        <input class="product_id" type="hidden" value="{{ $item->rowId }}">
                        <div class="cart-wrap">
                            <div class="cart-box">
                                <figure class="cart-box-img">
                                    <img src="{{ $item->options->has('image') ? $item->options->image : '' }}"
                                        alt="image" class="img-fluid">
                                </figure>
                                <div class="cart-box-title">
                                    <h4>{{ $item->name }}</h4>
                                    <h5>$ {{ $item->price }}</h5>
                                </div>
                            </div>
                            <div class="cart-quantity ">
                                <h5>Quantity</h5>
                                <div class="numberone d-flex quantity">
                                    <span class="changeQuantity increment-btn"><i class="fas fa-plus"></i></span>
                                    <input class="qty_input" id="quantity" value="{{ $item->qty ?: '' }}" type="text"
                                        readonly>
                                    <span class="changeQuantity decrement-btn"><i class="fas fa-minus"></i></span>
                                </div>
                            </div>
                            <div class="cart-delete-btn delete_cart_data"><i class="fas fa-times"></i></div>
                        </div>
                    @empty
                        <p class="text-light text-center">no data found</p>
                    @endforelse
                    {{-- <div class="cart-wrap">
                        <div class="cart-box">
                            <figure class="cart-box-img">
                                <img src="{{ asset('front/assets/images/cart-img.png') }}" alt="image" class="img-fluid">
                            </figure>
                            <div class="cart-box-title">
                                <h4>T-Shirts</h4>
                                <h5>$ 100</h5>
                            </div>
                        </div>
                        <div class="cart-quantity">
                            <h5>Quantity</h5>
                            <div class="numberone d-flex">
                                <span class="plus"><i class="fas fa-plus"></i></span>
                                <input class="in-num" name="quantity" value="1" type="number" min="1" readonly>
                                <span class="minus"><i class="fas fa-minus"></i></span>
                            </div>
                        </div>
                        <div class="cart-delete-btn"><i class="fas fa-times"></i></div>
                    </div>
                    <div class="cart-wrap">
                        <div class="cart-box">
                            <figure class="cart-box-img">
                                <img src="{{ asset('front/assets/images/cart-img.png') }}" alt="image" class="img-fluid">
                            </figure>
                            <div class="cart-box-title">
                                <h4>T-Shirts</h4>
                                <h5>$ 100</h5>
                            </div>
                        </div>
                        <div class="cart-quantity">
                            <h5>Quantity</h5>
                            <div class="numberone d-flex">
                                <span class="plus"><i class="fas fa-plus"></i></span>
                                <input class="in-num" name="quantity" value="1" type="number" min="1" readonly>
                                <span class="minus"><i class="fas fa-minus"></i></span>
                            </div>
                        </div>
                        <div class="cart-delete-btn"><i class="fas fa-times"></i></div>
                    </div>
                    <div class="cart-wrap">
                        <div class="cart-box">
                            <figure class="cart-box-img">
                                <img src="{{ asset('front/assets/images/cart-img.png') }}" alt="image" class="img-fluid">
                            </figure>
                            <div class="cart-box-title">
                                <h4>T-Shirts</h4>
                                <h5>$ 100</h5>
                            </div>
                        </div>
                        <div class="cart-quantity">
                            <h5>Quantity</h5>
                            <div class="numberone d-flex">
                                <span class="plus"><i class="fas fa-plus"></i></span>
                                <input class="in-num" name="quantity" value="1" type="number" min="1"
                                    readonly>
                                <span class="minus"><i class="fas fa-minus"></i></span>
                            </div>
                        </div>
                        <div class="cart-delete-btn"><i class="fas fa-times"></i></div>
                    </div> --}}
                </div>
            </div>
            <div class="cart-total">
                <h4><span>${{ number_format($total, 2) }}</span> SUBTOTAL</h4>
                <p><em>Shipping & taxes calculated at checkout. We accept Visa, MasterCard, American Express, and Discover
                        cards.</em></p>
                <!-- @if (Auth::check() &&  Auth::user()->hasRole('admin'))
                @else
                    <a href="{{ route('checkout') }}"
                        class="themeBtn">CHECK OUT</a>
                @endif -->
                @else (Auth::check() && !Auth::user()->hasRole('admin'))
                    <a href="{{ route('checkout') }}" class="themeBtn">CHECK OUT</a>
                @endif

            </div>
        </div>
    </section>
@endsection