<div>
    <!-- Information Card -->
    <div class="card mb-3 shadow-sm">

        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <h4>Lead Source</h4>
                <!-- Button with MDI Icon Only -->
                @can('clients.edit')
                    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#leadSourceModal-{{ $client->id }}" title="Edit Lead Source">
                        <i class="mdi mdi-pencil"></i>
                    </button>
                @endcan
            </div>
            @if($client->leadSource)
                <div class="mb-2">
                    <strong class="text-muted">Source:</strong>
                    <span class="ms-1 fw-bold">{{ $client->leadSource->display_name }}</span>
                </div>

                @if($client->endpoint)
                    <div class="mb-1">
                        <strong class="text-muted">Endpoint:</strong>
                        <span class="ms-1">{{ $client->endpoint->display_name }}</span>
                    </div>
                    <div>
                        <strong class="text-muted">URL:</strong>
                        <a wire:navigate href="{{ $client->endpoint->url }}" class="ms-1 text-break text-decoration-none" target="_blank">
                            {{ $client->endpoint->url }}
                        </a>
                    </div>
                @endif
            @else
                <p class="text-muted mb-0 fst-italic">No lead source assigned yet.</p>
            @endif
        </div>
    </div>

    <!-- Edit Modal (wire:ignore.self keeps Bootstrap's modal JS from conflicting with Livewire updates) -->
    <div class="modal fade" id="leadSourceModal-{{ $client->id }}" tabindex="-1" aria-labelledby="leadSourceModalLabel-{{ $client->id }}" aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="leadSourceModalLabel-{{ $client->id }}">Configure Lead Source</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="row g-4">
                        <!-- Column 1: Lead Sources -->
                        <div class="col-md-6 border-end">
                            <h6 class="mb-3 text-secondary">1. Select Lead Source</h6>
                            <div class="list-group list-group-flush border rounded shadow-sm" style="height: 350px; overflow-y: auto;">
                                @forelse($leadSources as $source)
                                    <button type="button"
                                            class="list-group-item list-group-item-action {{ $selectedLeadSourceId == $source->id ? 'active' : '' }}"
                                            wire:click="selectLeadSource({{ $source->id }})">
                                        {{ $source->display_name }}
                                        @if($selectedLeadSourceId == $source->id)
                                            <i class="mdi mdi-check float-end"></i>
                                        @endif
                                    </button>
                                @empty
                                    <div class="list-group-item text-muted text-center py-4">No lead sources found.</div>
                                @endforelse
                            </div>
                        </div>

                        <!-- Column 2: Associated Endpoints -->
                        <div class="col-md-6">
                            <h6 class="mb-3 text-secondary">2. Select Endpoint</h6>
                            @if($selectedLeadSourceId)
                                <div class="list-group list-group-flush border rounded shadow-sm" style="height: 350px; overflow-y: auto;">
                                    @forelse($this->endpoints as $endpoint)
                                        <button type="button"
                                                class="list-group-item list-group-item-action {{ $selectedEndpointId == $endpoint->id ? 'active' : '' }}"
                                                wire:click="selectEndpoint({{ $endpoint->id }})">

                                            <div class="d-flex w-100 justify-content-between align-items-center mb-1">
                                                <h6 class="mb-0 {{ $selectedEndpointId == $endpoint->id ? 'text-white' : '' }}">
                                                    {{ $endpoint->display_name }}
                                                </h6>
                                                @if($selectedEndpointId == $endpoint->id)
                                                    <i class="mdi mdi-check-circle fs-5"></i>
                                                @endif
                                            </div>

                                            <small class="d-block text-break {{ $selectedEndpointId == $endpoint->id ? 'text-white-50' : 'text-muted' }}">
                                                {{ $endpoint->url }}
                                            </small>
                                        </button>
                                    @empty
                                        <div class="list-group-item text-muted text-center py-4">
                                            <i class="mdi mdi-link-variant-off fs-1 text-light d-block mb-2"></i>
                                            No endpoints exist for this source.
                                        </div>
                                    @endforelse
                                </div>
                            @else
                                <div class="d-flex flex-column align-items-center justify-content-center h-100 bg-light border rounded text-muted p-4 text-center">
                                    <i class="mdi mdi-arrow-left-circle-outline fs-1 mb-2"></i>
                                    <p class="mb-0">Please select a lead source from the left to view its endpoints.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <!-- Save button with loading state -->
                    @can('clients.edit')
                    <button type="button" class="btn btn-primary d-flex align-items-center gap-2" wire:click="save" wire:loading.attr="disabled">
                        <span wire:loading wire:target="save" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        <span wire:loading.remove wire:target="save"><i class="mdi mdi-content-save"></i></span>
                        Save Changes
                    </button>
                    @endcan
                </div>

            </div>
        </div>
    </div>

    <!-- Livewire v3 approach to handle Javascript events -->
    @script
    <script>
        $wire.on('close-modal', (event) => {
            // Find the modal by ID sent from the component payload
            const modalElement = document.getElementById(event.modalId);
            if (modalElement) {
                // Get the existing modal instance or create one, then hide it
                const modalInstance = bootstrap.Modal.getInstance(modalElement) || new bootstrap.Modal(modalElement);
                modalInstance.hide();
            }
        });
    </script>
    @endscript
</div>