@extends('admin.layout')

@section('title', 'Disputes & Support')

@section('content')
<h1 class="text-2xl font-bold mb-6">Disputes & Support</h1>

<div class="bg-white rounded-lg shadow overflow-hidden relative z-10">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 relative">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Booking ID</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</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">Issue</th>
                    <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">Actions</th>
                </tr>
            </thead>
            <tbody id="disputesTable" class="bg-white divide-y divide-gray-200">
                <tr><td colspan="6" class="px-6 py-4 text-center text-gray-500">Loading...</td></tr>
            </tbody>
        </table>
    </div>
</div>
@endsection

@section('scripts')
<script>
async function loadDisputes() {
    const data = await window.apiCall('/disputes');
    if (data && data.success) {
        const tbody = document.getElementById('disputesTable');
        tbody.innerHTML = data.data.data.map(dispute => `
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#${dispute.id}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${dispute.user?.first_name || '-'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${dispute.barber?.user?.first_name || '-'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                    <span class="px-2 py-1 text-xs font-semibold rounded-full ${dispute.payment_status === 'failed' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'}">
                        ${dispute.payment_status === 'failed' ? 'Payment Failed' : 'Cancelled'}
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${new Date(dispute.created_at).toLocaleDateString()}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button onclick="viewDispute(${dispute.id})" class="text-blue-600 hover:text-blue-900 mr-4">View</button>
                    <button onclick="resolveDispute(${dispute.id})" class="text-green-600 hover:text-green-900">Resolve</button>
                </td>
            </tr>
        `).join('');
    }
}

function viewDispute(id) {
    window.location.href = `/admin/disputes/${id}`;
}

function resolveDispute(id) {
    if (confirm('Mark this dispute as resolved?')) {
        window.apiCall(`/disputes/${id}/resolve`, { method: 'POST' }).then(() => loadDisputes());
    }
}

loadDisputes();
</script>
@endsection