@extends('admin.layout')

@section('title', 'Barber 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="barberDetailContent" class="bg-white rounded-lg shadow p-6">
    <div class="text-center text-gray-500 py-8">Loading barber details...</div>
</div>

@endsection

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

async function loadBarberDetail() {
    const content = document.getElementById('barberDetailContent');
    
    try {
        const data = await window.apiCall(`/users/barbers/${barberId}`);
        if (data && data.success) {
            const barberData = data.data.barber;
            const user = barberData.user || barberData;
            const barber = barberData.barber || {};
            
            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">Barber Profile</h1>
                        <p class="text-gray-600 mt-1">${user.first_name} ${user.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">${user.first_name} ${user.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">${user.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">${user.phone || 'N/A'}</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Balance</label>
                            <p class="text-lg font-semibold text-green-600 mt-1">$${parseFloat(barber?.balance || 0).toFixed(2)}</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Average Rating</label>
                            <p class="text-lg font-semibold mt-1">${data.data.average_rating || '0.0'} ⭐</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Total Reviews</label>
                            <p class="text-lg mt-1">${data.data.total_reviews || 0}</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Total Appointments</label>
                            <p class="text-lg mt-1">${barberData.appointments_count || 0}</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(user.created_at).toLocaleDateString()}</p>
                        </div>
                    </div>
                    
                    <!-- Actions -->
                    <div class="flex gap-4">
                        <button onclick="suspendBarber(${barber?.id || barberData.barber?.id})" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                            Suspend Account
                        </button>
                    </div>
                    
                    <!-- Shop Info -->
                    ${barber?.shop ? `
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h2 class="text-xl font-semibold mb-4">Shop Information</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="text-sm font-medium text-gray-500">Shop Name</label>
                                <p class="text-lg font-semibold">${barber.shop.shop_name}</p>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-500">Location</label>
                                <p class="text-lg">${barber.shop.city}, ${barber.shop.state} ${barber.shop.zip_code}</p>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-500">Country</label>
                                <p class="text-lg">${barber.shop.country}</p>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-500">Hours</label>
                                <p class="text-lg">${barber.shop.open_time} - ${barber.shop.close_time}</p>
                            </div>
                        </div>
                    </div>
                    ` : ''}
                    
                    <!-- Services & Pricing -->
                    <div>
                        <h2 class="text-xl font-semibold mb-4">Services & Pricing</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">Service</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    ${barber?.services && barber.services.length > 0 ? 
                                        barber.services.map(service => `
                                            <tr class="hover:bg-gray-50">
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">${service.service_name}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm">$${parseFloat(service.price || 0).toFixed(2)}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm">${service.duration || 0} min</td>
                                            </tr>
                                        `).join('') : 
                                        '<tr><td colspan="3" class="px-6 py-4 text-center text-gray-500">No services found</td></tr>'
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- Availability -->
                    ${barber?.availability && barber.availability.length > 0 ? `
                    <div>
                        <h2 class="text-xl font-semibold mb-4">Availability Settings</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            ${barber.availability.map(avail => `
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <p class="font-medium">${new Date(avail.date).toLocaleDateString()}</p>
                                    <p class="text-sm text-gray-600 mt-1">${avail.is_closed ? 'Closed' : `${avail.open_time} - ${avail.close_time}`}</p>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                    ` : ''}
                    
                    <!-- Ratings & Reviews -->
                    <div>
                        <h2 class="text-xl font-semibold mb-4">Ratings & Reviews</h2>
                        <div class="space-y-4">
                            ${barber?.ratings && barber.ratings.length > 0 ? 
                                barber.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 mt-1">
                                                    ${'⭐'.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 mt-2">${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>
                        <h2 class="text-xl font-semibold mb-4 text-red-600">Reported Reviews (${data.data.reported_reviews.length})</h2>
                        <div class="space-y-4">
                            ${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 mt-1">
                                                ${'⭐'.repeat(rating.rating)} ${'☆'.repeat(5 - rating.rating)}
                                            </div>
                                        </div>
                                        <div class="flex gap-2 items-center">
                                            <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 px-2 py-1 bg-red-100 rounded">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>
            `;
        } else {
            content.innerHTML = '<div class="text-center text-red-500 py-8">Failed to load barber details</div>';
        }
    } catch (error) {
        console.error('Error loading barber:', error);
        content.innerHTML = '<div class="text-center text-red-500 py-8">Error loading barber details</div>';
    }
}

async function suspendBarber(id) {
    if (confirm('Are you sure you want to suspend this barber account?')) {
        const data = await window.apiCall(`/users/barbers/${id}/suspend`, { method: 'POST' });
        if (data && data.success) {
            alert('Barber suspended successfully');
            window.location.href = '/admin/users';
        }
    }
}

async function deleteReportedReview(ratingId) {
    if (confirm('Are you sure you want to delete this reported review?')) {
        const data = await window.apiCall(`/users/reported-reviews/${ratingId}`, { method: 'DELETE' });
        if (data && data.success) {
            alert('Reported review deleted successfully');
            loadBarberDetail(); // Reload the page
        }
    }
}

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