@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="wrap">
            <div class="window">
                <div id="carousel">
                    @for (int i = 0; i < Model.GetAllMediaFilesByProduct(Model.productModel).Count; i++)
                    {
                        <span class="slide" id=@{"b"+i;}><img src="data:image/png;base64,@Convert.ToBase64String(Model.GetAllMediaFilesByProduct(Model.productModel)[i].Image)" class="img-fluid" alt="@Model.productModel.Name"></span>
                    }                                  
                </div>
            </div>
            <span id="prev">PREV</span>
            <span id="next">NEXT</span>
        </div>

        <div class="col-md-6">
            <h1>@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">Цена: @Model.productModel.Price руб.</p>
            <p>Количество товара на складе: @Model.productModel.Amount</p>
            
            @if (User.Identity.IsAuthenticated)
            {
                <form method="post">
                    <div class="d-flex align-items-center mb-3">
                        <input type="hidden" name="id" value="@Model.productModel.Id" />
                        <input type="number" name="count" min="1" max="@Model.productModel.Amount" value="1" class="form-control w-auto" />
                        <button type="submit" class="btn btn-primary me-2">В корзину</button>
                    </div>
                </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" class="btn btn-primary me-2">
                    В корзину
                </a>

            }
            <button class="btn btn-secondary">Купить сейчас</button>
            
        </div>
    </div>
    <div class="row mt-5">
        <div class="col">
            <h2>Описание</h2>
            <p>@Model.productModel.Amount</p>
        </div>
    </div>
</div>

<script>
    var carousel = $('#carousel'),
        threshold = 150,
        slideWidth = 500,
        dragStart,
        dragEnd;

    $('#next').click(function () { shiftSlide(-1) })
    $('#prev').click(function () { shiftSlide(1) })

    carousel.on('mousedown', function () {
        if (carousel.hasClass('transition')) return;
        dragStart = event.pageX;
        $(this).on('mousemove', function () {
            dragEnd = event.pageX;
            $(this).css('transform', 'translateX(' + dragPos() + 'px)')
        })
        $(document).on('mouseup', function () {
            if (dragPos() > threshold) { return shiftSlide(1) }
            if (dragPos() < -threshold) { return shiftSlide(-1) }
            shiftSlide(0);
        })
    });

    function dragPos() {
        return dragEnd - dragStart;
    }

    function shiftSlide(direction) {
        if (carousel.hasClass('transition')) return;
        dragEnd = dragStart;
        $(document).off('mouseup')
        carousel.off('mousemove')
            .addClass('transition')
            .css('transform', 'translateX(' + (direction * slideWidth) + 'px)');
        setTimeout(function () {
            if (direction === 1) {
                $('.slide:first').before($('.slide:last'));
            } else if (direction === -1) {
                $('.slide:last').after($('.slide:first'));
            }
            carousel.removeClass('transition')
            carousel.css('transform', 'translateX(0px)');
        }, 700)
    }
</script>