@extends('backend.layouts.customer-horizontal')
@section('title','Wishlist')
@section('content')
    <div class="container-fluid">
        <div class="row mt-3 ">
            <div class="col-lg-12 ">
                <form>
                    <div class="row g-3">
                        <!--end col-->
                        <div class="col-xxl-2 col-lg-4">
                            <div class="position-relative">
                                <input type="search" name="search" id="search" class="form-control"
                                       placeholder="Search in wishlists">
                            </div>
                        </div>
                        <div class="col-xxl-2 col-lg-4">
                            <div class="position-relative">
                                <select name="payment_method" id="payment_method" class="form-select">
                                    <option value=""
                                            @if(request('payment_method') == '') selected @endif >
                                        Select Payment Method
                                    </option>
                                    <option value="order"
                                            @if(request('payment_method') == 'order') selected @endif >
                                        Order
                                    </option>
                                    <option value="voucher"
                                            @if(request('payment_method') == 'voucher') selected @endif >
                                        Voucher
                                    </option>
                                </select>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-xxl-2 col-lg-2">
                            <button type="submit" class="btn btn-primary "> Filter Wishlist</button>
                        </div>
                    </div>
                    <!--end row-->
                </form>
            </div>

            <!--end col-->
        </div>
        <div class="row mt-3">
            @forelse($wishlists as $wishlist)
                <div class="col-xl-3 col-sm-4">
                    <div class="card text-center border-end border-top border-info">
                        <div class="card-body">
                            <div class="mb-4">
                                <img class="rounded-circle avatar-xl"
                                     src="{{my_asset($wishlist->product->thumbnail_img)}}" alt="">
                            </div>
                            <h5 class="font-size-15 mb-1"><a target="_blank"
                                                             href="{{ route('product',$wishlist->product->slug) }}"
                                                             class="text-dark">{{ $wishlist->product->name }}</a></h5>
                            <p class="text-danger">
                                @if($wishlist->product->discount > 0)
                                    <s class="me-1 text-muted"> {{ home_base_price_new($wishlist->product->unit_price )}}</s>
                                @endif
                                {{ home_discounted_base_price_new($wishlist->product)}}
                            </p>
                            <div>
                                @foreach(collect(explode(',',$wishlist->product->tags ))->take(3) as $tag)
                                    <a href="javascript: void(0);"
                                       class="badge bg-primary font-size-11 m-1">{{ $tag }}</a>
                                @endforeach
                            </div>
                        </div>
                        <div class="card-footer  bg-transparent  border-top">
                            <div class="contact-links d-flex ">
                                <div class="flex-fill">
                                    <a href="#"
                                       class="btn text-danger btn-link btn-sm  waves-effect waves-light align-middle">
                                        <i class="fa fa-times me-2"></i> Remove
                                    </a>
                                </div>
                                <div class="flex-fill">
                                    <a type="button"
                                       class="btn text-success btn-sm btn-link waves-effect waves-light align-middle">
                                        <i class="fa fa-cart-plus me-2"></i> Add To Cart
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
            @endforelse
        </div>
    </div>
@endsection