@extends('layouts.old')

{{-- view specific CSS code --}}
@section('view-css')
    <link rel="stylesheet" href="{{ mix('/css/views/loot_singular.css') }}">
    <link rel="stylesheet" href="{{ mix('/css/views/loot_modals.css') }}">
@stop

{{-- view special JS code --}}
@section('special-js')
    <script src="{{ mix('/js/views/loot_modals.js') }}"></script>
    <script src="{{ mix('/js/views/loot_singular.js') }}"></script>
@stop

{{-- view main content --}}
@section('view-content')


@php

$view_items_copy = $view_items;
$MAX_ROWS = $consts['MAX_ROWS'];

@endphp


<div class="view-76 view-loot-singular" data-collection-id="{{$collection_id}}">
    <div class="modal-on-load" data-modal-finalize="{{$modal_finalize}}"></div>
    <div class="modal-data-after-loot" data-api-url="{{route('api_post_trade_action')}}"></div>
    <!-- loot -->
    <section class="pt-loot">
        <div class="st-bleed">
            <div class="st-cnt">

                <div class="info-tickets">
                    <div class="label-info">
                        Your tickets:
                    </div>
                    <div class="group">
                        <div class="value">
                            {{$user_loot_data['tickets']}}
                        </div>
                        <div class="icon">
                            <img loading="lazy" src="{{mix('/images/svg/views/loot/icons/ticket-double.svg')}}" alt="">
                        </div>
                    </div>
                </div>

                <div class="loot-wrap">

                    <div class="misc-picker top">
                        <img loading="lazy" src="{{mix('/images/svg/views/loot/misc/loot-machine-picker-bottom.svg')}}" alt="">
                    </div>

                    @for($i = 0; $i < $MAX_ROWS; $i++)
                        @if($i > 0)
                        <div class="loot-worker {{($i > 0) ? 'worker-hidden' : 'worker-static'}}" data-worker-id="{{$i}}" style="height: 0;">
                        @else
                        <div class="loot-worker {{($i > 0) ? 'worker-hidden' : 'worker-static'}}" data-worker-id="{{$i}}">
                        @endif
                            <div class="items">

                                @php
                                    shuffle( $view_items_copy );
                                @endphp
                                @foreach($view_items_copy as $item)

                                <div class="single-item item-id-{{$item['id']}}" data-id="{{$item['id']}}" data-chance="{{$item['chance']}}">
                                    <div class="content-wrapper">
                                        <div class="item-class {{$item['label_icon']}}">
                                            <div class="label">{{$item['label']}}</div>
                                        </div>
                                        <div class="image" style="background-image: url({{mix('/images/temp/loot/'.$item['image'].'.png')}});">
                                        </div>
                                    </div>
                                </div>

                                @endforeach


                            </div>
                        </div>
                    @endfor

                    <div class="legend">
                        <div class="row">
                            <div class="col-left">
                                <div class="collection-ribbon nerdminator">
                                    <div class="icon">
                                        <img loading="lazy" src="{{mix('/images/svg/views/loot/icons/nerdminator.svg')}}" alt="">
                                    </div>
                                    <div class="label">
                                        Nerdminator collection
                                    </div>
                                </div>
                                <div class="collection-label">
                                    <h4 class="label">
                                        Action stuff
                                    </h4>
                                </div>
                            </div>
                            <div class="col-right">
                                <div class="collection-cost">
                                    <div class="image">
                                        <img loading="lazy" src="{{mix('/images/svg/views/loot/icons/ticket-double.svg')}}" alt="">
                                    </div>
                                    <div class="value">
                                        {{$view_details['roll_cost']}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="misc-scale">
                        <img loading="lazy" src="{{mix('/images/svg/views/loot/misc/loot-machine-scale.svg')}}" alt="">
                    </div>

                    <div class="misc-picker bottom">
                        <img loading="lazy" src="{{mix('/images/svg/views/loot/misc/loot-machine-picker-bottom.svg')}}" alt="">
                    </div>

                    <div class="misc-horizontal-picker"></div>

                </div>
            </div>
        </div>
    </section>

    <section class="pt-controls">
        <input type="hidden" class="api-loot-action-url" value="{{route('api_post_loot_action')}}">
        <div class="st-bleed">
            <div class="st-cnt">
                <div class="row">
                    <div class="col-left">
                        <button class="test-wrap">
                            <div class="label">
                                Test
                            </div>
                            <div class="button-wrap">
                                <div class="btn-test">
                                    T
                                </div>
                            </div>
                        </button>
                        <button class="buy-tickets-wrap">
                            <div class="button-wrap">
                                <div class="btn-ticket">
                                    <img loading="lazy" src="{{mix('/images/svg/views/loot/icons/ticket-single.svg')}}" alt="">
                                </div>
                            </div>
                            <div class="label">
                                Buy tickets
                            </div>
                        </button>
                    </div>
                    <div class="col-right">
                        <button class="loot-it-wrap">
                            <div class="btn-loot">
                                <div class="icon">
                                    <img loading="lazy" src="{{mix('/images/svg/views/loot/misc/loot-machine-button-loot-icon.svg')}}" alt="">
                                </div>
                                <div class="label">
                                    Loot it!
                                </div>
                            </div>
                        </button>
                        <div class="multiplication-wrap">
                            <div class="label">
                                Multiplication:
                            </div>
                            <div class="items-wrap">
                                <button class="btn-wrap current">
                                    <div class="btn" data-count="1">
                                        x1
                                    </div>
                                </button>
                                <button class="btn-wrap">
                                    <div class="btn" data-count="2">
                                        x2
                                    </div>
                                </button>
                                <button class="btn-wrap">
                                    <div class="btn" data-count="3">
                                        x3
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </section>

    <section class="pt-offer">
        <div class="st-bleed">
            <div class="st-cnt">
                <div class="st-head">
                    <h3 class="title">All possible rewards from this Loot Can</h3>
                    <div class="box">
                        <div class="row">
                            <div class="col-left">
                                <p class="desc">This is the full list of rewards that are in the selected can. Each time you open the can you have chance to take one of them. Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet. Ipsum dolor sit amet...</p>
                            </div>
                            <div class="col-right">
                                <div class="items-count">
                                    <div class="boxed">
                                        43
                                    </div>
                                    <div class="label">
                                        Items
                                    </div>
                                </div>
                                <div class="value-price">
                                    <div class="label">
                                        Value
                                    </div>
                                    <div class="value">
                                        592.10 EUR
                                    </div>
                                </div>
                                <div class="rating">
                                    <div class="cnt">
                                        <div class="list-icon value-35">
                                            <div class="icon"></div>
                                            <div class="icon"></div>
                                            <div class="icon"></div>
                                            <div class="icon"></div>
                                            <div class="icon"></div>
                                        </div>
                                        <div class="value">3.7</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pt-content">
        <div class="st-bleed">
            <div class="st-cnt">
                <div class="listing">
                    @foreach($view_items as $item)
                    <div class="item" data-id="{{$item['id']}}">
                            <div class="top">
                                <div class="left">
                                    <div class="stars">
                                        @switch($item['label_icon'])
                                            @case('v2')
                                                <div class="star small white"></div>
                                                <div class="star small white"></div>
                                            @break

                                            @case('v3')
                                                <div class="star small yellow"></div>
                                                <div class="star small yellow"></div>
                                                <div class="star small yellow"></div>
                                            @break

                                            @case('v4')
                                                <div class="star big yellow"></div>
                                            @break

                                            @default
                                                <div class="star small black"></div>
                                            @break
                                        @endswitch
                                    </div>
                                    <div class="label">
                                        {{$item['label']}}
                                    </div>
                                </div>
                                <div class="right">
                                    <div class="price">
                                        59.99 EUR
                                    </div>
                                </div>
                            </div>
                            <div class="border">
                                <div class="middle">
                                    <div class="image" style="background-image: url({{mix('/images/temp/loot/squared/'.$item['image'].'.png')}});"></div>
                                    @switch($item['platform'])
                                        @case('origin')
                                            <div class="platform origin"></div>
                                        @break

                                        @default
                                            <div class="platform steam"></div>
                                        @break
                                    @endswitch
                                    <div class="on-hover">
                                        <div class="box-wrap">
                                            <div class="box-label">
                                                View details
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <h3 class="item-name">
                                        {{$item['title']}}
                                    </h3>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <section class="pt-recommend">
        <div class="st-bleed">
            <div class="st-cnt">
                <div class="st-head">
                    <div class="image-left">
                        <img loading="lazy" src="{{mix('/images/svg/views/loot/naro-with-machine.svg')}}" alt="">
                    </div>
                    <h4 class="title">
                        Recommended for you:
                    </h4>
                    <div class="image-right">
                        <img loading="lazy" src="{{mix('/images/svg/views/loot/walle.svg')}}" alt="">
                    </div>
                </div>
                <div class="st-box">
                    <div class="row">
                        @for($i = 0; $i < 3; $i++)
                        <div class="item animated-border">
                            <div class="head">
                                <div class="col-left">
                                    <div class="collection-ribbon nerdminator">
                                        <div class="icon">
                                            <img loading="lazy" src="{{mix('/images/svg/views/loot/icons/nerdminator.svg')}}" alt="">
                                        </div>
                                        <div class="label">
                                            Nerdminator collection
                                        </div>
                                    </div>
                                    <div class="title">
                                        Ninja inventory
                                    </div>
                                </div>
                                <div class="col-right">
                                    <div class="icon-tickets">
                                        <img loading="lazy" src="{{mix('/images/svg/views/loot/icons/ticket-double.svg')}}" alt="">
                                    </div>
                                    <div class="label-tickets">
                                        55
                                    </div>
                                </div>
                            </div>
                            <div class="bottom">
                                <div class="details">
                                    <div class="items-count">
                                        <div class="boxed">
                                            43
                                        </div>
                                        <div class="label">
                                            Items
                                        </div>
                                    </div>
                                    <div class="value-price">
                                        <div class="label">
                                            Value
                                        </div>
                                        <div class="value">
                                            592.10 EUR
                                        </div>
                                    </div>
                                    <div class="rating">
                                        <div class="cnt">
                                            <div class="icon"></div>
                                            <div class="label">rating</div>
                                            <div class="value">3.7</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="image">
                                    <img loading="lazy" src="{{mix('/images/svg/views/loot/offer.svg')}}" alt="">
                                </div>
                                <div class="action">
                                    <div class="btn btn-preview">
                                        View collection
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endfor
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- loot modals -->
    @include('purchase.loot.modals.buy_tickets')
    @include('purchase.loot.modals.after_loot')
    @include('purchase.loot.modals.finalize')
    @include('purchase.loot.modals.item_sold')
    @include('purchase.loot.modals.preview_item')

    <!-- loot modal loader -->
    @include('purchase.loot.modals.loader')

</div>



@stop