@extends('frontend::layouts.master')
@section('title')

@section('style')

@endsection

@section('content')

    <main>
        <div class="the-container">
            @if(!empty($data['sharing']['image']))
                <div class="container-page-detail">
                    <p class=" th-5  uppercase text-center text-title-dateils">{!!$data['sharing']['name']!!}</p>
                    <img src="{{ asset($data['sharing']['image']) }}" class="img-details">
                    
                    <div class="text-editor">
                        
                        <div class="social-links Share">
                            <a id="shareButton" href="#" >
                                <svg width="32" height="32" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" >
                                    <rect width="36" height="36" rx="18" fill="black"/>
                                    <path d="M22.988 21.2527C22.3806 21.2527 21.8371 21.4924 21.4215 21.8681L15.7233 18.5514C15.7632 18.3676 15.7952 18.1838 15.7952 17.992C15.7952 17.8002 15.7632 17.6163 15.7233 17.4325L21.3576 14.1478C21.7892 14.5474 22.3566 14.7952 22.988 14.7952C24.3146 14.7952 25.3855 13.7243 25.3855 12.3976C25.3855 11.0709 24.3146 10 22.988 10C21.6613 10 20.5904 11.0709 20.5904 12.3976C20.5904 12.5894 20.6223 12.7732 20.6623 12.957L15.028 16.2417C14.5964 15.8421 14.029 15.5944 13.3976 15.5944C12.0709 15.5944 11 16.6653 11 17.992C11 19.3186 12.0709 20.3896 13.3976 20.3896C14.029 20.3896 14.5964 20.1418 15.028 19.7422L20.7182 23.0669C20.6783 23.2347 20.6543 23.4105 20.6543 23.5863C20.6543 24.8731 21.7012 25.92 22.988 25.92C24.2747 25.92 25.3216 24.8731 25.3216 23.5863C25.3216 22.2996 24.2747 21.2527 22.988 21.2527Z" fill="white"/>
                                    </svg>
                                    
                            </a>
                            <a href="https://www.facebook.com/sharer.php?u={{ url()->current() }}" target="_blank" onclick="window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;">
                                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M33 18C33 9.72 26.28 3 18 3C9.72 3 3 9.72 3 18C3 25.26 8.16 31.305 15 32.7V22.5H12V18H15V14.25C15 11.355 17.355 9 20.25 9H24V13.5H21C20.175 13.5 19.5 14.175 19.5 15V18H24V22.5H19.5V32.925C27.075 32.175 33 25.785 33 18Z" fill="black"/>
                                    </svg>
                                    
                                
                            </a>
                            <a href="https://twitter.com/intent/tweet?text={{ url()->current() }}" target="_blank" onclick="window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;">
                                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M18 2.25C9.30234 2.25 2.25 9.30234 2.25 18C2.25 26.6977 9.30234 33.75 18 33.75C26.6977 33.75 33.75 26.6977 33.75 18C33.75 9.30234 26.6977 2.25 18 2.25ZM25.5691 14.1223C25.5797 14.2875 25.5797 14.4598 25.5797 14.6285C25.5797 19.7895 21.6492 25.7344 14.4668 25.7344C12.252 25.7344 10.1988 25.091 8.46914 23.9836C8.78555 24.0188 9.08789 24.0328 9.41133 24.0328C11.2395 24.0328 12.9199 23.4141 14.2594 22.3664C12.5438 22.3313 11.1023 21.2063 10.6102 19.6594C11.2113 19.7473 11.7527 19.7473 12.3715 19.5891C11.4881 19.4096 10.6941 18.9298 10.1244 18.2313C9.55462 17.5327 9.24429 16.6585 9.24609 15.757V15.7078C9.76289 15.9996 10.3711 16.1789 11.0074 16.2035C10.4725 15.847 10.0338 15.364 9.73023 14.7974C9.42667 14.2307 9.26762 13.5979 9.26719 12.9551C9.26719 12.2273 9.45703 11.5629 9.79805 10.9863C10.7786 12.1934 12.0021 13.1806 13.3891 13.8838C14.7762 14.587 16.2957 14.9905 17.8488 15.068C17.2969 12.4137 19.2797 10.2656 21.6633 10.2656C22.7883 10.2656 23.8008 10.7367 24.5145 11.4961C25.3969 11.3309 26.2406 11.0004 26.993 10.5574C26.7012 11.4609 26.0895 12.2238 25.2773 12.7055C26.0648 12.6211 26.8242 12.4031 27.5273 12.0973C26.9965 12.8777 26.332 13.5703 25.5691 14.1223Z" fill="black"/>
                                    </svg>
                                    
                                
                            </a>
                            <a href="https://social-plugins.line.me/lineit/share?url={{ url()->current() }}" target="_blank" onclick="window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;">
                                <img src="{{ Module::asset('frontend:img/home/line.png') }}" width="36" height="36">
                                
                            </a>
                         
                          
                        </div>
                        {!!$data['sharing']['detail']!!}
                    </div>

                </div>
            @else
                <div class="container-page-detail">
                    <p class=" th-5  uppercase text-center text-title-dateils mb-[1rem]">{!!$data['sharing']['name']!!}</p>
                <div class="blog-box-img " >
                    <iframe width="560" height="315" src="{!!$data['sharing']['url_video']!!}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                </div>
                <div class="text-editor" style="margin-top: 2rem">
                    {!!$data['sharing']['detail']!!}
                </div>
                </div>
            @endif
        </div>
    </main>
@endsection

@section('script')
<script>
    $("#shareButton").on("click", function() {
        if (navigator.share) {
            // Web Share API is supported
            navigator.share({
              title: document.title,
              url: window.location.href
            })
              .then(function() {
                console.log("Sharing success");
              })
              .catch(function(error) {
                console.log("Sharing error:", error);
              });
        } else {
            // Fallback for non-supporting browsers
            var url = window.location.href;
            var dummyInput = $("<input>").appendTo("body");
            dummyInput.val(url).select();
            document.execCommand("copy");
            dummyInput.remove();
            alert("Link copied to clipboard");
        }
    });
</script>

@endsection