@extends('admin.layout')

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

@section('content')
<div class="mb-6">
    <a href="/admin/bookings" 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 Bookings
    </a>
</div>

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

<!-- Release Payment Modal -->
<div id="releasePaymentModal" 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-md w-full p-6">
        <h3 class="text-xl font-semibold mb-4">Release Payment</h3>
        <form id="releasePaymentForm" onsubmit="submitReleasePayment(event)">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Amount to Release</label>
                <input type="number" id="releaseAmount" step="0.01" min="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" required>
                <p class="text-xs text-gray-500 mt-1">Leave empty to release default amount (80% of total)</p>
            </div>
            <div class="flex gap-4">
                <button type="submit" class="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">Release</button>
                <button type="button" onclick="closeReleaseModal()" class="flex-1 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- Issue Refund Modal -->
<div id="issueRefundModal" 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-md w-full p-6">
        <h3 class="text-xl font-semibold mb-4">Issue Refund</h3>
        <form id="issueRefundForm" onsubmit="submitIssueRefund(event)">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Refund Amount</label>
                <input type="number" id="refundAmount" step="0.01" min="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" required>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Reason</label>
                <textarea id="refundReason" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" required></textarea>
            </div>
            <div class="flex gap-4">
                <button type="submit" class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">Issue Refund</button>
                <button type="button" onclick="closeRefundModal()" class="flex-1 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400">Cancel</button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('scripts')
<script>
const bookingId = {{ $id }};
let currentBooking = null;

