PIAPS_CW/WebApp/Pages/ProductPage.cshtml

@page
@model WebApp.Pages.ProductPageModel
@{
	ViewData["Title"] = "Product Page";
}
<!-- Шапка -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a asp-page="Index" class="navbar-brand">Catalog</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>

<div class="container my-5">
    <div class="row">
        <div class="col-md-6">
            <img src="data:image/png;base64,@Convert.ToBase64String(Model.GetMediaByProduct(Model.productModel))" class="img-fluid" alt="@Model.productModel.Name">
        </div>
       
        <div class="col-md-6">
            <h1 id="ProductName">@Model.productModel.Name</h1>
            <div class="star-rating">
                @for (int i = 0; i < (int)Math.Round(@Model.productModel.Rate); i++)
                {
                    <span class="filled-star">&#9733;</span>
                }
                @for (int i = 0; i < 5 - (int)Math.Round(@Model.productModel.Rate); i++)
                {
                    <span class="empty-star">&#9733;</span>
                }
                (@Model.productModel.Rate)
            </div>
            <p class="lead">
                @if (Model.saleModel != null)
                {
                    <span>Цена: <del>@Model.productModel.Price руб.</del> </span>
                    <span style="color:red;">@(Model.productModel.Price / 100 * (100 - @Model.saleModel.Value)) руб.</span>
                }
                else
                {
                    <span>Цена: @Model.productModel.Price руб.</span>
                }
            </p>
            <p>Количество товара на складе: @Model.productModel.Amount</p>

            <div class="hero-unit">
                <div class="container">
                    <div id="YMapsID"></div>
                </div>
            </div>

            @if (User.Identity.IsAuthenticated)
            {
                <form method="post">
                    <div class="d-flex align-items-center mb-3">
                        <input type="hidden" name="productId" value="@Model.productModel.Id"></input>
                        <input type="hidden" name="productName" value="@Model.productModel.Name"></input>
                        <input type="number" name="count" name="count" min="1" max="@Model.productModel.Amount" value="1" class="form-control w-auto" />
                        <input type="hidden" name="price" value="@Model.productModel.ActualPrice"></input>           
                    </div>
                    <button type="submit" class="btn btn-primary">В корзину</button>
                </form>
            }
            else
            {
                <div class="d-flex align-items-center mb-3">
                    <label for="quantity" class="me-2">Количество:</label>
                    <input type="number" id="quantity" name="quantity" min="1" max="@Model.productModel.Amount" value="1" class="form-control w-auto">
                </div>
                <a asp-page="Login" asp-route-count=1 class="btn btn-primary" style="margin-top: 5px" data-toggle="modal" data-target="#loginPromptModal">В корзину</a>
            }

            <button type="button" class="btn btn-primary" style="margin-top: 5px" data-bs-toggle="modal" data-bs-target="#shareModal">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share" viewBox="0 0 16 16">
                    <path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"></path>
                </svg>
                Поделиться
            </button>

            <div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="shareModalLabel">Поделиться товаром</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>Ссылка на товар:</p>
                            <input type="text" class="form-control" id="shareLink" value="https://localhost:7122/ProductPage?id=@Model.productModel.Id" readonly>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                            <button type="button" class="btn btn-primary" onclick="copyLink()">Копировать ссылку <span class="button-share__icon"></span></button>
                            <button type="button" class="btn btn-primary" onclick="shareOnTelegram()">Поделиться в Telegram</button>
                            <button type="button" class="btn btn-primary" onclick="shareOnVK()">Поделиться в VK</button>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <div class="row mt-5">
        <div class="col">
            <h2>Описание</h2>
            <p>@Model.productModel.Description</p>
        </div>
    </div>
</div>

@* СПЕРВА ВОЙДИТЕ В СИСТЕМУ ОКНО *@
<div class="modal fade" id="loginPromptModal" tabindex="-1" role="dialog" aria-labelledby="loginPromptModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loginPromptModalLabel">Предупреждение</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Сперва войдите в систему.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    function copyLink() {
        const shareLink = document.getElementById("shareLink");
        shareLink.select();
        shareLink.setSelectionRange(0, 99999);
        document.execCommand("copy");
        alert("Ссылка скопирована: " + shareLink.value);
    }

    function shareOnFacebook() {
        const shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`;
        window.open(shareUrl, '_blank');
    }

    function shareOnTwitter() {
        const shareText = "Посмотрите этот товар:";
        const shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(window.location.href)}`;
        window.open(shareUrl, '_blank');
    }

    function shareOnTelegram() {
        const name = document.getElementById("ProductName").innerText
        const shareText = 'Посмотрите этот товар: ' + name;
        const shareUrl = `https://t.me/share/url?url=${encodeURIComponent(window.location.href)}&text=${encodeURIComponent(shareText)}`;
        window.open(shareUrl, '_blank');
    }

    function shareOnVK() {
        const shareUrl = `https://vk.com/share.php?url=${encodeURIComponent(window.location.href)}`;
        window.open(shareUrl, '_blank');
    }

    $(document).ready(function () {
        if ($('#loginPromptModal').hasClass('show')) {
            $('.btn-primary[data-toggle="modal"][data-target="#loginPromptModal"]').remove();
            $('<a>', {
                class: 'btn btn-primary',
                href: '@Url.Page("Cart")',
                text: 'В корзину'
            }).appendTo('#cartButtonContainer');
        }
    });

        ymaps.ready(function () {
            var myMap = new ymaps.Map('YMapsID', {
                center: [54.352498, 48.387667],
                zoom: 16,
                // Обратите внимание, что в API 2.1 по умолчанию карта создается с элементами управления.
                // Если вам не нужно их добавлять на карту, в ее параметрах передайте пустой массив в поле controls.
                controls: []
            });

            var myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
                balloonContentBody: [
                    '<address>',
                    '<strong>Товары на складе в нашем офисе</strong>',
                    '<br/>',
                'Адрес: 119021, Ульяновск, ул. Северный Венец, 32',
                    '<br/>',        
                    '</address>'
                ].join('')
            }, {
                preset: 'islands#redDotIcon'
            });

            myMap.geoObjects.add(myPlacemark);
        });
</script>