@props(['counterOffers' => []])


<div id="property-negotiation-counter-offer-div" style="{{ (isset($counterOffers) && !empty($counterOffers)) ? '' : 'display:none;' }}">
    <div class="col-md-12 mb-3 property-negotiation-counter-offer-section">

        @forelse ($counterOffers as $counterOffer)
        <div class="row mt-4">
            <div class="col-md-3">
                <x-input-label for="Title" :value="__('Title')" />
                <x-text-input name="counter_title[]" placeholder="Enter counter title"
                    :value="old('counter_title', $counterOffer['counter_title'] ?? '')" />
            </div>
            <div class="col-md-3">
                <x-input-label for="Date" :value="__('Date')" />
                <x-text-input type="Date" name="counter_date[]"
                    :value="old('counter_date', $counterOffer['counter_date'] ?? '')" />
            </div>
            <div class="col-md-2">
                <label for="" class="form-label">Status</label>
                <select class="form-control form-control-sm counter-status" name="counter_status[]">
                    <option selected value="">Select Option</option>
                    <option value="accept" @selected(old('counter_status', $counterOffer['counter_status'])=='accept' )>
                        Accept</option>
                    <option value="counter" @selected(old('counter_status', $counterOffer['counter_status'])=='counter'
                        )>Counter</option>
                    <option value="reject" @selected(old('counter_status', $counterOffer['counter_status'])=='reject' )>
                        Reject</option>
                </select>
            </div>
            <div class="col-md-4 pe-5">
                <x-text-area name="counter_notes[]" cols="3" rows="2" placeholder="Enter counter notes here"
                    :value="old('counter_notes', $counterOffer['counter_notes'] ?? '')" />
            </div>
            <span class="position-absolute px-1 w-auto" style="right: 1% !important ;">
                <i
                    class="border border-1 border-light fa-plus fa-solid p-1 py-2 rounded-5 text-primary mb-2 add-property-negotiation-counter-offer-inputs"></i>
                <br>
                @if($loop->index != 0)
                <i
                    class="border border-1 border-light fa-solid fa-trash p-1 py-2 rounded-5 text-danger delete-inputs"></i>
                @endif
            </span>
        </div>
        @empty
        <div class="row mt-4">
            <div class="col-md-3">
                <x-input-label for="Title" :value="__('Title')" />
                <x-text-input name="counter_title[]" placeholder="Enter counter title" />
            </div>
            <div class="col-md-3">
                <x-input-label for="Date" :value="__('Date')" />
                <x-text-input type="Date" name="counter_date[]" />
            </div>
            <div class="col-md-2">
                <label for="" class="form-label">Status</label>
                <select class="form-control form-control-sm counter-status" name="counter_status[]">
                    <option selected value="">Select Option</option>
                    <option value="accept">Accepted</option>
                    <option value="counter">Countered</option>
                    <option value="reject">Reject </option>
                </select>
            </div>
            <div class="col-md-4 pe-5">
                <x-text-area name="counter_notes[]" cols="3" rows="2" placeholder="Enter counter notes here" />
            </div>
            <span class="position-absolute px-1 w-auto" style="right: 1% !important ;">
                <i
                    class="border border-1 border-light fa-plus fa-solid p-1 py-2 rounded-5 text-primary mb-2 add-property-negotiation-counter-offer-inputs"></i>
            </span>
        </div>
        @endforelse
    </div>
</div>