@extends('admin.layout')

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

@section('content')
<div class="space-y-6">
    <!-- Filters and Search Section -->
    <div class="bg-white p-6 rounded-lg shadow-md">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <div>
                <input type="text" id="searchInput" placeholder="Search by ID, name, email..." 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    onkeyup="handleSearch()">
            </div>
            
            <select id="statusFilter" class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="handleSearch()">
                <option value="">All Status</option>
                <option value="pending">Pending</option>
                <option value="accepted">Accepted</option>
                <option value="completed">Completed</option>
                <option value="cancelled">Cancelled</option>
                <option value="declined">Declined</option>
            </select>
            
            <select id="paymentStatusFilter" class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="handleSearch()">
                <option value="">All Payment Status</option>
                <option value="pending">Pending</option>
                <option value="paid">Paid</option>
                <option value="failed">Failed</option>
                <option value="refunded">Refunded</option>
            </select>
            
            <select id="paymentTypeFilter" class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="handleSearch()">
                <option value="">All Payment Types</option>
                <option value="pay_now">Pay Now (Full/Deposit)</option>
                <option value="pay_at_shop">Pay at Shop (Cash/Authorize)</option>
            </select>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">From Date</label>
                <input type="date" id="dateFrom" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="handleSearch()">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">To Date</label>
                <input type="date" id="dateTo" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="handleSearch()">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Refund Status</label>
                <select id="refundFilter" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="handleSearch()">
                    <option value="">All</option>
                    <option value="yes">Has Refund</option>
                    <option value="no">No Refund</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Bookings Table -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-200 bg-gray-50">
            <h2 class="text-xl font-semibold text-gray-800">All Bookings</h2>
        </div>
    <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-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Booking ID</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Customer</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Barber</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Date & Time</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Completion</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Payment Type</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Payment Status</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Amount</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Refunds</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody id="bookingsTable" class="bg-white divide-y divide-gray-200">
                <tr><td colspan="10" class="px-6 py-8 text-center text-gray-500">Loading...</td></tr>
            </tbody>
        </table>
    </div>
    <div id="bookingsPagination" class="px-6 py-4 border-t border-gray-200 bg-gray-50"></div>
</div>
</div>

<!-- Booking Detail Modal -->
<div id="bookingModal" 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-4xl w-full max-h-[90vh] overflow-y-auto">
        <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
            <h3 class="text-xl font-semibold text-gray-800">Booking Details</h3>
            <button onclick="closeBookingModal()" class="text-gray-500 hover:text-gray-700">
                <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="bookingModalContent" class="p-6">
            <div class="text-center text-gray-500">Loading...</div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
let currentPage = 1;
let searchTimeout;

