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


<div class="row mt-4 mb-4" id="buyer-commercial-residential-visited-property-section" style="{{ !empty($visited_properties) ? "" : "display:none" }}">

    <h4 class="text-primary">Visited Property</h4>
    <div id="visited-property">

        @forelse ($visitedProperties as $visited_properties)

        <div class="row mt-4">

            {{-- <div class="col-3">
                <img src="https://cdn.britannica.com/05/157305-050-FD9CB47C.jpg" class="img-thumbnail" alt="">
                <div id="visited-property"></div>
                
            </div> --}}
            
            <div class="col-3 position-relative">
                <!-- Image preview container with "+" and "x" buttons -->
                <img src="" class="img-thumbnail property-image" alt="Property Image" style="display: none;">
                <input type="file" class="form-control form-control-sm property-upload" style="display: none;" accept="image/*">
                
                <!-- "+" Upload button -->
                <button type="button" class="btn btn-sm btn-secondary upload-btn position-absolute" style="top: 10px; right: 40px;">
                    <i class="fa fa-plus"></i>
                </button>
                
                <!-- "x" Delete button, hidden initially -->
                <button class="btn btn-sm btn-danger delete-image-btn position-absolute" style="top: 60px; right: 20px; display: none;">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            

            <div class="col-8 p-0">
                <div class="row">
                    <div class="col-md-4">
                        <label class="form-label">Address</label>
                        <x-text-input placeholder="Address" name="lead_property_visted_address[]" value="{{ old('lead_property_visted_address', $visited_properties['lead_property_visted_address']) }}" />
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Price</label>
                        <input type="text" class="form-control form-control-sm money-format" pattern="^\d{1,3}(,\d{3})*$" placeholder="Price" name="lead_property_visted_price[]"  
                        value="{{ old('lead_property_visted_price', $visited_properties['lead_property_visted_price']) }}" />
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">File</label>
                        <x-text-input type="file" name="lead_property_visted_file[]" />
                    </div>
                    <div class="col-md-12 mt-2">
                        <label class="form-label">Note</label>
                        <textarea class="form-control form-control-sm" name="lead_property_visted_notes[]" id="" rows="3" > {{ old('lead_property_visted_notes', $visited_properties['lead_property_visted_notes']) }}</textarea>
                    </div>
                </div>
            </div>
            <div class="col-1 align-items-center d-flex justify-content-center p-0">
                <i class="border border-3 delete-visited-property-inputs fa-solid fa-trash px-1 py-5 rounded text-danger"></i>
            </div>
        </div>

        @empty
        <h5 class="p-2 text-body text-center" id="visited-property-placeholder" style="display: block;"> if your
            client visited any property you can
            add here click on
            <strong> Add visited property</strong>
        </h5>
        @endforelse

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