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

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

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

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

@section('content')
    @if (session('error'))
        <section class="container error-container">
            <span class="error-block">{{ session('error') }}</span>
        </section>
    @endif
    <div class="container wishlist_page">
        <div class="wishlist_page-content">
            <table>
                <thead>
                    <tr>
                        <td></td>
                        <td>@lang('site.product')</td>
                        <td>@lang('site.quantity')</td>
                        <td>@lang('site.unit_price')</td>
                        <td>@lang('site.price')</td>
                        <td>@lang('site.move_to_cart')</td>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($wishlists as $item)
                        @php
                            $itemPrice = $item->product->onl_price ?: $item->product->discount_price ?: $item->product->item_price;
                        @endphp
                        <tr>
                            <td>
                                <span class="cencel delete-wishlist-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>
                            </td>
                            <td>
                                <div class="cart_product">
                                    <div class="image">
                                        @if ($item->product->parent)
                                            <img src="{{ asset($item->product->parent->thumb) }}"
                                                alt="{{ $item->product->parent->title }}">
                                        @else
                                            <img src="{{ asset($item->product->thumb) }}" alt="{{ $item->product->title }}">
                                        @endif
                                    </div>
                                    <h5>
                                        @if ($item->product->parent)
                                            {{ $item->product->parent->title }}
                                        @else
                                            {{ $item->product->title }}
                                        @endif
                                    </h5>
                                </div>
                            </td>
                            <td>
                                <div class="quantity">
                                    <span class="minus" data-id="{{ $item->product->id }}"
                                        data-count="{{ $item->product->size_count ?: 1 }}" data-price="{{ $itemPrice }}">
                                        <svg id="Group_6712" data-name="Group 6712" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 20 20">
                                            <path id="Path_4642" data-name="Path 4642" d="M0,0H20V20H0Z" fill="none" />
                                            <path id="Path_4643" data-name="Path 4643"
                                                d="M10,18a8,8,0,1,1,8-8A8,8,0,0,1,10,18ZM6,9.2v1.6h8V9.2Z"
                                                transform="translate(0.001 0)" />
                                        </svg>
                                    </span>
                                    <input type="text" value="{{ $item->product->size_count ?: 1 }}" id="quantity-wish{{ $item->product->id }}" disabled>
                                    <span class="plus" data-id="{{ $item->product->id }}"
                                        data-count="{{ $item->product->size_count ?: 1 }}" data-price="{{ $itemPrice }}">
                                        <svg id="Group_6714" data-name="Group 6714" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 20 20">
                                            <path id="Path_4644" data-name="Path 4644" d="M0,0H20V20H0Z" fill="none" />
                                            <path id="Path_4645" data-name="Path 4645"
                                                d="M10,18a8,8,0,1,1,8-8A8,8,0,0,1,10,18ZM9.2,9.2H6v1.6H9.2V14h1.6V10.8H14V9.2H10.8V6H9.2Z"
                                                transform="translate(0.001 0)" />
                                        </svg>
                                    </span>
                                </div>
                            </td>
                            <td class="text-right">
                                <div class="prices">
                                    @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>
                            </td>
                            <td class="text-right">
                                <span class="price item-price" id="price-wish{{ $item->product->id }}">
                                    {{ number_format($itemPrice, 2) }}<span class="lari">o</span>
                                </span>
                            </td>
                            <td class="text-center">
                                <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>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <a href="{{ route('delete.wishlist.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-wishlist-item').click(function() {
                let wishlist_id = $(this).data('id');
                let that = this;
                $.ajax({
                    url: "{{ route('delete.wishlist') }}",
                    type: "POST",
                    data: {
                        _token: '{{ csrf_token() }}',
                        wishlist_id: wishlist_id,
                    }
                }).done(function(data) {
                    if (data.status) {
                        $('.wishlist span.count').html(data.count);
                        $(that).closest('tr').remove();
                    }
                });
            });

            $('span.plus').click(function () {
                let price = parseFloat($(this).data('price'));
                let quantity = parseFloat($('#quantity-wish' + $(this).data('id')).val());
                $('#price-wish' + $(this).data('id')).html(((quantity * price).toFixed(2)) + '<span class="lari">o</span>');
            });

            $('span.minus').click(function () {
                let price = parseFloat($(this).data('price'));
                let quantity = parseFloat($('#quantity-wish' + $(this).data('id')).val());
                $('#price-wish' + $(this).data('id')).html(((quantity * price).toFixed(2)) + '<span class="lari">o</span>');
            });
        });
    </script>
@endsection