@extends('admin.layout')

@section('title', 'User Management')

@section('content')
<div class="space-y-6">
    <!-- Filter and Search Section -->
    <div class="bg-white p-6 rounded-lg shadow-md">
        <div class="flex flex-wrap gap-4 items-center">
            <button onclick="showCustomers()" id="customersBtn" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                Customers
            </button>
            <button onclick="showBarbers()" id="barbersBtn" class="px-6 py-2.5 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors font-medium focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                Barbers
            </button>
            
            <div class="flex-1 min-w-[300px]">
                <input type="text" id="searchInput" placeholder="Search by name, email, phone..." 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    onkeyup="handleSearch()">
            </div>
            
            <select id="cityFilter" class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="handleSearch()">
                <option value="">All Cities</option>
            </select>
        </div>
    </div>

    <!-- Customers Section -->
    <div id="customersSection" class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-200 bg-gray-50">
            <h2 class="text-xl font-semibold text-gray-800">Customers</h2>
        </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Email</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Phone</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Bookings</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Wallet Balance</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody id="customersTable" class="bg-white divide-y divide-gray-200">
                <tr><td colspan="7" class="px-6 py-8 text-center text-gray-500">Loading...</td></tr>
            </tbody>
        </table>
    </div>
    <div id="customersPagination" class="px-6 py-4 border-t border-gray-200 bg-gray-50"></div>
</div>

<!-- Barbers Section -->
<div id="barbersSection" class="bg-white rounded-lg shadow-md overflow-hidden hidden">
    <div class="px-6 py-5 border-b border-gray-200 bg-gray-50">
        <h2 class="text-xl font-semibold text-gray-800">Barbers</h2>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Email</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Shop</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Rating</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Balance</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody id="barbersTable" class="bg-white divide-y divide-gray-200">
                <tr><td colspan="6" class="px-6 py-8 text-center text-gray-500">Loading...</td></tr>
            </tbody>
        </table>
    </div>
    <div id="barbersPagination" class="px-6 py-4 border-t border-gray-200 bg-gray-50"></div>
</div>
</div>

<!-- Customer Detail Modal -->
<div id="customerModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
        <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
            <h3 class="text-xl font-semibold text-gray-800">Customer Profile</h3>
            <button onclick="closeCustomerModal()" class="text-gray-500 hover:text-gray-700">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <div id="customerModalContent" class="p-6">
            <div class="text-center text-gray-500">Loading...</div>
        </div>
    </div>
</div>

<!-- Barber Detail Modal -->
<div id="barberModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-lg shadow-xl max-w-5xl w-full max-h-[90vh] overflow-y-auto">
        <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
            <h3 class="text-xl font-semibold text-gray-800">Barber Profile</h3>
            <button onclick="closeBarberModal()" class="text-gray-500 hover:text-gray-700">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <div id="barberModalContent" class="p-6">
            <div class="text-center text-gray-500">Loading...</div>
        </div>
    </div>
</div>

<!-- Action Modal -->
<div id="actionModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-[60] flex items-center justify-center p-4" style="position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;">
    <div id="actionModalDialog" class="bg-white rounded-lg shadow-xl w-full max-w-md" style="width: 100%; max-width: 28rem !important; position: relative !important;">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 id="actionModalTitle" class="text-lg font-semibold text-gray-800">Confirm Action</h3>
        </div>
        <div class="px-6 py-5">
            <p id="actionModalMessage" class="text-sm text-gray-700">Are you sure?</p>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
            <button id="actionModalCancel" type="button" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                Cancel
            </button>
            <button id="actionModalConfirm" type="button" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                OK
            </button>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
let currentSection = 'customers';
let currentCustomersPage = 1;
let currentBarbersPage = 1;
let searchTimeout;

