@extends('admin.layouts.layout')

@section('css')
<style>
    .reset-btn {
        background-color: #ffe0e0;
        color: #FB6C6C;
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        font-weight: 600;
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: all 0.3s ease-in-out;
    }
    .reset-btn:hover {
        background-color: #f5cbcb;
        color: #FB6C6C;
        transition: all 0.3s ease-in-out;
    }
    
    .agency-checkbox, #select-all-agencies {
        width: 18px;
        height: 18px;
    }
    
    .delete_btn {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .delete_btn.active {
        opacity: 1;
        cursor: pointer;
    }
    
    .table th {
        font-weight: 600;
        background-color: #f8f9fa;
    }
    
    .table td {
        vertical-align: middle;
    }
    
    .table-hover tbody tr:hover {
        background-color: rgba(0, 123, 255, 0.05);
    }
    
    .filter-section {
        margin-bottom: 20px;
        background-color: #f8f9fa;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
</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 Agencies</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('agencies.delete-multiple') }}" method="POST" style="display: none;">
                @csrf
                <input type="hidden" name="selected_ids" id="selected-ids-input">
            </form>

            <form id="export-agencies-form" action="{{ route('export.agencies') }}" method="GET" style="display: none;">
                <input type="hidden" name="selected_ids" id="export-selected-ids-input">
            </form>

            <div class="contact_btns">
                <a href="javascript:void(0);" id="export-agencies" class="import_exportbtn btn"><img src="images/import.svg" />Export</a>
                @if(isset($permission) && isset($permission['create']) && $permission['create'])
                    <a href="{{route($routePrefix . '.create')}}" class="add_btn btn"><img src="{{ asset('images/add.svg') }}" /> Add</a>
                @endif
                @if(isset($permission) && isset($permission['destroy']) && $permission['destroy'])
                    <a href="javascript:void(0);" id="delete-selected" class="delete_btn btn"><img src="{{ asset('images/delete.svg') }}" /> Delete</a>
                @endif
            </div>
        </div>
    </div>            
    <div class="table-responsive">
        <table class="table table-hover" id="agency-table">
            <thead>
                <tr>
                    <th width="30">
                        <input type="checkbox" class="form-check-input" id="select-all-agencies" title="Select All Agencies">
                    </th>
                    <th>Agency</th>
                    <th>Phone</th>
                    <!-- <th>Email</th> -->
                    <th>State</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @if(isset($data) && count($data) > 0)
                    @foreach($data as $agency)
                        <tr>
                            <td width="30">
                                <input type="checkbox" class="form-check-input agency-checkbox" value="{{ $agency['id'] }}" id="agency-{{ $agency['id'] }}">
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    @php
                                        $avatarThumb = isset($agency['avatar']['thumb'])
                                            ? $agency['avatar']['thumb']
                                            : null;
                                    @endphp
                                    
                                    @if($avatarThumb)
                                        <img src="{{ $avatarThumb }}" alt="Agency Avatar" style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #dee2e6;">
                                    @else
                                        <div class="d-flex align-items-center justify-content-center bg-secondary text-white rounded-circle" style="width:36px; height:36px; font-size:1rem;">
                                            @php
                                                $name = $agency['name'] ?? '';
                                                $words = explode(' ', $name);
                                                $initials = '';
                                                $count = 0;
                                                
                                                foreach ($words as $word) {
                                                    if (!empty($word) && $count < 2) {
                                                        $initials .= mb_substr($word, 0, 1);
                                                        $count++;
                                                    }
                                                }
                                                
                                                echo strtoupper($initials);
                                            @endphp
                                        </div>
                                    @endif
                                    <strong>{{ $agency['name'] }}</strong>
                                </div>
                            </td>
                            <td>{{ \App\Helpers\Helper::formatPhone($agency['office_phone'] ?? '') }}</td>
                            <td>
                                <a href="mailto:{{ $agency['office_email'] }}">{{ $agency['office_email'] }}</a>
                            </td>
                            <td>{{ $agency['state'] }}</td>
                            <td>
                                <div class="form-check form-switch">
                                    <input class="form-check-input status-toggle" type="checkbox" 
                                        id="status-{{ $agency['id'] }}" 
                                        data-agency-id="{{ $agency['id'] }}"
                                        {{ $agency['is_active'] ? 'checked' : '' }}>
                                    <label class="form-check-label" for="status-{{ $agency['id'] }}">
                                        {{ $agency['is_active'] ? 'Active' : 'Inactive' }}
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex gap-2">
                                    @if(isset($permission) && isset($permission['show']) && $permission['show'])
                                    <a href="{{ route($routePrefix . '.show', $agency['id']) }}" class="btn btn_view" title="View">
                                        <img src="{{ asset('images/view.svg') }}" alt="View" />
                                    </a>
                                    @endif
                                    <!-- <a href="mailto:{{ $agency['office_email'] }}" class="btn btn_message" title="Email">
                                        <img src="{{ asset('images/message.svg') }}" />
                                    </a> -->
                                    @if(isset($permission) && isset($permission['edit']) && $permission['edit'])
                                        <a href="{{ route($routePrefix . '.edit', $agency['id']) }}" class="btn btn_edit" title="Edit">
                                            <img src="{{ asset('images/edit.svg') }}" />
                                        </a>
                                    @endif
                                    @if(isset($permission) && isset($permission['destroy']) && $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-{{ $agency['id'] }}').submit();">
                                            <img src="{{ asset('images/delete_black.svg') }}" />
                                        </a>
                                        {!! html()->form('DELETE', route($routePrefix . '.destroy', $agency['id']))
                                            ->attributes(['style' => 'display:inline', 'id' => 'delete-form-' . $agency['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 Agencies Found.</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-agencies');
    const agencyCheckboxes = $('.agency-checkbox');
    const deleteSelectedButton = $('#delete-selected');
    const multipleDeleteForm = $('#multiple-delete-form');
    const selectedIdsInput = $('#selected-ids-input');
    const exportAgenciesButton = $('#export-agencies');
    const exportAgenciesForm = $('#export-agencies-form');
    const exportSelectedIdsInput = $('#export-selected-ids-input');
    const filterPanel = $('#filter-panel');
    
    // Function to update delete button state
    function updateDeleteButtonState() {
        const checkedCount = $('.agency-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');
        agencyCheckboxes.prop('checked', isChecked);
        updateDeleteButtonState();
    });
    
    // Handle individual checkboxes
    agencyCheckboxes.on('change', function() {
        // If any checkbox is unchecked, uncheck "select all"
        if (!$(this).prop('checked')) {
            selectAllCheckbox.prop('checked', false);
        }
        
        // If all checkboxes are checked, check "select all"
        if ($('.agency-checkbox:checked').length === agencyCheckboxes.length && agencyCheckboxes.length > 0) {
            selectAllCheckbox.prop('checked', true);
        }
        
        updateDeleteButtonState();
    });
    
    // Handle delete button click
    deleteSelectedButton.on('click', function(e) {
        e.preventDefault();
        
        const selectedIds = [];
        $('.agency-checkbox:checked').each(function() {
            selectedIds.push($(this).val());
        });
        
        if (selectedIds.length === 0) {
            showNotification('warning', 'Please select at least one agency to delete.');
            return;
        }
        
        // Create confirmation message using the same format as single delete
        Swal.fire({
            title: 'Are You Sure?',
            text: 'This action can not be undone. Do you want to continue?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Sure!',
            cancelButtonText: 'Cancel',
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                // Set the selected IDs in the hidden input
                selectedIdsInput.val(JSON.stringify(selectedIds));
                
                // Show loading indicator or message
                Swal.fire({
                    title: 'Processing...',
                    html: 'Deleting selected agencies',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                
                // Submit the form
                multipleDeleteForm.submit();
            }
        });
    });
    
    // Export agencies functionality
    exportAgenciesButton.on('click', function() {
        const selectedIds = [];
        $('.agency-checkbox:checked').each(function() {
            selectedIds.push($(this).val());
        });
        
        if (selectedIds.length > 0) {
            // Export only selected agencies
            exportSelectedIdsInput.val(JSON.stringify(selectedIds));
            showNotification('info', `Exporting ${selectedIds.length} selected agency(ies)...`);
        } else {
            // Export all agencies
            exportSelectedIdsInput.val('');
            showNotification('info', 'Exporting all agencies...');
        }
        
        exportAgenciesForm.submit();
    });
    
    // Live search functionality
    const liveSearchInput = $('#live-search-input');
    const clearSearchBtn = $('#clear-search');
    const agencyTable = $('#agency-table');
    
    // Get the pagination element
    const paginationElement = $('.pagination-container');
    
    // Client-side filter function for immediate feedback
    function filterTableRowsLocal(searchTerm) {
        searchTerm = searchTerm.toLowerCase();
        let matchCount = 0;
        
        // Show all rows first if search is empty
        if (searchTerm === '') {
            agencyTable.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
        agencyTable.find('tbody tr').each(function() {
            const row = $(this);
            // Skip the "no agencies found" row if it exists
            if (row.find('td[colspan]').length > 0) {
                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 state = row.find('td:nth-child(5)').text().toLowerCase();
            const status = row.find('td:nth-child(6)').text().toLowerCase();
            
            if (name.includes(searchTerm) || 
                phone.includes(searchTerm) || 
                email.includes(searchTerm) || 
                state.includes(searchTerm) || 
                status.includes(searchTerm)) {
                row.show();
                matchCount++;
            } else {
                row.hide();
            }
        });
        
        // Show "no results" message if no matches
        if (matchCount === 0) {
            if (agencyTable.find('tbody tr.no-results').length === 0) {
                agencyTable.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 Agencies Found Matching "${searchTerm}"</p>
                            </div>
                        </td>
                    </tr>
                `);
            } else {
                agencyTable.find('tbody tr.no-results').show();
            }
        } else {
            agencyTable.find('tbody tr.no-results').hide();
        }
    }
    
    // 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("agencies.search") }}',
                    method: 'GET',
                    data: {
                        search_query: searchTerm
                    },
                    beforeSend: function() {
                        // Show loading indicator if needed
                        // $('#loading-indicator').show();
                    },
                    success: function(response) {
                        // Handle successful response
                        if (response.status === 200 && response.data) {
                            // If the search term is still the same (user hasn't changed it)
                            if (liveSearchInput.val().toLowerCase() === searchTerm.toLowerCase()) {
                                // Keep pagination hidden for search results
                                paginationElement.hide();
                                // Update the table with new data if needed
                                // This step is optional as we already have client-side filtering
                            }
                        }
                    },
                    error: function(xhr) {
                        console.error('Search request failed', xhr);
                    },
                    complete: function() {
                        // Hide loading indicator if needed
                        // $('#loading-indicator').hide();
                    }
                });
            }, 300); // 300ms delay
        }
    }
    
    // Event handler for search input
    liveSearchInput.on('input', function() {
        filterTableRows($(this).val());
    });
    
    // Clear search button
    clearSearchBtn.on('click', function() {
        liveSearchInput.val('');
        filterTableRows('');
        // Show pagination when clearing search
        paginationElement.show();
    });
    
    // Initialize search if there's a value (from URL parameter)
    if (liveSearchInput.val()) {
        filterTableRows(liveSearchInput.val());
    }
    
    // Status Toggle Handler
    $('.status-toggle').on('change', function() {
        const toggle = $(this);
        const agencyId = toggle.data('agency-id');
        const label = toggle.siblings('.form-check-label');
        const isChecked = toggle.prop('checked');
        
        // Optimistic UI update
        label.text(isChecked ? 'Active' : 'Inactive');
        
        $.ajax({
            url: '{{ route("agencies.toggle-status", ":id") }}'.replace(':id', agencyId),
            method: 'POST',
            data: {
                _token: _token
            },
            success: function(response) {
                if(response.status) {
                    showNotification('success', response.message || 'Agency status updated successfully');
                } else {
                    // Revert on failure
                    toggle.prop('checked', !isChecked);
                    label.text(!isChecked ? 'Active' : 'Inactive');
                    showNotification('error', response.message || 'Failed to update agency status');
                }
            },
            error: function(xhr) {
                // Revert on error
                toggle.prop('checked', !isChecked);
                label.text(!isChecked ? 'Active' : 'Inactive');
                showNotification('error', 'Failed to update agency status');
            }
        });
    });
    
    // Initial check for delete button state
    updateDeleteButtonState();
});
</script>
@endpush