<div>
    <div class="row mb-2">
        <label for="customer_id" class="col-md-4 col-form-label text-md-end">Customer</label>
        <div class="col-md-6">
            <select wire:change="updateContactList" wire:model="selectedCustomer" name="customer_id"
                    class="form-select form-select-sm" id="customer_id" autofocus required>
                @foreach($customers as $customer)
                    <option value="{{$customer->id}}" {{ old('customer_id') == $customer->id ? "selected" : "" }}>
                        {{$customer->company_name}}
                    </option>
                @endforeach()
            </select>

            @error('customer_id')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
    </div>

    <div class="row mb-2">
        <label for="contact_id" class="col-md-4 col-form-label text-md-end">Contact</label>
        <div class="col-md-6">
            @if(isset($contacts))
                <select wire:model="contacts" wire:key="{{$customer}}" name="contact_id"
                        class="form-select form-select-sm" id="contact_id">
                    <option value=""></option>
                    @foreach($contacts as $contact)
                        <option value="{{$contact->id}}" {{ old('contact_id') == $contact->id ? "selected" : "" }}>
                            {{$contact->full_name}}
                        </option>
                    @endforeach
                </select>

                @error('contact_id')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            @endif
        </div>
    </div>
</div>
