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

<div class="col-md-12">
    <h6 class="text-primary">Tour Property With Agent</h6>

    <div class="row mt-2 " id="visited-property">
    @forelse ($visitedProperties as $index => $visitedProperty)
        <div class="row mt-2 mx-0 border border-2 p-1 rounded">
            <div class="col-11">
                <div class="row">
                    <div class="col-md-4">
                        <x-input-label for="address" :value="__('Address')" />
                        <x-text-input name="buyer_lender_address[]" placeholder="Enter Address"
                            :value="old('buyer_lender_address', $visitedProperty['buyer_lender_address'] ?? '')" />
                    </div>
                    <div class="col-md-4">
                        <x-input-label for="Price" :value="__('Price')" />
                        <div class="input-group mb-3">
                            <span class="input-group-text">$</span>
                            <input type="number" class="form-control form-control-sm" placeholder="45640000"
                                name="buyer_lender_price[]"
                                value="{{ old('buyer_lender_price', $visitedProperty['buyer_lender_price'] ?? '') }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <x-input-label for="File" :value="__('File')" />
                        <x-text-input type="file" name="buyer_lender_file[]" />
                    </div>
                    <div class="col-md-4 mt-4">
                        <div class="form-check pt-2">

                            <input class="form-check-input purchase-agreement-send-checkbox me-2" type="checkbox"
                                name="buyer_lender_purchase_agreement[]" value="true"
                                id="purchaseAgreementSend_{{ $index }}" @checked(old('buyer_lender_purchase_agreement',
                                $visitedProperty['buyer_lender_purchase_agreement'])==1)>
                            <label for="purchaseAgreementSend_{{ $index }}" class="form-label mt-1">
                                Purchase Agreement Sent
                            </label>
                        </div>
                    </div>

                    <div class="col-md-4 mt-2 purchase-agreement-send-section"
                        style="{{ ($visitedProperty['buyer_lender_purchase_agreement'] == 1) ? '' : 'display:none' }}">
                        <x-input-label for="Status" :value="__('Status')" />
                        <select class="form-control form-control-sm property-visited-status"
                            name="buyer_lender_status[]" id="buyer_lender_status_{{ $index }}">
                            <option value="" @selected(old('buyer_lender_status.' . $index,
                                $visitedProperty['buyer_lender_status'])=='' )>Select one</option>
                            <option value="accept" @selected(old('buyer_lender_status.' . $index,
                                $visitedProperty['buyer_lender_status'])=='accept' )>Accept</option>
                            <option value="counter" @selected(old('buyer_lender_status.' . $index,
                                $visitedProperty['buyer_lender_status'])=='counter' )>Counter</option>
                            <option value="reject" @selected(old('buyer_lender_status.' . $index,
                                $visitedProperty['buyer_lender_status'])=='reject' )>Reject</option>
                        </select>
                    </div>
                    <div class="col mt-1">
                        <x-text-area name="buyer_lender_notes[]" rows="3" placeholder="Write Notes about property"
                            :value="old('buyer_lender_notes', $visitedProperty['buyer_lender_notes'] ?? '')" />
                    </div>
                </div>
            </div>
        </div>

    @empty
    
        <div class="row mt-2 mx-0 border border-2 p-1 rounded">
            <div class="col-11">
                <div class="row">
                    <div class="col-md-4">
                        <x-input-label for="address" :value="__('Address')" />
                        <x-text-input name="buyer_lender_address[]" placeholder="Enter Address " />
                    </div>
                    <div class="col-md-4">
                        <x-input-label for="Price" :value="__('Price')" />
                        <div class="input-group mb-3">
                            <span class="input-group-text">$</span>
                            <input type="number" class="form-control form-control-sm" placeholder="45640000"
                                name="buyer_lender_price[]">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <x-input-label for="File" :value="__('File')" />
                        <x-text-input type="file" name="buyer_lender_file[]" />
                    </div>
                    <div class="col-md-4 mt-4">
                        <div class="form-check pt-2">
                            <input class="form-check-input purchase-agreement-send-checkbox me-2" type="checkbox"
                                name="buyer_lender_purchase_agreement[]" value="true" id="purchaseAgreementSend" />
                            <label for="purchaseAgreementSend" class="form-label mt-1">Purchase Agreement Sent</label>
                        </div>

                    </div>
                    <div class="col-md-4 mt-2 purchase-agreement-send-section" style="display: none;">
                        <x-input-label for="Status" :value="__('Status')" />
                        <select class="form-control form-control-sm property-visited-status"
                            name="buyer_lender_status[]" id="buyer_lender_status">
                            <option value="" selected>Select one</option>
                            <option value="accept">Accept</option>
                            <option value="counter">Counter</option>
                            <option value="reject">Reject</option>
                        </select>
                    </div>
                    <div class="col mt-1">
                        <x-text-area name="buyer_lender_notes[]" rows="3" placeholder="Write Notes about property " />
                    </div>
                </div>
            </div>
        </div>
        @endforelse
    </div>

    <div class="row mt-3">
        <div class="col-12 align-items-center d-flex justify-content-center">
            <button type="button" class="btn btn-outline-light p-2 add_visited_property_btn">
                <i class="fa-plus fa-solid text-primary"></i> Add visited
                property
            </button>
        </div>
    </div>
</div>