@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">
            @if(isset($isSuperOrSubAdmin) && $isSuperOrSubAdmin && isset($tenants))
            <div class="d-flex align-items-center me-3">
                <label class="form-label mb-0 me-2 text-nowrap" style="font-size: 13px;">Tenant:</label>
                <select id="tenant-filter" class="form-select form-select-sm" style="min-width: 180px;">
                    <option value="">All Tenants</option>
                    @foreach($tenants as $tenant)
                        <option value="{{ $tenant->id }}" {{ (isset($selectedTenantId) && $selectedTenantId == $tenant->id) ? 'selected' : '' }}>
                            {{ $tenant->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            @endif
            <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>Tenant</th>
                    <th>Phone</th>
                    <th>Email</th>
                    {{-- <th>Address</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
                                        // Get first initial and full last name
                                        $firstName = $customer['first_name'] ?? '';
                                        $lastName = $customer['last_name'] ?? '';
                                        $firstInitial = !empty($firstName) ? strtoupper(mb_substr($firstName, 0, 1)) : '';
                                        $lastInitial = !empty($lastName) ? strtoupper(mb_substr($lastName, 0, 1)) : '';
                                        
                                        // Format display: first initial + full last name (e.g., "J. Doe")
                                        $displayName = '';
                                        if (!empty($firstInitial) && !empty($lastName)) {
                                            $displayName = $firstInitial . '. ' . $lastName;
                                        } elseif (!empty($firstInitial)) {
                                            $displayName = $firstInitial . '.';
                                        } elseif (!empty($lastName)) {
                                            $displayName = $lastName;
                                        } else {
                                            $displayName = '-';
                                        }
                                        
                                        // For the circle avatar, use combined initials without dots
                                        $initialsForAvatar = strtoupper($firstInitial . $lastInitial);
                                        if (empty($initialsForAvatar)) {
                                            $fullName = $customer['full_name'] ?? ($firstName . ' ' . $lastName);
                                            $initialsForAvatar = strtoupper(mb_substr(trim($fullName), 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;">
                                        {{ $initialsForAvatar }}
                                    </div>
                                    <strong>{{ $displayName }}</strong>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-primary">{{ $customer->tenant_name ?? 'N/A' }}</span>
                            </td>
                            <td>{{ \App\Helpers\Helper::formatPhone($customer['phone'] ?? '') }}</td>
                            <td>
                                <a href="mailto:{{ $customer['email'] ?? '' }}">{{ $customer['email'] ?? '' }}</a>
                            </td>
                            {{-- Address column hidden
                            <td>
                                @php
                                    // Handle both object and array access for address
                                    $address = null;
                                    if (isset($customer->address)) {
                                        $address = $customer->address;
                                    } elseif (isset($customer['address'])) {
                                        $address = $customer['address'];
                                    }
                                    
                                    $addressParts = [];
                                    if ($address) {
                                        // Handle both object and array access for address attributes
                                        $line1 = is_object($address) ? ($address->address_line1 ?? '') : ($address['address_line1'] ?? '');
                                        $line2 = is_object($address) ? ($address->address_line2 ?? '') : ($address['address_line2'] ?? '');
                                        $city = is_object($address) ? ($address->city ?? '') : ($address['city'] ?? '');
                                        $state = is_object($address) ? ($address->state ?? '') : ($address['state'] ?? '');
                                        $zip = is_object($address) ? ($address->zip ?? '') : ($address['zip'] ?? '');
                                        
                                        if (!empty($line1)) {
                                            $addressParts[] = $line1;
                                        }
                                        if (!empty($line2)) {
                                            $addressParts[] = $line2;
                                        }
                                        if (!empty($city)) {
                                            $addressParts[] = $city;
                                        }
                                        if (!empty($state)) {
                                            $addressParts[] = $state;
                                        }
                                        if (!empty($zip)) {
                                            $addressParts[] = $zip;
                                        }
                                    }
                                    $fullAddress = !empty($addressParts) ? implode(', ', $addressParts) : '-';
                                @endphp
                                <span title="{{ $fullAddress }}">{{ $fullAddress }}</span>
                            </td>
                            --}}
                            <td>
                                @if(isset($customer['status']) && $customer['status'] == 1)
                                    <span class="badge bg-success">Active</span>
                                @elseif(isset($customer['status']) && $customer['status'] == 2)
                                    <span class="badge bg-danger">Blocked</span>
                                @else
                                    <span class="badge bg-secondary">Inactive</span>
                                @endif
                            </td>
                            <td>
                                <div class="d-flex gap-2">
                                    @if($permission['show'])
                                    <a href="{{ route($routePrefix . '.show', ['customer' => $customer['id'], 'tenant_id' => $customer->user_role_tenant_id ?? '']) }}" class="btn btn_view" title="View">
                                        <img src="{{ asset('images/view.svg') }}" alt="View" />
                                    </a>
                                    @endif
                                    <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>
                                    @if($permission['edit'])
                                    <a href="{{ route($routePrefix . '.edit', ['customer' => $customer['id'], 'tenant_id' => $customer->user_role_tenant_id ?? '']) }}" class="btn btn_edit" title="Edit">
                                        <img src="{{ asset('images/edit.svg') }}" />
                                    </a>
                                    @endif
                                    @if($permission['destroy'])
                                    <a class="btn" 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

                                    @if(isset($canBlockCustomers) && $canBlockCustomers && $customer['id'] != auth()->id())
                                        @if(isset($customer['status']) && $customer['status'] == 1)
                                        <button type="button" class="btn btn-sm btn-outline-danger btn-block-customer" 
                                            data-user-id="{{ $customer['id'] }}" 
                                            data-status="2"
                                            data-name="{{ $customer['full_name'] ?? ($customer['first_name'] . ' ' . $customer['last_name']) }}"
                                            title="Block Customer">
                                            <i class="fas fa-user-slash"></i>
                                        </button>
                                        @else
                                        <button type="button" class="btn btn-sm btn-outline-success btn-block-customer" 
                                            data-user-id="{{ $customer['id'] }}" 
                                            data-status="1"
                                            data-name="{{ $customer['full_name'] ?? ($customer['first_name'] . ' ' . $customer['last_name']) }}"
                                            title="Activate Customer">
                                            <i class="fas fa-user-check"></i>
                                        </button>
                                        @endif
                                    @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 tenant = row.find('td:nth-child(3)').text().toLowerCase();
            const phone = row.find('td:nth-child(4)').text().toLowerCase();
            const email = row.find('td:nth-child(5)').text().toLowerCase();
            const status = row.find('td:nth-child(6)').text().toLowerCase();
            
            if (name.includes(searchTerm) ||
                tenant.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) {
                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();
    });

    // Tenant filter handler
    $('#tenant-filter').on('change', function() {
        const tenantId = $(this).val();
        const currentUrl = new URL(window.location.href);
        if (tenantId) {
            currentUrl.searchParams.set('tenant_id', tenantId);
        } else {
            currentUrl.searchParams.delete('tenant_id');
        }
        // Reset to first page when changing tenant
        currentUrl.searchParams.delete('page');
        window.location.href = currentUrl.toString();
    });
    
    // Block/Activate customer handler
    $(document).on('click', '.btn-block-customer', function() {
        const btn = $(this);
        const userId = btn.data('user-id');
        const newStatus = btn.data('status');
        const customerName = btn.data('name');
        const action = newStatus == 1 ? 'activate' : 'block';
        const actionText = newStatus == 1 ? 'Activate' : 'Block';
        const iconType = newStatus == 1 ? 'question' : 'warning';
        const confirmBtnColor = newStatus == 1 ? '#28a745' : '#dc3545';
        
        Swal.fire({
            title: `${actionText} Customer?`,
            text: `Are you sure you want to ${action} "${customerName}"?`,
            icon: iconType,
            showCancelButton: true,
            confirmButtonColor: confirmBtnColor,
            cancelButtonColor: '#6c757d',
            confirmButtonText: `Yes, ${action}!`,
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("customers.block-customer") }}',
                    method: 'POST',
                    data: {
                        _token: csrfToken,
                        user_id: userId,
                        status: newStatus
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                title: 'Success!',
                                text: response.message,
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                window.location.reload();
                            });
                        } else {
                            Swal.fire('Error', response.message || 'Failed to update customer status', 'error');
                        }
                    },
                    error: function(xhr) {
                        const errorMsg = xhr.responseJSON?.message || 'An error occurred while updating customer status.';
                        Swal.fire('Error', errorMsg, 'error');
                    }
                });
            }
        });
    });
});
</script>
@endpush