@extends('Layout.mainlayout')

@section('content')
<style>
    .customer-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        border-bottom: 2px solid #f0f0f0;
    }

    .customer-tab {
        padding: 12px 24px;
        background: none;
        border: none;
        border-bottom: 3px solid transparent;
        font-size: 14px;
        font-weight: 600;
        color: #666;
        cursor: pointer;
        transition: all 0.3s;
    }

    .customer-tab:hover {
        color: #2196f3;
    }

    .customer-tab.active {
        color: #2196f3;
        border-bottom-color: #2196f3;
    }

    .customer-tab-count {
        background: #f0f0f0;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        margin-left: 5px;
    }

    .customer-tab.active .customer-tab-count {
        background: #e3f2fd;
        color: #2196f3;
    }
</style>

<div class="job-statistics-container">
    <!-- Header -->
    <div class="job-header">
        <div class="job-title">
            <span class="job-title-main">Customers</span>
            <span class="job-title-sub">Management</span>
        </div>
    </div>

    <!-- Stats Grid -->
    <div class="job-stats-grid">
        <div class="job-stat-card">
            <div class="job-stat-label">Total Direct Customers</div>
            <div class="job-stat-value">{{ number_format($total_direct_customers) }}</div>
            <div class="job-stat-change">
                <span>{{ $direct_change >= 0 ? '↑' : '↓' }}</span>
                <span>{{ abs($direct_change) }}%</span>
            </div>
        </div>
        <div class="job-stat-card">
            <div class="job-stat-label">Total Referred Customers</div>
            <div class="job-stat-value">{{ number_format($total_referred_customers) }}</div>
            <div class="job-stat-change">
                <span>{{ $referred_change >= 0 ? '↑' : '↓' }}</span>
                <span>{{ abs($referred_change) }}%</span>
            </div>
        </div>
        <div class="job-stat-card">
            <div class="job-stat-label">Overall Customers</div>
            <div class="job-stat-value">{{ number_format($overall_customers) }}</div>
            <div class="job-stat-change">
                <span>{{ $overall_change >= 0 ? '↑' : '↓' }}</span>
                <span>{{ abs($overall_change) }}%</span>
            </div>
        </div>
    </div>

    <!-- Search Bar -->
    <div class="job-search-container">
        <form method="GET" action="{{ route('admin.listCustomer') }}" id="searchForm">
            <div class="job-search-wrapper">
                <span class="job-search-icon">🔍</span>
                <input type="text" name="search" class="job-search-input" placeholder="Search customers by name, email, or phone..." value="{{ $current_search }}">
                <input type="hidden" name="type" value="{{ $current_type }}">
            </div>
        </form>
    </div>

    <!-- Schedule Management -->
    <div class="job-schedule-container">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h2 class="job-schedule-title" style="margin: 0;">Customer History</h2>
        </div>

        <!-- Customer Tabs -->
        <div class="customer-tabs">
            <button class="customer-tab {{ $current_type == 'all' ? 'active' : '' }}" onclick="filterByType('all')">
                All Customers
                <span class="customer-tab-count">{{ number_format($overall_customers) }}</span>
            </button>
            <button class="customer-tab {{ $current_type == 'direct' ? 'active' : '' }}" onclick="filterByType('direct')">
                Direct Customers
                <span class="customer-tab-count">{{ number_format($total_direct_customers) }}</span>
            </button>
            <button class="customer-tab {{ $current_type == 'referred' ? 'active' : '' }}" onclick="filterByType('referred')">
                Referred Customers
                <span class="customer-tab-count">{{ number_format($total_referred_customers) }}</span>
            </button>
        </div>

        <div style="overflow-x: auto;">
            <table class="job-schedule-table">
                <thead>
                    <tr>
                        <th>SI No.</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone No</th>
                        <th>Type</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($customers as $index => $customer)
                    <tr>
                        <td>{{ $customers->firstItem() + $index }}</td>
                        <td>
                            <div class="job-employee-cell">
                                <img src="https://ui-avatars.com/api/?name={{ urlencode($customer->name) }}&background=random" alt="{{ $customer->name }}" class="job-employee-avatar">
                                <span class="job-employee-name">{{ $customer->name }}</span>
                            </div>
                        </td>
                        <td class="job-schedule-shift">{{ $customer->email }}</td>
                        <td class="job-schedule-period">{{ $customer->phone ?? 'N/A' }}</td>
                        <td>
                            <span class="job-status-badge {{ $customer->referred_by ? 'inactive' : 'active' }}">
                                {{ $customer->referred_by ? 'Referred' : 'Direct' }}
                            </span>
                        </td>
                        <td>
                            <div class="job-action-cell">
                                <button class="job-view-btn" onclick="viewCustomer({{ $customer->id }})">👁</button>
                                <button class="job-menu-btn">⋮</button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" style="text-align: center; padding: 40px; color: #999;">
                            <p style="font-size: 16px; margin-bottom: 10px;">No customers found</p>
                            <p style="font-size: 14px;">Try adjusting your search criteria</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($customers->hasPages())
        <div class="job-pagination">
            {{-- Previous Button --}}
            @if($customers->onFirstPage())
                <button class="job-pagination-btn" disabled>‹ Previous</button>
            @else
                <a href="{{ $customers->previousPageUrl() }}&search={{ $current_search }}&type={{ $current_type }}" class="job-pagination-btn">‹ Previous</a>
            @endif

            {{-- Page Numbers --}}
            @foreach(range(1, $customers->lastPage()) as $page)
                @if($page == $customers->currentPage())
                    <button class="job-pagination-btn active">{{ $page }}</button>
                @else
                    <a href="{{ $customers->url($page) }}&search={{ $current_search }}&type={{ $current_type }}" class="job-pagination-btn">{{ $page }}</a>
                @endif
            @endforeach

            {{-- Next Button --}}
            @if($customers->hasMorePages())
                <a href="{{ $customers->nextPageUrl() }}&search={{ $current_search }}&type={{ $current_type }}" class="job-pagination-btn">Next ›</a>
            @else
                <button class="job-pagination-btn" disabled>Next ›</button>
            @endif
        </div>
        @endif
    </div>
</div>

<script>
// Filter by customer type
function filterByType(type) {
    const search = document.querySelector('input[name="search"]').value;
    const params = new URLSearchParams();
    
    if (search) params.append('search', search);
    params.append('type', type);
    
    window.location.href = '{{ route("admin.listCustomer") }}?' + params.toString();
}

// View customer details
function viewCustomer(customerId) {
    // Navigate to customer detail page or show modal
    window.location.href = '/admin/customers/' + customerId;
}

// Auto-submit search on input (with debounce)
let searchTimeout;
document.querySelector('input[name="search"]').addEventListener('input', function() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        document.getElementById('searchForm').submit();
    }, 500);
});

// Submit search on Enter key
document.querySelector('input[name="search"]').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        document.getElementById('searchForm').submit();
    }
});
</script>

@endsection