@extends('admin.layouts.layout')

@push('page_style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
  .sortable-header {
    user-select: none;
    transition: background-color 0.2s ease;
    padding: 8px 12px;
  }
  .sortable-header:hover {
    background-color: rgba(0,123,255,0.1) !important;
  }
  .sortable-header a {
    color: inherit !important;
    text-decoration: none !important;
  }
  .sortable-header a:hover {
    color: inherit !important;
    text-decoration: none !important;
  }
  .sort-icon {
    display: inline-block;
    width: 12px;
    text-align: center;
  }
</style>
@endpush

@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 Customer</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('customers.delete-multiple') }}" method="POST" style="display: none;">
                @csrf
                <input type="hidden" name="selected_ids" id="selected-ids-input">
            </form>

            <form id="export-customers-form" action="{{ route('export.customers') }}" 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-customers" class="import_exportbtn btn"><img src="images/import.svg" />Export</a>
                @if($permission['create'])
                <a href="{{route($routePrefix . '.create')}}" class="add_btn btn"><img src="{{ asset('images/add.svg') }}" /> Add</a>
                @endif
                @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="multipleCustomerDelete()"><img src="{{ asset('images/delete.svg') }}" /> Delete</a>
                @endif
            </div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover" id="customer-table">
            <thead>
                <tr>
                    <th width="30">
                        <input type="checkbox" class="form-check-input" id="select-all-customers" title="Select All Customers">
                    </th>
                    <th class="sortable-header">
                        @php
                            $currentSort = $currentSort ?? 'id';
                            $currentDirection = $currentDirection ?? 'desc';
                            $newDirection = ($currentSort === 'first_name' && $currentDirection === 'asc') ? 'desc' : 'asc';
                        @endphp
                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'first_name', 'direction' => $newDirection]) }}" 
                           class="text-decoration-none text-dark d-flex align-items-center">
                            Customer 
                            <span class="sort-icon ms-1">
                                @if($currentSort === 'first_name')
                                    @if($currentDirection === 'asc')
                                        <i class="fas fa-sort-up text-primary"></i>
                                    @else
                                        <i class="fas fa-sort-down text-primary"></i>
                                    @endif
                                @else
                                    <i class="fas fa-sort text-muted"></i>
                                @endif
                            </span>
                        </a>
                    </th>
                    <th>Phone</th>
                    <th>Email</th>
                    <!-- <th>Agency</th> -->
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @if(isset($data) && count($data) > 0)
                    @foreach($data as $customer)
                        <tr>
                            <td width="30">
                                <input type="checkbox" class="form-check-input customer-checkbox" value="{{ $customer['id'] }}" id="customer-{{ $customer['id'] }}">
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    @php
                                        // Determine display name and initials source
                                        $displayName = $customer['full_name'] ?? ($customer['first_name'] . ' ' . $customer['last_name']);
                                        $companyName = $customer['agency']['company_name'] ?? null;
                                        $agencyName = $customer['agency']['name'] ?? null;
                                        
                                        // Use company_name if available, otherwise use agency name
                                        $initials = '';
                                        if (!empty($companyName)) {
                                            // Get first letters of each word in company name
                                            $words = explode(' ', trim($companyName));
                                            $initials = strtoupper(mb_substr($words[0] ?? '', 0, 1) . mb_substr($words[1] ?? '', 0, 1));
                                        } elseif (!empty($agencyName)) {
                                            // Get first letters of each word in agency name
                                            $words = explode(' ', trim($agencyName));
                                            $initials = strtoupper(mb_substr($words[0] ?? '', 0, 1) . mb_substr($words[1] ?? '', 0, 1));
                                        } else {
                                            // Fallback to customer name initials
                                            $initials = strtoupper(mb_substr($customer['first_name'] ?? '', 0, 1) . mb_substr($customer['last_name'] ?? '', 0, 1));
                                        }
                                        
                                        // Ensure we have at least one character
                                        $initials = !empty(trim($initials)) ? $initials : strtoupper(mb_substr($displayName, 0, 1));
                                    @endphp
                                    <div class="d-flex align-items-center justify-content-center bg-secondary text-white rounded-circle" style="width:36px; height:36px; font-size:1rem;">
                                        {{ $initials }}
                                    </div>
                                    <strong>{{ $displayName }}</strong>
                                </div>
                            </td>
                            <td>{{ \App\Helpers\Helper::formatPhone($customer['phone'] ?? '') }}</td>
                            <td>
                                <a href="mailto:{{ $customer['email'] ?? '' }}">{{ $customer['email'] ?? '' }}</a>
                            </td>
                            <!-- <td>{{ isset($customer['agency']) ? $customer['agency']['name'] : '-' }}</td> -->
                            <td>
                                <div class="form-check form-switch">
                                    <input class="form-check-input status-toggle" 
                                           type="checkbox" 
                                           role="switch" 
                                           data-id="{{ $customer['id'] }}"
                                           {{ $customer['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', $customer['id']) }}" class="btn btn_view" title="View">
                                        <img src="{{ asset('images/view.svg') }}" alt="View" />
                                    </a>
                                    @endif
                                    @if(!isset($customer['email_verified_at']))
                                    <button type="button" class="btn btn_message btn-send-set-password" 
                                        data-user-id="{{ $customer['id'] }}" data-email="{{ $customer['email'] ?? '' }}" title="Send Set Password Email">
                                        <img src="{{ asset('images/message.svg') }}" />
                                    </button>
                                    @endif
                                    @if($permission['edit'])
                                    <a href="{{ route($routePrefix . '.edit', $customer['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-{{$customer->id}}').submit();">
                                        <img src="{{ asset('images/delete_black.svg') }}" />
                                    </a>
                                    {!! html()->form('DELETE', route(
                                        $routePrefix . '.destroy',
                                        $customer->id
                                        ))->attributes([
                                        'style' => 'display:inline',
                                        'id'    => 'delete-form-' . $customer->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 Customers 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-customers');
    const customerCheckboxes = $('.customer-checkbox');
    const deleteSelectedButton = $('#delete-selected');
    const multipleDeleteForm = $('#multiple-delete-form');
    const selectedIdsInput = $('#selected-ids-input');
    const exportCustomersButton = $('#export-customers');
    const exportCustomersForm = $('#export-customers-form');
    const exportSelectedIdsInput = $('#export-selected-ids-input');
    const liveSearchInput = $('#live-search-input');
    const clearSearchBtn = $('#clear-search');
    const customerTable = $('#customer-table');
    const paginationElement = $('.pagination-container');
    
    // Function to update delete button state
    function updateDeleteButtonState() {
        const checkedCount = $('.customer-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');
        customerCheckboxes.prop('checked', isChecked);
        updateDeleteButtonState();
    });
    
    // Handle individual checkboxes
    customerCheckboxes.on('change', function() {
        updateDeleteButtonState();
        
        // If any checkbox is unchecked, uncheck the "select all" checkbox
        if (!$(this).prop('checked')) {
            selectAllCheckbox.prop('checked', false);
        } else if ($('.customer-checkbox:checked').length === $('.customer-checkbox').length) {
            // If all checkboxes are checked, check the "select all" checkbox
            selectAllCheckbox.prop('checked', true);
        }
    });
    
    // Client-side filter function for immediate feedback
    function filterTableRowsLocal(searchTerm) {
        searchTerm = searchTerm.toLowerCase();
        let matchCount = 0;
        
        // Always remove any existing "no results" row first
        customerTable.find('tbody tr.no-results').remove();
        
        // Show all rows first if search is empty
        if (searchTerm === '') {
            customerTable.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
        customerTable.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 agency = 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) || 
                agency.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) {
            customerTable.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 Customers 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("customers.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('');
        // Remove any "no results" row
        customerTable.find('tbody tr.no-results').remove();
        filterTableRows('');
        // Show pagination when clearing search
        paginationElement.show();
    });
    
    // Initialize search if there's a value (from URL parameter)
    if (liveSearchInput.val()) {
        filterTableRows(liveSearchInput.val());
    }
    
    // Check if delete button should be active
    updateDeleteButtonState();
    
    // Add click handler for delete button to check if any customers are selected
    deleteSelectedButton.on('click', function(e) {
        if (!$(this).hasClass('active')) {
            e.preventDefault();
            e.stopPropagation();
            showNotification('warning', 'Please select at least one customer to delete.');
            return false;
        }
    });
    
    // Set Password Email Buttons (customers)
    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 customer.','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(`/customers/${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);
            });
        });
    });

    // Function to handle multiple delete
    window.multipleCustomerDelete = function() {
        if (!deleteSelectedButton.hasClass('active')) {
            showNotification('warning', 'Please select at least one customer to delete.');
            return;
        }
        
        const selectedIds = [];
        $('.customer-checkbox:checked').each(function() {
            selectedIds.push($(this).val());
        });
        
        if (selectedIds.length === 0) {
            showNotification('warning', 'Please select at least one customer to delete.');
            return;
        }
        
        selectedIdsInput.val(JSON.stringify(selectedIds));
        multipleDeleteForm.submit();
    };

    // Export customers functionality
    exportCustomersButton.on('click', function() {
        const selectedIds = [];
        $('.customer-checkbox:checked').each(function() {
            selectedIds.push($(this).val());
        });
        
        if (selectedIds.length > 0) {
            // Export only selected customers
            exportSelectedIdsInput.val(JSON.stringify(selectedIds));
            showNotification('info', `Exporting ${selectedIds.length} selected customer(s)...`);
        } else {
            // Export all customers
            exportSelectedIdsInput.val('');
            showNotification('info', 'Exporting all customers...');
        }
        
        exportCustomersForm.submit();
    });

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