@extends('theme::layouts.app-sro', ['alias' => 'AuctionHouse'])
@section('theme::title', __('reddington.seo.auctionshouse.showitem', ['name' => $item->item_name]))

@section('theme::content')
    <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12" style="min-width: 900px;">
        <div class="container">
            <div class="auction-house">
                <div class="row">
                    @if (session()->has('success'))
                        <div class="alert alert-success alert-dismissible fade show w-100" role="alert">
                            {{ session()->get('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if ($errors->any() || session()->has('error'))
                        <div class="alert alert-danger alert-dismissible fade show w-100" role="alert">
                            @foreach ($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach

                            @if (session()->has('error'))
                                <div>{{ session()->get('error') }}</div>
                            @endif

                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                    <div class="col-md-12 text-right">
                        <a href="{{ route('sro.auctions-house-silk') }}" type="button" class="btn btn-secondary">
                            {{ __('auctionshouse.add.back') }}
                        </a>
                    </div>
                    <div class="item-details col-md-6">
                        @if ($item->bids > 0)
                            <div class="detail-row text-center">
                                <span class="small mx-auto">
                                    {{ __('auctionshouse.showitem.current_bids', [
                                        'amount' => $item->bids,
                                    ]) }}
                                </span>
                            </div>
                        @endif
                        @if ($item->current_bid_user_id === $user->id)
                            <div class="detail-row">
                                <span class="small text-primary mx-auto">
                                    {{ __('auctionshouse.showitem.highest-user') }}
                                </span>
                            </div>
                        @endif
                        <div class="detail-row">
                            <span class="label">Item Info:</span>
                            <span class="value">
                                <div id="selectInventory">
                                    <div class="itemslot">
                                        <div class="image"
                                            style="background:url('{{ $item->imgpath }}')
                                                     no-repeat; background-size: 34px 34px;"
                                            data-iteminfo="1">
                                        </div>
                                    </div>
                                    <div class="itemInfo">
                                        @isset($item->tooltip)
                                            {!! $item->tooltip !!}
                                        @endisset
                                    </div>
                                </div>
                                {{ $item->item_name }}
                            </span>
                        </div>
                        <div class="detail-row">
                            <span class="label">Time Left:</span>
                            <span class="value time-left" id="time-left"></span>
                        </div>
                        <div class="detail-row">
                            <span class="label">Current Bid:</span>
                            <span class="value">{{ number_format($item->price, 0, ',', '.') }}</span>
                            <span class="currency">{{ __('reddington.silk') }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="label">Top Bidder:</span>
                            <span class="value">
                                @if ($item->current_bid_char_id)
                                    {{ \App\Http\Model\SRO\Shard\Char::find($item->current_bid_char_id)->CharName16 }}
                                @else
                                    NA
                                @endif
                            </span>
                        </div>
                        <div class="bid-section">
                            @if ($item->current_bid_user_id !== $user->id && count($user->getTbUser->getShardUser))
                                <form method="POST"
                                    action="{{ route('sro.auctions-house-silk-bid-item', ['id' => $item->id]) }}">
                                    @csrf
                                    <div style="margin-bottom: 10px; color: #ffd700;">Make your own Bid</div>

                                    <div class="d-flex justify-content-between">
                                        <div style="color: #ffd700;">
                                            <label for="auctionBidPrice" class="col-auto col-form-label">
                                                {{ __('auctionshouse.showitem.bid_price') }}
                                            </label>
                                            <input type="text" class="" id="auctionBidPrice" name="auctionBidPrice"
                                                value="{{ $item->price + 1 }}">
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary mb-2">
                                        {{ __('reddington.auctionhouse-silk.showitem.form.submit') }}
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                    <div class="item-image col-md-6">
                        <img src="{{ route('images.image', ['image'=> ($item->image) ? $item->image->filename : null]) }}" alt="{{ $item->item_name }}" />
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('theme::javascript')
    <script>
        $(document).ready(function() {
            $(document).tooltip({
                items: "[data-itemInfo], [title]",
                position: {
                    my: "left+5 center",
                    at: "right center"
                },
                content: function() {
                    let element = jQuery(this);
                    if (jQuery(this).prop("tagName").toUpperCase() === 'IFRAME') {
                        return;
                    }
                    if (element.is("[data-itemInfo]")) {
                        if (element.parent().parent().find('.itemInfo').html() === '') {
                            return;
                        }
                        return element.parent().parent().find('.itemInfo').html();
                    }
                    if (element.is("[title]")) {
                        return element.attr("title");
                    }
                },
                close: function(event, ui) {
                    $(".ui-helper-hidden-accessible").remove();
                }
            });
        });

        var countDownDate = new Date("{{ date('c', strtotime($item->until)) }}").getTime();

        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate - now;

            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor(
                (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
            );
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("time-left").innerHTML =
                days + "d " + hours + "h:" + minutes + "m:" + seconds + "s";

            if (distance < 0) {
                clearInterval(x);
                document.getElementById("time-left").innerHTML = "EXPIRED";
            }
        }, 1000);
    </script>
@endpush

@push('theme::css')
    <style>
        .auction-house {
            background: linear-gradient(135deg, #1f1f1f, #2a2a2a);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            margin: 30px auto;
            max-width: 900px;
        }

        h1 {
            text-align: center;
            font-size: 32px;
            color: #ffd700;
            margin-bottom: 30px;
            font-weight: 800;
        }

        .item-details {
            font-size: 16px;
        }

        .detail-row {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .detail-row .label {
            font-size: 18px;
            color: #ffd700;
            min-width: 150px;
            text-align: left;
        }

        .detail-row .value {
            background-color: #000;
            padding: 5px 10px;
            color: #fff;
            font-size: 18px;
            border-radius: 8px;
            flex-grow: 1;
            margin-left: 10px;
            text-align: left;
            display: flex;
            align-items: center;
        }

        .detail-row .currency {
            color: #ffd700;
            font-size: 18px;
            margin-left: 5px;
        }

        .time-left {
            color: #ff4d4d;
            font-weight: 600;
        }

        .bid-section {
            margin-top: 20px;
            text-align: center;
        }

        .bid-section input[type="text"],
        .bid-section select {
            padding: 10px;
            width: 150px;
            font-size: 16px;
            color: #eaeaea;
            border-radius: 8px;
            border: 1px solid #555;
            background: rgba(255, 255, 255, 0.05);
            margin-bottom: 10px;
            transition: all 0.3s ease;
        }

        .bid-section input[type="text"]:focus,
        .bid-section select:focus {
            border: 1px solid #ffd700;
            outline: none;
            background: rgba(255, 255, 255, 0.1);
        }

        .bid-section button {
            background: linear-gradient(135deg, #ff8c00, #ffc107);
            color: #121212;
            padding: 12px 25px;
            font-size: 16px;
            font-weight: 600;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .bid-section button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(255, 140, 0, 0.6);
        }

        .item-image img {
            width: 100%;
            max-width: 320px;
            border-radius: 15px;
            border: 5px solid #ffd700;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .item-image img:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(255, 215, 0, 0.8);
        }

        .item-image {
            text-align: center;
            margin-top: 20px;
        }


        .time-left {
            color: #ff4d4d !important;
        }

        .detail-row .itemslot {
            margin-right: 7px;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
        }

        @media (max-width: 768px) {
            .row {
                flex-direction: column;
            }

            .item-image {
                margin-top: 30px;
            }
        }
    </style>
@endpush