@extends('frontend.layout.template')
@section('content')
<div class="tt-breadcrumb">
    <div class="container">
        <ul>
            <li><a href="{{route('home')}}">Home</a></li>
            <li>Compare Products</li>
        </ul>
    </div>
</div>

<div id="tt-pageContent">
    <div class="container-indent" id="carttable">
        <div class="container">
            @php
            $compare = session()->get('comparelist');
            @endphp
            @if(!empty($compare))
            <h1 class=" tt-title-subpages noborder" id="count-compare-list">COMPARING <span id="tt-compare-countitem">{{count($compare)}}</span> PRODUCTS</h1>
            <div class="tt-compare-table" id="tt-compare-table">
                @foreach($compare as $item)
                @php
                $product = App\Models\Product::find($item['product_id']);
                @endphp
                <div class="tt-item" id="remove-compare-{{$item['product_id']}}">
                    <div class="tt-image-box">
                        <div class="tt-row-custom">
                            <div class="tt-col">
                                <div class="tt-label-location">
                                    @if($product->number_of_stock>0)
                                    <div class="tt-label-in-stock">In Stock</div>
                                    @else
                                    <div class="tt-label-out-stock">Stock Out</div>
                                    @endif
                                </div>
                            </div>
                            <div class="tt-col">
                                <a data-id="{{$item['product_id']}}" href="javascript:void(0);" class="tt-remove-item js-remove-item"></a>
                            </div>
                        </div>
                        <div class="tt-img">
                            <a href="{{route('product', ['slug' => $item['slug']])}}"><img src="{{ asset('uploads/product/'.$item['photo']) }}" alt=""></a>
                        </div>
                        <h2 class="tt-title"><a href="{{route('product', ['slug' => $item['slug']])}}">{{$item['name']}}</a></h2>
                        <div class="tt-price">
                            <span class="new-price">₹{{$item['discount']}}</span>
                            <span class="old-price">₹{{$item['price']}}</span>
                        </div>
                    </div>
                    <div class="tt-col tt-table-title">DESCRIPTIONS</div>
                    <div class="tt-col js-description">
                        {{strip_tags($product->description)}}
                    </div>
                    <div class="tt-col tt-table-title">Features</div>
                    <div class="tt-col">
                        {{strip_tags($product->key_features)}}
                    </div>
                    <div class="tt-col tt-table-title">Specification</div>
                    <div class="tt-col">
                        {{strip_tags($product->specification)}}
                    </div>

                </div>
                @endforeach

            </div>
            @else
            <div class="tt-empty-wishlist" id="empty-list">
                <h1 class="tt-title">Compare Products</h1>
                <div class="icon-svg">
                    <svg width="40" height="30" viewBox="0 0 40 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 21C19 20.8 19 20.7 18.9 20.5L10.4 4.5C10 3.9 9 3.9 8.6 4.5L0.1 20.5C0 20.7 0 20.8 0 21C0 25.9 4.3 30 9.5 30C14.7 30 19 26 19 21ZM9.5 7.1L16.3 20H2.7L9.5 7.1ZM9.5 28C5.7 28 2.6 25.4 2.1 22H16.9C16.4 25.4 13.3 28 9.5 28Z" fill="#417DFB"></path>
                        <path d="M40 21C40 20.8 40 20.7 39.9 20.5L31.4 4.5C31.1 3.8 30 3.8 29.6 4.5L21.1 20.5C21 20.7 21 20.8 21 21C21 25.9 25.3 30 30.5 30C35.7 30 40 26 40 21ZM30.5 7.1L37.3 20H23.7L30.5 7.1ZM30.5 28C26.7 28 23.6 25.4 23.1 22H37.9C37.4 25.4 34.3 28 30.5 28Z" fill="#417DFB"></path>
                        <path d="M22.8 4H27C27.6 4 28 3.6 28 3C28 2.4 27.6 2 27 2H22.8C22.4 0.8 21.3 0 20 0C18.7 0 17.6 0.8 17.2 2H13C12.4 2 12 2.4 12 3C12 3.6 12.4 4 13 4H17.2C17.6 5.2 18.7 6 20 6C21.3 6 22.4 5.2 22.8 4ZM20 4C19.4 4 19 3.6 19 3C19 2.4 19.4 2 20 2C20.6 2 21 2.4 21 3C21 3.6 20.6 4 20 4Z" fill="#417DFB"></path>
                    </svg>
                </div>
                <p>No products were added to the compare list</p>
                <a href="{{route('all-products')}}" class="btn">CONTINUE SHOPPING</a>
            </div>
            @endif
        </div>
    </div>
</div>
<script>
    $(".js-remove-item").click(function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        $.ajax({
            url: "{{ route('remove.from.comparelist') }}",
            method: "GET",
            data: {
                //   _token: '{{ csrf_token() }}',
                id: id
            },
            success: function(data) {

                $("#remove-compare-" + id).hide("slow");
                $("#tt-compare-countitem").text(data);
                if (data == 0) {
                    $("#carttable").load(" #carttable");
                }

            }
        });
    });
</script>

@endsection