@extends('layouts.master')
@section('page')
    <title>Cart | {{setting('site.title')}}</title>
@endsection
@section('content')
    <section class="section page-content">
        <div class="container">
            @if (session()->has('success_message'))
                <div class="alert alert-success">
                    {{ session()->get('success_message') }}
                </div>
            @endif
            @if(count($errors) > 0)
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @if (auth()->user()->cart->count() > 0)
                <p>{{auth()->user()->cart->sum('quantity')}} item(s) in Shopping Cart</p>
                <br>
            @endif
        </div>
        <div class="container">
            @if (auth()->user()->cart->count() > 0)
            <div class="row">
                <div class="col-xl-8">
                    <div class="widget widget-categoty mt-0">
                        <div class="widget-heading">Products</div>
                    </div>
                    @foreach (auth()->user()->cart as $item)
                    <div class="cart-item border p-3 alert rounded-0 alert-dismissible fade show">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="product-img-style text-center mb-3 mb-md-0">
                                    <a href="{{ route('product', ['slug' => $item->product->slug]) }}">
                                        <img class="img-fluid" src="{{ Voyager::image($item->product->image)}}" alt="{{$item->product->name}}">
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="d-flex justify-content-between align-items-baseline">
                                    <a href="{{ route('product', ['slug' => $item->product->slug]) }}">
                                    <h5 class="text-dark font-w-600">{{$item->product->name}}</h5></a>
                                </div>
                                @if ($item->product->on_sale)
                                    <h4 class="font-w-700 text-dark font-secondery mt-10">${{$item->product->on_sale}}</h4>
                                @else
                                    <h4 class="font-w-700 text-dark font-secondery mt-10">${{$item->product->price}}</h4>
                                @endif
                                <div class="mt-20">
                                    <div class="d-inline-block d-flex d-sm-flex align-items-center">
                                        <div class="mt-2 mr-1 mr-sm-3">
                                            <form action="{{route('cart.update')}}" method="POST">
                                                @csrf
                                            <div>
                                                <input type="hidden" name="id" value="{{$item->id}}">
                                                <input type="hidden" name="name" value="{{$item->product->name}}">
                                                @if ($item->product->on_sale)
                                                    <input type="hidden" name="price" value="{{$item->product->on_sale}}">
                                                @else
                                                    <input type="hidden" name="price" value="{{$item->product->price}}">
                                                @endif
                                                <select class="quan" onchange="this.form.submit()" name="quantity">
                                                    @for ($i = 1; $i <= $item->product->quantity ; $i++)
                                                        <option value="{{$i}}" {{ $item->quantity == $i ? 'selected' : '' }}>{{ $i }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                            </form>
                                        </div>
                                        <a style="visibility: hidden" href="#!" class="btn btn-sm btn-primary mr-1 mr-sm-3 mt-2">Update cart</a>
                                        <form action="{{route('cart.destroy', $item->id)}}" method="POST">
                                            {{ csrf_field() }}
                                            {{method_field('DELETE')}}
                                            <button onclick="if(!confirm('Are you sure you want to delete this item?')) {return false}" class="btn btn-sm btn-danger mr-1 mr-sm-3 mt-2" style="background-color: #d33733;">
                                                Remove
                                            </button>
                                        </form>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="col-xl-4 mt-xl-0">
                    <div class="cart-totals ">
                        <h2 class="title">Cart total</h2>
                        <table>
                            <tbody>
                                <tr class="subtotal">
                                    <th>Subtotal</th>
                                    <td><span class="amount">
                                    $ {{auth()->user()->cart->sum('price')}}
                                    </span></td>
                                
                                </tr>
                                <tr class="subtotal">
                                    <th>Shipping</th>
                                    <td><span class="amount">$ 2.00</span></td>
                                </tr>
                                <tr class="total">
                                    <th>Total</th>
                                    <td><strong><span class="amount">$ {{auth()->user()->cart->sum('price') + 2.00}}</span></strong></td>
                                </tr>
                            </tbody>
                        </table>
                        <a href="{{route('checkout.index')}}" class="btn btn-dark btn-outline-hover-dark" style="border-radius: 500px;">Proceed to checkout</a>
                        <a class="btn btn-light btn-hover-dark mr-3 mb-3 w-100" style="border-color: #F8F9FA;
                            background-color: #F8F9FA; margin-top: 10px; color: #333333; border-radius: 500px" href="{{route('shop')}}">
                            Continue Shopping
                        </a>
                    </div>
                </div>
            </div>
            @else
            <div class="row">
                <div class="col-md-12 text-center">
                    <p>Your cart is currently empty.</p>
                </div>
                <div class="col-md-12 text-center mt-20">
                    <div class="widget widget-categoty mt-0">
                        <a href="{{route('shop')}}" class="btn btn-sm btn-primary1" style="border-radius: 500px">Return to Shop</a>
                    </div>
                </div>
            </div>
            @endif
        </div>
        @if (auth()->user()->cart->count() > 0)
        <div class="container">
            <div class="row mt-90">
                <div class="col-md-12">
                    <h3 class="text-dark text-center mb-40">You Might Also Like...</h3>
                </div>
                @foreach ($might_also_like as $item)
                    <div class="col-lg-3 col-md-6">
                        <div class="card border-0 product-item">
                            <a href="{{ route('product', ['slug' => $item->slug]) }}">
                                <img class="card-img-top border-bottom" src="{{ Voyager::image($item->thumbnail('thumb')) }}" alt="{{$item->name}}">
                            </a>
                            <div class="card-body">
                                <div class="show-on-hover">
                                    <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Quick View" class="btn btn-primary1 rounded-pill get-item-details" data-value="{{ $item->id }}">
                                        <span class="icon fa fa-search text-white search-toggle" ></span>
                                    </a>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <small class="font-w-600"> 
                                        <a class="item_title" href="{{ route('product', ['slug' => $item->slug]) }}">{{$item->name}}</a></small>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    @if ($item->on_sale)
                                        <h4 class="font-w-700 font-secondery" style="text-decoration: line-through;color: #aaa;">$ {{$item->price}}</h4>
                                        <h4 class="font-w-700 text-dark font-secondery">$ {{$item->on_sale}}</h4>
                                    @else
                                        @if($item->price > 0)
                                            <h4 class="font-w-700 text-dark font-secondery">$ {{$item->price}}</h4>
                                        @else
                                        <a target="_blank" href="https://wa.me/+9611880553" style="color: #595959;">Ask for price</a>
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        @endif
    </section>
    <div id="item-details"></div>
@endsection

@push('styles')
    <style>
        .product-item:hover .card-img-top{-webkit-filter: none;filter: none;transform: scale(.99);}
        .item_title{color: #595959;}
        .item_title:hover{text-decoration: none;color: #595959;}
        .cart-totals{float: right;width: 100%;padding: 17px 30px;text-align: center;background-color: #F7F7F7;}
        .cart-totals .title{margin-bottom: 25px;font-weight: 600;line-height: 1.2;margin-top: 0;color: #333333;font-size: 20px;}
        .cart-totals table{width: 100%;margin-bottom: 30px;}
        .cart-totals table tbody tr{font-weight: 700;color: #333333;}
        .cart-totals table tbody tr th{font-size: 15px;padding: 15px 10px;text-align: left;}
        .cart-totals table tbody tr.subtotal td{font-size: 14px;}
        .cart-totals table tbody tr td{padding: 15px 10px;text-align: right;}
        .section{padding-top: 55px;}
    </style>
@endpush()
@push('scripts')

@endpush