<h2 class="mt-3">Rechnungsdetails</h2>
<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label for="billing_firstname">Vorname <span class="required">*</span></label>
            {!! Form::text('billing_firstname', '', ['class' => 'form-control ' . ($errors->has('billing_firstname') ? 'error' : ''), 'id' => 'billing_firstname', 'required' => true]) !!}
            @if ($errors->has('billing_firstname'))
                <label for="billing_firstname" class="error text-danger small"
                    style="display: block;">{{ $errors->first('billing_firstname') }}</label>
            @endif
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label for="billing_lastname">Nachname <span class="required">*</span></label>
            {!! Form::text('billing_lastname', '', ['class' => 'form-control ' . ($errors->has('billing_lastname') ? 'error' : ''), 'id' => 'billing_lastname', 'required' => true]) !!}
            @if ($errors->has('billing_lastname'))
                <label for="billing_lastname" class="error text-danger small"
                    style="display: block;">{{ $errors->first('billing_lastname') }}</label>
            @endif
        </div>
    </div>
    <div class="col-12">
        <div class="form-group">
            <label for="billing_state">Land / Region <span class="required">*</span></label>
            <select id="billing_state" name="billing_state" class="form-control selectpicker"
                data-style="btn-default" required>
                {!! HTMLHelper::getCountriesForShipping(Yard::instance('shopping')->getShippingCountryId(), false, 2) !!}
            </select>
        </div>
    </div>
    <div class="col-12">
        <div class="form-group">
            <label for="billing_address">Straße + Hausnummer <span
                    class="required">*</span></label>
            {!! Form::text('billing_address', '', ['class' => 'form-control ' . ($errors->has('billing_address') ? 'error' : ''), 'id' => 'billing_address', 'required' => true]) !!}
            @if ($errors->has('billing_address'))
                <label for="billing_address" class="error text-danger small"
                    style="display: block;">{{ $errors->first('billing_address') }}</label>
            @endif
        </div>
    </div>

    <div class="col-sm-6">
        <div class="form-group">
            <label for="billing_zipcode">PLZ <span class="required">*</span></label>
            {!! Form::text('billing_zipcode', '', ['class' => 'form-control ' . ($errors->has('billing_zipcode') ? 'error' : ''), 'id' => 'billing_zipcode', 'required' => true]) !!}
            @if ($errors->has('billing_zipcode'))
                <label for="billing_zipcode" class="error text-danger small"
                    style="display: block;">{{ $errors->first('billing_zipcode') }}</label>
            @endif
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label for="billing_city">Stadt <span class="required">*</span></label>
            {!! Form::text('billing_city', '', ['class' => 'form-control ' . ($errors->has('billing_city') ? 'error' : ''), 'id' => 'billing_city', 'required' => true]) !!}
            @if ($errors->has('billing_city'))
                <label for="billing_city" class="error text-danger small"
                    style="display: block;">{{ $errors->first('billing_city') }}</label>
            @endif
        </div>
    </div>
    <div class="col-12">
        <div class="form-group">
            <label for="billing_email">E-Mail <span class="required">*</span></label>
            {!! Form::email('billing_email', '', ['class' => 'form-control ' . ($errors->has('billing_email') ? 'error' : ''), 'id' => 'billing_email', 'required' => true]) !!}
            @if ($errors->has('billing_email'))
                <label for="billing_email" class="error text-danger small"
                    style="display: block;">{{ $errors->first('billing_email') }}</label>
            @endif
        </div>
    </div>

</div>


<script>
    $(document).ready(function() {

        $('#invoice_details_holder select').selectpicker();
        
        var validator = $("#shop-form-validations").validate({
            submitHandler: function(form) {
                $('.button-prevent-multiple-submits').attr('disabled', true);
                $('.button-prevent-multiple-submits').find('.spinner').show();
                form.submit();
            },
            errorPlacement: function errorPlacement(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error.addClass('invalid-feedback d-block'));
                } else {
                    error.insertAfter(element).addClass('invalid-feedback small d-block');
                }
            },
            highlight: function( element, errorClass, validClass ) {
                if($(element).hasClass('selectpicker')){
                    $(element).parent('.form-control').find('.dropdown-toggle').addClass( errorClass ).removeClass( validClass );
                }else if ( element.type === "radio" ) {
                    this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
                } else {
                    $( element ).addClass( errorClass ).removeClass( validClass );
                }
            },
            unhighlight: function( element, errorClass, validClass ) {
                if($(element).hasClass('selectpicker')){
                    $(element).parent('.form-control').find('.dropdown-toggle').removeClass( errorClass ).addClass( validClass );
                } else if ( element.type === "radio" ) {
                    this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
                } else {
                    $( element ).removeClass( errorClass ).addClass( validClass );
                }
            },
            messages: {
                user_free_product_id: {
                  required: "Bitte ein Produkt auswählen.",
                },
                switchers_shipping: {
                    required: "Bitte eine Auswahl treffen.",
                },
                payment_method: {
                    required: "Bitte eine Zahlungsart auswählen.",
                }
              }
        });

        $('select.revalidat').on('change', function () {
            validator.element($(this));
        });
    });
</script>