{{-- @props([$filteredProperties ,$contact]) --}}
@props(['filteredProperties', 'contact'])

@push('css')
<style>
    .ck-editor__main {
        border: 1px solid lightgray !important;
    }

    .ck-editor__main ul {
        margin-left: 20px;
    }

    .ck-editor__main li {
        list-style-type: unset !important;
        margin-left: 10px;
    }

    blockquote {
        border-left: 4px solid #ccc;
        margin: 10px 0;
        padding: 10px 15px;
        background-color: #f9f9f9;
        font-style: italic;
        color: #555;
    }

    blockquote p {
        margin: 0;
    }

    /* Modern browsers - webkit based (Chrome, Safari, newer Edge) */
    .overflow-scroll::-webkit-scrollbar {
        width: 8px;
        /* width of vertical scrollbar */
        /* height: 8px; height of horizontal scrollbar */
    }

    .overflow-scroll::-webkit-scrollbar-track {
        background: #f1f1f1;
        /* color of the tracking area */
        border-radius: 10px;
    }

    .overflow-scroll::-webkit-scrollbar-thumb {
        background: #888;
        /* color of the scroll thumb */
        border-radius: 10px;
    }

    .overflow-scroll::-webkit-scrollbar-thumb:hover {
        background: #555;
        /* color of the scroll thumb on hover */
    }

    /* Firefox */
    .overflow-scroll {
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
        /* thumb and track color */
    }
</style>
@endpush
<div class="row">
    {{-- <h4 class="text-primary mb-3 mt-4">Historical Data</h4> --}}
    <!-- Contact Notes -->
    <div class="mb-6 col-md-6">
        <label class="form-label">Contact Notes</label>
        <textarea id="contact_notes" name="contact_notes" cols="10" rows="7" class="form-control form-control-sm"
            placeholder="Write your text">{{ $contact['contact_notes'] ?? ""  }}</textarea>
    </div>
    <div class="mb-6 col-md-6">
        {{-- <label>Associated Buyer/Seller Transactions</label> --}}
        <h4 class="text-primary mb-3 mt-4">Associated Buyer/Seller Transactions</h4>
        <div class=" overflow-scroll" style="max-height: 177px; min-height: 198px;">

            <table class="table table-sm">
                <tbody>
                    @forelse ($filteredProperties as $property)
                    <tr>
                        {{-- Property Image --}}
                        <td>
                            @if (!empty($property['images']) && isset($property['images'][0]['url']))
                            <img src="{{ $property['images'][0]['url'] }}" alt="Property Pic" width="50">
                            @else
                            <i class="fas fa-home text-primary"></i> <!-- Font Awesome home icon -->
                            @endif
                        </td>

                        {{-- Property Address --}}
                        <td>{{ $property['street'] ?? 'N/A' }}</td>

                        {{-- Buy/Sell Transaction Type --}}
                        <td>
                            {{ \Illuminate\Support\Str::title(str_replace('_', ' ', $property['transaction_type'] ?? "N/A")) }}
                        </td>


                        {{-- Property Type --}}
                        <td>{{ $property['property_type'] ?? 'N/A' }}</td>

                        {{-- Property Status/Stage --}}
                        <td>{{ $property['status'] ?? 'Pending' }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center">No Transactions Available</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>



    <!-- Attached File -->
    {{-- <div class="mb-3 col-md-3">
        <x-input-label for="attached_file" :value="__('Notes - Attached File')" />
        <input id="attached_file" name="attached_file" class="form-control form-control-sm mt-4" type="file">
    </div> --}}
</div>

@push('js')
<script>
    // Initialize all instances of CKEditor
    $(document).ready(function(){
    ClassicEditor
        .create(document.getElementById('contact_notes'), {
            toolbar: [
                'heading', 'paragraph',
                'bold', 'italic', 'underline', 'strike', 'code', '|',
                'fontFamily', 'fontSize', 'fontColor', 'bgColor', '|',
                'link', 'unlink', 'insertImage', 'insertTable', 'mediaEmbed', 'emoji', 'insertVideo', 'horizontalLine', '|',
                'bulletedList', 'numberedList', 'blockQuote', '|',
                'alignment', 'indent', 'outdent', '|',
                'subscript', 'superscript', '|',
                'findAndReplace', 'removeFormat', 'selectAll', 'styles', 'format', 'paragraph', '|',
                'source', 'showBlocks', 'spellChecker', 'language', 'insertDateTime', 'specialChar', '|',
                'undo', 'redo'
            ],
        })
        .then(editor => {
            $('form').on('submit', function () {
                $('#contact_notes').val(editor.getData());
            });
        })
        .catch(error => {
            console.error(error);
        });
});

</script>
@endpush