@section('meta')
    <meta property="og:site_name" content="Westminster Teak">                                                  
    
    <meta property="og:type" content="product">
    <meta property="og:url" content="{{ $productDetailsDto->canonical_link }}">
    <meta property="og:title" content="{{ $productDetailsDto->title }}">
    <meta property="og:description" content="{{ $productDetailsDto->header }}">
    <meta property="og:price:amount" content="{{ $productDetailsDto->info['price'] }}">
    <meta property="og:price:currency" content="USD">
    <meta property="og:image" content="{{ $productDetailsDto->imageA }}"/>
    
    <!-- Facebook -->
    <meta property="fb:app_id" content="169822882560495">

    <!-- Pinterest -->
    <meta name="pinterest-rich-pin" content="true">
@endsection

<div class="modal modalCentered fade modalDemo tf-product-modal modal-part-content" id="share_social">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="header">
                <div class="demo-title">Share</div>
                <span class="icon-close icon-close-popup" data-bs-dismiss="modal"></span>
            </div>
            <div class="overflow-y-auto">
                <ul class="tf-social-icon d-flex gap-10">
                    <li>
                        <a target="_blank" rel="noopener" 
                           href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($productDetailsDto->canonical_link) }}" 
                           class="box-icon social-facebook bg_line">
                           <i class="icon icon-fb"></i>
                        </a>
                    </li>
                    <li>
                        @php
                            $tweetText = "Discover the perfect addition to your collection: ✨ The {$productDetailsDto->product_id} - {$productDetailsDto->title} | Designed by @WTTeakFurniture";
                        @endphp
                        <a target="_blank" rel="noopener" 
                           href="https://twitter.com/intent/tweet?url={{ urlencode($productDetailsDto->canonical_link) }}&text={{ rawurlencode($tweetText) }}"
                           class="box-icon social-twiter bg_line">
                           <i class="icon icon-Icon-x"></i>
                        </a>
                    </li>
                    <li>
                        <a target="_blank" rel="noopener" 
                           href="https://www.instagram.com/westminsterteak/" 
                           class="box-icon social-instagram bg_line">
                           <i class="icon icon-instagram"></i>
                        </a>
                    </li>
                    <li>                            
                        <a target="_blank" 
                           href="https://www.pinterest.com/pin/create/link/?url={{ urlencode($productDetailsDto->canonical_link) }}&media={{ urlencode($productDetailsDto->imageA) }}&description={{ urlencode($productDetailsDto->title) }}"
                           class="box-icon social-pinterest bg_line">
                            <i class="icon icon-pinterest-1"></i>
                        </a>
                    </li>
                    <li>
                        <a target="_blank" rel="noopener" 
                           href="mailto:?subject={{ rawurlencode('What do you think of this Westminster Teak design?') }}&body={{ rawurlencode("Hello!\n\nI was exploring Westminster Teak's new collections and found a piece that would be perfect for your home: The {$productDetailsDto->product_id} - {$productDetailsDto->title}.\n\nIts craftmanship is the kind of quality that’d elevate your patio experience. Discover the details here:\n{$productDetailsDto->canonical_link}\n\nRegards,") }}"
                           class="box-icon social-gmail bg_line">
                           <i class="icon icon-mail"></i>
                        </a>
                    </li>
                    <li>
                        @php
                            $whatsAppText = "You have to see this beautiful Westminster teak piece I found. The {$productDetailsDto->product_id} - {$productDetailsDto->title} is the perfect addition to any patio! 👌 - {$productDetailsDto->canonical_link}";
                        @endphp
                        <a target="_blank" rel="noopener"
                            href="https://api.whatsapp.com/send?text={{ urlencode($whatsAppText) }}"
                            class="box-icon social-whatsapp bg_line">
                            <i class="icon icon-whatsapp"></i>
                        </a>
                    </li>
                </ul>
                <form class="form-share"  method="post" accept-charset="utf-8">
                    <fieldset>
                        <input id="share-link" type="text" value="{{ $productDetailsDto->canonical_link }}" tabindex="0" aria-required="true">
                    </fieldset>
                    <div class="button-submit">
                        <button id="copy-btn" class="tf-btn btn-sm radius-3 btn-fill btn-icon animate-hover-btn" type="button">Copy</button>
                    </div>
                </form>
                <script>
                    document.getElementById('copy-btn').addEventListener('click', function() {
                        const input = document.getElementById('share-link');

                        // Select the input text
                        input.select();
                        input.setSelectionRange(0, 99999); // for mobile devices

                        // Copy to clipboard
                        navigator.clipboard.writeText(input.value)
                            .then(() => {
                                // Optional: give visual feedback
                                this.textContent = 'Copied!';
                                setTimeout(() => this.textContent = 'Copy', 1500);
                            })
                            .catch(err => {
                                console.error('Failed to copy: ', err);
                            });
                    });
                </script>
            </div>
        </div>
    </div>
</div>