@extends('admin.layouts.layout')

@section('css')
<style>
    .agent-checkbox,
    #select-all-agents {
        cursor: pointer;
    }

    .delete_btn {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .delete_btn.active {
        opacity: 1;
        cursor: pointer;
    }

    .table th {
        font-weight: 600;
    }

    .table td {
        vertical-align: middle;
    }

    .table-hover tbody tr:hover {
        background-color: rgba(0, 0, 0, .03);
    }
</style>
@endsection

@section('content')
<div class="mb-4">
    <!-- BODY CONTENT SECTION START -->    
    <div class="title_area">
        <div class="d-flex align-items-center gap-2">
            <h3>All Agents</h3>
        </div>
        <div class="d-flex align-items-center gap-2 ms-auto">
            <div class="d-flex align-items-center">
                <div class="search_box">
                    <input type="text" id="live-search-input" class="form-control" placeholder="Search..." value="{{ request('search_query') }}">
                    <button class="btn btn_search" id="search-btn" type="button">
                        <img src="{{ asset('images/search.svg') }}" alt="Search Icon" />
                    </button>
                </div>
                <button class="btn btn-sm ms-2 reset-btn" id="clear-search" title="Reset Search" @if(!request('search_query')) style="display: none;" @endif>
                    <img src="{{ asset('images/delete.svg') }}" alt="Clear" width="14" height="14" style="transform: rotate(45deg);" /> Clear
                </button>
            </div>

            <form id="multiple-delete-form" action="{{ route('agents.delete-multiple') }}" method="POST" style="display: none;">
                @csrf
                <input type="hidden" name="selected_ids" id="selected-ids-input">
            </form>

            <div class="contact_btns">
                <a href="{{ route('export.agents') }}" class="import_exportbtn btn"><img src="images/import.svg" />Export</a>
                <a href="{{route($routePrefix . '.create')}}" class="add_btn btn"><img src="images/add.svg" /> Add</a>
                @if($permission['destroy'])
                <a href="javascript:void(0);" id="delete-selected" class="delete_btn btn"
                    data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?"
                    data-confirm-yes="multipleAgentDelete()"><img src="images/delete.svg" /> Delete</a>
                @endif                        
            </div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover" id="agent-table">
            <thead class="table-light">
                <tr>
                    <th width="30">
                        <input type="checkbox" class="form-check-input" id="select-all-agents" title="Select All Agents">
                    </th>
                    <th>Avatar</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @if(isset($data) && count($data) > 0)
                    @foreach($data as $agent)
                    <tr>
                        <td width="30">
                            <input type="checkbox" class="form-check-input agent-checkbox" value="{{ $agent['id'] }}" id="agent-{{ $agent['id'] }}">
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="d-flex align-items-center justify-content-center bg-secondary text-white rounded-circle" style="width:36px; height:36px; font-size:1rem;">
                                    {{ strtoupper(mb_substr($agent['first_name'] ?? '', 0, 1) . mb_substr($agent['last_name'] ?? '', 0, 1)) }}
                                </div>
                                <strong>{{ $agent['full_name'] ?? ($agent['first_name'] . ' ' . $agent['last_name']) }}</strong>
                            </div>
                        </td>
                        <td>{{ $agent['full_name'] ?? ($agent['first_name'] . ' ' . $agent['last_name']) }}</td>
                        <td>{{ \App\Helpers\Helper::formatPhone($agent['phone'] ?? '') }}</td>
                        <td><a href="mailto:{{ $agent['email'] ?? '' }}">{{ $agent['email'] ?? '' }}</a></td>
                        <td>
                            <div class="form-check form-switch">
                                <input class="form-check-input status-toggle" 
                                       type="checkbox" 
                                       role="switch" 
                                       data-id="{{ $agent['id'] }}" 
                                       {{ $agent['status'] == 1 ? 'checked' : '' }}>
                                <label class="form-check-label"></label>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex gap-2">
                                @if($permission['show'])
                                <a href="{{ route($routePrefix . '.show', $agent['id']) }}" class="btn btn_view" title="View">
                                    <img src="{{ asset('images/view.svg') }}" alt="View" />
                                </a>
                                @endif
                                    @if(!isset($agent['email_verified_at']))
                                    <button type="button" class="btn btn_message btn-send-set-password" 
                                        data-user-id="{{ $agent['id'] }}" data-email="{{ $agent['email'] ?? '' }}" title="Send Set Password Email">
                                        <img src="{{ asset('images/message.svg') }}" />
                                    </button>
                                    @endif
                                @if($permission['edit'])
                                <a href="{{ route($routePrefix . '.edit', $agent['id']) }}" class="btn btn_edit" title="Edit">
                                    <img src="{{ asset('images/edit.svg') }}" />
                                </a>
                                @endif
                                @if($permission['destroy'])
                                <a class="btn me-4" data-toggle="tooltip" title="Delete"
                                    data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?"
                                    data-confirm-yes="event.preventDefault(); document.getElementById('delete-form-{{$agent->id}}').submit();">
                                    <img src="{{ asset('images/delete_black.svg') }}" />
                                </a>
                                {!! html()->form('DELETE', route(
                                $routePrefix . '.destroy',
                                $agent->id
                                ))->attributes([
                                'style' => 'display:inline',
                                'id' => 'delete-form-' . $agent->id
                                ])->open() !!}
                                {!! html()->form()->close() !!}
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach

                @else
                    <tr>
                        <td colspan="7" class="text-center py-4">
                            <div class="text-muted">No Agents Added Yet.</div>
                        </td>
                    </tr>
                @endif
            </tbody>
        </table>
    </div>        
    <!-- BODY CONTENT SECTION END -->
</div>

@include('admin.components.pagination')

@endsection

@push('page_script')
<script>
    $(document).ready(function() {
        const selectAllCheckbox = $('#select-all-agents');
        const agentCheckboxes = $('.agent-checkbox');
        const deleteSelectedButton = $('#delete-selected');
        const multipleDeleteForm = $('#multiple-delete-form');
        const selectedIdsInput = $('#selected-ids-input');
        const liveSearchInput = $('#live-search-input');
        const clearSearchBtn = $('#clear-search');
        const agentTable = $('#agent-table');
        const paginationElement = $('.pagination-container');

        // Client-side filter function for immediate feedback
        function filterTableRowsLocal(searchTerm) {
            searchTerm = searchTerm.toLowerCase();
            let matchCount = 0;

            // Always remove any existing "no results" row first
            agentTable.find('tbody tr.no-results').remove();

            // Show all rows first if search is empty
            if (searchTerm === '') {
                agentTable.find('tbody tr').show();
                clearSearchBtn.hide();
                // Show pagination when search is cleared
                paginationElement.show();
                return;
            }

            clearSearchBtn.show();
            // Hide pagination when filtering
            paginationElement.hide();

            // Hide/show rows based on search term
            agentTable.find('tbody tr').each(function() {
                const row = $(this);
                // Skip any "no data" rows (initial empty state)
                if (row.find('td[colspan]').length > 0 && !row.hasClass('no-results')) {
                    row.hide();
                    return;
                }

                const name = row.find('td:nth-child(2)').text().toLowerCase();
                const phone = row.find('td:nth-child(3)').text().toLowerCase();
                const email = row.find('td:nth-child(4)').text().toLowerCase();
                const status = row.find('td:nth-child(5)').text().toLowerCase();

                if (name.includes(searchTerm) ||
                    phone.includes(searchTerm) ||
                    email.includes(searchTerm) ||
                    status.includes(searchTerm)) {
                    row.show();
                    matchCount++;
                } else {
                    row.hide();
                }
            });

            // Show "no results" message if no matches and search term isn't empty
            if (matchCount === 0 && searchTerm.length > 0) {
                agentTable.find('tbody').append(`
                <tr class="no-results">
                    <td colspan="7" class="text-center py-4">
                        <div class="text-muted">
                            <i class="fas fa-search fa-2x mb-2"></i>
                            <p>No Agents Found matching "${searchTerm}"</p>
                        </div>
                    </td>
                </tr>
            `);
            }
        }

        // Function to perform AJAX search
        let searchTimer;

        function filterTableRows(searchTerm) {
            // First immediately apply local filtering for responsiveness
            filterTableRowsLocal(searchTerm);

            // Clear any existing timers to prevent multiple requests
            clearTimeout(searchTimer);

            // Only make AJAX request if search term is not empty and has at least 2 characters
            if (searchTerm.length >= 2) {
                // Set a small delay to prevent too many requests while typing
                searchTimer = setTimeout(function() {
                    $.ajax({
                        url: '{{ route("agents.search") }}',
                        method: 'GET',
                        data: {
                            search_query: searchTerm
                        },
                        beforeSend: function() {
                            // Show loading indicator if needed
                        },
                        success: function(response) {
                            // Handle successful response
                            if (response.status === 200 && response.data) {
                                if (liveSearchInput.val().toLowerCase() === searchTerm.toLowerCase()) {
                                    paginationElement.hide();
                                    // Optionally update table with new data
                                }
                            }
                        },
                        error: function(xhr) {
                            console.error('Search request failed', xhr);
                        },
                        complete: function() {
                            // Hide loading indicator if needed
                        }
                    });
                }, 300); // 300ms delay
            }
        }

        // Event handler for search input
        liveSearchInput.on('input', function() {
            filterTableRows($(this).val());
        });

        // Clear search button
        clearSearchBtn.on('click', function() {
            liveSearchInput.val('');
            agentTable.find('tbody tr.no-results').remove();
            filterTableRows('');
            paginationElement.show();
        });

        // Function to update delete button state
        function updateDeleteButtonState() {
            const checkedCount = $('.agent-checkbox:checked').length;
            if (checkedCount > 0) {
                deleteSelectedButton.addClass('active');
            } else {
                deleteSelectedButton.removeClass('active');
            }
        }

        // Handle select all checkbox
        selectAllCheckbox.on('change', function() {
            const isChecked = $(this).prop('checked');
            agentCheckboxes.prop('checked', isChecked);
            updateDeleteButtonState();
        });

        // Handle individual checkboxes
        agentCheckboxes.on('change', function() {
            updateDeleteButtonState();

            // If any checkbox is unchecked, uncheck the "select all" checkbox
            if (!$(this).prop('checked')) {
                selectAllCheckbox.prop('checked', false);
            } else if ($('.agent-checkbox:checked').length === $('.agent-checkbox').length) {
                // If all checkboxes are checked, check the "select all" checkbox
                selectAllCheckbox.prop('checked', true);
            }
        });

        // Initialize search if there's a value (from URL parameter)
        if (liveSearchInput.val()) {
            filterTableRows(liveSearchInput.val());
        }

        // Check if delete button should be active
        updateDeleteButtonState();

        // Set Password Email Buttons (agents)
        const csrfToken = $('meta[name="csrf-token"]').attr('content');
        $('.btn-send-set-password').on('click', function(){
            const btn = $(this);
            const userId = btn.data('user-id');
            const email = btn.data('email');
            if(!email){
                Swal.fire('No Email','No email address available for this agent.','warning');
                return;
            }
            Swal.fire({
                title: 'Send Set Password Email?',
                text: 'An email with a link to set password will be sent to '+email+'.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Send',
                cancelButtonText: 'Cancel'
            }).then((result)=>{
                if(!result.isConfirmed) return;
                btn.prop('disabled', true);
                const originalHtml = btn.html();
                btn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
                fetch(`/agents/${userId}/send-set-password`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({})
                }).then(r => r.json())
                .then(res => {
                    if(res.status === 200){
                        Swal.fire('Email Sent','Set password email sent to '+email,'success');
                    }else{
                        Swal.fire('Failed', res.message || 'Failed to send email','error');
                    }
                })
                .catch(err => {
                    console.error(err);
                    Swal.fire('Error','Unexpected error sending email','error');
                })
                .finally(()=>{
                    btn.prop('disabled', false).html(originalHtml);
                });
            });
        });

        // Add click handler for delete button to check if any agents are selected
        deleteSelectedButton.on('click', function(e) {
            if (!$(this).hasClass('active')) {
                e.preventDefault();
                e.stopPropagation();
                showNotification('warning', 'Please select at least one agent to delete.');
                return false;
            }
        });

        // Function to handle multiple delete
        window.multipleAgentDelete = function() {
            if (!deleteSelectedButton.hasClass('active')) {
                showNotification('warning', 'Please select at least one agent to delete.');
                return;
            }

            const selectedIds = [];
            $('.agent-checkbox:checked').each(function() {
                selectedIds.push($(this).val());
            });

            if (selectedIds.length === 0) {
                showNotification('warning', 'Please select at least one agent to delete.');
                return;
            }

            selectedIdsInput.val(JSON.stringify(selectedIds));
            multipleDeleteForm.submit();
        };

        // Status toggle functionality
        $('.status-toggle').change(function() {
            const agentId = $(this).data('id');
            const isEnabled = $(this).is(':checked');
            
            $.ajax({
                url: `{{ route('agents.toggle-status', '') }}/${agentId}`,
                method: 'POST',
                data: {
                    _token: csrfToken
                },
                success: function(response) {
                    if (response.status) {
                        showNotification('success', response.message);
                    } else {
                        $('.status-toggle[data-id="' + agentId + '"]').prop('checked', !isEnabled);
                        showNotification('error', response.message || 'Error updating agent status');
                    }
                },
                error: function() {
                    $('.status-toggle[data-id="' + agentId + '"]').prop('checked', !isEnabled);
                    showNotification('error', 'Error updating agent status. Please try again.');
                }
            });
        });
    });
</script>
@endpush