<div class="modal fade" id="sharemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header d-flex justify-content-center position-relative">
                <h5 class="modal-title w-100 text-center">Share</h5>
                <button type="button" class="close position-absolute" data-dismiss="modal" aria-label="Close"
                    style="right: 15px;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-3">
                <div class="container-fluid">
                    <div class="row justify-content-center text-center">
                        <!-- Twitter -->
                        <div class="col-4 col-sm-3 mb-3">
                            <a
                                href="https://twitter.com/intent/tweet?url={{ route('american.plastic.web.product.details', ['name' => Str::slug($item->product_name)]) }}&text={{ urlencode($item->product_name) }}">

                                <div class="smd">
                                    <i class="img-thumbnail fab fa-twitter fa-2x"
                                        style="color:#4c6ef5;background-color: aliceblue;"></i>
                                    <p>Twitter</p>
                                </div>
                            </a>
                        </div>

                        <!-- Facebook -->
                        <div class="col-4 col-sm-3 mb-3">
                            <a
                                href="https://www.facebook.com/sharer/sharer.php?u={{ route('american.plastic.web.product.details', ['name' => Str::slug($item->product_name)]) }}&display=popup">
                                <div class="smd" id="facebook-share-button">
                                    <i class="img-thumbnail fab fa-facebook fa-2x"
                                        style="color: #3b5998;background-color: #eceff5;"></i>
                                    <p>Facebook</p>

                                </div>
                            </a>
                        </div>

                        <!-- Reddit -->
                        <div class="col-4 col-sm-3 mb-3">
                            <a
                                href="https://www.reddit.com/submit?url={{ route('american.plastic.web.product.details', ['name' => Str::slug($item->product_name)]) }}&title={{ urlencode($item->product_name) }}">
                                <div class="smd">
                                    <i class="img-thumbnail fab fa-reddit-alien fa-2x"
                                        style="color: #FF5700;background-color: #fdd9ce;"></i>
                                    <p>Reddit</p>
                                </div>
                            </a>
                        </div>

                        <!-- WhatsApp -->
                        <div class="col-4 col-sm-3 mb-3">
                            <a
                                href="https://api.whatsapp.com/send?text=Check%20out%20this%20product:%20{{ urlencode(route('american.plastic.web.product.details', ['name' => Str::slug($item->product_name)])) }}">
                                <div class="smd">
                                    <i class="img-thumbnail fab fa-whatsapp fa-2x"
                                        style="color: #25D366;background-color: #cef5dc;"></i>
                                    <p>WhatsApp</p>
                                </div>
                            </a>
                        </div>

                        <!-- Telegram -->
                        <div class="col-4 col-sm-3 mb-3">
                            <a
                                href="https://t.me/share/url?url={{ route('american.plastic.web.product.details', ['name' => Str::slug($item->product_name)]) }}&text={{ urlencode($item->product_tags) }}">
                                <div class="smd">
                                    <i class="img-thumbnail fab fa-telegram fa-2x"
                                        style="color: #4c6ef5;background-color: aliceblue;"></i>
                                    <p>Telegram</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Custom styling for the share icons */
    .img-thumbnail {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none !important;
        transition: transform 0.3s ease;
    }

    .img-thumbnail:hover {
        transform: scale(1.1);
    }

    .twitter-icon {
        color: #1DA1F2;
        background-color: rgba(29, 161, 242, 0.1);
    }

    .facebook-icon {
        color: #4267B2;
        background-color: rgba(66, 103, 178, 0.1);
    }

    .reddit-icon {
        color: #FF5700;
        background-color: rgba(255, 87, 0, 0.1);
    }

    .whatsapp-icon {
        color: #25D366;
        background-color: rgba(37, 211, 102, 0.1);
    }

    .telegram-icon {
        color: #0088CC;
        background-color: rgba(0, 136, 204, 0.1);
    }

    .smd p {
        font-size: 0.8rem;
        color: #333;
    }

    .modal-body {
        padding: 1rem;
    }
</style>