async function loadBookingDetail() {
    const content = document.getElementById('bookingDetailContent');
    
    try {
        const response = await window.apiCall(`/bookings/${bookingId}`);
        if (response && response.success) {
            currentBooking = response.data.booking;
            const booking = currentBooking;
            const transactions = response.data.transactions || [];
            
            const paymentTypeLabel = booking.payment_type === 'pay_now' ? 'Pay Now (Full Payment/Deposit)' : 
                                   booking.payment_type === 'pay_at_shop' ? 'Pay at Shop (Cash/Authorize)' : booking.payment_type || 'N/A';
            
            const canReleasePayment = booking.status === 'completed' && 
                                    (booking.payment_status === 'paid' || booking.payment_status === 'pending') &&
                                    booking.payment_status !== 'refunded';
            
            const canIssueRefund = booking.payment_status === 'paid' || booking.deposit_amount > 0 || booking.authorized_amount > 0;
            
            content.innerHTML = `
                <div class="space-y-6">
                    <!-- Header -->
                    <div class="border-b border-gray-200 pb-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <h1 class="text-2xl font-bold text-gray-800">Booking #${booking.id}</h1>
                                <p class="text-gray-600 mt-1">${new Date(booking.appointment_date).toLocaleDateString()} at ${booking.appointment_time || 'N/A'}</p>
                            </div>
                            <div class="flex gap-2">
                                ${canReleasePayment ? `
                                    <button onclick="openReleaseModal()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                                        Release Payment
                                    </button>
                                ` : ''}
                                ${canIssueRefund ? `
                                    <button onclick="openRefundModal()" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
                                        Issue Refund
                                    </button>
                                ` : ''}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Booking Info Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Status</label>
                            <p class="text-lg font-semibold mt-1">
                                <span class="px-2 py-1 text-xs rounded-full ${getStatusColor(booking.status)}">${booking.status}</span>
                            </p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Payment Status</label>
                            <p class="text-lg font-semibold mt-1">
                                <span class="px-2 py-1 text-xs rounded-full ${getPaymentStatusColor(booking.payment_status)}">${booking.payment_status || 'N/A'}</span>
                            </p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Payment Type</label>
                            <p class="text-lg mt-1">${paymentTypeLabel}</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Total Amount</label>
                            <p class="text-lg font-semibold text-green-600 mt-1">$${parseFloat(booking.total_amount || 0).toFixed(2)}</p>
                        </div>
                        ${booking.deposit_amount > 0 ? `
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Deposit Amount</label>
                            <p class="text-lg font-semibold mt-1">$${parseFloat(booking.deposit_amount || 0).toFixed(2)}</p>
                        </div>
                        ` : ''}
                        ${booking.authorized_amount > 0 ? `
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <label class="text-sm font-medium text-gray-500">Authorized Amount</label>
                            <p class="text-lg font-semibold mt-1">$${parseFloat(booking.authorized_amount || 0).toFixed(2)}</p>
                        </div>
                        ` : ''}
                    </div>
                    
                    <!-- Customer Info -->
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h2 class="text-xl font-semibold mb-4">Customer Information</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="text-sm font-medium text-gray-500">Name</label>
                                <p class="text-lg font-semibold">${booking.user?.first_name || ''} ${booking.user?.last_name || ''}</p>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-500">Email</label>
                                <p class="text-lg">${booking.user?.email || 'N/A'}</p>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-500">Phone</label>
                                <p class="text-lg">${booking.user?.phone || 'N/A'}</p>
                            </div>
                            <div>
                                <a href="/admin/users/customer/${booking.user?.id}" class="text-blue-600 hover:text-blue-800">View Customer Profile →</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Barber Info -->
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h2 class="text-xl font-semibold mb-4">Barber Information</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="text-sm font-medium text-gray-500">Name</label>
                                <p class="text-lg font-semibold">${booking.barber?.user?.first_name || ''} ${booking.barber?.user?.last_name || ''}</p>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-500">Shop</label>
                                <p class="text-lg">${booking.barber?.shop?.shop_name || 'N/A'}</p>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-500">Location</label>
                                <p class="text-lg">${booking.barber?.shop?.city || ''}, ${booking.barber?.shop?.state || ''}</p>
                            </div>
                            <div>
                                <a href="/admin/users/barber/${booking.barber?.user?.id}" class="text-blue-600 hover:text-blue-800">View Barber Profile →</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Services -->
                    <div>
                        <h2 class="text-xl font-semibold mb-4">Services</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">Service</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Price</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Duration</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    ${booking.services && booking.services.length > 0 ? 
                                        booking.services.map(service => `
                                            <tr>
                                                <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>
                    
                    <!-- Refunds -->
                    ${booking.refunds && booking.refunds.length > 0 ? `
                    <div>
                        <h2 class="text-xl font-semibold mb-4 text-red-600">Refund History</h2>
                        <div class="space-y-3">
                            ${booking.refunds.map(refund => `
                                <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-semibold text-red-800">$${parseFloat(refund.amount || 0).toFixed(2)}</p>
                                            <p class="text-sm text-red-600">Status: ${refund.status}</p>
                                        </div>
                                        <span class="text-xs text-gray-500">${new Date(refund.created_at).toLocaleDateString()}</span>
                                    </div>
                                    <p class="text-sm text-gray-700 mb-1"><strong>Reason:</strong> ${refund.reason || 'N/A'}</p>
                                    ${refund.admin_reason ? `<p class="text-sm text-gray-700"><strong>Admin Note:</strong> ${refund.admin_reason}</p>` : ''}
                                    ${refund.processed_at ? `<p class="text-xs text-gray-500 mt-1">Processed: ${new Date(refund.processed_at).toLocaleDateString()}</p>` : ''}
                                </div>
                            `).join('')}
                        </div>
                    </div>
                    ` : ''}
                    
                    <!-- Transactions -->
                    ${transactions && transactions.length > 0 ? `
                    <div>
                        <h2 class="text-xl font-semibold mb-4">Payment Transactions</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">Type</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Notes</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    ${transactions.map(transaction => `
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm">${transaction.type}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold">$${parseFloat(transaction.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 ${getTransactionStatusColor(transaction.status)}">${transaction.status}</span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm">${new Date(transaction.created_at).toLocaleDateString()}</td>
                                            <td class="px-6 py-4 text-sm">${transaction.notes || 'N/A'}</td>
                                        </tr>
                                    `).join('')}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    ` : ''}
                </div>
            `;
        } else {
            content.innerHTML = '<div class="text-center text-red-500 py-8">Failed to load booking details</div>';
        }
    } catch (error) {
        console.error('Error loading booking:', error);
        content.innerHTML = '<div class="text-center text-red-500 py-8">Error loading booking 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';
}

function getPaymentStatusColor(status) {
    const colors = {
        'pending': 'bg-yellow-100 text-yellow-800',
        'paid': 'bg-green-100 text-green-800',
        'failed': 'bg-red-100 text-red-800',
        'refunded': 'bg-purple-100 text-purple-800'
    };
    return colors[status?.toLowerCase()] || 'bg-gray-100 text-gray-800';
}

function getTransactionStatusColor(status) {
    const colors = {
        'pending': 'bg-yellow-100 text-yellow-800',
        'completed': 'bg-green-100 text-green-800',
        'failed': 'bg-red-100 text-red-800'
    };
    return colors[status?.toLowerCase()] || 'bg-gray-100 text-gray-800';
}

function openReleaseModal() {
    if (currentBooking) {
        const defaultAmount = (currentBooking.total_amount * 0.8).toFixed(2);
        document.getElementById('releaseAmount').value = defaultAmount;
        document.getElementById('releaseAmount').max = currentBooking.total_amount;
    }
    document.getElementById('releasePaymentModal').classList.remove('hidden');
}

function closeReleaseModal() {
    document.getElementById('releasePaymentModal').classList.add('hidden');
}

function openRefundModal() {
    if (currentBooking) {
        const maxAmount = currentBooking.total_amount;
        document.getElementById('refundAmount').value = '';
        document.getElementById('refundAmount').max = maxAmount;
        document.getElementById('refundAmount').placeholder = `Max: $${maxAmount.toFixed(2)}`;
    }
    document.getElementById('issueRefundModal').classList.remove('hidden');
}

function closeRefundModal() {
    document.getElementById('issueRefundModal').classList.add('hidden');
}

async function submitReleasePayment(event) {
    event.preventDefault();
    const amount = document.getElementById('releaseAmount').value;
    
    try {
        const data = await window.apiCall(`/bookings/${bookingId}/release-payment`, {
            method: 'POST',
            body: JSON.stringify({ amount: amount ? parseFloat(amount) : null })
        });
        
        if (data && data.success) {
            alert('Payment released successfully!');
            closeReleaseModal();
            loadBookingDetail();
        } else {
            alert(data?.message || 'Failed to release payment');
        }
    } catch (error) {
        console.error('Error releasing payment:', error);
        alert('Error releasing payment');
    }
}

async function submitIssueRefund(event) {
    event.preventDefault();
    const amount = document.getElementById('refundAmount').value;
    const reason = document.getElementById('refundReason').value;
    
    if (!amount || !reason) {
        alert('Please fill in all fields');
        return;
    }
    
    try {
        const data = await window.apiCall(`/bookings/${bookingId}/issue-refund`, {
            method: 'POST',
            body: JSON.stringify({ 
                amount: parseFloat(amount),
                reason: reason
            })
        });
        
        if (data && data.success) {
            alert('Refund issued successfully!');
            closeRefundModal();
            loadBookingDetail();
        } else {
            alert(data?.message || 'Failed to issue refund');
        }
    } catch (error) {
        console.error('Error issuing refund:', error);
        alert('Error issuing refund');
    }
}

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