@extends('layouts.site')

@section('js')
    
@endsection

@section('content')
    @if($item->unique_purchase == 1)
        <div class="alert alert-warning">
			<h3>One purchase!</h3>
			You can buy this item once per account!
        </div>
    @endif

    <h1>
      <img src="{{ asset('images/items/' . $item->vnum . '.png') }}">
      {{ $item->item->Name }}
      @if(!strpos($item->amount, '|')) x{{ $item->amount }} @endif
    </h1>
    @if ($item->description)
      {{ $item->description }}
    @endif

    <form method="post" class="mt-3">
        {{ csrf_field() }}
        <div class="card text-white bg-primary">
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="text-center">
                            <h4>Select your Character</h4>
                            <select class="custom-select" name="character" style="max-width: 200px;">
                                @foreach($characters as $character)
                                    <option value="{{ $character->CharacterId }}">{{ $character->Name }}</option>
                                @endforeach
                            </select>
                            <script></script>
                            @if(strpos($item->amount, '|'))
                                <h4>Choose the amount</h4>
                                <select class="custom-select" id="selectAmount" name="amount" style="max-width: 200px;">
                                    @foreach(explode('|', $item->amount) as $amount)
                                        <option value="{{ $amount }}">{{ $amount }}</option>
                                    @endforeach
                                </select>
                            @else
                            @endif
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center">
                            <h3>Price</h3>
                            <h4><img src="{{ asset('images/coins.png') }}"> <span id="price">{{ $item->price }}</span>
                                {{ config('nostale.coin_name') }}</h4>
                            <button onclick="var e=this;setTimeout(function(){e.disabled=true;},0);return true;" type="submit" class="btn btn-success btn-lg">Buy</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </form>
@endsection