@extends('admin.layout')

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

@section('content')
<div class="mb-6 flex gap-4 items-center">
    <select id="statusFilter" class="px-4 py-2 border rounded-md" onchange="loadRefunds()">
        <option value="all">All Status</option>
        <option value="pending" selected>Pending</option>
        <option value="approved">Approved</option>
        <option value="rejected">Rejected</option>
        <option value="processed">Processed</option>
    </select>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <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">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">Amount</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reason</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</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="refundsTable" class="bg-white divide-y divide-gray-200">
            <tr><td colspan="8" class="px-6 py-4 text-center text-gray-500">Loading...</td></tr>
        </tbody>
    </table>
</div>

<!-- Refund Modal -->
<div id="refundModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-gray-900" id="modalTitle">Refund Details</h3>
                <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
                    <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="modalContent" class="space-y-4">
                <!-- Content will be loaded dynamically -->
            </div>
            
            <div id="modalActions" class="mt-6 flex justify-end gap-4">
                <!-- Actions will be loaded dynamically -->
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
let currentRefundId = null;

async function loadRefunds() {
    const status = document.getElementById('statusFilter').value;
    const data = await window.apiCall(`/refunds?status=${status}`);
    
    if (data && data.success) {
        const tbody = document.getElementById('refundsTable');
        if (data.data.data.length === 0) {
            tbody.innerHTML = '<tr><td colspan="8" class="px-6 py-4 text-center text-gray-500">No refunds found</td></tr>';
        } else {
            tbody.innerHTML = data.data.data.map(refund => `
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#${refund.id}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        ${refund.user?.first_name || ''} ${refund.user?.last_name || ''}
                        <br><span class="text-xs text-gray-400">${refund.user?.email || ''}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        ${refund.barber?.user?.first_name || ''} ${refund.barber?.user?.last_name || ''}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">$${parseFloat(refund.amount || 0).toFixed(2)}</td>
                    <td class="px-6 py-4 text-sm text-gray-500 max-w-xs truncate" title="${refund.reason || ''}">
                        ${refund.reason || '-'}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <span class="px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(refund.status)}">${refund.status}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        ${new Date(refund.created_at).toLocaleDateString()}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <button onclick="viewRefund(${refund.id})" class="text-blue-600 hover:text-blue-900 mr-4">View</button>
                        ${refund.status === 'pending' ? `
                            <button onclick="approveRefund(${refund.id})" class="text-green-600 hover:text-green-900 mr-2">Approve</button>
                            <button onclick="rejectRefund(${refund.id})" class="text-red-600 hover:text-red-900">Reject</button>
                        ` : ''}
                    </td>
                </tr>
            `).join('');
        }
    }
}

function getStatusColor(status) {
    const colors = {
        pending: 'bg-yellow-100 text-yellow-800',
        approved: 'bg-blue-100 text-blue-800',
        rejected: 'bg-red-100 text-red-800',
        processed: 'bg-green-100 text-green-800'
    };
    return colors[status] || 'bg-gray-100 text-gray-800';
}

async function viewRefund(id) {
    const data = await window.apiCall(`/refunds/${id}`);
    if (data && data.success) {
        const refund = data.data;
        currentRefundId = id;
        
        document.getElementById('modalTitle').textContent = `Refund Request #${refund.id}`;
        document.getElementById('modalContent').innerHTML = `
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Customer</label>
                    <p class="mt-1 text-sm text-gray-900">${refund.user?.first_name || ''} ${refund.user?.last_name || ''} (${refund.user?.email || ''})</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Barber</label>
                    <p class="mt-1 text-sm text-gray-900">${refund.barber?.user?.first_name || ''} ${refund.barber?.user?.last_name || ''}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Amount</label>
                    <p class="mt-1 text-sm text-gray-900 font-semibold">$${parseFloat(refund.amount || 0).toFixed(2)}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Customer Reason</label>
                    <p class="mt-1 text-sm text-gray-900 bg-gray-50 p-3 rounded">${refund.reason || 'No reason provided'}</p>
                </div>
                ${refund.admin_reason ? `
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Admin Response</label>
                        <p class="mt-1 text-sm text-gray-900 bg-blue-50 p-3 rounded">${refund.admin_reason}</p>
                    </div>
                ` : ''}
                <div>
                    <label class="block text-sm font-medium text-gray-700">Status</label>
                    <p class="mt-1"><span class="px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(refund.status)}">${refund.status}</span></p>
                </div>
                ${refund.processed_at ? `
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Processed At</label>
                        <p class="mt-1 text-sm text-gray-900">${new Date(refund.processed_at).toLocaleString()}</p>
                    </div>
                ` : ''}
            </div>
        `;
        
        if (refund.status === 'pending') {
            document.getElementById('modalActions').innerHTML = `
                <button onclick="closeModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">Close</button>
                <button onclick="approveRefund(${id})" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Approve</button>
                <button onclick="rejectRefund(${id})" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">Reject</button>
            `;
        } else {
            document.getElementById('modalActions').innerHTML = `
                <button onclick="closeModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">Close</button>
            `;
        }
        
        document.getElementById('refundModal').classList.remove('hidden');
    }
}

function closeModal() {
    document.getElementById('refundModal').classList.add('hidden');
    currentRefundId = null;
}

async function approveRefund(id) {
    const adminReason = prompt('Enter reason for approval (optional):');
    if (adminReason === null) return; // User cancelled
    
    try {
        const data = await window.apiCall(`/refunds/${id}/approve`, {
            method: 'POST',
            body: JSON.stringify({ admin_reason: adminReason || 'Refund approved by admin' })
        });
        
        if (data && data.success) {
            alert('Refund approved successfully');
            closeModal();
            loadRefunds();
        } else {
            alert('Error: ' + (data?.message || 'Failed to approve refund'));
        }
    } catch (error) {
        console.error('Error approving refund:', error);
        alert('Error approving refund');
    }
}

async function rejectRefund(id) {
    const adminReason = prompt('Enter reason for rejection (required):');
    if (!adminReason || adminReason.trim() === '') {
        alert('Reason is required for rejection');
        return;
    }
    
    try {
        const data = await window.apiCall(`/refunds/${id}/reject`, {
            method: 'POST',
            body: JSON.stringify({ admin_reason: adminReason })
        });
        
        if (data && data.success) {
            alert('Refund rejected');
            closeModal();
            loadRefunds();
        } else {
            alert('Error: ' + (data?.message || 'Failed to reject refund'));
        }
    } catch (error) {
        console.error('Error rejecting refund:', error);
        alert('Error rejecting refund');
    }
}

loadRefunds();
</script>
@endsection