@extends('layouts.mall')

@section('content')
    <style>
        /* IE11 Native Scrollbar Styling */
        #mainContent .dynContent::-ms-scrollbar {
            width: 16px;
        }

        #mainContent .dynContent::-ms-scrollbar-track {
            background: #d4a574;
        }

        #mainContent .dynContent::-ms-scrollbar-thumb {
            background: #6b4722;
        }

        #mainContent .dynContent::-ms-scrollbar-thumb:hover,
        #mainContent .dynContent::-ms-scrollbar-thumb:active {
            background: #6d0808;
        }

        /* jScrollPane custom scrollbar styling (modern browsers) */
        #mainContent .dynContent .jspContainer {
            overflow: hidden;
            position: relative;
        }

        #mainContent .dynContent .jspPane {
            position: absolute;
        }

        #mainContent .dynContent .jspVerticalBar {
            position: absolute;
            top: 0;
            right: 0;
            width: 16px;
            height: 100%;
            background: transparent;
        }

        #mainContent .dynContent .jspTrack {
            background: #d4a574;
            position: relative;
        }

        #mainContent .dynContent .jspDrag {
            background: #6b4722;
            position: relative;
            cursor: pointer;
        }

        #mainContent .dynContent .jspDrag:hover,
        #mainContent .dynContent .jspDrag:active {
            background: #6d0808;
        }

        /* Arrow buttons styling */
        #mainContent .dynContent .jspArrow {
            background: #d4a574;
            text-indent: -20000px;
            display: block;
            cursor: pointer;
            width: 16px;
            height: 16px;
        }

        #mainContent .dynContent .jspArrow.jspDisabled {
            cursor: default;
            background: #bbb;
            opacity: 0.5;
        }

        #mainContent .dynContent .jspArrowUp {
            position: relative;
        }

        #mainContent .dynContent .jspArrowUp::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 6px solid #000;
        }

        #mainContent .dynContent .jspArrowDown {
            position: relative;
        }

        #mainContent .dynContent .jspArrowDown::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 6px solid #000;
        }

        #mainContent .dynContent .jspArrow:hover {
            background: #6d0808;
        }

        #mainContent .dynContent .jspArrow:hover::after {
            border-top-color: #fff;
            border-bottom-color: #fff;
        }

        /* IE11 Native Scrollbar Styling for item descriptions */
        .itemDesc p::-ms-scrollbar {
            width: 16px;
        }

        .itemDesc p::-ms-scrollbar-track {
            background: #d4a574;
        }

        .itemDesc p::-ms-scrollbar-thumb {
            background: #6b4722;
        }

        .itemDesc p::-ms-scrollbar-thumb:hover,
        .itemDesc p::-ms-scrollbar-thumb:active {
            background: #6d0808;
        }

        /* Webkit/Blink scrollbar styling for item descriptions (Chrome, Edge, Safari) */
        .itemDesc p::-webkit-scrollbar {
            width: 16px;
        }

        .itemDesc p::-webkit-scrollbar-track {
            background: #d4a574;
        }

        .itemDesc p::-webkit-scrollbar-thumb {
            background: #6b4722;
        }

        .itemDesc p::-webkit-scrollbar-thumb:hover {
            background: #6d0808;
        }
    </style>

    <div id="mainContent">
        <h1>{{ $category->name }}</h1>
        <div class="dynContent" style="position:relative">
            @forelse ($category->items->sortBy('id') as $item)
                <div class="item">
                    <div class="itemDesc">
                        <div @class(["thumbnailBgSmall", "discount thumbnailBgSmall-discount-ie6" => $item->old_price > 0])>
                            <a href="{{ route('mall.item', ['id' => $item->id]) }}" title="More information" class="openinformation">
                                <img src="{{ route('mall.item.image', ['id' => $item->id]) }}" width="63px" height="63px" alt="More information"/>
                            </a>

                            @if ($item->old_price)
                                <div class="discountPercentCategory">
                                    <a href="{{ route('mall.item', ['id' => $item->id]) }}"
                                       title="More information" class="openinformation"></a>
                                </div>
                            @endif
                        </div>

                        <p>
                            <a href="{{ route('mall.item', ['id' => $item->id]) }}" title="More information" class="openinformation">
                                <span class="itemTitle">{{ $item->proto->locale_name }}</span>
                            </a>
                            <span class="line"></span>

                            {{ $item->description ?? "No description is currently available for this item." }}

                            <br class="clearfloat"/>
                        </p>
                    </div>
                    <div class="purchaseOptionsWrapper">
                        <div @class(["itemPrice", "discount itemPrice-discount-ie6" => $item->old_price])>
                            <div @class(["priceValue", "discount discount priceValue-discount-ie6" => $item->old_price])>
                                {{ $item->quantity }} pcs. for:

                                @if (!$item->old_price)
                                    <span class="price">{{ $item->price }} {{ $item->pricing->name() }}</span>
                                @endif
                            </div>

                            @if ($item->old_price)
                                <div class="price discount price-discount-ie6">{{ $item->price }} {{ $item->pricing->name() }}</div>
                                <div class="discountOldPriceCategory">{{ $item->old_price }} {{ $item->pricing ->name() }}</div>
                                <div class="discountPercentCircleCategory"></div>
                            @endif
                        </div>

                        <a href="{{ route('mall.item', ['id' => $item->id]) }}" title="More information" @class(["purchaseInfo", "openinformation", "discount purchaseInfo-discount-ie6" => $item->old_price])>
                            Details
                        </a>
                        <br class="clearfloat"/>
                    </div>
                </div>
            @empty
                <div class="item" id="confirmBox">
                    <div class="itemDesc confirmDesc">
                        <div class="thumbnailBgSmall">
                            <img src="{{ asset('assets/mall/img/warning.png') }}" width="63px" height="63px"
                                 alt="Error"/>
                        </div>

                        <p>
                            <span class="confirmTitle">Empty category</span>
                        </p>

                        <p>This category does not contain any items.</p>

                        <br class="clearfloat"/>
                    </div>
                </div>
            @endforelse
        </div>
        <div class="endContent"></div>
    </div>

    <script>
        // Initialize jScrollPane for custom scrollbar (works on all browsers including IE11)
        $(document).ready(function() {
            if (typeof $.fn.jScrollPane !== 'undefined') {
                $('#mainContent .dynContent').jScrollPane({
                    showArrows: true,
                    verticalGutter: 0,
                    horizontalGutter: 0,
                    animateScroll: true,
                    animateDuration: 300
                });
            }
        });
    </script>
@endsection
