@extends('layouts.public')

@section('title', $product->title . ' | UsedStore.ca')

@section(
    'meta_description',
    \Illuminate\Support\Str::limit(
        strip_tags($product->description ?? 'View this product on UsedStore.ca.'),
        155
    )
)

@section('content')
    @php
        $lang = session('locale', 'en');

        $translations = [
            'en' => [
                'categories' => 'Categories',
                'products' => 'Products',
                'why_us' => 'Why Us',
                'contact' => 'Contact',
                'dashboard' => 'Dashboard',
                'login' => 'Login',
                'start_selling' => 'Start Selling',

                'back' => 'Back to products',
                'premium_listing' => 'Premium Listing',
                'available' => 'Available',
                'sold' => 'Sold',
                'views' => 'views',

                'size' => 'Size',
                'condition' => 'Condition',
                'location' => 'Location',
                'posted' => 'Posted',
                'brand' => 'Brand',
                'category' => 'Category',

                'description' => 'Description',
                'no_description' => 'No description was added for this product.',
                'product_video' => 'Product Video',
                'video_subtitle' => 'See the product in more detail.',

                'seller_information' => 'Seller Information',
                'seller' => 'Seller',
                'member_since' => 'Member since',
                'contact_seller' => 'Contact Seller',
                'contact_description' => 'Contact the seller directly for availability, pickup or delivery details.',

                'call_seller' => 'Call Seller',
                'whatsapp' => 'WhatsApp',
                'send_email' => 'Send Email',
                'share' => 'Share',
                'copy_link' => 'Copy Link',
                'link_copied' => 'Product link copied.',
                'email_not_available' => 'Email not available',
                'phone_not_available' => 'Phone not available',
                'contact_not_available' => 'The seller has not added public contact information.',

                'safety_title' => 'Safe Shopping Tips',
                'safety_1' => 'Meet in a public place.',
                'safety_2' => 'Inspect the product before paying.',
                'safety_3' => 'Never send deposits to unknown sellers.',

                'modern_marketplace' => 'Modern second-hand clothing marketplace.',
                'rights' => 'All rights reserved.',
                'no_image' => 'No Image',
                'close' => 'Close',
            ],

            'fr' => [
                'categories' => 'Catégories',
                'products' => 'Produits',
                'why_us' => 'Pourquoi nous',
                'contact' => 'Contact',
                'dashboard' => 'Tableau de bord',
                'login' => 'Connexion',
                'start_selling' => 'Commencer à vendre',

                'back' => 'Retour aux produits',
                'premium_listing' => 'Annonce premium',
                'available' => 'Disponible',
                'sold' => 'Vendu',
                'views' => 'vues',

                'size' => 'Taille',
                'condition' => 'État',
                'location' => 'Localisation',
                'posted' => 'Publié',
                'brand' => 'Marque',
                'category' => 'Catégorie',

                'description' => 'Description',
                'no_description' => 'Aucune description ajoutée pour ce produit.',
                'product_video' => 'Vidéo du produit',
                'video_subtitle' => 'Découvrez le produit plus en détail.',

                'seller_information' => 'Informations du vendeur', 
                'seller' => 'Vendeur',
                'member_since' => 'Membre depuis',
                'contact_seller' => 'Contacter le vendeur',
                'contact_description' => 'Contactez directement le vendeur pour la disponibilité, la livraison ou la récupération.',

                'call_seller' => 'Appeler',
                'whatsapp' => 'WhatsApp',
                'send_email' => 'Envoyer un courriel',
                'share' => 'Partager',
                'copy_link' => 'Copier le lien',
                'link_copied' => 'Lien du produit copié.',
                'email_not_available' => 'Courriel non disponible',
                'phone_not_available' => 'Téléphone non disponible',
                'contact_not_available' => 'Le vendeur n’a pas ajouté de coordonnées publiques.',

                'safety_title' => 'Conseils de sécurité',
                'safety_1' => 'Rencontrez-vous dans un lieu public.',
                'safety_2' => 'Inspectez le produit avant de payer.',
                'safety_3' => 'N’envoyez jamais de dépôt à un vendeur inconnu.',

                'modern_marketplace' => 'Marché moderne de vêtements d’occasion.',
                'rights' => 'Tous droits réservés.',
                'no_image' => 'Aucune image',
                'close' => 'Fermer',
            ],
        ];

        $tr = $translations[$lang] ?? $translations['en'];

        $images = is_array($product->images)
            ? $product->images
            : json_decode($product->images ?? '[]', true);

        $images = is_array($images) ? $images : [];

        /*
        |--------------------------------------------------------------------------
        | Resolve product media URLs
        |--------------------------------------------------------------------------
        | Supports both Laravel storage paths and full online URLs (https/http).
        */
        $resolveMediaUrl = function ($path) {
            if (!$path) {
                return null;
            }

            $path = trim((string) $path);

            if (\Illuminate\Support\Str::startsWith($path, ['https://', 'http://'])) {
                return $path;
            }

            if (\Illuminate\Support\Str::startsWith($path, '//')) {
                return 'https:' . $path;
            }

            return asset('storage/' . ltrim($path, '/'));
        };

        $imageUrls = array_values(array_filter(array_map($resolveMediaUrl, $images)));
        $mainImageUrl = $imageUrls[0] ?? null;
        $videoPathUrl = $product->video_path
            ? $resolveMediaUrl($product->video_path)
            : null;

        $currentPrice = $product->discount_price
            ?: $product->price;

        $discountPercentage = null;

        if (
            $product->discount_price &&
            $product->price > 0 &&
            $product->discount_price < $product->price
        ) {
            $discountPercentage = round(
                (($product->price - $product->discount_price) / $product->price) * 100
            );
        }

        $seller = $product->user;

        $sellerName = $seller->name ?? $tr['seller'];

        $sellerInitial = strtoupper(
            mb_substr($sellerName, 0, 1)
        );

        /*
        |--------------------------------------------------------------------------
        | Contact information
        |--------------------------------------------------------------------------
        |
        | First use contact information saved on the product.
        | If it is empty, optionally use information from the user model.
        |
        */

        $phoneNumber = $product->phone_number
            ?? $seller->phone_number
            ?? null;

        $whatsappNumber = $product->whatsapp
            ?? $seller->whatsapp
            ?? null;

        $sellerEmail = $seller->email ?? null;

        $cleanPhone = $phoneNumber
            ? preg_replace('/[^0-9+]/', '', $phoneNumber)
            : null;

        $cleanWhatsapp = $whatsappNumber
            ? preg_replace('/[^0-9]/', '', $whatsappNumber)
            : null;

        $whatsappMessage = urlencode(
            ($lang === 'fr'
                ? 'Bonjour, je suis intéressé par votre produit : '
                : 'Hello, I am interested in your product: ')
            . $product->title
            . ' - '
            . url()->current()
        );

        $youtubeId = null;

        if ($product->video_url) {
            preg_match(
                '/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([^&?\/]+)/',
                $product->video_url,
                $youtubeMatches
            );

            $youtubeId = $youtubeMatches[1] ?? null;
        }

        $status = strtolower($product->status ?? 'available');

        $isSold = $status === 'sold';

        $postedDate = $product->created_at
            ? $product->created_at->diffForHumans()
            : '-';
    @endphp

    <style>
        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            background: #f8fafc;
            color: #0f172a;
            font-family:
                Inter,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;
        }

        body.modal-open {
            overflow: hidden;
        }

        button,
        input,
        textarea,
        select {
            font: inherit;
        }

        a {
            color: inherit;
        }

        /*
        |--------------------------------------------------------------------------
        | Navigation
        |--------------------------------------------------------------------------
        */

        .site-nav {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(226, 232, 240, .9);
            background: rgba(255, 255, 255, .9);
            backdrop-filter: blur(20px);
        }

        .nav-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
            padding: 13px 22px;
        }

        .logo-link {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
        }

        .logo-link img {
            display: block;
            width: auto;
            height: 77px;
            object-fit: contain;
        }

        .desktop-nav {
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .desktop-nav a {
            color: #475569;
            text-decoration: none;
            font-size: 14px;
            font-weight: 850;
            transition: .2s ease;
        }

        .desktop-nav a:hover {
            color: #4f46e5;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .login-link {
            padding: 11px 15px;
            color: #334155;
            text-decoration: none;
            font-weight: 850;
        }

        .nav-primary-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 20px;
            border-radius: 999px;
            background: #0f172a;
            color: white;
            text-decoration: none;
            font-size: 14px;
            font-weight: 900;
            box-shadow: 0 12px 24px rgba(15, 23, 42, .16);
            transition: .2s ease;
        }

        .nav-primary-button:hover {
            transform: translateY(-2px);
            background: #4f46e5;
        }

        /*
        |--------------------------------------------------------------------------
        | Main page
        |--------------------------------------------------------------------------
        */

        .product-page {
            min-height: 100vh;
            padding: 125px 20px 75px;
            background:
                radial-gradient(
                    circle at 10% 10%,
                    rgba(79, 70, 229, .13),
                    transparent 28%
                ),
                radial-gradient(
                    circle at 92% 35%,
                    rgba(236, 72, 153, .1),
                    transparent 27%
                ),
                radial-gradient(
                    circle at 45% 100%,
                    rgba(14, 165, 233, .08),
                    transparent 30%
                ),
                #f8fafc;
        }

        .product-container {
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
        }

        .top-navigation-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 24px;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 13px 19px;
            border: 1px solid #e2e8f0;
            border-radius: 999px;
            background: rgba(255, 255, 255, .9);
            color: #0f172a;
            text-decoration: none;
            font-size: 14px;
            font-weight: 900;
            box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
            transition: .2s ease;
        }

        .back-link:hover {
            transform: translateX(-3px);
            border-color: #a5b4fc;
            color: #4f46e5;
        }

        .top-share-button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 13px 18px;
            border: 1px solid #e2e8f0;
            border-radius: 999px;
            background: white;
            color: #334155;
            font-weight: 900;
            cursor: pointer;
            box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
            transition: .2s ease;
        }

        .top-share-button:hover {
            border-color: #a5b4fc;
            color: #4f46e5;
            transform: translateY(-2px);
        }

        .product-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
            gap: 30px;
            align-items: start;
        }

        .glass-card {
            border: 1px solid rgba(226, 232, 240, .95);
            border-radius: 34px;
            background: rgba(255, 255, 255, .94);
            box-shadow: 0 30px 75px rgba(15, 23, 42, .1);
            backdrop-filter: blur(18px);
        }

        /*
        |--------------------------------------------------------------------------
        | Product gallery
        |--------------------------------------------------------------------------
        */

        .gallery-card {
            position: sticky;
            top: 105px;
            padding: 22px;
        }

        .main-image-wrapper {
            position: relative;
            overflow: hidden;
            height: 650px;
            border-radius: 27px;
            background:
                linear-gradient(135deg, #e2e8f0, #f8fafc);
            cursor: zoom-in;
        }

        .main-image-wrapper::after {
            position: absolute;
            right: 16px;
            bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 14px;
            background: rgba(15, 23, 42, .75);
            color: white;
            content: "⌕";
            font-size: 22px;
            font-weight: 900;
            pointer-events: none;
            backdrop-filter: blur(10px);
        }

        .main-product-image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .45s ease;
        }

        .main-image-wrapper:hover .main-product-image {
            transform: scale(1.025);
        }

        .empty-main-image {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            color: #94a3b8;
            font-size: 24px;
            font-weight: 900;
        }

        .premium-badge {
            position: absolute;
            top: 18px;
            left: 18px;
            z-index: 5;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 15px;
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 999px;
            background: rgba(15, 23, 42, .84);
            color: white;
            font-size: 12px;
            font-weight: 900;
            backdrop-filter: blur(12px);
        }

        .discount-image-badge {
            position: absolute;
            top: 18px;
            right: 18px;
            z-index: 5;
            padding: 10px 14px;
            border-radius: 999px;
            background: #dc2626;
            color: white;
            font-size: 13px;
            font-weight: 950;
            box-shadow: 0 10px 25px rgba(220, 38, 38, .3);
        }

        .thumbnail-list {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            margin-top: 14px;
        }

        .thumbnail-button {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 105px;
            padding: 0;
            border: 3px solid transparent;
            border-radius: 17px;
            background: #f1f5f9;
            cursor: pointer;
            transition: .2s ease;
        }

        .thumbnail-button:hover,
        .thumbnail-button.active {
            border-color: #4f46e5;
            transform: translateY(-3px);
            box-shadow: 0 10px 24px rgba(79, 70, 229, .15);
        }

        .thumbnail-button img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /*
        |--------------------------------------------------------------------------
        | Information card
        |--------------------------------------------------------------------------
        */

        .information-card {
            padding: 30px;
        }

        .status-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 14px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 950;
            text-transform: uppercase;
            letter-spacing: .045em;
        }

        .status-badge.available {
            background: #dcfce7;
            color: #15803d;
        }

        .status-badge.sold {
            background: #fee2e2;
            color: #b91c1c;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: currentColor;
        }

        .view-count {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #64748b;
            font-size: 13px;
            font-weight: 800;
        }

        .product-title {
            margin: 21px 0 9px;
            color: #0f172a;
            font-size: clamp(36px, 5vw, 52px);
            font-weight: 950;
            line-height: 1.04;
            letter-spacing: -.04em;
            overflow-wrap: anywhere;
        }

        .product-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin: 0;
            color: #64748b;
            font-size: 16px;
            font-weight: 750;
        }

        .meta-separator {
            color: #cbd5e1;
        }

        .price-panel {
            position: relative;
            overflow: hidden;
            margin-top: 25px;
            padding: 24px;
            border: 1px solid #dbeafe;
            border-radius: 25px;
            background:
                radial-gradient(
                    circle at top right,
                    rgba(79, 70, 229, .14),
                    transparent 45%
                ),
                linear-gradient(135deg, #eef2ff, #ffffff);
        }

        .price-label {
            display: block;
            margin-bottom: 7px;
            color: #64748b;
            font-size: 12px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .price-line {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 12px;
        }

        .current-price {
            color: #4f46e5;
            font-size: 48px;
            font-weight: 950;
            line-height: 1;
            letter-spacing: -.04em;
        }

        .old-price {
            color: #94a3b8;
            font-size: 20px;
            font-weight: 850;
            text-decoration: line-through;
        }

        .discount-text {
            display: inline-flex;
            margin-top: 12px;
            padding: 7px 11px;
            border-radius: 999px;
            background: #fee2e2;
            color: #b91c1c;
            font-size: 12px;
            font-weight: 900;
        }

        .product-details-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 13px;
            margin-top: 21px;
        }

        .detail-item {
            min-width: 0;
            padding: 17px;
            border: 1px solid #e2e8f0;
            border-radius: 19px;
            background: #f8fafc;
        }

        .detail-label {
            display: block;
            margin-bottom: 7px;
            color: #64748b;
            font-size: 12px;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .detail-value {
            display: block;
            overflow: hidden;
            color: #0f172a;
            font-size: 16px;
            font-weight: 950;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /*
        |--------------------------------------------------------------------------
        | Description
        |--------------------------------------------------------------------------
        */

        .content-section {
            margin-top: 23px;
            padding: 23px;
            border: 1px solid #e2e8f0;
            border-radius: 24px;
            background: #f8fafc;
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 11px;
            margin-bottom: 13px;
        }

        .section-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 40px;
            width: 40px;
            height: 40px;
            border-radius: 13px;
            background: white;
            color: #4f46e5;
            font-size: 18px;
            box-shadow: 0 7px 17px rgba(15, 23, 42, .07);
        }

        .section-header h2,
        .section-header h3 {
            margin: 0;
            color: #0f172a;
            font-size: 21px;
            font-weight: 950;
        }

        .description-text {
            margin: 0;
            color: #475569;
            font-size: 15px;
            font-weight: 600;
            line-height: 1.85;
            white-space: pre-line;
            overflow-wrap: anywhere;
        }

        /*
        |--------------------------------------------------------------------------
        | Video
        |--------------------------------------------------------------------------
        */

        .product-video-section {
            margin-top: 30px;
            padding: 27px;
        }

        .video-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 18px;
        }

        .video-heading-text {
            display: flex;
            align-items: center;
            gap: 13px;
        }

        .video-heading-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 48px;
            width: 48px;
            height: 48px;
            border-radius: 16px;
            background: #fee2e2;
            color: #dc2626;
            font-size: 21px;
        }

        .video-heading h2 {
            margin: 0 0 4px;
            font-size: 24px;
            font-weight: 950;
        }

        .video-heading p {
            margin: 0;
            color: #64748b;
            font-size: 14px;
            font-weight: 650;
        }

        .uploaded-video-player {
            display: block;
            width: 100%;
            max-height: 700px;
            border-radius: 24px;
            background: #000;
            box-shadow: 0 20px 40px rgba(15, 23, 42, .15);
        }

        .youtube-player {
            position: relative;
            overflow: hidden;
            aspect-ratio: 16 / 9;
            border-radius: 24px;
            background: #000;
            box-shadow: 0 20px 40px rgba(15, 23, 42, .15);
        }

        .youtube-player iframe {
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /*
        |--------------------------------------------------------------------------
        | Seller and contact
        |--------------------------------------------------------------------------
        */

        .seller-contact-section {
            display: grid;
            grid-template-columns: .82fr 1.18fr;
            gap: 25px;
            margin-top: 30px;
        }

        .seller-profile-card {
            position: relative;
            overflow: hidden;
            padding: 27px;
            color: white;
            background:
                radial-gradient(
                    circle at top right,
                    rgba(129, 140, 248, .38),
                    transparent 40%
                ),
                linear-gradient(145deg, #0f172a, #1e293b);
        }

        .seller-profile-card::after {
            position: absolute;
            right: -45px;
            bottom: -55px;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: rgba(236, 72, 153, .16);
            content: "";
        }

        .seller-label {
            display: inline-flex;
            padding: 7px 11px;
            border: 1px solid rgba(255, 255, 255, .15);
            border-radius: 999px;
            background: rgba(255, 255, 255, .1);
            color: #cbd5e1;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .07em;
            text-transform: uppercase;
        }

        .seller-profile-main {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 22px;
        }

        .seller-avatar {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 72px;
            width: 72px;
            height: 72px;
            border: 3px solid rgba(255, 255, 255, .15);
            border-radius: 23px;
            background: linear-gradient(135deg, #4f46e5, #ec4899);
            color: white;
            font-size: 29px;
            font-weight: 950;
            box-shadow: 0 16px 35px rgba(0, 0, 0, .24);
        }

        .seller-profile-main h3 {
            margin: 0 0 6px;
            font-size: 23px;
            font-weight: 950;
            overflow-wrap: anywhere;
        }

        .seller-profile-main p {
            margin: 0;
            color: #cbd5e1;
            font-size: 13px;
            font-weight: 650;
        }

        .verified-seller {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 11px;
            color: #a7f3d0;
            font-size: 12px;
            font-weight: 850;
        }

        .contact-card {
            padding: 27px;
        }

        .contact-heading {
            margin-bottom: 20px;
        }

        .contact-heading h2 {
            margin: 0 0 7px;
            font-size: 25px;
            font-weight: 950;
        }

        .contact-heading p {
            margin: 0;
            color: #64748b;
            font-size: 14px;
            font-weight: 650;
            line-height: 1.6;
        }

        .contact-buttons {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .contact-button {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            padding: 15px;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            text-decoration: none;
            transition: .2s ease;
        }

        .contact-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
        }

        .contact-button-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 42px;
            width: 42px;
            height: 42px;
            border-radius: 13px;
            font-size: 18px;
        }

        .contact-button-content {
            min-width: 0;
        }

        .contact-button strong,
        .contact-button small {
            display: block;
        }

        .contact-button strong {
            color: #0f172a;
            font-size: 14px;
            font-weight: 950;
        }

        .contact-button small {
            overflow: hidden;
            margin-top: 4px;
            color: #64748b;
            font-size: 12px;
            font-weight: 650;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .phone-contact {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

        .phone-contact .contact-button-icon {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .whatsapp-contact {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }

        .whatsapp-contact .contact-button-icon {
            background: #dcfce7;
            color: #15803d;
        }

        .email-contact {
            background: #faf5ff;
            border-color: #e9d5ff;
        }

        .email-contact .contact-button-icon {
            background: #f3e8ff;
            color: #7e22ce;
        }

        .share-contact {
            width: 100%;
            background: #f8fafc;
            cursor: pointer;
        }

        .share-contact .contact-button-icon {
            background: white;
            color: #475569;
            box-shadow: 0 6px 15px rgba(15, 23, 42, .06);
        }

        .contact-not-available {
            padding: 18px;
            border: 1px dashed #cbd5e1;
            border-radius: 18px;
            background: #f8fafc;
            color: #64748b;
            text-align: center;
            font-size: 14px;
            font-weight: 750;
        }

        /*
        |--------------------------------------------------------------------------
        | Safety information
        |--------------------------------------------------------------------------
        */

        .safety-card {
            margin-top: 30px;
            padding: 26px;
            border-color: #fde68a;
            background:
                radial-gradient(
                    circle at top right,
                    rgba(245, 158, 11, .1),
                    transparent 40%
                ),
                #fffbeb;
        }

        .safety-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 17px;
        }

        .safety-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 45px;
            width: 45px;
            height: 45px;
            border-radius: 15px;
            background: #fef3c7;
            color: #b45309;
            font-size: 21px;
        }

        .safety-heading h3 {
            margin: 0;
            color: #92400e;
            font-size: 21px;
            font-weight: 950;
        }

        .safety-list {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .safety-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 14px;
            border: 1px solid #fde68a;
            border-radius: 16px;
            background: rgba(255, 255, 255, .7);
            color: #78350f;
            font-size: 13px;
            font-weight: 750;
            line-height: 1.5;
        }

        .safety-check {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            border-radius: 8px;
            background: #fef3c7;
            color: #b45309;
            font-size: 12px;
            font-weight: 950;
        }

        /*
        |--------------------------------------------------------------------------
        | Footer
        |--------------------------------------------------------------------------
        */

        .site-footer {
            border-top: 1px solid #e2e8f0;
            background: white;
        }

        .footer-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
            padding: 42px 22px;
        }

        .footer-brand h3 {
            margin: 0 0 7px;
            font-size: 26px;
            font-weight: 950;
        }

        .footer-brand h3 span {
            color: #4f46e5;
        }

        .footer-brand p,
        .copyright {
            margin: 0;
            color: #64748b;
            font-size: 14px;
            font-weight: 650;
        }

        /*
        |--------------------------------------------------------------------------
        | Image modal
        |--------------------------------------------------------------------------
        */

        .image-modal {
            position: fixed;
            inset: 0;
            z-index: 3000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 25px;
            background: rgba(2, 6, 23, .94);
            backdrop-filter: blur(15px);
        }

        .image-modal.show {
            display: flex;
        }

        .modal-image {
            display: block;
            max-width: 94vw;
            max-height: 88vh;
            border-radius: 22px;
            object-fit: contain;
            box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
        }

        .modal-close {
            position: absolute;
            top: 22px;
            right: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 49px;
            height: 49px;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 16px;
            background: rgba(255, 255, 255, .12);
            color: white;
            font-size: 26px;
            font-weight: 700;
            cursor: pointer;
            backdrop-filter: blur(10px);
        }

        /*
        |--------------------------------------------------------------------------
        | Toast
        |--------------------------------------------------------------------------
        */

        .toast-message {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 4000;
            visibility: hidden;
            max-width: calc(100vw - 40px);
            padding: 14px 18px;
            border-radius: 15px;
            background: #0f172a;
            color: white;
            font-size: 14px;
            font-weight: 850;
            opacity: 0;
            transform: translateY(15px);
            box-shadow: 0 20px 45px rgba(15, 23, 42, .25);
            transition: .25s ease;
        }

        .toast-message.show {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
        }

        /*
        |--------------------------------------------------------------------------
        | Responsive design
        |--------------------------------------------------------------------------
        */

        @media (max-width: 1050px) {
            .product-layout {
                grid-template-columns: 1fr;
            }

            .gallery-card {
                position: static;
            }

            .main-image-wrapper {
                height: 620px;
            }

            .seller-contact-section {
                grid-template-columns: 1fr 1.25fr;
            }
        }

        @media (max-width: 850px) {
            .desktop-nav {
                display: none;
            }

            .main-image-wrapper {
                height: 520px;
            }

            .seller-contact-section {
                grid-template-columns: 1fr;
            }

            .safety-list {
                grid-template-columns: 1fr;
            }

            .footer-container {
                flex-direction: column;
                text-align: center;
            }
        }

        @media (max-width: 650px) {
            .product-page {
                padding: 105px 12px 45px;
            }

            .nav-container {
                padding: 10px 13px;
            }

            .logo-link img {
                height: 66px;
            }

            .login-link {
                display: none;
            }

            .nav-primary-button {
                padding: 10px 14px;
                font-size: 12px;
            }

            .top-navigation-row {
                align-items: stretch;
            }

            .back-link,
            .top-share-button {
                justify-content: center;
                padding: 12px 14px;
                font-size: 12px;
            }

            .gallery-card,
            .information-card,
            .product-video-section,
            .seller-profile-card,
            .contact-card,
            .safety-card {
                padding: 16px;
                border-radius: 25px;
            }

            .product-layout {
                gap: 18px;
            }

            .main-image-wrapper {
                height: 440px;
                border-radius: 21px;
            }

            .premium-badge {
                top: 12px;
                left: 12px;
                padding: 8px 12px;
            }

            .discount-image-badge {
                top: 12px;
                right: 12px;
                padding: 8px 11px;
            }

            .thumbnail-list {
                gap: 8px;
            }

            .thumbnail-button {
                height: 78px;
                border-radius: 13px;
            }

            .product-title {
                margin-top: 18px;
                font-size: 35px;
            }

            .current-price {
                font-size: 41px;
            }

            .product-details-grid {
                grid-template-columns: 1fr 1fr;
                gap: 9px;
            }

            .detail-item {
                padding: 14px;
            }

            .contact-buttons {
                grid-template-columns: 1fr;
            }

            .video-heading {
                align-items: flex-start;
            }
        }

        @media (max-width: 430px) {
            .main-image-wrapper {
                height: 365px;
            }

            .product-details-grid {
                grid-template-columns: 1fr;
            }

            .thumbnail-list {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .status-row {
                align-items: flex-start;
                flex-direction: column;
            }

            .seller-profile-main {
                align-items: flex-start;
            }

            .seller-avatar {
                width: 62px;
                height: 62px;
                flex-basis: 62px;
                border-radius: 20px;
            }
        }
        .language-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
    padding: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: white;
}

.language-switcher a {
    padding: 8px 14px;
    border-radius: 999px;
    color: #475569;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    transition: .2s;
}

.language-switcher a:hover {
    background: #eef2ff;
    color: #4f46e5;
}

.language-switcher a.active {
    background: #4f46e5;
    color: white;
}
@media (max-width: 650px) {
    .site-nav {
        position: fixed;
    }

    .nav-container {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo account"
            "language language";
        gap: 10px;
        padding: 10px 14px;
    }

    .logo-link {
        grid-area: logo;
        justify-self: start;
    } 

    .logo-link img {
        width: auto;
        height: 58px;
        max-width: 120px;
        object-fit: contain;
    }

    .nav-actions {
        display: contents;
    }

    .nav-primary-button {
        grid-area: account;
        justify-self: end;
        padding: 10px 15px;
        font-size: 12px;
        white-space: nowrap;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .15);
    }

    .login-link {
        grid-area: account;
        justify-self: end;
        padding: 9px 12px;
        font-size: 12px;
    }

    .language-switcher {
        grid-area: language;
        justify-self: center;
        width: fit-content;
        margin: 0;
        padding: 4px;
        gap: 3px;
        border-radius: 999px;
    }

    .language-switcher a {
        min-width: 55px;
        padding: 7px 11px;
        font-size: 11px;
        text-align: center;
    }

    .desktop-nav {
        display: none;
    }

    /*
    |--------------------------------------------------------------------------
    | Product page spacing below taller mobile navigation
    |--------------------------------------------------------------------------
    */

    .product-page {
        padding-top: 145px;
    }

    .top-navigation-row {
        gap: 8px;
    }

    .back-link,
    .top-share-button {
        padding: 11px 13px;
        font-size: 11px;
        white-space: nowrap;
    }

    .description-text {
    margin: 0;
    color: #475569;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.rich-description p {
    margin: 0 0 14px;
}

.rich-description p:last-child {
    margin-bottom: 0;
}

.rich-description a {
    display: inline;
    color: #4f46e5;
    font-weight: 850;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

.rich-description a:hover {
    color: #7c3aed;
}

.rich-description ul,
.rich-description ol {
    margin: 14px 0;
    padding-left: 27px;
}

.rich-description li {
    margin-bottom: 8px;
}

.rich-description blockquote {
    margin: 17px 0;
    padding: 15px 18px;
    border-left: 4px solid #4f46e5;
    border-radius: 0 15px 15px 0;
    background: #eef2ff;
    color: #3730a3;
    font-style: italic;
}

.rich-description strong,
.rich-description b {
    color: #0f172a;
    font-weight: 900;
}

.rich-description h1,
.rich-description h2,
.rich-description h3 {
    margin: 20px 0 10px;
    color: #0f172a;
    font-weight: 950;
    line-height: 1.25;
}

.rich-description h1 {
    font-size: 27px;
}

.rich-description h2 {
    font-size: 23px;
}

.rich-description h3 {
    font-size: 19px;
}

.rich-description sub,
.rich-description sup {
    font-size: 75%;
}

.rich-description div {
    margin-bottom: 10px;
}
}
    </style>

<nav class="site-nav">
    <div class="nav-container">

        <a
            href="{{ route('home') }}"
            class="logo-link"
        >
            <img
                src="{{ asset('logo.png') }}"
                alt="Used Clothing"
            >
        </a>

        <div class="desktop-nav">
            <a href="{{ url('/#categories') }}">
                {{ $tr['categories'] }}
            </a>

            <a href="{{ route('shop') }}">
                {{ $tr['products'] }}
            </a>

            <a href="{{ url('/#why') }}">
                {{ $tr['why_us'] }}
            </a>

            <a href="#contact">
                {{ $tr['contact'] }}
            </a>
        </div>

        <div class="nav-actions">

    <div class="language-switcher">

        <a
            href="{{ route('language','en') }}"
            class="{{ session('locale','en')=='en' ? 'active' : '' }}"
        >
            🇬🇧 EN
        </a>

        <a
            href="{{ route('language','fr') }}"
            class="{{ session('locale','en')=='fr' ? 'active' : '' }}"
        >
            🇫🇷 FR
        </a>

    </div>

    @auth
        <a
            href="{{ route('dashboard') }}"
            class="nav-primary-button"
        >
            {{ $tr['dashboard'] }}
        </a>
    @else
        <a
            href="{{ route('login') }}"
            class="login-link"
        >
            {{ $tr['login'] }}
        </a>

        <a
            href="{{ route('register') }}"
            class="nav-primary-button"
        >
            {{ $tr['start_selling'] }}
        </a>
    @endauth

</div>

    </div>
</nav>

<main class="product-page">
    <div class="product-container">

        <div class="top-navigation-row">
            <a
                href="{{ url()->previous() }}"
                class="back-link"
            >
                <span>←</span>
                {{ $tr['back'] }}
            </a>

            <button
                type="button"
                class="top-share-button"
                onclick="shareProduct()"
            >
                <span>↗</span>
                {{ $tr['share'] }}
            </button>
        </div>

        <div class="product-layout">

            {{-- Product gallery --}}
            <section class="gallery-card glass-card">

                <div
                    class="main-image-wrapper"
                    @if($mainImageUrl)
                        onclick="openImageModal()"
                    @endif
                >
                    <div class="premium-badge">
                        <span>✦</span>
                        {{ $tr['premium_listing'] }}
                    </div>

                    @if($discountPercentage)
                        <div class="discount-image-badge">
                            -{{ $discountPercentage }}%
                        </div>
                    @endif

                    @if($mainImageUrl)
                        <img
                            id="mainProductImage"
                            class="main-product-image"
                            src="{{ $mainImageUrl }}"
                            alt="{{ $product->title }}"
                            loading="lazy"
                            decoding="async"
                            onerror="this.onerror=null;this.src='https://placehold.co/900x1100/f1f5f9/64748b?text=UsedStore';"
                        >
                    @else
                        <div class="empty-main-image">
                            {{ $tr['no_image'] }}
                        </div>
                    @endif
                </div>

                @if(count($imageUrls) > 1)
                    <div class="thumbnail-list">
                        @foreach($imageUrls as $index => $imageUrl)
                            <button
                                type="button"
                                class="thumbnail-button {{ $index === 0 ? 'active' : '' }}"
                                onclick="changeImage(this)"
                                data-image="{{ $imageUrl }}"
                                aria-label="View product image {{ $index + 1 }}"
                            >
                                <img
                                    src="{{ $imageUrl }}"
                                    alt="{{ $product->title }} image {{ $index + 1 }}"
                                    onerror="this.onerror=null;this.src='https://placehold.co/300x300/f1f5f9/64748b?text=UsedStore';"
                                >
                            </button>
                        @endforeach
                    </div>
                @endif

            </section>

            {{-- Product information --}}
            <section class="information-card glass-card">

                <div class="status-row">
                    <span class="status-badge {{ $isSold ? 'sold' : 'available' }}">
                        <span class="status-dot"></span>

                        {{ $isSold
                            ? $tr['sold']
                            : $tr['available'] }}
                    </span>

                    <span class="view-count">
                        <span>◉</span>

                        {{ number_format($product->views ?? 0) }}
                        {{ $tr['views'] }}
                    </span>
                </div>

                <h1 class="product-title">
                    {{ $product->title }}
                </h1>

                <p class="product-meta">
                    <span>
                        {{ $product->category ?? '-' }}
                    </span>

                    @if($product->brand)
                        <span class="meta-separator">•</span>

                        <span>{{ $product->brand }}</span>
                    @endif
                </p>

                <div class="price-panel">
                    <span class="price-label">
                        {{ $lang === 'fr'
                            ? 'Prix du produit'
                            : 'Product price' }}
                    </span>

                    <div class="price-line">
                        <span class="current-price">
                            ${{ number_format($currentPrice, 2) }}
                        </span>

                        @if($product->discount_price)
                            <span class="old-price">
                                ${{ number_format($product->price, 2) }}
                            </span>
                        @endif
                    </div>

                    @if($discountPercentage)
                        <span class="discount-text">
                            {{ $lang === 'fr'
                                ? "Économisez {$discountPercentage}%"
                                : "Save {$discountPercentage}%" }}
                        </span>
                    @endif
                </div>

                <div class="product-details-grid">

                    <div class="detail-item">
                        <span class="detail-label">
                            {{ $tr['size'] }}
                        </span>

                        <strong class="detail-value">
                            {{ $product->size ?: '-' }}
                        </strong>
                    </div>

                    <div class="detail-item">
                        <span class="detail-label">
                            {{ $tr['condition'] }}
                        </span>

                        <strong class="detail-value">
                            {{ $product->condition ?: '-' }}
                        </strong>
                    </div>

                    <div class="detail-item">
                        <span class="detail-label">
                            {{ $tr['location'] }}
                        </span>

                        <strong
                            class="detail-value"
                            title="{{ $product->location }}"
                        >
                            {{ $product->location ?: '-' }}
                        </strong>
                    </div>

                    <div class="detail-item">
                        <span class="detail-label">
                            {{ $tr['posted'] }}
                        </span>

                        <strong class="detail-value">
                            {{ $postedDate }}
                        </strong>
                    </div>

                    <div class="detail-item">
                        <span class="detail-label">
                            {{ $tr['brand'] }}
                        </span>

                        <strong class="detail-value">
                            {{ $product->brand ?: '-' }}
                        </strong>
                    </div>

                    <div class="detail-item">
                        <span class="detail-label">
                            {{ $tr['category'] }}
                        </span>

                        <strong class="detail-value">
                            {{ $product->category ?: '-' }}
                        </strong>
                    </div>

                </div>

                <div class="content-section">
    <div class="section-header">
        <span class="section-icon">☰</span>
        <h2>{{ $tr['description'] }}</h2>
    </div>

    @if($product->description)
        <div class="description-text rich-description">
            {!! $product->description !!}
        </div>
    @else
        <p class="description-text">
            {{ $tr['no_description'] }}
        </p>
    @endif
</div>

            </section>

        </div>

        {{-- Product video --}}
        @if($videoPathUrl || $youtubeId)
            <section class="product-video-section glass-card">

                <div class="video-heading">
                    <div class="video-heading-text">
                        <div class="video-heading-icon">
                            ▶
                        </div>

                        <div>
                            <h2>{{ $tr['product_video'] }}</h2>
                            <p>{{ $tr['video_subtitle'] }}</p>
                        </div>
                    </div>
                </div>

                @if($videoPathUrl)
                    <video
                        class="uploaded-video-player"
                        controls
                        playsinline
                        preload="metadata"
                    >
                        <source
                            src="{{ $videoPathUrl }}"
                        >

                        Your browser does not support video playback.
                    </video>
                @elseif($youtubeId)
                    <div class="youtube-player">
                        <iframe
                            src="https://www.youtube.com/embed/{{ $youtubeId }}"
                            title="{{ $product->title }} video"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen
                        ></iframe>
                    </div>
                @endif

            </section>
        @endif

        {{-- Seller and contact information --}}
        <section
            id="contact"
            class="seller-contact-section"
        >

            <div class="seller-profile-card glass-card">
                <span class="seller-label">
                    {{ $tr['seller_information'] }}
                </span>

                <div class="seller-profile-main">
                    <div class="seller-avatar">
                        {{ $sellerInitial }}
                    </div>

                    <div>
                        <h3>{{ $sellerName }}</h3>

                        <p>
                            {{ $tr['member_since'] }}
                            {{ optional($seller)->created_at
                                ? optional($seller)->created_at->format('M Y')
                                : '-' }}
                        </p>

                        @if(optional($seller)->email_verified_at)
                            <span class="verified-seller">
                                <span>✓</span>

                                {{ $lang === 'fr'
                                    ? 'Vendeur vérifié'
                                    : 'Verified seller' }}
                            </span>
                        @endif
                    </div>
                </div>
            </div>

            <div class="contact-card glass-card">

                <div class="contact-heading">
                    <h2>{{ $tr['contact_seller'] }}</h2>

                    <p>
                        {{ $tr['contact_description'] }}
                    </p>
                </div>

                @if($cleanPhone || $cleanWhatsapp || $sellerEmail)
                    <div class="contact-buttons">

                        @if($cleanPhone)
                            <a
                                href="tel:{{ $cleanPhone }}"
                                class="contact-button phone-contact"
                            >
                                <span class="contact-button-icon">
                                    ☎
                                </span>

                                <span class="contact-button-content">
                                    <strong>
                                        {{ $tr['call_seller'] }}
                                    </strong>

                                    <small>
                                        {{ $phoneNumber }}
                                    </small>
                                </span>
                            </a>
                        @endif

                        @if($cleanWhatsapp)
                            <a
                                href="https://wa.me/{{ $cleanWhatsapp }}?text={{ $whatsappMessage }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                class="contact-button whatsapp-contact"
                            >
                                <span class="contact-button-icon">
                                    ◉
                                </span>

                                <span class="contact-button-content">
                                    <strong>
                                        {{ $tr['whatsapp'] }}
                                    </strong>

                                    <small>
                                        {{ $whatsappNumber }}
                                    </small>
                                </span>
                            </a>
                        @endif

                        @if($sellerEmail)
                            <a
                                href="mailto:{{ $sellerEmail }}?subject={{ rawurlencode('Product inquiry: ' . $product->title) }}&body={{ rawurlencode(($lang === 'fr' ? 'Bonjour, je suis intéressé par votre produit : ' : 'Hello, I am interested in your product: ') . $product->title . "\n\n" . url()->current()) }}"
                                class="contact-button email-contact"
                            >
                                <span class="contact-button-icon">
                                    ✉
                                </span>

                                <span class="contact-button-content">
                                    <strong>
                                        {{ $tr['send_email'] }}
                                    </strong>

                                    <small>
                                        {{ $sellerEmail }}
                                    </small>
                                </span>
                            </a>
                        @endif

                        <button
                            type="button"
                            class="contact-button share-contact"
                            onclick="shareProduct()"
                        >
                            <span class="contact-button-icon">
                                ↗
                            </span>

                            <span class="contact-button-content">
                                <strong>
                                    {{ $tr['share'] }}
                                </strong>

                                <small>
                                    {{ $tr['copy_link'] }}
                                </small>
                            </span>
                        </button>

                    </div>
                @else
                    <div class="contact-not-available">
                        {{ $tr['contact_not_available'] }}
                    </div>
                @endif

            </div>

        </section>

        {{-- Safety tips --}}
        <section class="safety-card glass-card">
            <div class="safety-heading">
                <span class="safety-icon">
                    ⚠
                </span>

                <h3>{{ $tr['safety_title'] }}</h3>
            </div>

            <div class="safety-list">
                <div class="safety-item">
                    <span class="safety-check">✓</span>
                    <span>{{ $tr['safety_1'] }}</span>
                </div>

                <div class="safety-item">
                    <span class="safety-check">✓</span>
                    <span>{{ $tr['safety_2'] }}</span>
                </div>

                <div class="safety-item">
                    <span class="safety-check">✓</span>
                    <span>{{ $tr['safety_3'] }}</span>
                </div>
            </div>
        </section>

    </div>
</main>

<footer class="site-footer">
    <div class="footer-container">
        <div class="footer-brand">
            <h3>
                Used<span>Clothing</span>
            </h3>

            <p>{{ $tr['modern_marketplace'] }}</p>
        </div>

        <p class="copyright">
            © {{ date('Y') }} Used Clothing.
            {{ $tr['rights'] }}
        </p>
    </div>
</footer>

{{-- Image zoom modal --}}
<div
    id="imageModal"
    class="image-modal"
    onclick="closeImageModalOnBackground(event)"
>
    <button
        type="button"
        class="modal-close"
        onclick="closeImageModal()"
        aria-label="{{ $tr['close'] }}"
    >
        ×
    </button>

    <img
        id="modalProductImage"
        class="modal-image"
        src=""
        alt="{{ $product->title }}"
    >
</div>

<div
    id="toastMessage"
    class="toast-message"
>
    {{ $tr['link_copied'] }}
</div>

<script>
    const copiedMessage = @json($tr['link_copied']);

    function changeImage(button) {
        const mainImage =
            document.getElementById('mainProductImage');

        const imageUrl =
            button.dataset.image;

        if (!mainImage || !imageUrl) {
            return;
        }

        mainImage.style.opacity = '0.25';

        setTimeout(function () {
            mainImage.src = imageUrl;
            mainImage.style.opacity = '1';
        }, 130);

        document
            .querySelectorAll('.thumbnail-button')
            .forEach(function (thumbnail) {
                thumbnail.classList.remove('active');
            });

        button.classList.add('active');
    }

    function openImageModal() {
        const mainImage =
            document.getElementById('mainProductImage');

        const modal =
            document.getElementById('imageModal');

        const modalImage =
            document.getElementById('modalProductImage');

        if (!mainImage || !modal || !modalImage) {
            return;
        }

        modalImage.src = mainImage.src;
        modal.classList.add('show');
        document.body.classList.add('modal-open');
    }

    function closeImageModal() {
        const modal =
            document.getElementById('imageModal');

        if (!modal) {
            return;
        }

        modal.classList.remove('show');
        document.body.classList.remove('modal-open');
    }

    function closeImageModalOnBackground(event) {
        if (event.target.id === 'imageModal') {
            closeImageModal();
        }
    }

    function showToast(message) {
        const toast =
            document.getElementById('toastMessage');

        if (!toast) {
            return;
        }

        toast.textContent = message;
        toast.classList.add('show');

        window.clearTimeout(
            window.productToastTimeout
        );

        window.productToastTimeout =
            window.setTimeout(function () {
                toast.classList.remove('show');
            }, 2600);
    }

    async function shareProduct() {
        const shareData = {
            title: @json($product->title),
            text: @json(
                \Illuminate\Support\Str::limit(
                    strip_tags(
                        $product->description
                        ?? $product->title
                    ),
                    100
                )
            ),
            url: window.location.href
        };

        if (navigator.share) {
            try {
                await navigator.share(shareData);

                return;
            } catch (error) {
                if (error.name === 'AbortError') {
                    return;
                }
            }
        }

        try {
            await navigator.clipboard.writeText(
                window.location.href
            );

            showToast(copiedMessage);
        } catch (error) {
            const temporaryInput =
                document.createElement('input');

            temporaryInput.value =
                window.location.href;

            document.body.appendChild(
                temporaryInput
            );

            temporaryInput.select();

            document.execCommand('copy');

            temporaryInput.remove();

            showToast(copiedMessage); 
        }
    }

    document.addEventListener( 
        'keydown',
        function (event) {
            if (event.key === 'Escape') {
                closeImageModal();
            }
        }
    );
</script>

@endsection