@extends('frontend.layouts.app')
@section('title-suffix')
    {{ __('wishlist.title') }}
@endsection

@push('styles')
    <style>
        .badge-success {
            background-color: #9b2387;
            color: #fff;
            font-size: 0.6rem;
            padding: 3px;
            border-radius: 10px;
        }
    </style>
@endpush

@section('main-content')
    <section class="breadcrumb breadcrumb_bg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="breadcrumb_iner">
                        <div class="breadcrumb_iner_item">
                            <h2>{{ __('wishlist.title') }}</h2>
                            <p>{{ __('wishlist.breadcrumb-1') }}<span>></span>{{ __('wishlist.breadcrumb-2') }}</p>
                        </div>
                    </div>
                </div>
            </div>
    </section>


    <section class="cart_area padding_top">
        <div class="container">
            @if (!$products)
                <div class="text-center mb-4">
                    <p>{{ __('wishlist.empty-1') }}<br>
                        {{ __('wishlist.empty-2') }}
                    </p>

                    <a class="btn_1 checkout-btns mt-10" href="{{ route('welcome') }}">{{ __('wishlist.fill-btn') }}</a>
                </div>
            @else
                <div class="cart_inner mb-4">
                    <div class="card shadow">
                        <div class="card-block pad-all">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">{{ __('wishlist.thead-product') }}</th>
                                            <th scope="col">{{ __('wishlist.thead-price') }}</th>
                                            <th scope="col"></th>
                                            <th scope="col"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if ($products)
                                            @foreach ($products as $key => $product)
                                                <tr>
                                                    <td>
                                                        <div class="media">
                                                            <div class="d-flex img-fluid-container">
                                                                <img src="{{ asset($product['image']) }}"
                                                                    alt="{{ $product['name'] }}" />
                                                            </div>
                                                            <div class="media-body">
                                                                <p><a
                                                                        href="{{ route('single-product.slug', ['product_slug' => $product['slug']]) }}">{{ $product['name'] }}</a>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <h5>{{ $product['price'] }}&nbsp;FCFA&nbsp;@if ($product['discount'])<sup class="badge badge-success">-{{ $product['discount'] }}&nbsp;%</sup>@endif
                                                        </h5>
                                                    </td>
                                                    <td>
                                                        <a href="{{ route('cart.wish.add', ['code' => $key]) }}"
                                                            class="btn add-to-cart-btn text-white">{{ __('wishlist.addtocart-btn') }}</a>
                                                    </td>
                                                    <td>
                                                        {{-- <a href="{{route('cart-delete',$cart->id)}}"><i class="ti-trash remove-icon"></i></a> --}}
                                                        <a href="{{ route('wishlist.remove', ['code' => $key]) }}"
                                                            class="btn cart-delete-btn"><i class="fa-solid fa-trash-can"></i></a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>

                            <div class="row text-center">
                                <div class="col-sm-12 col-md-6">
                                    <a class="btn_1 checkout-btns" href="{{ route('welcome') }}">{{ __('wishlist.continue-btn') }}</a>
                                </div>

                                <div class="col-sm-12 col-md-6">
                                    <a class="btn_1 checkout-btns checkout-btn-special" href="{{ route('user.cart') }}">{{ __('wishlist.cart-btn') }}</a>
                                </div>
                            </div>

                            <div class="row">
                                <div class="wishlist-share">
                                    <div class="col-sm-12 col-md-6">
                                        <div class="wishlist-share-head">
                                            <div class="wishlist-share-title mt-4">
                                                <h5>{{ __('wishlist.share') }}</h5>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-12 col-md-6">
                                        <ul class="share-list list-reset">
                                            <li class="share-item">
                                                <a class="share-link share-whatsapp"
                                                    href="https://api.whatsapp.com/send?text={{ __('wishlist.share-desc').config('app.url').'/partage/wishlist/'.$token.' --'.config('app.name') }}&url={{ config('app.url').'/partage/wishlist/'.$token }}"
                                                    onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
                                                    title="Envoyer par Whatsapp" rel="nofollow"><i class="fa-brands fa-whatsapp"></i></a>
                                            </li>
                                            <li class="share-item">
                                                <a class="share-link share-telegram"
                                                    href="https://t.me/share/url?text={{ __('wishlist.share-desc').' -'.config('app.name') }}&url={{ config('app.url').'/partage/wishlist/'.$token }}"
                                                    onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
                                                    title="Partager sur Telegram" rel="nofollow"><i class="fa-regular fa-paper-plane"></i></a>
                                            </li>
                                            <li class="share-item">
                                                <a class="share-link share-twitter"
                                                    href="https://twitter.com/intent/tweet?text={{ __('wishlist.share-desc').' -'.config('app.name') }}&url={{ config('app.url').'/partage/wishlist/'.$token }}"
                                                    onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
                                                    title="Tweeter Ma Wishlist" rel="nofollow"><i class="fa-brands fa-x-twitter"></i></a>
                                            </li>
                                            <li class="share-item">
                                                <a class="share-link share-facebook"
                                                    href="https://www.facebook.com/sharer/sharer.php?u={{ config('app.url').'/partage/wishlist/'.$token }}"
                                                    onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
                                                    title="Partager sur Facebook" rel="nofollow"><i class="fa-brands fa-facebook-f"></i></a>
                                            </li>
                                            <li class="share-item">
                                                <a class="share-link share-linkedin"
                                                    href="https://www.linkedin.com/shareArticle?mini=true&url={{ config('app.url').'/partage/wishlist/'.$token }}&title={{ config('app.name') }}&summary={{ __('wishlist.share-desc') }}&source={{ config('app.name') }}"
                                                    onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
                                                    title="Poster sur LinkedIn" rel="nofollow"><i class="fa-brands fa-linkedin-in"></i></a>
                                            </li>
                                            <li class="share-item">
                                                <a class="share-link share-clipboard" data-bs-toggle="tooltip"
                                                    data-bs-placement="bottom" title="Copier dans le presse-papier"
                                                    id="copyButton" href="#copyButton"
                                                    data-clipboard-text="{{ config('app.url').'/partage/wishlist/'.$token }}"
                                                    data-tooltip="Copié !" title="Copier dans le presse-papier"
                                                    rel="nofollow"><i class="fa-regular fa-clipboard"></i></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
    </section>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tooltip.js/1.3.3/tooltip.min.js"></script>

    <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

    <script>
        tippy('#myButton', {
            content: 'My tooltip!',
        });
        const clipboard = new ClipboardJS('#copyButton');
        clipboard.on('success', function() {
            // Affichage du tooltip
            const tooltip = new Tooltip('#copyButton');
            tooltip.show();

            tippy('#copyButton', {
                trigger: 'mouseenter',
                onShow(instance) {
                    // v5
                    instance.setProps({
                        trigger: 'click'
                    });
                    // v3-v4
                    // instance.set({trigger: 'click'});
                },
                onHide(instance) {
                    // v5
                    instance.setProps({
                        trigger: 'mouseenter'
                    });
                    // v3-v4
                    // instance.set({trigger: 'mouseenter'});
                }
            });

            // Disparition du tooltip après 2 secondes
            setTimeout(() => tooltip.hide(), 2000);
        });
    </script>
@endpush