@extends('vendor.site-bases.website.layouts.master')

@section('title', trans('title.compare'))

@section('page_title', trans('title.compare'))

@section('breadcrumbs')
    {!! Breadcrumbs::render('compare') !!}
@endsection

@section('content')
    @if (session('error'))
        <section class="container error-container">
            <span class="error-block">{{ session('error') }}</span>
        </section>
    @endif
    <div class="container compare_page">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                @foreach ($compares as $item)
                    <div class="swiper-slide delete-item{{ $item->id }}">
                        <div class="product">
                            <div class="image">
                                <img src="{{ asset($item->product->thumb) }}" alt="{{ $item->product->title }}">
                            </div>
                            <h2>
                                <a href="{{ $item->product->parent ? $item->product->parent->url : $item->product->url }}">
                                    @if ($item->product->parent)
                                        {{ $item->product->parent->title }}
                                    @else
                                        {{ $item->product->title }}
                                    @endif
                                </a>
                            </h2>
                            @if ($item->product->onl_price)
                                <span class="price">
                                    {{ $item->product->onl_price }}<span class="lari">o</span>
                                </span>
                                <span class="old_price">
                                    {{ $item->product->item_price }}<span class="lari">o</span>
                                </span>
                            @elseif ($item->product->discount_price)
                                <span class="old_price">
                                    {{ $item->product->item_price }}<span class="lari">o</span>
                                </span>
                                <span class="price">
                                    {{ $item->product->discount_price }}<span class="lari">o</span>
                                </span>
                            @else
                                <span class="price">
                                    {{ $item->product->item_price }}<span class="lari">o</span>
                                </span>
                            @endif
                            <div class="buttons">
                                <span class="cencel delete-compare-item" data-id="{{ $item->id }}">
                                    <svg id="Group_6698" data-name="Group 6698" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path id="Path_4636" data-name="Path 4636" d="M0,0H20V20H0Z" fill="none"/>
                                        <path id="Path_4637" data-name="Path 4637" d="M10.636,9.525l3.889-3.889,1.111,1.111-3.889,3.889,3.889,3.889-1.111,1.111-3.889-3.889L6.747,15.636,5.636,14.525l3.889-3.889L5.636,6.747,6.747,5.636Z" transform="translate(-0.636 -0.636)"/>
                                    </svg>
                                </span>
                                <div class="add_to_cart add-to-cart" data-id="{{ $item->product->id }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
                                        <path
                                            d="M11,2a5.548,5.548,0,0,1,5.4,5.684v.947H20v1.895H18.95l-.681,8.6a.92.92,0,0,1-.9.869H4.628a.92.92,0,0,1-.9-.869l-.682-8.6H2V8.632H5.6V7.684A5.548,5.548,0,0,1,11,2Zm6.143,8.526H4.856l.6,7.579H16.543ZM11.9,12.421v3.789H10.1V12.421Zm-3.6,0v3.789H6.5V12.421Zm7.2,0v3.789H13.7V12.421ZM11,3.895a3.687,3.687,0,0,0-3.6,3.6l0,.189v.947h7.2V7.684A3.71,3.71,0,0,0,11.18,3.9Z"
                                            transform="translate(-2 -2)"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="technical_info">
                                {!! $item->product->compare !!}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="swiper-scrollbar"></div>
          </div>
          <a href="{{ route('delete.compare.all') }}" class="clear-all">
              <svg id="Group_6700" data-name="Group 6700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                  <path id="Path_4638" data-name="Path 4638" d="M0,0H20V20H0Z" fill="none"/>
                  <path id="Path_4639" data-name="Path 4639" d="M14,5.2h4V6.8H16.4V17.2a.8.8,0,0,1-.8.8H4.4a.8.8,0,0,1-.8-.8V6.8H2V5.2H6V2.8A.8.8,0,0,1,6.8,2h6.4a.8.8,0,0,1,.8.8Zm.8,1.6H5.2v9.6h9.6ZM7.6,9.2H9.2V14H7.6Zm3.2,0h1.6V14H10.8ZM7.6,3.6V5.2h4.8V3.6Z" transform="translate(0 0)" fill="#e8000d"/>
              </svg>
              @lang('site.delete_all')
          </a>
    </div>
@endsection

@section('scripts')
    <script>
        $(function() {
            $('.delete-compare-item').click(function () {
                let compare_id = $(this).data('id');
                let that = this;
                $.ajax({
                    url:"{{ route('delete.compare') }}",
                    type:"POST",
                    data: {
                        _token: '{{ csrf_token() }}',
                        compare_id: compare_id,
                    }
                }).done(function(data){
                    if (data.status) {
                        $('.compare_icon span.count').html(data.count);
                        $('.delete-item' + compare_id).remove();
                        $(that).closest('tr').remove();
                        compareSlider();
                    }
                });
            });
        });
    </script>
@endsection