To use the Blade component for both creating and editing forms, you can pass in the existing model data as a prop to the component. You can then use this data to set the default values for your form fields. Additionally, to ensure that the script appears at the bottom with the rest of the scripts, you can use Blade's stack directive.
Here's how you can modify your Blade component to accept a model prop and use it to set default values:
{{-- Begin FireOps Geocoder --}}
<div id="geocoder" name="geocoder">
{{-- ... other fields ... --}}
{{-- Example for the street field --}}
<input type="text" id="street" name="street"
class="form-control @error('street') is-invalid @enderror"
value="{{ old('street', $model->street ?? '') }}">
@error('street')
<span class="invalid-feedback">
{{ $message }}
</span>
@enderror
{{-- ... other fields ... --}}
</div>
{{-- End FireOps Geocoder --}}
In the above example, old('street', $model->street ?? '') will first check for an old input value (which is useful when validation fails and the page is reloaded). If there's no old input, it will use the street attribute from the passed model. If model is not set (like in a create form), it will default to an empty string.
To use this component in a create or edit form, you can do the following:
{{-- Create form --}}
<x-geocoder />
{{-- Edit form --}}
<x-geocoder :model="$existingModelInstance" />
For the script, you can push it to a stack that is yielded at the bottom of your layout file. Here's how you can do that:
In your component (geocoder.blade.php), replace the script tags with the following:
@push('scripts')
<script>
// Your JavaScript code here
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initAutocomplete"></script>
@endpush
Then, in your main layout file (e.g., layouts/app.blade.php), you should have something like this at the bottom, before the closing </body> tag:
{{-- Other scripts --}}
@stack('scripts')
</body>
This will ensure that the scripts from your component are included at the bottom of the page, along with any other scripts you might have. Remember to replace GOOGLE_MAPS_API_KEY with the actual environment variable that holds your Google Maps API key.