@extends('web.layout.master')

@section('content')
<div class="container ">
    @if(!$cartItems->isEmpty())
    <div class="row">
        <div class="col-sm-12">
            <div class=" mt-4 mb-2 text-black  font-weight-bold">
                <a href="{{ route('home') }}" class="fs-5 text-dark" aria-label="CONTINUE SHOPPING"><u><i class="fa fa-angle-left"></i> CONTINUE SHOPPING</u></a>
            </div>
        </div>
    </div>

    {{-- <div class="row">
        <div class="col-sm-6">
           <div class="card mt-2">
                <div class="card-body bg-light">
                    <div class="d-flex">
                        <div class="fs-2 pe-4">
                            <i class="fas fa-shipping-fast"></i>
                        </div>
                        <div>
                            <h5>Fast Shipping and Returns</h5>
                            <p class="mb-2">365 days to return items for a refund!</p>
                            <a href="{{ route('pages',['slug'=>'shipping-return-policy']) }}" aria-label="Shipping and Return Policy">Shipping and Return Policy</a>
                        </div>
                    </div>

                </div>
           </div>
        </div>
        <div class="col-sm-6">
            <div class="card mt-2">
                <div class="card-body bg-light">
                    <div class="d-flex">
                        <div class="fs-2 pe-4">
                            <i class="fas fa-lock"></i>
                        </div>
                        <div>
                            <h5>Privacy Policy</h5>
                            <p class="mb-2">We don’t rent or sell your personal information to anyone.</p>
                            <a href="{{ route('pages',['slug'=>'privacy-policy']) }}" aria-label="Read our Privacy Policy">Read our Privacy Policy</a>
                        </div>
                    </div>

                </div>
           </div>
         </div>
    </div> --}}
    <div class="row">
        <div class="col-sm-12">
            <div class=" mt-4 mb-2 text-black  font-weight-bold">
                <label class="fs-2">{{ $totalqty }} item in My Cart</label>
            </div>
        </div>
    </div>
    <div class="row ">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex">
                        <div class="w-75">
                            Item
                        </div>
                        <div class="w-50 text-center">
                            Price/Quantity
                        </div>
                    </div>
                </div>
                @php
                $total = 0;
                @endphp
                @foreach($cartItems as $item)
                @php
                $total += ($item->price * $item->quantity);
                @endphp
                <div class="card-body mb-3">

                    <div class="row g-0">

                        <div class="col-3 text-center">
                            <img alt="..." src="{{ $item->attributes->image }}"
                                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-2.jpg&quot;"
                                class="img-fluid rounded-start" alt="..." width="100%" style="max-width: 150px;">
                        </div>
                        <div class="col-9">

                            <div class="row">
                                <div class="col-md-8">
                                    {{--  <p class="card-title">Whirlpool</p>  --}}

                                                                        @if(!empty($item->product_url))
                                        <a href="{{ $item->product_url }}" class="text-decoration-none text-black " aria-label=""><h5 class="">{{ $item->name }}
                                        </h5></a>
                                    @else
                                        <a href="{{ route('part-details-new',[$pname1.'-s',$item->id]) }}" class="text-decoration-none text-black " aria-label=""><h5 class="">{{ $item->name }}
                                        </h5></a>
                                    @endif

                                    <p class="card-text d-none d-lg-block d-md-block">Product Code: {{ $item->id }}</p>
                                </div>

                                <div class="col-md-4">
                                    <span class="fs-5 text-danger">${{ str_replace(',','',number_format($item->price,2)) }}</span>
                                    <p class="text-red text-decoration-line-through">
                                        ${{ str_replace(',','',number_format(($item->attributes->stickprice * $item->quantity),2)) }}</p>

                                    <div class="form-group mb-4">
                                        <div style="width: 125px;">
                                            <div class="input-group">
                                                <span class="input-group-prepend">
                                                    <button aria-labelledby="..." type="button" class="btn btn-outline-secondary btn-number" item-id="{{ preg_replace('/\s+/', '_', $item->id) }}" data-type="minus" data-field="cartqty" style="height: 38px;border-radius: 0px;">
                                                        <span class="fa fa-minus"></span>
                                                    </button>
                                                </span>
                                                <input aria-labelledby="PartsWarehouse" type="text" onchange="cartQtyUpdateViewPage(this)" name="cartqty" id="itemID_{{ preg_replace('/\s+/', '_', $item->id) }}" item-id="{{ preg_replace('/\s+/', '_', $item->id) }}"  data-id="{{ $item->id }}" value="{{ $item->quantity }}" data-price="{{ $item->attributes->perproductprice }}" class="form-control input-number" value="1" min="1" max="100" readonly>
                                                <span class="input-group-append">
                                                    <button aria-labelledby="..." type="button" class="btn btn-outline-secondary btn-number" item-id="{{ preg_replace('/\s+/', '_', $item->id) }}" data-type="plus" data-field="cartqty" style="height: 38px;border-radius: 0px;">
                                                        <span class="fa fa-plus"></span>
                                                    </button>
                                                </span>
                                            </div>
                                        </div>


                                    </div>
                                    <button aria-labelledby="..." class="btn btn-sm btn-danger mt-2 cursor-pointer"
                                        onclick="removeCartView('{{ $item->id }}')">Remove</button>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                    @endforeach


            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-body bg-light">
                    <a href="{{ route('checkout') }}" type="button" class="btn btn-success btn-lg w-100 mb-4" aria-label="Proceed to Checkout">Proceed to Checkout</a>
                    <h5>Cart Summary ({{ $totalqty }} Items)</h5>
                    <div class="d-flex mt-4">
                        <div class="w-50">
                            <b>Subtotal ({{ $totalqty }} Items)</b>
                        </div>
                        <div class="w-50 text-end">
                            <b>${{ number_format($total,2); }}</b>
                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>
@else
    <div class="row">
       <div class="jumbotron d-flex align-items-center" style="height:500px">
            <div class="container text-center">
                <h3>Your cart is empty</h3>
                {{-- <a href="{{ route('home') }}" class="btn border-0 ml-2 mr-2 mb-4" aria-label=""><img src="{{ asset('assets/web') }}/images/keep_shopping.png" class="disabled" alt="..." srcset="" width="150px"></a> --}}
                <a href="{{ route('home') }}" class="border-0 ml-2 mr-2 mb-4 btn btn-block btn-danger btn-sm setWebSiteBtnStyle" aria-label="" width="150px"><i class="fas fa-chevron-circle-left"></i>  Keep Shopping</a>
            </div>
        </div>
    </div>

@endif

</div>
<script>
    $(document).ready(function() {
        // show the alert

            setTimeout(function() {
                $(".alert").alert('close');
            }, 2000);

    });
</script>

@endsection