@props(['title', 'notes'])

@aware(['insurance'])

<div class="order-insurance-section border border-1 p-3">

    {{-- form edit form  --}}
    @isset($insurance)
    @forelse (array_reverse($insurance) as $insurance)
    <div class="row order-insurance-form-section mb-2">
        <div class="col-md-3">
            <x-input-label for="title" :value="__('Title')" />
            <x-text-input name="{{ $title }}" placeholder="Enter Title"
                :value="old($title, $insurance['residential_insurances_titles'] ?? '')" />
        </div>
        <div class="col-md-8">
            <x-text-area name="{{ $notes }}" rows="2" placeholder="Enter Notes"
                :value="old($notes, $insurance['residential_insurances_notes'] ?? '')" />
        </div>
        <div class="align-items-center col-md-1 d-flex justify-content-center pt-2">
            <i
                class="add-order-insurance-inputs border border-1 border-light fa-plus fa-solid p-1 py-2 rounded-5 text-primary me-1"></i>
            <i class=" delete-inputs border border-1 border-light fa-trash fa-solid p-1 py-2 rounded-5 text-danger"></i>
        </div>
    </div>
    @empty
    <div class="row order-insurance-form-section">
        <div class="col-md-3">
            <x-input-label for="title" :value="__('Title')" />
            <x-text-input name="{{ $title }}" placeholder="Enter Title" />
        </div>
        <div class="col-md-8">
            <x-text-area name="{{ $notes }}" rows="2" placeholder="Enter Notes" />
        </div>
        <div class="align-items-center col-md-1 d-flex justify-content-center pt-2">
            <i
                class="add-order-insurance-inputs border border-1 border-light fa-plus fa-solid p-1 py-2 rounded-5 text-primary"></i>
        </div>
    </div>
    @endforelse
    @endisset


    {{-- for create form  --}}
    @empty($records)
    <div class="row order-insurance-form-section">
        <div class="col-md-3">
            <x-input-label for="title" :value="__('Title')" />
            <x-text-input name="{{ $title }}" placeholder="Enter Title" />
        </div>
        <div class="col-md-8">
            <x-text-area name="{{ $notes }}" rows="2" placeholder="Enter Notes" />
        </div>
        <div class="align-items-center col-md-1 d-flex justify-content-center pt-2">
            <i
                class="add-order-insurance-inputs border border-1 border-light fa-plus fa-solid p-1 py-2 rounded-5 text-primary"></i>
        </div>
    </div>
@endempty
</div>