function showActionModal({
    title = 'Confirm Action',
    message = 'Are you sure?',
    confirmText = 'OK',
    cancelText = 'Cancel',
    confirmClass = 'bg-blue-600 hover:bg-blue-700',
    hideCancel = false
} = {}) {
    return new Promise((resolve) => {
        const modal = document.getElementById('actionModal');
        const titleEl = document.getElementById('actionModalTitle');
        const messageEl = document.getElementById('actionModalMessage');
        const cancelBtn = document.getElementById('actionModalCancel');
        const confirmBtn = document.getElementById('actionModalConfirm');

        // Keep modal outside admin content wrapper so global layout CSS cannot distort it.
        if (modal.parentElement !== document.body) {
            document.body.appendChild(modal);
        }

        titleEl.textContent = title;
        messageEl.textContent = message;
        cancelBtn.textContent = cancelText;
        confirmBtn.textContent = confirmText;

        confirmBtn.className = `px-4 py-2 text-white rounded-lg transition-colors ${confirmClass}`;
        cancelBtn.classList.toggle('hidden', hideCancel);

        modal.classList.remove('hidden');

        const close = (result) => {
            modal.classList.add('hidden');
            cancelBtn.removeEventListener('click', onCancel);
            confirmBtn.removeEventListener('click', onConfirm);
            modal.removeEventListener('click', onBackdrop);
            resolve(result);
        };

        const onCancel = () => close(false);
        const onConfirm = () => close(true);
        const onBackdrop = (e) => {
            if (e.target === modal && !hideCancel) {
                close(false);
            }
        };

        cancelBtn.addEventListener('click', onCancel);
        confirmBtn.addEventListener('click', onConfirm);
        modal.addEventListener('click', onBackdrop);
    });
}

// Load cities for dropdown
async function loadCities() {
    const data = await window.apiCall('/users/cities');
    if (data && data.success) {
        const cityFilter = document.getElementById('cityFilter');
        cityFilter.innerHTML = '<option value="">All Cities</option>';
        data.data.forEach(city => {
            const option = document.createElement('option');
            option.value = city;
            option.textContent = city;
            cityFilter.appendChild(option);
        });
    }
}

// Load customers
async function loadCustomers(page = 1) {
    const search = document.getElementById('searchInput').value;
    const city = document.getElementById('cityFilter').value;
    const params = new URLSearchParams({ page, per_page: 15 });
    if (search) params.append('search', search);
    if (city) params.append('city', city);
    
    const data = await window.apiCall(`/users/customers?${params}`);
    if (data && data.success) {
        const tbody = document.getElementById('customersTable');
        if (data.data.data.length === 0) {
            tbody.innerHTML = '<tr><td colspan="7" class="px-6 py-8 text-center text-gray-500">No customers found</td></tr>';
            document.getElementById('customersPagination').innerHTML = '';
        } else {
            tbody.innerHTML = data.data.data.map(user => `
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-5 whitespace-nowrap text-sm font-medium text-gray-900">
                        ${user.first_name || ''} ${user.last_name || ''}
                    </td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm text-gray-600">${user.email || '-'}</td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm text-gray-600">${user.phone || '-'}</td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm">
                        ${user.deleted_at
                            ? '<span class="px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-700">Disabled</span>'
                            : '<span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>'}
                    </td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm text-gray-600">${user.appointments_count || 0}</td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm text-gray-600">-</td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm font-medium">
                        <button onclick="viewCustomer(${user.id})" class="text-blue-600 hover:text-blue-900 mr-4 font-medium hover:underline">View</button>
                        ${user.deleted_at
                            ? `<button onclick="enableCustomer(${user.id})" class="text-green-600 hover:text-green-900 font-medium hover:underline">Enable</button>`
                            : `<button onclick="disableCustomer(${user.id})" class="text-red-600 hover:text-red-900 font-medium hover:underline">Disable</button>`}
                    </td>
                </tr>
            `).join('');
            
            // Pagination
            const pagination = document.getElementById('customersPagination');
            if (data.data.last_page > 1) {
                pagination.innerHTML = `
                    <div class="flex items-center justify-between">
                        <div class="text-sm text-gray-700">
                            Showing ${data.data.from} to ${data.data.to} of ${data.data.total} results
                        </div>
                        <div class="flex gap-2">
                            <button onclick="loadCustomers(${data.data.current_page - 1})" 
                                ${data.data.current_page === 1 ? 'disabled' : ''}
                                class="px-4 py-2 border rounded-lg ${data.data.current_page === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'}">Previous</button>
                            <button onclick="loadCustomers(${data.data.current_page + 1})" 
                                ${data.data.current_page === data.data.last_page ? 'disabled' : ''}
                                class="px-4 py-2 border rounded-lg ${data.data.current_page === data.data.last_page ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'}">Next</button>
                        </div>
                    </div>
                `;
            } else {
                pagination.innerHTML = '';
            }
            currentCustomersPage = page;
        }
    }
}

