@extends('admin.layout')

@section('title', 'Customer Details')

@section('content')
<div class="mb-6">
    <a href="/admin/users" class="text-blue-600 hover:text-blue-800 flex items-center">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
        </svg>
        Back to Users
    </a>
</div>

<div id="customerDetailContent" class="bg-white rounded-lg shadow p-6">
    <div class="text-center text-gray-500 py-8">Loading customer details...</div>
</div>

@endsection

@section('scripts')
<script>
const customerId = {{ $id }};

async function loadCustomerDetail() {
    const content = document.getElementById('customerDetailContent');
    
    try {
        const data = await window.apiCall(`/users/customers/${customerId}`);
        if (data && data.success) {
            const customer = data.data.customer;
            const bookings = await window.apiCall(`/users/customers/${customerId}/bookings`);
            
            content.innerHTML = `
                <div class="space-y-6">
                    <!-- Header -->
                    <div class="border-b border-gray-200 pb-4">
                        <h1 class="text-2xl font-bold text-gray-800">Customer Profile</h1>
                        <p class="text-gray-600 mt-1">${customer.first_name} ${customer.last_name}</p>
                    </div>
                    
                    <!-- Profile Info -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Name</label>
                            <p class="text-lg font-semibold mt-1">${customer.first_name} ${customer.last_name}</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Email</label>
                            <p class="text-lg mt-1">${customer.email}</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Phone</label>
                            <p class="text-lg mt-1">${customer.phone || 'N/A'}</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Country</label>
                            <p class="text-lg mt-1">${customer.country || 'N/A'}</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Total Bookings</label>
                            <p class="text-lg font-semibold mt-1">${customer.appointments_count || 0}</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Payment Methods</label>
                            <p class="text-lg mt-1">${customer.payment_methods?.length || 0} saved</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Total Spent</label>
                            <p class="text-lg font-semibold text-green-600 mt-1">$${parseFloat(data.data.total_spent || 0).toFixed(2)}</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Member Since</label>
                            <p class="text-lg mt-1">${new Date(customer.created_at).toLocaleDateString()}</p>
                        </div>
                    </div>
                    
                    <!-- Actions -->
                    <div class="flex gap-4">
                        ${customer.deleted_at
                            ? `<button onclick="enableCustomer(${customer.id})" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                                Enable Account
                               </button>`
                            : `<button onclick="disableCustomer(${customer.id})" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                                Disable Account
                               </button>`
                        }
                    </div>
                    
                    <!-- Booking History -->
                    <div>
                        <h2 class="text-xl font-semibold mb-4">Booking History</h2>
                        <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-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Barber</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Services</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">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 class="hover:bg-gray-50">
                                                <td class="px-6 py-4 whitespace-nowrap text-sm">${new Date(booking.appointment_date).toLocaleDateString()}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm">${booking.appointment_time || 'N/A'}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm">${booking.barber?.user?.first_name || ''} ${booking.barber?.user?.last_name || ''}</td>
                                                <td class="px-6 py-4 text-sm">${booking.services?.map(s => s.service_name).join(', ') || 'N/A'}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold">$${parseFloat(booking.total_amount || 0).toFixed(2)}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                                    <span class="px-2 py-1 text-xs rounded-full ${getStatusColor(booking.status)}">${booking.status}</span>
                                                </td>
                                            </tr>
                                        `).join('') : 
                                        '<tr><td colspan="6" class="px-6 py-4 text-center text-gray-500">No bookings found</td></tr>'
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            `;
        } else {
            content.innerHTML = '<div class="text-center text-red-500 py-8">Failed to load customer details</div>';
        }
    } catch (error) {
        console.error('Error loading customer:', error);
        content.innerHTML = '<div class="text-center text-red-500 py-8">Error loading customer details</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';
}

async function enableCustomer(id) {
    if (confirm('Are you sure you want to enable this customer account?')) {
        const data = await window.apiCall(`/users/customers/${id}/enable`, { method: 'POST' });
        if (data && data.success) {
            alert('Customer enabled successfully');
            window.location.href = '/admin/users';
        }
    }
}

async function disableCustomer(id) {
    if (confirm('Are you sure you want to disable this customer account?')) {
        const data = await window.apiCall(`/users/customers/${id}`, { method: 'DELETE' });
        if (data && data.success) {
            alert('Customer disabled successfully');
            window.location.href = '/admin/users';
        }
    }
}

// Load on page load
loadCustomerDetail();
</script>
@endsection