@if($case->can_share_case_responsibility || $case->bypassCaseHandler())

<form method="post" action="{{ route('case_manager.add_interested_parties', $case->id) }}" class="cm_task_form">
    @csrf
    <div class="modal fade file_upload_model" id="add_interested_parties" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header d-flex justify-content-between align-items-center">
                    <h4 class="modal-title text-info mb-0">Add Case Investigator</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <div class="px-4 pt-3 pb-2">
                    <div class="input-group" style="max-width: 300px;">
                        <span class="input-group-text bg-light">
                            <i class="fas fa-search text-muted"></i>
                        </span>
                        <input type="text" id="investigatorSearchInput" class="form-control" placeholder="Search investigator...">
                    </div>
                </div>
                <div class="modal-body px-4">
                    <div id="interested-party-users-table">
                        <p class="text-center text-muted">Loading users...</p>
                    </div>

                    <div class="text-center mt-4">
                        <button type="button" class="showAllUsersBtn btn btn-link text-decoration-none p-0" style="color: rgb(37, 150, 190); font-size: 14px;">
                            Show All Users
                        </button>
                    </div>

                    <div class="form-group mt-4">
                        <label for="note" class="form-label fw-semibold">Add Note</label>
                        <textarea spellcheck="true" name="note" id="note" class="form-control spellcheck" rows="3" placeholder="Enter your note here..."></textarea>
                    </div>
                </div>

                <div class="modal-footer px-4 py-3">
                    <div class="d-flex gap-2 ms-auto">
                        <button type="button" class="btn btn-outline-secondary" onclick="this.form.reset();" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-info">Save</button>
                    </div>
                </div>

                <div class="case-investigators border-top px-4 py-3">
                    <div class="mb-2">
                        <h6 class="mb-3 fw-bold text-dark">Existing Investigators</h6>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach ($case->case_interested_parties as $case_interested_party)
                                @if(isset($case_interested_party->case_head_office_user))
                                    <div class="d-flex align-items-center gap-2 bg-light rounded px-3 py-2">
                                        @if(isset($case_interested_party->case_head_office_user->user->logo))
                                            <img src="{{ $case_interested_party->case_head_office_user->user->logo }}" 
                                                 alt="{{ $case_interested_party->case_head_office_user->user->name }}'s logo" 
                                                 class="rounded-circle" 
                                                 style="width: 32px; height: 32px; object-fit: cover;">
                                        @else
                                            <div class="rounded-circle bg-info text-white d-flex align-items-center justify-content-center" 
                                                 style="width: 32px; height: 32px; font-size: 14px; font-weight: bold;">
                                                {{ substr($case_interested_party->case_head_office_user->user->name, 0, 1) }}
                                            </div>
                                        @endif
                                        <span class="text-dark">{{ $case_interested_party->case_head_office_user->user->name }}</span>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</form>
<script>
$(document).ready(function() {
    // Search functionality for investigators
    $('#investigatorSearchInput').on('input', function() {
        var query = $(this).val().toLowerCase();
        
        // Search in table rows if they exist
        $('tbody.all_locations tr').each(function() {
            var rowText = $(this).find('.email').text().toLowerCase() || 
                         $(this).text().toLowerCase();
            
            if (rowText.includes(query)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        
        // Also search in any user cards or list items
        $('.user-item, .investigator-item').each(function() {
            var itemText = $(this).text().toLowerCase();
            
            if (itemText.includes(query)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
    
    // Clear search when modal is closed
    $('#add_interested_parties').on('hidden.bs.modal', function() {
        $('#investigatorSearchInput').val('');
        $('tbody.all_locations tr, .user-item, .investigator-item').show();
    });
});
</script>

@endif