// Load bookings
async function loadBookings(page = 1) {
    const search = document.getElementById('searchInput').value;
    const status = document.getElementById('statusFilter').value;
    const paymentStatus = document.getElementById('paymentStatusFilter').value;
    const paymentType = document.getElementById('paymentTypeFilter').value;
    const dateFrom = document.getElementById('dateFrom').value;
    const dateTo = document.getElementById('dateTo').value;
    const refundFilter = document.getElementById('refundFilter').value;
    
    const params = new URLSearchParams({ page, per_page: 15 });
    if (search) params.append('search', search);
    if (status) params.append('status', status);
    if (paymentStatus) params.append('payment_status', paymentStatus);
    if (paymentType) params.append('payment_type', paymentType);
    if (dateFrom) params.append('date_from', dateFrom);
    if (dateTo) params.append('date_to', dateTo);
    if (refundFilter) params.append('has_refund', refundFilter);
    
    const data = await window.apiCall(`/bookings?${params}`);
    if (data && data.success) {
        const tbody = document.getElementById('bookingsTable');
        if (data.data.data.length === 0) {
            tbody.innerHTML = '<tr><td colspan="10" class="px-6 py-8 text-center text-gray-500">No bookings found</td></tr>';
            document.getElementById('bookingsPagination').innerHTML = '';
        } else {
            tbody.innerHTML = data.data.data.map(booking => {
                const refundCount = booking.refunds?.length || 0;
                const hasRefund = refundCount > 0;
                const paymentTypeLabel = booking.payment_type === 'pay_now' ? 'Pay Now' : 
                                       booking.payment_type === 'pay_at_shop' ? 'Pay at Shop' : booking.payment_type || 'N/A';
                
                // Completion status
                const userCompleted = booking.user_completed || false;
                const barberCompleted = booking.barber_completed || false;
                const hasComplaint = booking.has_complaint || false;
                let completionStatus = '';
                if (booking.status === 'completed') {
                    completionStatus = '<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Completed</span>';
                } else if (hasComplaint) {
                    completionStatus = '<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Complaint</span>';
                } else if (userCompleted && barberCompleted) {
                    completionStatus = '<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Both Marked</span>';
                } else if (userCompleted || barberCompleted) {
                    completionStatus = `<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">${userCompleted ? 'User' : 'Barber'} Only</span>`;
                } else {
                    completionStatus = '<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Pending</span>';
                }
                
                return `
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-5 whitespace-nowrap text-sm font-medium text-gray-900">#${booking.id}</td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm text-gray-600">
                        ${booking.user?.first_name || ''} ${booking.user?.last_name || ''}
                        <br><span class="text-xs text-gray-400">${booking.user?.email || ''}</span>
                    </td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm text-gray-600">
                        ${booking.barber?.user?.first_name || ''} ${booking.barber?.user?.last_name || ''}
                        <br><span class="text-xs text-gray-400">${booking.barber?.shop?.shop_name || ''}</span>
                    </td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm text-gray-600">
                        ${new Date(booking.appointment_date).toLocaleDateString()}
                        <br><span class="text-xs text-gray-400">${booking.appointment_time || ''}</span>
                    </td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm">
                        <span class="px-2 py-1 text-xs rounded-full ${getStatusColor(booking.status)}">${booking.status}</span>
                    </td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm">
                        ${completionStatus}
                    </td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm text-gray-600">${paymentTypeLabel}</td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm">
                        <span class="px-2 py-1 text-xs rounded-full ${getPaymentStatusColor(booking.payment_status)}">${booking.payment_status || 'N/A'}</span>
                    </td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm font-semibold text-gray-900">$${parseFloat(booking.total_amount || 0).toFixed(2)}</td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm">
                        ${hasRefund ? `<span class="text-red-600 font-medium">${refundCount} refund${refundCount > 1 ? 's' : ''}</span>` : '<span class="text-gray-400">-</span>'}
                    </td>
                    <td class="px-6 py-5 whitespace-nowrap text-sm font-medium">
                        <button onclick="viewBooking(${booking.id})" class="text-blue-600 hover:text-blue-900 font-medium hover:underline">View</button>
                    </td>
                </tr>
            `;
            }).join('');
            
            // Pagination
            const pagination = document.getElementById('bookingsPagination');
            if (data.data.last_page > 1) {
                pagination.innerHTML = `
                    <div class="flex items-center justify-between">
                        <div class="text-sm text-gray-700">
                            Showing ${data.data.from} to ${data.data.to} of ${data.data.total} results
                        </div>
                        <div class="flex gap-2">
                            <button onclick="loadBookings(${data.data.current_page - 1})" 
                                ${data.data.current_page === 1 ? 'disabled' : ''}
                                class="px-4 py-2 border rounded-lg ${data.data.current_page === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'}">Previous</button>
                            <button onclick="loadBookings(${data.data.current_page + 1})" 
                                ${data.data.current_page === data.data.last_page ? 'disabled' : ''}
                                class="px-4 py-2 border rounded-lg ${data.data.current_page === data.data.last_page ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'}">Next</button>
                        </div>
                    </div>
                `;
            } else {
                pagination.innerHTML = '';
            }
            currentPage = page;
        }
    }
}

function handleSearch() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        loadBookings(1);
    }, 500);
}

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';
}

// View booking details
async function viewBooking(id) {
    window.location.href = `/admin/bookings/${id}`;
}

// Initialize
loadBookings();
</script>
@endsection