@extends('layouts.app')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
  .select2-container .select2-selection--single {
    height: 34px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
  }
</style>
@endpush

@section('content')
<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="panel panel-default">
        <div class="panel-heading">Checkout</div>

        <div class="panel-body">
          <form id="checkout_selet_form" required method="post" action="/checkout" enctype="multipart/form-data" class=form-horizontal>
            {{ csrf_field() }}
            <div class=form-group>
              <label for=checkoutbiddernum class="col-sm-3 col-sm-offset-1 control-label">
                Select Bidder Number:
              </label>
              <div class=col-sm-4>
                <select name="checkoutbiddernum" id="checkoutbiddernum" required class=form-control>
                  <?php echo App\Helpers\WinningBidderSelectList::winningBidderShowNumbers(); ?>
                </select>
              </div>
            </div>
            <div class=form-group>
              <div class="col-sm-offset-5 col-sm-10">
                <button type="submit" value="Submit" class="btn btn-primary">Submit</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    $('#checkoutbiddernum').select2({
        placeholder: "Select a bidder",
        allowClear: true
    });
});
</script>
@endpush