company-info.blade.php

<div id="company-info">

    <form wire:submit.prevent="saveAndAdvance">

        <fieldset class="text-left mb-8 p-4 rounded-lg border-2 border-blue-200 w-full">

            <legend class="text-xl uppercase text-blue-500">
                General Information
            </legend>

            <div class="flex text-left space-x-8">
                <div class="w-1/3">
                    <x-form.vee-group class="mb-8"
                                      label="Legal Business Name"
                                      for="legal_name"
                                      :error="$errors->first('company.legal_name')"
                                      cornerText="Required">
                        <x-input.text wire:model.lazy="company.legal_name" />
                    </x-form.vee-group>
                </div>

                <div class="w-1/3">
                    <x-form.vee-group class="mb-8"
                                  label="Operating (Doing Business) As"
                                  for="dba">
                        <x-input.text wire:model.lazy="company.dba" />
                    </x-form.vee-group>
                </div>

                <div class="w-1/3">
                    <x-form.vee-group class="mb-8"
                                  label="Country"
                                  for="country"
                                  :error="$errors->first('company.country')"
                                  cornerText="Required">
                        <x-input.select wire:model="company.country">
                            <option value="">Select...</option>
                            @foreach($countries as $country)
                                <option value="{{optional($country)->iso}}">
                                    {{optional($country)->country}}
                                </option>
                            @endforeach
                        </x-input.select>
                    </x-form.vee-group>
                </div>
            </div>

            <div class="flex text-left space-x-8">
                <div class="w-1/3">
                    <x-form.vee-group class="mb-8"
                                      label="Physical Address"
                                      for="address"
                                      :error="$errors->first('company.address')"
                                      cornerText="Required">
                        <x-input.text wire:model.lazy="company.address" />
                    </x-form.vee-group>
                </div>

                <div class="w-1/3">
                    <x-form.vee-group class="mb-8"
                                  label="Physical Address 2"
                                  for="address2">
                        <x-input.text wire:model.lazy="company.address2" />
                    </x-form.vee-group>
                </div>

                <div class="w-1/3">
                    @if($company['country'] !== 'US')
                        <x-form.vee-group class="mb-8"
                                          label="Physical Address 3"
                                          for="address3"
                                          :error="$errors->first('company.address3')"
                                          cornerText="required">
                            <x-input.text wire:model.lazy="company.address3" />
                        </x-form.vee-group>
                    @endif
                </div>
            </div>

            @if($company['country'] === 'US')
                <div class="flex text-left space-x-8">
                    <div class="w-1/3">
                        <x-form.vee-group class="mb-8"
                                          label="City"
                                          for="city"
                                          :error="$errors->first('company.city')"
                                          cornerText="required">
                            <x-input.text wire:model.lazy="company.city" />
                        </x-form.vee-group>
                    </div>

                    <div class="w-1/3">
                        <x-form.vee-group class="mb-8"
                                          label="State"
                                          for="state"
                                          :error="$errors->first('company.state')"
                                          cornerText="required">
                            <x-input.select wire:model="company.state">
                                <option value="">Select...</option>
                                @foreach($states as $state)
                                    <option value="{{optional($state)->abbreviation}}">
                                        {{optional($state)->state}}
                                    </option>
                                @endforeach
                            </x-input.select>
                        </x-form.vee-group>
                    </div>

                    <div class="w-1/3">
                        <x-form.vee-group class="mb-8"
                                          label="Postal Code"
                                          for="zip"
                                          :error="$errors->first('company.zip')"
                                          cornerText="required">
                            <x-input.text wire:model.lazy="company.zip" />
                        </x-form.vee-group>
                    </div>
                </div>
            @endif

            <div class="flex text-left space-x-8">
                <div class="w-1/3">
                    <x-form.vee-group class="mb-8"
                                  label="Phone"
                                  for="phone">
                        <x-input.text wire:model.lazy="company.phone" />
                    </x-form.vee-group>
                </div>

                <div class="w-1/3">
                    <x-form.vee-group class="mb-8"
                                  label="Fax"
                                  for="fax">
                        <x-input.text wire:model.lazy="company.fax" />
                    </x-form.vee-group>
                </div>

                <div class="w-1/3">
                    <x-form.vee-group class="mb-8"
                                  label="Main Email"
                                  for="email">
                        <x-input.email wire:model.lazy="company.email" />
                    </x-form.vee-group>
                </div>
            </div>

            <div class="flex text-left space-x-8">
                <div class="w-1/3">
                    <x-form.vee-group class="mb-8"
                                  label="Cage Code"
                                  for="cage">
                        <x-input.text wire:model.lazy="company.cage" />
                    </x-form.vee-group>
                </div>

                <div class="w-1/3">
                    <x-form.vee-group class="mb-8"
                                  label="NAICS Code"
                                  for="naics">
                        <x-input.text wire:model.lazy="company.naics" />
                    </x-form.vee-group>
                </div>

                <div class="w-1/3">
                    <x-form.vee-group class="mb-8"
                                  label="Website"
                                  for="uri">
                        <x-input.text wire:model.lazy="company.uri" />
                    </x-form.vee-group>
                </div>
            </div>

        </fieldset>

        <div class="mb-4 flex justify-center">
            <x-buttons.submit label="Continue" />
        </div>
    </form>
</div>