mirror of
https://github.com/openclassify/openclassify.git
synced 2026-04-14 11:12:09 -05:00
817 lines
38 KiB
PHP
817 lines
38 KiB
PHP
@extends('app::layouts.app')
|
|
|
|
@section('content')
|
|
@php
|
|
$title = trim((string) ($listing->title ?? ''));
|
|
$displayTitle = $title !== '' ? $title : 'Untitled listing';
|
|
|
|
$priceLabel = 'Price on request';
|
|
if (! is_null($listing->price)) {
|
|
$priceValue = (float) $listing->price;
|
|
$formattedPrice = number_format($priceValue, 2, '.', ',');
|
|
$formattedPrice = rtrim(rtrim($formattedPrice, '0'), '.');
|
|
$priceLabel = $priceValue > 0
|
|
? $formattedPrice.' '.($listing->currency ?: 'TRY')
|
|
: 'Free';
|
|
}
|
|
|
|
$locationLabel = collect([$listing->city, $listing->country])
|
|
->filter(fn ($value) => is_string($value) && trim($value) !== '')
|
|
->implode(' / ');
|
|
|
|
$publishedAt = $listing->created_at?->format('M j, Y') ?? 'Recently';
|
|
$postedAgo = $listing->created_at?->diffForHumans() ?? 'Listed recently';
|
|
$galleryImages = collect($gallery ?? [])
|
|
->filter(fn ($value) => is_string($value) && trim($value) !== '')
|
|
->values()
|
|
->all();
|
|
$initialGalleryImage = $galleryImages[0] ?? null;
|
|
$galleryCount = count($galleryImages);
|
|
|
|
$description = trim((string) ($listing->description ?? ''));
|
|
$displayDescription = $description !== '' ? $description : 'No description added for this listing.';
|
|
|
|
$sellerName = trim((string) ($listing->user?->name ?? 'Marketplace Seller'));
|
|
$sellerInitial = mb_strtoupper(mb_substr($sellerName, 0, 1));
|
|
$sellerMemberText = $listing->user?->created_at
|
|
? 'Member since '.$listing->user->created_at->format('M Y')
|
|
: 'New seller';
|
|
|
|
$referenceCode = '#'.str_pad((string) $listing->getKey(), 8, '0', STR_PAD_LEFT);
|
|
$canContactSeller = $listing->user && (! auth()->check() || (int) auth()->id() !== (int) $listing->user_id);
|
|
$isOwnListing = auth()->check() && (int) auth()->id() === (int) $listing->user_id;
|
|
$canStartConversation = auth()->check() && $listing->user && ! $isOwnListing;
|
|
$loginRedirectRoute = route('login', ['redirect' => request()->fullUrl()]);
|
|
$chatConversation = $detailConversation ?? null;
|
|
$chatMessages = $chatConversation?->messages ?? collect();
|
|
$chatSendUrl = $chatConversation ? route('conversations.messages.send', $chatConversation) : '';
|
|
$chatStartUrl = route('conversations.start', $listing);
|
|
|
|
$primaryContactHref = null;
|
|
$primaryContactLabel = 'Call';
|
|
if (filled($listing->contact_phone)) {
|
|
$primaryContactHref = 'tel:'.preg_replace('/\s+/', '', (string) $listing->contact_phone);
|
|
$primaryContactLabel = 'Call';
|
|
} elseif (filled($listing->contact_email)) {
|
|
$primaryContactHref = 'mailto:'.$listing->contact_email;
|
|
$primaryContactLabel = 'Email';
|
|
}
|
|
|
|
$reportEmail = config('mail.from.address', 'support@example.com');
|
|
$reportUrl = 'mailto:'.$reportEmail.'?subject='.rawurlencode('Report listing '.$referenceCode);
|
|
$shareUrl = route('listings.show', $listing);
|
|
|
|
$specRows = collect([
|
|
['label' => 'Price', 'value' => $priceLabel],
|
|
['label' => 'Published', 'value' => $publishedAt],
|
|
['label' => 'Listing ID', 'value' => $referenceCode],
|
|
['label' => 'Category', 'value' => $listing->category?->name ?? 'General'],
|
|
['label' => 'Location', 'value' => $locationLabel !== '' ? str_replace(' / ', ' / ', $locationLabel) : 'Not specified'],
|
|
])
|
|
->merge(
|
|
collect($presentableCustomFields ?? [])->map(fn (array $field) => [
|
|
'label' => trim((string) ($field['label'] ?? '')),
|
|
'value' => trim((string) ($field['value'] ?? '')),
|
|
])
|
|
)
|
|
->filter(fn (array $item) => $item['label'] !== '' && $item['value'] !== '')
|
|
->unique(fn (array $item) => mb_strtolower($item['label']))
|
|
->values();
|
|
@endphp
|
|
|
|
<div class="lt-wrap">
|
|
<nav class="lt-breadcrumb" aria-label="Breadcrumb">
|
|
<a href="{{ route('home') }}">Home</a>
|
|
@foreach(($breadcrumbCategories ?? collect()) as $crumb)
|
|
<span>/</span>
|
|
<a href="{{ route('listings.index', ['category' => $crumb->id]) }}">{{ $crumb->name }}</a>
|
|
@endforeach
|
|
<span>/</span>
|
|
<span>{{ $displayTitle }}</span>
|
|
</nav>
|
|
|
|
<section class="lt-card lt-hero-card">
|
|
<div class="lt-hero-main">
|
|
<div class="lt-hero-copy">
|
|
<p class="lt-overline">{{ $listing->category?->name ?? 'Marketplace listing' }}</p>
|
|
<h1 class="lt-hero-title">{{ $displayTitle }}</h1>
|
|
<div class="lt-hero-meta">
|
|
<span>{{ $referenceCode }}</span>
|
|
<span>{{ $sellerName }}</span>
|
|
<span>{{ $postedAgo }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lt-hero-side">
|
|
<div class="lt-hero-price">{{ $priceLabel }}</div>
|
|
@if($locationLabel !== '')
|
|
<div class="lt-address-chip">{{ $locationLabel }}</div>
|
|
@endif
|
|
|
|
<div class="lt-hero-tools">
|
|
<button
|
|
type="button"
|
|
class="lt-link-action"
|
|
data-listing-share
|
|
data-share-url="{{ $shareUrl }}"
|
|
data-share-title="{{ $displayTitle }}"
|
|
>
|
|
Share
|
|
</button>
|
|
|
|
@auth
|
|
<form method="POST" action="{{ route('favorites.listings.toggle', $listing) }}" class="lt-inline-form">
|
|
@csrf
|
|
<button type="submit" class="lt-link-action">
|
|
{{ $isListingFavorited ? 'Saved' : 'Save listing' }}
|
|
</button>
|
|
</form>
|
|
@else
|
|
<a href="{{ route('login') }}" class="lt-link-action">Save listing</a>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="lt-grid">
|
|
<div class="lt-main-column">
|
|
<div class="lt-media-spec-grid">
|
|
<section class="lt-card lt-media-card" data-gallery>
|
|
<div class="lt-gallery-main">
|
|
<div class="lt-gallery-top">
|
|
<div class="lt-gallery-spacer"></div>
|
|
|
|
<div class="lt-gallery-utility">
|
|
<button
|
|
type="button"
|
|
class="lt-icon-btn"
|
|
data-listing-share
|
|
data-share-url="{{ $shareUrl }}"
|
|
data-share-title="{{ $displayTitle }}"
|
|
aria-label="Share listing"
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
|
|
<path d="M15 8a3 3 0 1 0-2.83-4H12a3 3 0 0 0 .17 1L8.91 6.94a3 3 0 0 0-1.91-.69 3 3 0 1 0 1.91 5.31l3.27 1.94A3 3 0 0 0 12 15a3 3 0 1 0 2.82 4H15a3 3 0 0 0-.17-1l-3.26-1.94a3 3 0 0 0 0-3.12L14.83 10A3 3 0 0 0 15 10h0a3 3 0 0 0 0-2Z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
@auth
|
|
<form method="POST" action="{{ route('favorites.listings.toggle', $listing) }}">
|
|
@csrf
|
|
<button
|
|
type="submit"
|
|
class="lt-icon-btn {{ $isListingFavorited ? 'is-active' : '' }}"
|
|
aria-label="{{ $isListingFavorited ? 'Remove from saved listings' : 'Save listing' }}"
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
|
|
<path d="M12 21l-1.45-1.32C5.4 15.03 2 12.01 2 8.31 2 5.3 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08A6.04 6.04 0 0116.5 3C19.58 3 22 5.3 22 8.31c0 3.7-3.4 6.72-8.55 11.39L12 21z"/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
@else
|
|
<a href="{{ route('login') }}" class="lt-icon-btn" aria-label="Sign in to save this listing">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
|
|
<path d="M12 21l-1.45-1.32C5.4 15.03 2 12.01 2 8.31 2 5.3 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08A6.04 6.04 0 0116.5 3C19.58 3 22 5.3 22 8.31c0 3.7-3.4 6.72-8.55 11.39L12 21z"/>
|
|
</svg>
|
|
</a>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
|
|
@if($initialGalleryImage)
|
|
<img src="{{ $initialGalleryImage }}" alt="{{ $displayTitle }}" data-gallery-main>
|
|
@else
|
|
<div class="lt-gallery-main-empty">No photos uploaded yet.</div>
|
|
@endif
|
|
|
|
@if($galleryCount > 1)
|
|
<button type="button" class="lt-gallery-nav" data-gallery-prev aria-label="Previous photo">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="m15 18-6-6 6-6"/>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="lt-gallery-nav" data-gallery-next aria-label="Next photo">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="m9 18 6-6-6-6"/>
|
|
</svg>
|
|
</button>
|
|
@endif
|
|
|
|
@if($galleryCount > 0)
|
|
<div class="lt-gallery-count">
|
|
<span data-gallery-current>1</span> / <span>{{ $galleryCount }}</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if($galleryImages !== [])
|
|
<div class="lt-thumbs" data-gallery-thumbs>
|
|
@foreach($galleryImages as $index => $image)
|
|
<button
|
|
type="button"
|
|
class="lt-thumb {{ $index === 0 ? 'is-active' : '' }}"
|
|
data-gallery-thumb
|
|
data-gallery-index="{{ $index }}"
|
|
data-gallery-src="{{ $image }}"
|
|
aria-label="Open photo {{ $index + 1 }}"
|
|
>
|
|
<img src="{{ $image }}" alt="{{ $displayTitle }} {{ $index + 1 }}">
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</section>
|
|
|
|
<div class="lt-info-column">
|
|
<section class="lt-card lt-spec-card lt-desktop-only">
|
|
<div class="lt-card-head">
|
|
<div>
|
|
<h2 class="lt-section-title">Listing details</h2>
|
|
<p class="lt-section-copy">Everything important, laid out cleanly.</p>
|
|
</div>
|
|
</div>
|
|
|
|
@if($locationLabel !== '')
|
|
<div class="lt-address-chip lt-address-chip-soft">{{ $locationLabel }}</div>
|
|
@endif
|
|
|
|
<div class="lt-spec-table">
|
|
@foreach($specRows as $row)
|
|
<div class="lt-spec-row">
|
|
<span>{{ $row['label'] }}</span>
|
|
<strong>{{ $row['value'] }}</strong>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<a href="{{ $reportUrl }}" class="lt-inline-link">Report this listing</a>
|
|
</section>
|
|
|
|
<section class="lt-card lt-description-card lt-desktop-only">
|
|
<div class="lt-card-head">
|
|
<div>
|
|
<h2 class="lt-section-title">Description</h2>
|
|
<p class="lt-section-copy">Seller notes, condition, and extra context.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lt-description">
|
|
{!! nl2br(e($displayDescription)) !!}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="lt-card lt-mobile-seller-card lt-mobile-only">
|
|
<div class="lt-mobile-seller-row">
|
|
<div class="lt-avatar">{{ $sellerInitial !== '' ? $sellerInitial : 'S' }}</div>
|
|
<div>
|
|
<p class="lt-mobile-seller-name">{{ $sellerName }}</p>
|
|
<p class="lt-mobile-seller-meta">{{ $sellerMemberText }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="lt-card lt-mobile-tabs lt-mobile-only" data-detail-tabs>
|
|
<div class="lt-tab-list" role="tablist" aria-label="Listing sections">
|
|
<button type="button" class="lt-tab-button is-active" data-detail-tab-button data-tab="details" role="tab" aria-selected="true">
|
|
Listing details
|
|
</button>
|
|
<button type="button" class="lt-tab-button" data-detail-tab-button data-tab="description" role="tab" aria-selected="false">
|
|
Description
|
|
</button>
|
|
</div>
|
|
|
|
<div class="lt-tab-panel is-active" data-detail-tab-panel data-panel="details" role="tabpanel">
|
|
@if($locationLabel !== '')
|
|
<div class="lt-address-chip lt-address-chip-soft">{{ $locationLabel }}</div>
|
|
@endif
|
|
|
|
<div class="lt-spec-table">
|
|
@foreach($specRows as $row)
|
|
<div class="lt-spec-row">
|
|
<span>{{ $row['label'] }}</span>
|
|
<strong>{{ $row['value'] }}</strong>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lt-tab-panel" data-detail-tab-panel data-panel="description" role="tabpanel">
|
|
<div class="lt-description">
|
|
{!! nl2br(e($displayDescription)) !!}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@if(($listingVideos ?? collect())->isNotEmpty())
|
|
<section class="lt-card lt-video-section">
|
|
<div class="lt-card-head">
|
|
<div>
|
|
<h2 class="lt-section-title">Videos</h2>
|
|
<p class="lt-section-copy">Additional media attached to the listing.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lt-video-grid">
|
|
@foreach($listingVideos as $video)
|
|
<div class="lt-video-card">
|
|
<video class="lt-video-player" controls preload="metadata" src="{{ $video->playableUrl() }}"></video>
|
|
<p class="lt-video-title">{{ $video->titleLabel() }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif
|
|
</div>
|
|
|
|
<aside class="lt-side-rail">
|
|
<section class="lt-card lt-side-card">
|
|
<div class="lt-seller-head">
|
|
<div class="lt-avatar">{{ $sellerInitial !== '' ? $sellerInitial : 'S' }}</div>
|
|
<div>
|
|
<p class="lt-seller-kicker">Seller</p>
|
|
<p class="lt-seller-name">{{ $sellerName }}</p>
|
|
<div class="lt-seller-meta">{{ $sellerMemberText }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if(filled($listing->contact_phone) || filled($listing->contact_email))
|
|
<div class="lt-contact-panel">
|
|
@if(filled($listing->contact_phone))
|
|
<a href="tel:{{ preg_replace('/\s+/', '', (string) $listing->contact_phone) }}" class="lt-contact-primary">
|
|
{{ $listing->contact_phone }}
|
|
</a>
|
|
@endif
|
|
|
|
@if(filled($listing->contact_email))
|
|
<a href="mailto:{{ $listing->contact_email }}" class="lt-contact-secondary">
|
|
{{ $listing->contact_email }}
|
|
</a>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<div class="lt-actions">
|
|
<div class="lt-row-2">
|
|
@if(! $listing->user)
|
|
<button type="button" class="lt-btn" disabled>Unavailable</button>
|
|
@elseif($canStartConversation)
|
|
<button type="button" class="lt-btn" data-inline-chat-open>Message</button>
|
|
@elseif($isOwnListing)
|
|
<button type="button" class="lt-btn" disabled>Your listing</button>
|
|
@else
|
|
<a href="{{ $loginRedirectRoute }}" class="lt-btn">Message</a>
|
|
@endif
|
|
|
|
@if($primaryContactHref)
|
|
<a href="{{ $primaryContactHref }}" class="lt-btn lt-btn-outline">{{ $primaryContactLabel }}</a>
|
|
@else
|
|
<button type="button" class="lt-btn lt-btn-outline" disabled>No contact</button>
|
|
@endif
|
|
</div>
|
|
|
|
@if($listing->user && ! $isOwnListing)
|
|
@auth
|
|
<form method="POST" action="{{ route('favorites.sellers.toggle', $listing->user) }}" class="lt-action-form">
|
|
@csrf
|
|
<input type="hidden" name="redirect_to" value="{{ request()->fullUrl() }}">
|
|
<button type="submit" class="lt-btn lt-btn-outline">
|
|
{{ $isSellerFavorited ? 'Saved seller' : 'Save seller' }}
|
|
</button>
|
|
</form>
|
|
@else
|
|
<a href="{{ $loginRedirectRoute }}" class="lt-btn lt-btn-outline">Save seller</a>
|
|
@endauth
|
|
@elseif($isOwnListing)
|
|
<button type="button" class="lt-btn lt-btn-outline" disabled>Your account</button>
|
|
@endif
|
|
</div>
|
|
</section>
|
|
|
|
<section class="lt-card lt-safety-card">
|
|
<h3 class="lt-safety-title">Safety tips</h3>
|
|
<p class="lt-safety-copy">Inspect the item in person, avoid sending money in advance, and confirm the seller identity before closing the deal.</p>
|
|
<a href="{{ $reportUrl }}" class="lt-inline-link">Report this listing</a>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
|
|
<div class="lt-mobile-actions">
|
|
<div class="lt-mobile-actions-shell">
|
|
<div class="lt-mobile-actions-row">
|
|
@if(! $listing->user)
|
|
<button type="button" class="lt-btn" disabled>Unavailable</button>
|
|
@elseif($canStartConversation)
|
|
<button type="button" class="lt-btn" data-inline-chat-open>Message</button>
|
|
@elseif($isOwnListing)
|
|
<button type="button" class="lt-btn" disabled>Your listing</button>
|
|
@else
|
|
<a href="{{ $loginRedirectRoute }}" class="lt-btn">Message</a>
|
|
@endif
|
|
|
|
@if($primaryContactHref)
|
|
<a href="{{ $primaryContactHref }}" class="lt-btn lt-btn-outline">{{ $primaryContactLabel }}</a>
|
|
@else
|
|
<button type="button" class="lt-btn lt-btn-outline" disabled>No contact</button>
|
|
@endif
|
|
</div>
|
|
|
|
@if($listing->user && ! $isOwnListing)
|
|
@auth
|
|
<form method="POST" action="{{ route('favorites.sellers.toggle', $listing->user) }}" class="lt-action-form">
|
|
@csrf
|
|
<input type="hidden" name="redirect_to" value="{{ request()->fullUrl() }}">
|
|
<button type="submit" class="lt-btn lt-btn-outline">
|
|
{{ $isSellerFavorited ? 'Saved seller' : 'Save seller' }}
|
|
</button>
|
|
</form>
|
|
@else
|
|
<a href="{{ $loginRedirectRoute }}" class="lt-btn lt-btn-outline">Save seller</a>
|
|
@endauth
|
|
@elseif($isOwnListing)
|
|
<button type="button" class="lt-btn lt-btn-outline" disabled>Your account</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
@if($canStartConversation)
|
|
<div class="lt-chat-widget" data-inline-chat data-start-url="{{ $chatStartUrl }}" data-send-url="{{ $chatSendUrl }}">
|
|
<section class="lt-chat-panel" data-inline-chat-panel hidden>
|
|
<div class="lt-chat-head">
|
|
<div>
|
|
<p class="lt-chat-kicker">Chat</p>
|
|
<p class="lt-chat-name">{{ $sellerName }}</p>
|
|
<p class="lt-chat-meta">{{ $displayTitle }}</p>
|
|
</div>
|
|
<button type="button" class="lt-chat-close" data-inline-chat-close aria-label="Close chat">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
|
|
<path d="M6 6 18 18M18 6 6 18"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="lt-chat-thread" data-inline-chat-thread>
|
|
@foreach($chatMessages as $message)
|
|
<div class="lt-chat-item {{ (int) $message->sender_id === (int) auth()->id() ? 'is-mine' : '' }}">
|
|
<div class="lt-chat-bubble">{{ $message->body }}</div>
|
|
<span class="lt-chat-time">{{ $message->created_at?->format('H:i') }}</span>
|
|
</div>
|
|
@endforeach
|
|
|
|
<div class="lt-chat-empty {{ $chatMessages->isNotEmpty() ? 'is-hidden' : '' }}" data-inline-chat-empty>
|
|
Send the first message without leaving this page.
|
|
</div>
|
|
</div>
|
|
|
|
<form class="lt-chat-form" data-inline-chat-form>
|
|
<input
|
|
type="text"
|
|
name="message"
|
|
class="lt-chat-input"
|
|
data-inline-chat-input
|
|
maxlength="2000"
|
|
placeholder="Write a message"
|
|
autocomplete="off"
|
|
required
|
|
>
|
|
<button type="submit" class="lt-chat-send" data-inline-chat-submit aria-label="Send message">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M5 12h13m0 0-5-5m5 5-5 5"/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
|
|
<p class="lt-chat-error is-hidden" data-inline-chat-error></p>
|
|
</section>
|
|
</div>
|
|
@endif
|
|
|
|
@if(($relatedListings ?? collect())->isNotEmpty() || ($themePillCategories ?? collect())->isNotEmpty())
|
|
<section class="lt-related">
|
|
@if(($relatedListings ?? collect())->isNotEmpty())
|
|
<div class="lt-related-head">
|
|
<div>
|
|
<h3 class="lt-related-title">Similar listings</h3>
|
|
<p class="lt-related-copy">More listings with a similar category and visual profile.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lt-scroll-wrap" data-theme-scroll>
|
|
<button type="button" class="lt-scroll-btn prev" data-theme-scroll-prev aria-label="Previous listings">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="m15 18-6-6 6-6"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="lt-scroll-track" data-theme-scroll-track>
|
|
@foreach(($relatedListings ?? collect()) as $related)
|
|
@php
|
|
$relatedImage = $related->getFirstMediaUrl('listing-images');
|
|
if (! $relatedImage && is_array($related->images ?? null)) {
|
|
$relatedImage = collect($related->images)->first();
|
|
}
|
|
|
|
$relatedPrice = 'Price on request';
|
|
if (! is_null($related->price)) {
|
|
$relatedPriceValue = (float) $related->price;
|
|
$relatedFormattedPrice = number_format($relatedPriceValue, 2, '.', ',');
|
|
$relatedFormattedPrice = rtrim(rtrim($relatedFormattedPrice, '0'), '.');
|
|
$relatedPrice = $relatedPriceValue > 0
|
|
? $relatedFormattedPrice.' '.($related->currency ?: 'TRY')
|
|
: 'Free';
|
|
}
|
|
@endphp
|
|
|
|
<a href="{{ route('listings.show', $related) }}" class="lt-rel-card">
|
|
<div class="lt-rel-photo">
|
|
@if($relatedImage)
|
|
<img src="{{ $relatedImage }}" alt="{{ $related->title }}">
|
|
@endif
|
|
</div>
|
|
<div class="lt-rel-body">
|
|
<div class="lt-rel-price">{{ $relatedPrice }}</div>
|
|
<div class="lt-rel-title">{{ $related->title }}</div>
|
|
<div class="lt-rel-city">{{ trim(collect([$related->city, $related->country])->filter()->implode(', ')) }}</div>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
|
|
<button type="button" class="lt-scroll-btn next" data-theme-scroll-next aria-label="Next listings">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="m9 18 6-6-6-6"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
|
|
@if(($themePillCategories ?? collect())->isNotEmpty())
|
|
<div class="lt-pill-wrap">
|
|
<h4 class="lt-pill-title">Explore categories</h4>
|
|
<div class="lt-pills">
|
|
@foreach(($themePillCategories ?? collect()) as $pillCategory)
|
|
<a href="{{ route('listings.index', ['category' => $pillCategory->id]) }}" class="lt-pill">{{ $pillCategory->name }}</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</section>
|
|
@endif
|
|
</div>
|
|
|
|
<script>
|
|
(() => {
|
|
document.querySelectorAll('[data-gallery]').forEach((galleryRoot) => {
|
|
const mainImage = galleryRoot.querySelector('[data-gallery-main]');
|
|
const thumbButtons = Array.from(galleryRoot.querySelectorAll('[data-gallery-thumb]'));
|
|
const prevButton = galleryRoot.querySelector('[data-gallery-prev]');
|
|
const nextButton = galleryRoot.querySelector('[data-gallery-next]');
|
|
const currentCounter = galleryRoot.querySelector('[data-gallery-current]');
|
|
|
|
if (!mainImage || thumbButtons.length === 0) {
|
|
return;
|
|
}
|
|
|
|
let activeIndex = thumbButtons.findIndex((button) => button.classList.contains('is-active'));
|
|
if (activeIndex < 0) {
|
|
activeIndex = 0;
|
|
thumbButtons[0].classList.add('is-active');
|
|
}
|
|
|
|
const activate = (index) => {
|
|
if (index < 0 || index >= thumbButtons.length) {
|
|
return;
|
|
}
|
|
|
|
activeIndex = index;
|
|
const src = thumbButtons[index].dataset.gallerySrc;
|
|
if (src) {
|
|
mainImage.src = src;
|
|
}
|
|
|
|
if (currentCounter) {
|
|
currentCounter.textContent = String(activeIndex + 1);
|
|
}
|
|
|
|
thumbButtons.forEach((button, buttonIndex) => {
|
|
button.classList.toggle('is-active', buttonIndex === activeIndex);
|
|
});
|
|
};
|
|
|
|
thumbButtons.forEach((button, index) => {
|
|
button.addEventListener('click', () => activate(index));
|
|
});
|
|
|
|
prevButton?.addEventListener('click', () => {
|
|
activate((activeIndex - 1 + thumbButtons.length) % thumbButtons.length);
|
|
});
|
|
|
|
nextButton?.addEventListener('click', () => {
|
|
activate((activeIndex + 1) % thumbButtons.length);
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('[data-theme-scroll]').forEach((scrollRoot) => {
|
|
const track = scrollRoot.querySelector('[data-theme-scroll-track]');
|
|
const prev = scrollRoot.querySelector('[data-theme-scroll-prev]');
|
|
const next = scrollRoot.querySelector('[data-theme-scroll-next]');
|
|
|
|
if (!track) {
|
|
return;
|
|
}
|
|
|
|
const amount = () => Math.max(280, Math.floor(track.clientWidth * 0.72));
|
|
|
|
prev?.addEventListener('click', () => {
|
|
track.scrollBy({ left: -amount(), behavior: 'smooth' });
|
|
});
|
|
|
|
next?.addEventListener('click', () => {
|
|
track.scrollBy({ left: amount(), behavior: 'smooth' });
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('[data-listing-share]').forEach((button) => {
|
|
button.addEventListener('click', async () => {
|
|
const url = button.dataset.shareUrl || window.location.href;
|
|
const title = button.dataset.shareTitle || document.title;
|
|
|
|
if (navigator.share) {
|
|
try {
|
|
await navigator.share({ title, url });
|
|
return;
|
|
} catch (error) {
|
|
if (error?.name === 'AbortError') {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(url);
|
|
button.classList.add('is-active');
|
|
window.setTimeout(() => button.classList.remove('is-active'), 1200);
|
|
} catch (error) {
|
|
window.prompt('Copy this link', url);
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('[data-detail-tabs]').forEach((tabsRoot) => {
|
|
const buttons = Array.from(tabsRoot.querySelectorAll('[data-detail-tab-button]'));
|
|
const panels = Array.from(tabsRoot.querySelectorAll('[data-detail-tab-panel]'));
|
|
|
|
const activate = (target) => {
|
|
buttons.forEach((button) => {
|
|
const active = button.dataset.tab === target;
|
|
button.classList.toggle('is-active', active);
|
|
button.setAttribute('aria-selected', active ? 'true' : 'false');
|
|
});
|
|
|
|
panels.forEach((panel) => {
|
|
panel.classList.toggle('is-active', panel.dataset.panel === target);
|
|
});
|
|
};
|
|
|
|
buttons.forEach((button) => {
|
|
button.addEventListener('click', () => activate(button.dataset.tab || 'details'));
|
|
});
|
|
});
|
|
|
|
const chatRoot = document.querySelector('[data-inline-chat]');
|
|
if (chatRoot) {
|
|
const panel = chatRoot.querySelector('[data-inline-chat-panel]');
|
|
const thread = chatRoot.querySelector('[data-inline-chat-thread]');
|
|
const emptyState = chatRoot.querySelector('[data-inline-chat-empty]');
|
|
const form = chatRoot.querySelector('[data-inline-chat-form]');
|
|
const input = chatRoot.querySelector('[data-inline-chat-input]');
|
|
const error = chatRoot.querySelector('[data-inline-chat-error]');
|
|
const submitButton = chatRoot.querySelector('[data-inline-chat-submit]');
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
|
|
|
|
const togglePanel = (open) => {
|
|
if (!panel) {
|
|
return;
|
|
}
|
|
|
|
panel.hidden = !open;
|
|
chatRoot.classList.toggle('is-open', open);
|
|
|
|
if (open) {
|
|
window.requestAnimationFrame(() => input?.focus());
|
|
}
|
|
};
|
|
|
|
const showError = (message) => {
|
|
if (!error) {
|
|
return;
|
|
}
|
|
|
|
if (!message) {
|
|
error.textContent = '';
|
|
error.classList.add('is-hidden');
|
|
return;
|
|
}
|
|
|
|
error.textContent = message;
|
|
error.classList.remove('is-hidden');
|
|
};
|
|
|
|
const appendMessage = (message) => {
|
|
if (!thread || !message?.body) {
|
|
return;
|
|
}
|
|
|
|
const item = document.createElement('div');
|
|
item.className = 'lt-chat-item' + (message.is_mine ? ' is-mine' : '');
|
|
|
|
const bubble = document.createElement('div');
|
|
bubble.className = 'lt-chat-bubble';
|
|
bubble.textContent = message.body;
|
|
|
|
const time = document.createElement('span');
|
|
time.className = 'lt-chat-time';
|
|
time.textContent = message.time || '';
|
|
|
|
item.appendChild(bubble);
|
|
item.appendChild(time);
|
|
thread.appendChild(item);
|
|
thread.scrollTop = thread.scrollHeight;
|
|
emptyState?.classList.add('is-hidden');
|
|
};
|
|
|
|
document.querySelectorAll('[data-inline-chat-open]').forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
showError('');
|
|
togglePanel(true);
|
|
});
|
|
});
|
|
|
|
chatRoot.querySelector('[data-inline-chat-close]')?.addEventListener('click', () => {
|
|
togglePanel(false);
|
|
});
|
|
|
|
form?.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
|
|
if (!input || !submitButton) {
|
|
return;
|
|
}
|
|
|
|
const message = input.value.trim();
|
|
if (message === '') {
|
|
showError('Message cannot be empty.');
|
|
input.focus();
|
|
return;
|
|
}
|
|
|
|
const targetUrl = chatRoot.dataset.sendUrl || chatRoot.dataset.startUrl;
|
|
if (!targetUrl) {
|
|
showError('Messaging is not available right now.');
|
|
return;
|
|
}
|
|
|
|
showError('');
|
|
submitButton.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch(targetUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
|
|
'X-CSRF-TOKEN': csrfToken,
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
body: new URLSearchParams({ message }).toString(),
|
|
});
|
|
|
|
const payload = await response.json().catch(() => ({}));
|
|
if (!response.ok) {
|
|
const responseMessage = payload?.message || payload?.errors?.message?.[0] || 'Message could not be sent.';
|
|
throw new Error(responseMessage);
|
|
}
|
|
|
|
if (payload.send_url) {
|
|
chatRoot.dataset.sendUrl = payload.send_url;
|
|
}
|
|
|
|
if (payload.message) {
|
|
appendMessage(payload.message);
|
|
}
|
|
|
|
input.value = '';
|
|
input.focus();
|
|
} catch (requestError) {
|
|
showError(requestError instanceof Error ? requestError.message : 'Message could not be sent.');
|
|
} finally {
|
|
submitButton.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
@endsection
|