// Load barbers
async function loadBarbers(page = 1) {
    const search = document.getElementById('searchInput').value;
    const city = document.getElementById('cityFilter').value;
    const params = new URLSearchParams({ page, per_page: 15 });
    if (search) params.append('search', search);
    if (city) params.append('city', city);
    
    const data = await window.apiCall(`/users/barbers?${params}`);
    if (data && data.success) {
        const tbody = document.getElementById('barbersTable');
        if (data.data.data.length === 0) {
            tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-8 text-center text-gray-500">No barbers found</td></tr>';
            document.getElementById('barbersPagination').innerHTML = '';
        } else {
            tbody.innerHTML = data.data.data.map(user => {
                const avgRating = user.barber?.ratings_count > 0 ? 
                    (user.barber.ratings?.reduce((sum, r) => sum + r.rating, 0) / user.barber.ratings.length).toFixed(1) : 'N/A';
                return `
            <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-5 whitespace-nowrap text-sm font-medium text-gray-900">
                        ${user.first_name || ''} ${user.last_name || ''}
                    </td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm text-gray-600">${user.email || '-'}</td>
                <td class="px-6 py-5 whitespace-nowrap text-sm text-gray-600">${user.barber?.shop?.shop_name || '-'}</td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm text-gray-600">
                        <span class="flex items-center">
                            <svg class="w-4 h-4 text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                            </svg>
                            ${avgRating}
                        </span>
                    </td>
                <td class="px-6 py-5 whitespace-nowrap text-sm font-semibold text-gray-900">$${parseFloat(user.barber?.balance || 0).toFixed(2)}</td>
                <td class="px-6 py-5 whitespace-nowrap text-sm font-medium">
                    <button onclick="viewBarber(${user.id})" class="text-blue-600 hover:text-blue-900 mr-4 font-medium hover:underline">View</button>
                    ${user.deleted_at
                        ? `<button onclick="enableBarber(${user.barber?.id})" class="text-green-600 hover:text-green-900 font-medium hover:underline">Unsuspend</button>`
                        : `<button onclick="suspendBarber(${user.barber?.id})" class="text-red-600 hover:text-red-900 font-medium hover:underline">Suspend</button>`}
                </td>
            </tr>
            `;
            }).join('');
            
            // Pagination
            const pagination = document.getElementById('barbersPagination');
            if (data.data.last_page > 1) {
                pagination.innerHTML = `
                    <div class="flex items-center justify-between">
                        <div class="text-sm text-gray-700">
                            Showing ${data.data.from} to ${data.data.to} of ${data.data.total} results
                        </div>
                        <div class="flex gap-2">
                            <button onclick="loadBarbers(${data.data.current_page - 1})" 
                                ${data.data.current_page === 1 ? 'disabled' : ''}
                                class="px-4 py-2 border rounded-lg ${data.data.current_page === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'}">Previous</button>
                            <button onclick="loadBarbers(${data.data.current_page + 1})" 
                                ${data.data.current_page === data.data.last_page ? 'disabled' : ''}
                                class="px-4 py-2 border rounded-lg ${data.data.current_page === data.data.last_page ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'}">Next</button>
                        </div>
                    </div>
                `;
            } else {
                pagination.innerHTML = '';
            }
            currentBarbersPage = page;
        }
    }
}

function showCustomers() {
    currentSection = 'customers';
    document.getElementById('customersSection').classList.remove('hidden');
    document.getElementById('barbersSection').classList.add('hidden');
    document.getElementById('customersBtn').classList.remove('bg-gray-300', 'text-gray-700');
    document.getElementById('customersBtn').classList.add('bg-blue-600', 'text-white');
    document.getElementById('barbersBtn').classList.remove('bg-blue-600', 'text-white');
    document.getElementById('barbersBtn').classList.add('bg-gray-300', 'text-gray-700');
    loadCustomers();
}

function showBarbers() {
    currentSection = 'barbers';
    document.getElementById('customersSection').classList.add('hidden');
    document.getElementById('barbersSection').classList.remove('hidden');
    document.getElementById('barbersBtn').classList.remove('bg-gray-300', 'text-gray-700');
    document.getElementById('barbersBtn').classList.add('bg-blue-600', 'text-white');
    document.getElementById('customersBtn').classList.remove('bg-blue-600', 'text-white');
    document.getElementById('customersBtn').classList.add('bg-gray-300', 'text-gray-700');
    loadBarbers();
}

