@extends('layouts.mall')

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

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

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

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

        /* jScrollPane custom scrollbar styling for distribution (modern browsers) */
        .dynContent.distributionScrollable .jspContainer {
            overflow: hidden;
            position: relative;
	    height:362px !important;
	    width:390px !important;
	}

        .dynContent.distributionScrollable .jspPane {
            position: absolute;
        }

        .dynContent.distributionScrollable .jspVerticalBar {
            position: absolute;
            top: 0;
            right: 0px;
            width: 16px;
            height: 362px !important;
            background: transparent;
        }

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

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

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

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

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

        .dynContent.distributionScrollable .jspArrowUp {
            position: relative;
        }

        .dynContent.distributionScrollable .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;
        }

        .dynContent.distributionScrollable .jspArrowDown {
            position: relative;
        }

        .dynContent.distributionScrollable .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;
        }

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

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

        /* Chick Image Positioning */
        #wideMainContent {
            background: url({{ asset('assets/mall/img/wideMainContent.jpg') }}) no-repeat;
            position: relative;
            height: auto !important;
            min-height: 430px;
        }


#wideMainContent div.userdataHeadline h1 {
    float: left;
    display: block;
    background: url({{ asset('assets/mall/img/wideMainContent.png') }}) no-repeat transparent;
    width: 385px;
    height: 24px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    margin-top: 21px;
    margin-left: 5px;
    margin-bottom:7px;
    padding-left: 8px;
    line-height: 23px;
}

        .chickImage {
            position: absolute;
            right: 5px;
            top: 50px;
            z-index: 1;
            pointer-events: none;
        }

        .chickImage img {
            display: block;
            max-height: 350px;
            width: auto;
        }

        /* Distribution Container - narrower to move scrollbar left of chick */
        .dynContent.distributionScrollable {
            width: 390px;
            height: 362px;
            overflow-y: auto;
            padding-left: 10px;
        }

        /* Item Container Styling */
        .distributionItem {
            background: repeating-linear-gradient(0deg, #fef0cd 0, #fef0cd 1px, #fff 1px, #fff 3px);
            border-radius: 15px;
	    border: 1px solid #cebd9f;
            padding: 10px 12px;
            margin-bottom: 6px;
	}

        /* Add margin-right only when scrollbar is present */
        .jspScrollable .distributionItem {
            margin-right: 20px;
        }

        /* Alert margins when scrollbar is present */
        .jspScrollable .alert {
            margin: 0px 20px 7px 0 !important;
        }

        /* Top Row: Icon + Name + Description */
        .itemTopRow {
            display: block;
            margin-bottom: 8px;
        }

        /* Item Icon - Float left */
        .distributionItemIcon {

    height: 45px;
    width: 45px;
    background: #f5f0d8;
    border: 2px solid #b18b3c;
    border-radius: 5px;

            float: left;
            margin-right: 10px;
        }

.distributionItemIcon img {
    width: auto;
    height: 45px;
    margin: auto;
    /* border: 2px solid #b18b3c; */
    border-radius: 5px;
    display: block;
}

        /* Item Info */
        .itemInfo {
            overflow: hidden;
        }

        /* Item Name with Quantity */
        .itemName {
            font-weight: bold;
            font-size: 12px;
            color: #2a1a0f;
            margin-bottom: 3px;
        }

        /* Item Description */
        .itemDescription {
            color: #666;
            font-size: 10px;
            line-height: 1.3;
            max-height: 26px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        /* Bottom Row: Quantity Control - Centered */
        .itemControlRow {
            clear: both;
            text-align: center;
            padding-top: 8px;
        }

        .quantityRow {
            display: block;
            margin-bottom: 8px;
        }

        .quantityRow label {
            font-size: 10px;
            color: #444;
            margin-right: 5px;
        }

        .quantityRow input[type="number"] {
            width: 60px;
            padding: 3px 5px;
            border: 1px solid #b18b3c;
            border-radius: 3px;
            font-size: 11px;
        }

        /* Distribute Button using userdata button style */
        a.distributeButton {
            display: inline-block;
            vertical-align: middle;
            background: url({{ asset('assets/mall/img/userdataButton.png') }}) no-repeat transparent;
            width: 125px;
            height: 15px;
            color: #ffffff;
            text-decoration: none;
            font-weight: bold;
            padding: 4px 5px 5px;
            line-height: 15px;
            text-align: center;
            font-size: 11px;
            cursor: pointer;
            border: none;
        }

        a.distributeButton:hover {
            background: url({{ asset('assets/mall/img/userdataButtonGreen-hover.png') }}) no-repeat transparent;
        }

        button.distributeButton {
            display: block;
            margin: 0 auto;
            background: url({{ asset('assets/mall/img/userdataButton.png') }}) no-repeat transparent;
            width: 135px;
            height: 23px;
            color: #ffffff;
            text-decoration: none;
            font-weight: bold;
            padding: 0;
            line-height: 23px;
            text-align: center;
            font-size: 11px;
            cursor: pointer;
            border: none;
        }

        button.distributeButton:hover {
            background: url({{ asset('assets/mall/img/userdataButtonGreen-hover.png') }}) no-repeat transparent;
        }

        /* Custom HR Divider */
        .itemDivider {
            height: 1px;
            background: linear-gradient(to right, transparent, #d4a574 20%, #d4a574 80%, transparent);
            border: none;
            margin: 4px 0;
        }

        /* Clear floats */
        .distributionItem:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>

    <div id="wideMainContent">
        <div class="userdataHeadline">
            <h1>{{ __('mall/main.distribution.title') }} <a class="helpSmallTopic tip" href="?p=faq" title="{{ __('mall/main.distribution.help_tooltip') }}"></a></h1>
        </div>

        <!-- Right Chick Image -->
        <div class="chickImage">
            <img src="{{ asset('assets/mall/img/right_chick.png') }}" alt="Chick">
        </div>

        <div class="dynContent distributionScrollable">
            @if (session('success'))
                <div class="alert alert-success" style="margin: 0px 0 7px; padding: 10px; background: #d4edda; border: 1px solid #c3e6cb; color: #155724; border-radius: 8px;">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger" style="margin: 0px 0 7px; padding: 10px; background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; border-radius: 8px;">
                    {{ session('error') }}
                </div>
            @endif

            @if ($groupedItems->isEmpty())
                <div style="padding: 40px; text-align: center;">
                    <h2>{{ __('mall/main.distribution.no_items') }}</h2>
                    <p>{{ __('mall/main.distribution.no_items_description') }}</p>
                    <a href="{{ route('mall') }}" class="distributeButton">
                        {{ __('mall/main.distribution.go_to_shop') }}
                    </a>
                </div>
            @else
                @foreach ($groupedItems as $index => $group)
                    @php
                        $proto = $group->proto;
                        $vnum = (int) $group->vnum;
                        $mallItem = \App\Models\Mall\MallItem::where('vnum', $vnum)->first();
                        $imageFile = \App\Services\ItemIconService::getIconForVnum($vnum) ?? str_pad($vnum, 5, '0', STR_PAD_LEFT);
                        $totalCount = $group->total_count;
                        $stackCount = $group->stack_count;

                        // Get item description
                        $description = '';
                        if ($proto) {
                            $description = $proto->description ?? $proto->long_description ?? '';
                        }
                        if (empty($description) && $mallItem) {
                            $description = $mallItem->description ?? '';
                        }

                        // Format item name with quantity
                        $itemName = $proto ? $proto->localized_name : 'Unknown Item (vnum: ' . $group->vnum . ')';
                        if ($totalCount > 1) {
                            $itemName .= ' (x' . $totalCount . ')';
                        }
                    @endphp

                    <form method="POST" action="{{ route('mall.distribution.distribute') }}" class="distributionItemForm">
                        @csrf
                        <div class="distributionItem">
                            <!-- Top Row: Icon + Name + Description -->
                            <div class="itemTopRow">
                                <div class="distributionItemIcon">
                                    <img src="{{ asset('assets/mall/img/item/icon/' . $imageFile . '.png') }}"
                                         alt="{{ $itemName }}"
                                         onerror="this.src='{{ asset('assets/mall/img/error.png') }}'">
                                </div>
                                <div class="itemInfo">
                                    <div class="itemName">{{ $itemName }}</div>
                                    @if ($description)
                                        <div class="itemDescription">{{ $description }}</div>
                                    @endif
                                </div>
                            </div>

                            <!-- Bottom Row: Quantity Control - Centered -->
                            <div class="itemControlRow">
                                <div class="quantityRow">
                                    <label for="quantity_{{ $index }}">{{ __('mall/main.distribution.quantity_label') }}:</label>
                                    <input type="number"
                                           name="distributions[0][quantity]"
                                           id="quantity_{{ $index }}"
                                           min="1"
                                           max="{{ $totalCount }}"
                                           value="{{ $totalCount }}">
                                </div>
                                <input type="hidden" name="distributions[0][sample_id]" value="{{ $group->sample_id }}">
                                <button type="submit" class="distributeButton">
                                    {{ __('mall/main.distribution.distribute') }}
                                </button>
                            </div>
                        </div>

                        @if (!$loop->last)
                            <hr class="itemDivider">
                        @endif
                    </form>
                @endforeach
            @endif
        </div>
        <div class="endContent"></div>
    </div>

    <script>
        // Form validation for individual distribute buttons (IE11 compatible)
        $(document).ready(function() {
            $('.distributionItemForm').on('submit', function(e) {
                var input = $(this).find('input[type="number"]');
                var quantity = parseInt(input.val());

                if (quantity <= 0 || isNaN(quantity)) {
                    e.preventDefault();
                    alert('{{ __('mall/main.distribution.invalid_quantity') }}');
                    return false;
                }
            });
        });

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