@extends('user.layouts.master')
@section('title', __('unlimited'))
@section('contents')

    <!-- Page Content  -->
    <div class="content-wrapper">
        <div class="main-content">
            <!-- Start navbar -->
            @include('user.pages.navbar')
            <!-- End /. navbar -->
            <div class="body-content">
                <div class="decoration blur-2"></div>
                <div class="decoration blur-3"></div>
                <div class="container-xxl">
                    <div class="align-items-end row g-4 mb-4" data-aos="fade-down">
                        <div class="col">
                            <!-- start section header -->
                            <div class="section-header">
                                <!-- start subtitle -->
                                <div
                                    class="font-caveat fs-4 fw-bold fw-medium section-header__subtitle text-capitalize text-center text-primary text-xl-start">
                                    Bookmarked</div>
                                <!-- end /. subtitle -->
                                <!-- start title -->
                                <h2
                                    class="fw-semibold mb-0 section-header__title text-capitalize text-center text-xl-start h3">
                                    Bookmarked Listings</h2>
                                <!-- end /. title -->
                                <!-- start description -->
                                <div class="sub-title fs-16 text-center text-xl-start">Discover exciting categories. <span
                                        class="text-primary fw-semibold">Find what you’re looking for.</span></div>
                                <!-- end /. description -->
                            </div>
                            <!-- end /. section header -->
                        </div>
                    </div>
                    @if (session('success'))
                        <div class="col-12">

                            <div class="alert alert-success alert-dismissible fade show w-50 mx-auto" role="alert">
                                <strong>Success!</strong> {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    @endif
                    @if (count($listings) > 0)

                        @foreach ($listings as $listing)
                            <!-- start card list -->
                            <div
                                class="border-0 card card-hover flex-fill overflow-hidden rounded-3 shadow-sm w-100 card-hover-bg mb-3">
                                <a href="{{ url('/listing-details', $listing->vendor_id) }}" class="stretched-link"></a>
                                <div class="card-body p-0">
                                    <div class="g-0 h-100 row">
                                        <div class="col-lg-3 col-md-5 col-sm-4 col-xxl-2 position-relative">
                                            <div
                                                class="card-image-hover dark-overlay h-100 overflow-hidden position-relative">
                                                <!-- start image -->
                                                @php
                                                    $image = explode(
                                                        '/',
                                                        \App\Models\VendorModel::find($listing->vendor_id)->user_image,
                                                    );
                                                @endphp
                                                <img src="{{ asset('storage/vendor_profile_image/' . end($image)) }}"
                                                    alt="" class="h-100 w-100 object-fit-cover">
                                                <!-- end /. image -->
                                            </div>
                                        </div>
                                        <div class="col-lg-9 col-md-7 col-sm-8 col-xxl-10 p-3 p-lg-4 p-md-3 p-sm-4">
                                            <div class="d-flex flex-column h-100">
                                                <div class="d-flex end-0 gap-2 me-3 mt-3 position-absolute top-0 z-1">
                                                    <a href="{{ route('user.fav', ['id' => $listing->vendor_id]) }}"
                                                        class="align-items-center bg-light btn-icon d-flex justify-content-center rounded-circle text-primary"
                                                        data-bs-toggle="tooltip" data-bs-placement="top"
                                                        data-bs-title="Remove">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                            height="16" fill="currentColor" class="bi bi-trash3"
                                                            viewBox="0 0 16 16">
                                                            <path
                                                                d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5" />
                                                        </svg>
                                                    </a>
                                                </div>
                                                <div
                                                    class="align-items-center d-flex flex-wrap gap-1 text-primary  card-start mb-2">
                                                    <!-- start ratings -->
                                                    <i class="fa-solid fa-star"></i>
                                                    <!-- end /. ratings -->
                                                    <!-- start rating counter text -->
                                                    <span class="fw-medium text-primary"><span
                                                            class="fs-6 fw-semibold me-1">(4.5)</span>2,391 reviews</span>
                                                    <!-- end /. rating counter text -->
                                                </div>
                                                <!-- start card title -->
                                                <h4 class="fs-18 fw-semibold mb-0">
                                                    <span>{{ \App\Models\VendorModel::find($listing->vendor_id)->business_name }}</span>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                                        fill="currentColor" class="bi bi-patch-check-fill text-success"
                                                        viewBox="0 0 16 16">
                                                        <path
                                                            d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708z">
                                                        </path>
                                                    </svg>
                                                </h4>
                                                <!-- end /. card title -->
                                                <!-- start card description -->
                                                <p class="mt-1 fs-14 text-muted">
                                                    {{ \App\Models\VendorModel::find($listing->vendor_id)->about_me }}</p>
                                                <!-- end /. card description -->
                                                <!-- start contact content -->
                                                <div class="d-flex flex-wrap gap-3 gap-lg-2 gap-xl-3 mt-auto z-1">
                                                    <a href="tel:{{ \App\Models\VendorModel::find($listing->vendor_id)->phone }}"
                                                        class="d-flex gap-2 align-items-center fs-13 fw-semibold">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="15"
                                                            height="15" fill="#9b9b9b" class="bi bi-telephone"
                                                            viewBox="0 0 16 16">
                                                            <path
                                                                d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z" />
                                                        </svg>
                                                        <span>{{ \App\Models\VendorModel::find($listing->vendor_id)->phone }}</span>
                                                    </a>
                                                </div>
                                                <!-- end contact content -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                        <nav class="justify-content-center mt-4 pagination align-items-center">
                            {{ $listings->links() }}
                        </nav>
                    @else
                        <div
                            class="border-0 card card-hover flex-fill overflow-hidden rounded-3 shadow-sm w-100 card-hover-bg mb-3 text-center py-5">
                            <h4>Your wishlist is currently empty.</h4>
                        </div>
                    @endif
                </div>
            </div>
            <!--/.body content-->
        </div>
    </div>
    <!--/.wrapper-->

@endsection
@push('style')
    <style>
        @media (min-width: 1200px) {
            .search-select-input .form-control {
                padding-left: 175px;
            }
        }

        @media (min-width: 1200px) {
            #listing {
                max-width: 1140px !important;
                margin: auto;
            }
        }

        .pagination {
            --bs-pagination-font-size: 1.2rem !important;
            --bs-pagination-padding-x: 0.9rem !important;
            --bs-pagination-padding-y: 0.9rem !important;
            --bs-pagination-color: #a020f0 !important;
            --bs-pagination-border-radius: 0 !important;
            --bs-pagination-border-color: white !important;
            --bs-pagination-hover-color: #a020f0 !important;
            --bs-pagination-hover-bg: white !important;
            --bs-pagination-hover-border-color: white !important;
            --bs-pagination-focus-color: black !important;
            --bs-pagination-focus-border-radius: 0 !important;
            --bs-pagination-focus-bg: #ffffff !important;
            --bs-pagination-focus-box-shadow: none !important;
            --bs-pagination-active-color: #fff !important;
            --bs-pagination-active-bg: #a020f0 !important;
            --bs-pagination-active-border-color: white !important;
        }
    </style>
@endpush