function handleSearch() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        if (currentSection === 'customers') {
            loadCustomers(1);
        } else {
            loadBarbers(1);
        }
    }, 500);
}

// View customer details - navigate to new page
function viewCustomer(id) {
    window.location.href = `/admin/users/customer/${id}`;
}

// View barber details - navigate to new page
function viewBarber(id) {
    window.location.href = `/admin/users/barber/${id}`;
}

// Old modal functions (kept for reference but not used)
async function viewCustomerModal(id) {
    const modal = document.getElementById('customerModal');
    const content = document.getElementById('customerModalContent');
    modal.classList.remove('hidden');
    content.innerHTML = '<div class="text-center text-gray-500 py-8">Loading...</div>';
    
    const data = await window.apiCall(`/users/customers/${id}`);
    if (data && data.success) {
        const customer = data.data.customer;
        const bookings = await window.apiCall(`/users/customers/${id}/bookings`);
        
        content.innerHTML = `
            <div class="space-y-6">
                <!-- Profile Info -->
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="text-sm font-medium text-gray-500">Name</label>
                        <p class="text-lg font-semibold">${customer.first_name} ${customer.last_name}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Email</label>
                        <p class="text-lg">${customer.email}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Phone</label>
                        <p class="text-lg">${customer.phone || 'N/A'}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Country</label>
                        <p class="text-lg">${customer.country || 'N/A'}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Total Bookings</label>
                        <p class="text-lg font-semibold">${customer.appointments_count || 0}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Payment Methods</label>
                        <p class="text-lg">${customer.payment_methods?.length || 0} saved</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Total Spent</label>
                        <p class="text-lg font-semibold">$${parseFloat(data.data.total_spent || 0).toFixed(2)}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Member Since</label>
                        <p class="text-lg">${new Date(customer.created_at).toLocaleDateString()}</p>
                    </div>
                </div>
                
                <!-- Booking History -->
                <div>
                    <h4 class="text-lg font-semibold mb-4">Booking History</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Barber</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Services</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                ${bookings && bookings.success && bookings.data.length > 0 ? 
                                    bookings.data.map(booking => `
                                        <tr>
                                            <td class="px-4 py-2 text-sm">${new Date(booking.appointment_date).toLocaleDateString()}</td>
                                            <td class="px-4 py-2 text-sm">${booking.barber?.user?.first_name || ''} ${booking.barber?.user?.last_name || ''}</td>
                                            <td class="px-4 py-2 text-sm">${booking.services?.map(s => s.service_name).join(', ') || 'N/A'}</td>
                                            <td class="px-4 py-2 text-sm">$${parseFloat(booking.total_amount || 0).toFixed(2)}</td>
                                            <td class="px-4 py-2 text-sm">
                                                <span class="px-2 py-1 text-xs rounded-full ${getStatusColor(booking.status)}">${booking.status}</span>
                                            </td>
                                        </tr>
                                    `).join('') : 
                                    '<tr><td colspan="5" class="px-4 py-4 text-center text-gray-500">No bookings found</td></tr>'
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    }
}

// Old barber modal function (kept for reference but not used)
async function viewBarberModal(id) {
    const modal = document.getElementById('barberModal');
    const content = document.getElementById('barberModalContent');
    modal.classList.remove('hidden');
    content.innerHTML = '<div class="text-center text-gray-500 py-8">Loading...</div>';
    
    const data = await window.apiCall(`/users/barbers/${id}`);
    if (data && data.success) {
        const barberData = data.data.barber;
        const user = barberData.user || barberData;
        const barberProfile = barberData.barber || {};
        
        content.innerHTML = `
            <div class="space-y-6">
                <!-- Profile Info -->
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="text-sm font-medium text-gray-500">Name</label>
                        <p class="text-lg font-semibold">${user.first_name} ${user.last_name}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Email</label>
                        <p class="text-lg">${user.email}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Phone</label>
                        <p class="text-lg">${user.phone || 'N/A'}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Balance</label>
                        <p class="text-lg font-semibold text-green-600">$${parseFloat(barberProfile?.balance || 0).toFixed(2)}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Average Rating</label>
                        <p class="text-lg font-semibold">${data.data.average_rating || '0.0'} ⭐ (${data.data.total_reviews || 0} reviews)</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Total Appointments</label>
                        <p class="text-lg font-semibold">${barberData.appointments_count || 0}</p>
                    </div>
                </div>
                
                <!-- Shop Info -->
                ${barberProfile?.shop ? `
                <div>
                    <h4 class="text-lg font-semibold mb-2">Shop Information</h4>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <p class="font-medium">${barberProfile.shop.shop_name}</p>
                        <p class="text-sm text-gray-600">${barberProfile.shop.city}, ${barberProfile.shop.state} ${barberProfile.shop.zip_code}</p>
                        <p class="text-sm text-gray-600">Hours: ${barberProfile.shop.open_time} - ${barberProfile.shop.close_time}</p>
                    </div>
                </div>
                ` : ''}
                
                <!-- Services & Pricing -->
                <div>
                    <h4 class="text-lg font-semibold mb-4">Services & Pricing</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Service</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Price</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Duration</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                ${barberProfile?.services && barberProfile.services.length > 0 ? 
                                    barberProfile.services.map(service => `
                                        <tr>
                                            <td class="px-4 py-2 text-sm font-medium">${service.service_name}</td>
                                            <td class="px-4 py-2 text-sm">$${parseFloat(service.price || 0).toFixed(2)}</td>
                                            <td class="px-4 py-2 text-sm">${service.duration || 0} min</td>
                                        </tr>
                                    `).join('') : 
                                    '<tr><td colspan="3" class="px-4 py-4 text-center text-gray-500">No services found</td></tr>'
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- Availability -->
                ${barberProfile?.availability && barberProfile.availability.length > 0 ? `
                <div>
                    <h4 class="text-lg font-semibold mb-4">Availability Settings</h4>
                    <div class="space-y-2">
                        ${barberProfile.availability.map(avail => `
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <p class="font-medium">${new Date(avail.date).toLocaleDateString()}</p>
                                <p class="text-sm text-gray-600">${avail.is_closed ? 'Closed' : `${avail.open_time} - ${avail.close_time}`}</p>
                            </div>
                        `).join('')}
                    </div>
                </div>
                ` : ''}
                
                <!-- Ratings & Reviews -->
                <div>
                    <h4 class="text-lg font-semibold mb-4">Ratings & Reviews</h4>
                    <div class="space-y-3 max-h-64 overflow-y-auto">
                        ${barberProfile?.ratings && barberProfile.ratings.length > 0 ? 
                            barberProfile.ratings.map(rating => `
                                <div class="border border-gray-200 rounded-lg p-4">
                                    <div class="flex justify-between items-start mb-2">
                                        <div>
                                            <p class="font-medium">${rating.user?.first_name || ''} ${rating.user?.last_name || ''}</p>
                                            <div class="flex items-center">
                                                ${'⭐'.repeat(rating.rating)} ${'☆'.repeat(5 - rating.rating)}
                                            </div>
                                        </div>
                                        <span class="text-xs text-gray-500">${new Date(rating.created_at).toLocaleDateString()}</span>
                                    </div>
                                    <p class="text-sm text-gray-700">${rating.comment || 'No comment'}</p>
                                </div>
                            `).join('') : 
                            '<p class="text-gray-500 text-center py-4">No reviews yet</p>'
                        }
                    </div>
                </div>
                
                <!-- Reported Reviews -->
                ${data.data.reported_reviews && data.data.reported_reviews.length > 0 ? `
                <div>
                    <h4 class="text-lg font-semibold mb-4 text-red-600">Reported Reviews (${data.data.reported_reviews.length})</h4>
                    <div class="space-y-3 max-h-64 overflow-y-auto">
                        ${data.data.reported_reviews.map(rating => `
                            <div class="border border-red-200 bg-red-50 rounded-lg p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <div>
                                        <p class="font-medium">${rating.user?.first_name || ''} ${rating.user?.last_name || ''}</p>
                                        <div class="flex items-center">
                                            ${'⭐'.repeat(rating.rating)} ${'☆'.repeat(5 - rating.rating)}
                                        </div>
                                    </div>
                                    <div class="flex gap-2">
                                        <span class="text-xs text-red-600">Reported ${new Date(rating.reported_at).toLocaleDateString()}</span>
                                        <button onclick="deleteReportedReview(${rating.id})" class="text-red-600 hover:text-red-800 text-xs font-medium">Delete</button>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-700 mb-2">${rating.comment || 'No comment'}</p>
                                ${rating.report_reason ? `<p class="text-xs text-red-600">Reason: ${rating.report_reason}</p>` : ''}
                            </div>
                        `).join('')}
                    </div>
                </div>
                ` : ''}
            </div>
        `;
    }
}

function getStatusColor(status) {
    const colors = {
        'pending': 'bg-yellow-100 text-yellow-800',
        'accepted': 'bg-blue-100 text-blue-800',
        'completed': 'bg-green-100 text-green-800',
        'cancelled': 'bg-red-100 text-red-800',
        'declined': 'bg-gray-100 text-gray-800'
    };
    return colors[status.toLowerCase()] || 'bg-gray-100 text-gray-800';
}

function closeCustomerModal() {
    document.getElementById('customerModal').classList.add('hidden');
}

function closeBarberModal() {
    document.getElementById('barberModal').classList.add('hidden');
}

async function disableCustomer(id) {
    const confirmed = await showActionModal({
        title: 'Disable Customer',
        message: 'Are you sure you want to disable this customer account?',
        confirmText: 'Disable',
        confirmClass: 'bg-red-600 hover:bg-red-700'
    });

    if (!confirmed) return;

    const data = await window.apiCall(`/users/customers/${id}`, { method: 'DELETE' });
    if (data && data.success) {
        await showActionModal({
            title: 'Success',
            message: data.message || 'Customer disabled successfully',
            confirmText: 'OK',
            hideCancel: true,
            confirmClass: 'bg-green-600 hover:bg-green-700'
        });
        loadCustomers(currentCustomersPage);
    }
}

async function enableCustomer(id) {
    const confirmed = await showActionModal({
        title: 'Enable Customer',
        message: 'Are you sure you want to enable this customer account?',
        confirmText: 'Enable',
        confirmClass: 'bg-green-600 hover:bg-green-700'
    });

    if (!confirmed) return;

    const data = await window.apiCall(`/users/customers/${id}/enable`, { method: 'POST' });
    if (data && data.success) {
        await showActionModal({
            title: 'Success',
            message: data.message || 'Customer enabled successfully',
            confirmText: 'OK',
            hideCancel: true,
            confirmClass: 'bg-green-600 hover:bg-green-700'
        });
        loadCustomers(currentCustomersPage);
    }
}

async function suspendBarber(id) {
    const confirmed = await showActionModal({
        title: 'Suspend Barber',
        message: 'Are you sure you want to suspend this barber account?',
        confirmText: 'Suspend',
        confirmClass: 'bg-red-600 hover:bg-red-700'
    });

    if (!confirmed) return;

    const data = await window.apiCall(`/users/barbers/${id}/suspend`, { method: 'POST' });
    if (data && data.success) {
        await showActionModal({
            title: 'Success',
            message: data.message || 'Barber suspended successfully',
            confirmText: 'OK',
            hideCancel: true,
            confirmClass: 'bg-green-600 hover:bg-green-700'
        });
        loadBarbers(currentBarbersPage);
    }
}

async function enableBarber(id) {
    const confirmed = await showActionModal({
        title: 'Unsuspend Barber',
        message: 'Are you sure you want to unsuspend this barber account?',
        confirmText: 'Unsuspend',
        confirmClass: 'bg-green-600 hover:bg-green-700'
    });

    if (!confirmed) return;

    const data = await window.apiCall(`/users/barbers/${id}/enable`, { method: 'POST' });
    if (data && data.success) {
        await showActionModal({
            title: 'Success',
            message: data.message || 'Barber unsuspended successfully',
            confirmText: 'OK',
            hideCancel: true,
            confirmClass: 'bg-green-600 hover:bg-green-700'
        });
        loadBarbers(currentBarbersPage);
    }
}

async function deleteReportedReview(ratingId) {
    const confirmed = await showActionModal({
        title: 'Delete Reported Review',
        message: 'Are you sure you want to delete this reported review?',
        confirmText: 'Delete',
        confirmClass: 'bg-red-600 hover:bg-red-700'
    });

    if (!confirmed) return;

    const data = await window.apiCall(`/users/reported-reviews/${ratingId}`, { method: 'DELETE' });
    if (data && data.success) {
        await showActionModal({
            title: 'Success',
            message: data.message || 'Reported review deleted successfully',
            confirmText: 'OK',
            hideCancel: true,
            confirmClass: 'bg-green-600 hover:bg-green-700'
        });
        // Close modal and reload barbers list
        closeBarberModal();
        loadBarbers(currentBarbersPage);
    }
}

// Initialize
loadCities();
showCustomers();
</script>
@endsection