@section('js')


<script>
  $("#selectAmount").change(function () {
      $("#price").text({{ $item->price }} * $("#selectAmount").val()        )
  });
</script>
@endsection
<form method="post" class="" action="{{route('shop_buy', [$category_id, $item->id])}}">  
{{ csrf_token() }}
{{ csrf_field() }}
<div class="card mb-3 item__card" style="background-color: #FCFCF8;">
  <div class="col-12">
    <div class="row mt-4 ">
      <div class="col-4">
        <div>
          <img src="{{ asset('images/items/' . $item->vnum . '.png') }}" class="col-img pr-5" style="width: 152px; image-rendering:optimizeQuality;">

        </div>
      </div>
      <div class="col-8 d-flex flex-column">
        <h3 style="margin-bottom: 10px;">
          {{ $item->item->Name }}
        </h3>
        <p style="text-shadow: none; color: rgb(36,36,36)">
          {!!html_entity_decode($item->description )!!}
          <!--{{{ $item->description }}}-->
        </p>
      </div>
    </div>
    <div class="row mb-4 mx-auto">
      <div class="col-12 col-lg-12 pt-1  mb-4 mb-lg-0 @if(!strpos($item->amount, '|')) pb-4 @endif">      
        @if(strpos($item->amount, '|'))        
           
            <select class="custom-select mb-2" id="selectAmount" name="amount" style="max-width: 100px;">
                @foreach(explode('|', $item->amount) as $amount)
                    <option value="{{ $amount }}">{{ $amount }}</option>
                @endforeach
            </select>
        
        @else
        <input type="hidden" value="{{$item->amount}}" name="amount">
        @endif    
        <span class="mr-4" style="font-size: 25px; color: #666666;">@if(!strpos($item->amount, '|')) x{{ $item->amount }} @endif</span>
        <span id="price" style="color: #666666">{{ $item->price }}</span>
        <img src="{{asset("img/coins-solid.svg")}}" width="24px" style="color: white" alt="">
        <input type="hidden" value="" class="char-id" name="character">
      </div>
      <div class="col-8 mb-lg-0 " ">
        <select class="custom-select" name="character" style="max-width: 200px;">
          @foreach($characters as $character)
              <option value="{{ $character->CharacterId }}">{{ $character->Name }}</option>
          @endforeach
        </select>
      </div>
      
      <div class="col-4  d-flex " style="color: orange;">        
        <button style="background-color: transparent; border-radius: none; border: none;" type="submit"><i class="fas fa-shopping-cart"></i></button>   
      </div>
    </div>
  </div>  
</div>
</form>
<script>
  
</script>