{{-- In this component, we pass both the `name` and its `value` dynamically. The `name` represents the input's
identifier, which is crucial for form submission and validation.
The `value` corresponds to the actual data that the input holds. Passing these two properties is essential because they
allow the component to adapt to varying use cases. Specifically:
1. **Dynamic Handling**: By passing the `name` and `value`, the component can dynamically handle different input fields
and their corresponding values. This is particularly useful when dealing with forms where field names and values might
change based on the context or user input.
2. **Consistency with API Responses**: Often, the names used for inputs in a form might differ from the keys in API
responses. By providing both `name` and `value`, the component ensures that it can correctly map form fields to their
respective values even if the API response keys are different.
3. **Flexibility**: This approach offers flexibility in managing forms, making it easier to handle scenarios where field
names and values might be dynamically generated or modified. It supports various use cases and ensures that the
component remains robust and adaptable.
Overall, passing both `name` and `value` helps in maintaining consistency between the form's input fields and the data
they represent, facilitating easier data management and interaction. --}}
{{-- Default to an empty JSON object to data variable to handle for add form and edit form--}}
@props(['title', 'name', 'name-value', 'email', 'email-value', 'phone', 'phone-value', 'data' => '{}'])
{{ $title }}
{{-- Convert JSON response to Associative array --}}
@forelse (json_decode($data, true) ?? [] as $index => $utility)
@if($index != 0)
{{-- hide delete button in fist iteration because manimum one is required --}}
@endif