<?php
// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

// Client data and invoices are passed from the render_client_view_page method
?>

<div class="p-8">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 flex items-center">
                <i class="fas fa-user-tie text-gray-400 mr-3"></i>
                <span><?php echo esc_html($client->getBusinessClientName() ?: $client->getFirstName() . ' ' . $client->getLastName()); ?></span>
            </h1>
            <p class="text-sm text-gray-500 mt-1">
                Client Overview & Invoice History
            </p>
        </div>
        <div>
            <a href="?page=easy-invoice-clients" class="text-gray-600 hover:text-indigo-600 mr-4 font-medium text-sm">
                <i class="fas fa-arrow-left mr-1"></i> Back to Clients
            </a>
            <a href="?page=easy-invoice-client-edit&client_id=<?php echo esc_attr($client->getId()); ?>" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 text-sm font-semibold shadow-sm">
                <i class="fas fa-pen mr-2"></i>Edit Client
            </a>
        </div>
    </div>

    <!-- Client Information Card -->
    <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm mb-8">
        <div class="flex items-center justify-between pb-4 border-b border-gray-200 mb-4">
            <h4 class="text-lg font-semibold text-gray-800 flex items-center">
                <i class="fas fa-user-check text-indigo-500 mr-3"></i>
                <span><?php _e('Client Details', 'easy-invoice'); ?></span>
            </h4>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6 pt-2">
            <!-- Client Name -->
            <div class="flex items-start group">
                <div class="flex-shrink-0 w-8 text-center pt-1"><i class="fas fa-user-tie text-gray-400 group-hover:text-indigo-500 transition-colors"></i></div>
                <div class="ml-3">
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider"><?php _e('Full Name', 'easy-invoice'); ?></label>
                    <p class="text-sm font-semibold text-gray-800 mt-1"><?php echo esc_html($client->getFirstName() . ' ' . $client->getLastName()); ?></p>
                </div>
            </div>
            
            <!-- Company Name -->
            <div class="flex items-start group">
                <div class="flex-shrink-0 w-8 text-center pt-1"><i class="fas fa-building text-gray-400 group-hover:text-indigo-500 transition-colors"></i></div>
                <div class="ml-3">
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider"><?php _e('Company', 'easy-invoice'); ?></label>
                    <p class="text-sm font-semibold text-gray-800 mt-1"><?php echo esc_html($client->getBusinessClientName() ?: 'N/A'); ?></p>
                </div>
            </div>
            
            <!-- Email -->
            <div class="flex items-start group">
                <div class="flex-shrink-0 w-8 text-center pt-1"><i class="fas fa-envelope text-gray-400 group-hover:text-indigo-500 transition-colors"></i></div>
                <div class="ml-3">
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider"><?php _e('Email', 'easy-invoice'); ?></label>
                    <p class="text-sm text-gray-800 mt-1 break-all"><?php echo esc_html($client->getEmail()); ?></p>
                </div>
            </div>

            <!-- Phone -->
            <div class="flex items-start group">
                <div class="flex-shrink-0 w-8 text-center pt-1"><i class="fas fa-phone-alt text-gray-400 group-hover:text-indigo-500 transition-colors"></i></div>
                <div class="ml-3">
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider"><?php _e('Phone', 'easy-invoice'); ?></label>
                    <p class="text-sm text-gray-800 mt-1"><?php echo esc_html($client->getPhone() ?: 'N/A'); ?></p>
                </div>
            </div>

            <!-- Username -->
            <div class="flex items-start group">
                <div class="flex-shrink-0 w-8 text-center pt-1"><i class="fas fa-at text-gray-400 group-hover:text-indigo-500 transition-colors"></i></div>
                <div class="ml-3">
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider"><?php _e('Username', 'easy-invoice'); ?></label>
                    <p class="text-sm text-gray-800 mt-1"><?php echo esc_html($client->getUsername()); ?></p>
                </div>
            </div>
            
            <!-- Client ID -->
            <div class="flex items-start group">
                <div class="flex-shrink-0 w-8 text-center pt-1"><i class="fas fa-id-card text-gray-400 group-hover:text-indigo-500 transition-colors"></i></div>
                <div class="ml-3">
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider"><?php _e('Client ID', 'easy-invoice'); ?></label>
                    <p class="text-sm text-gray-800 mt-1"><?php echo esc_html($client->getId()); ?></p>
                </div>
            </div>
            
            <!-- Client Role -->
            <div class="flex items-start group">
                <div class="flex-shrink-0 w-8 text-center pt-1"><i class="fas fa-user-shield text-gray-400 group-hover:text-indigo-500 transition-colors"></i></div>
                <div class="ml-3">
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider"><?php _e('Role', 'easy-invoice'); ?></label>
                    <div class="mt-1">
                        <?php 
                        $role_class = 'bg-blue-100 text-blue-800';
                        $role_icon = 'fas fa-user';
                        
                        if (isset($client_role)) {
                            switch ($client_role) {
                                case 'administrator':
                                    $role_class = 'bg-red-100 text-red-800';
                                    $role_icon = 'fas fa-crown';
                                    break;
                                case 'editor':
                                    $role_class = 'bg-purple-100 text-purple-800';
                                    $role_icon = 'fas fa-user-edit';
                                    break;
                                case 'author':
                                    $role_class = 'bg-green-100 text-green-800';
                                    $role_icon = 'fas fa-user-edit';
                                    break;
                                case 'contributor':
                                    $role_class = 'bg-yellow-100 text-yellow-800';
                                    $role_icon = 'fas fa-user-plus';
                                    break;
                                case 'subscriber':
                                    $role_class = 'bg-gray-100 text-gray-800';
                                    $role_icon = 'fas fa-user';
                                    break;
                                default:
                                    $role_class = 'bg-blue-100 text-blue-800';
                                    $role_icon = 'fas fa-user';
                            }
                        }
                        ?>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <?php echo $role_class; ?>">
                            <i class="<?php echo $role_icon; ?> mr-1"></i>
                            <?php echo esc_html(ucfirst($client_role ?? 'client')); ?>
                        </span>
                    </div>
                </div>
            </div>
            
            <!-- Website -->
            <div class="flex items-start group">
                <div class="flex-shrink-0 w-8 text-center pt-1"><i class="fas fa-globe-americas text-gray-400 group-hover:text-indigo-500 transition-colors"></i></div>
                <div class="ml-3">
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider"><?php _e('Website', 'easy-invoice'); ?></label>
                    <p class="text-sm text-gray-800 mt-1">
                        <?php if ($client->getWebsite()): ?>
                            <a href="<?php echo esc_url($client->getWebsite()); ?>" target="_blank" class="text-indigo-600 hover:text-indigo-800 hover:underline">
                                <?php echo esc_html($client->getWebsite()); ?>
                            </a>
                        <?php else: ?>
                            N/A
                        <?php endif; ?>
                    </p>
                </div>
            </div>
            
            <!-- Address -->
            <div class="flex items-start group md:col-span-2 lg:col-span-3">
                <div class="flex-shrink-0 w-8 text-center pt-1"><i class="fas fa-map-marker-alt text-gray-400 group-hover:text-indigo-500 transition-colors"></i></div>
                <div class="ml-3">
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider"><?php _e('Address', 'easy-invoice'); ?></label>
                    <p class="text-sm text-gray-800 mt-1 whitespace-pre-wrap"><?php echo esc_html($client->getAddress() ?: 'N/A'); ?></p>
                </div>
            </div>
        </div>
        
        <?php if ($client->getExtraInfo()): ?>
        <div class="mt-6 pt-6 border-t border-gray-200">
            <h3 class="text-sm font-semibold text-gray-800 mb-2 flex items-center">
                <i class="fas fa-info-circle text-gray-400 mr-2"></i>
                <span><?php _e('Extra Info', 'easy-invoice'); ?></span>
            </h3>
            <div class="bg-gray-50 p-4 rounded-md text-sm text-gray-700 prose max-w-none">
                <?php echo nl2br(esc_html($client->getExtraInfo())); ?>
            </div>
        </div>
        <?php endif; ?>
    </div>

    <!-- Client Invoices -->
    <div class="bg-white shadow-sm rounded-xl border border-gray-200">
        <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                <i class="fas fa-file-invoice-dollar text-indigo-500 mr-3"></i>
                <span>Invoices</span>
            </h2>
        </div>
        
        <?php if (empty($invoices)): ?>
            <div class="text-center py-12">
                <div class="text-gray-400 mb-4"><i class="fas fa-file-invoice fa-4x"></i></div>
                <p class="text-gray-500 font-medium mb-4">No invoices found for this client.</p>
            </div>
        <?php else: ?>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th scope="col" class="relative px-6 py-3">
                                <span class="sr-only">Actions</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <?php foreach ($invoices as $invoice): 
                            $status_class = '';
                            $status_icon = '';
                            switch ($invoice['status']) {
                                case 'paid':
                                    $status_class = 'bg-green-100 text-green-800';
                                    $status_icon = 'fas fa-check-circle';
                                    break;
                                case 'pending':
                                    $status_class = 'bg-yellow-100 text-yellow-800';
                                    $status_icon = 'fas fa-hourglass-half';
                                    break;
                                case 'overdue':
                                    $status_class = 'bg-red-100 text-red-800';
                                    $status_icon = 'fas fa-exclamation-triangle';
                                    break;
                                default:
                                    $status_class = 'bg-gray-100 text-gray-800';
                                    $status_icon = 'fas fa-question-circle';
                            }
                        ?>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex flex-col">
                                    <div class="text-sm font-semibold text-indigo-600 hover:text-indigo-800">
                                            <a href="<?php echo get_permalink($invoice['id']); ?>"><?php echo esc_html($invoice['title']); ?></a>
                                        </div>
                                        <div class="text-xs text-gray-500 font-mono">
                                            <?php echo esc_html($invoice['invoice_number']); ?>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <?php echo esc_html(date("M d, Y", strtotime($invoice['date']))); ?>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <?php echo esc_html(date("M d, Y", strtotime($invoice['due_date']))); ?>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-800 font-medium">
                                    <?php 
                                    // Use InvoiceFormatter for proper currency formatting
                                    $formatter = new \EasyInvoice\Helpers\InvoiceFormatter();
                                    echo esc_html($formatter->format($invoice['amount'] ?? 0)); 
                                    ?>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-center">
                                    <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full <?php echo $status_class; ?>">
                                        <i class="<?php echo $status_icon; ?> mr-1.5"></i>
                                        <?php echo ucfirst(esc_html($invoice['status'])); ?>
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-3">
                                    <a href="<?php echo get_permalink($invoice['id']); ?>" class="text-indigo-600 hover:text-indigo-900" data-tooltip="View Invoice">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="?page=easy-invoice-builder&invoice_id=<?php echo esc_attr($invoice['id']); ?>" class="text-gray-500 hover:text-indigo-900" data-tooltip="Edit Invoice">
                                        <i class="fas fa-pen"></i>
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>

    <!-- Client Quotes -->
    <div class="bg-white shadow-sm rounded-xl border border-gray-200 mt-6">
        <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                <i class="fas fa-file-contract text-green-500 mr-3"></i>
                <span>Quotes</span>
            </h2>
        </div>
        
        <?php if (empty($quotes)): ?>
            <div class="text-center py-12">
                <div class="text-gray-400 mb-4"><i class="fas fa-file-contract fa-4x"></i></div>
                <p class="text-gray-500 font-medium mb-4">No quotes found for this client.</p>
            </div>
        <?php else: ?>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quote</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expiry Date</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th scope="col" class="relative px-6 py-3">
                                <span class="sr-only">Actions</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <?php foreach ($quotes as $quote): 
                            $status_class = '';
                            $status_icon = '';
                            switch ($quote['status']) {
                                case 'accepted':
                                    $status_class = 'bg-green-100 text-green-800';
                                    $status_icon = 'fas fa-check-circle';
                                    break;
                                case 'pending':
                                    $status_class = 'bg-yellow-100 text-yellow-800';
                                    $status_icon = 'fas fa-hourglass-half';
                                    break;
                                case 'declined':
                                    $status_class = 'bg-red-100 text-red-800';
                                    $status_icon = 'fas fa-times-circle';
                                    break;
                                case 'expired':
                                    $status_class = 'bg-gray-100 text-gray-800';
                                    $status_icon = 'fas fa-clock';
                                    break;
                                default:
                                    $status_class = 'bg-gray-100 text-gray-800';
                                    $status_icon = 'fas fa-question-circle';
                            }
                        ?>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex flex-col">
                                        <div class="text-sm font-semibold text-green-600 hover:text-green-800">
                                            <a href="<?php echo get_permalink($quote['id']); ?>"><?php echo esc_html($quote['title']); ?></a>
                                        </div>
                                        <div class="text-xs text-gray-500 font-mono">
                                            <?php echo esc_html($quote['quote_number']); ?>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <?php echo esc_html(date("M d, Y", strtotime($quote['date']))); ?>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <?php echo esc_html(date("M d, Y", strtotime($quote['expiry_date']))); ?>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-800 font-medium">
                                    <?php 
                                    // Use QuoteFormatter for proper currency formatting
                                    $formatter = new \EasyInvoice\Helpers\QuoteFormatter();
                                    echo esc_html($formatter->format($quote['amount'] ?? 0)); 
                                    ?>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-center">
                                    <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full <?php echo $status_class; ?>">
                                        <i class="<?php echo $status_icon; ?> mr-1.5"></i>
                                        <?php echo ucfirst(esc_html($quote['status'])); ?>
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-3">
                                    <a href="<?php echo get_permalink($quote['id']); ?>" class="text-green-600 hover:text-green-900" data-tooltip="View Quote">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="?page=easy-invoice-quote-builder&quote_id=<?php echo esc_attr($quote['id']); ?>" class="text-gray-500 hover:text-green-900" data-tooltip="Edit Quote">
                                        <i class="fas fa-pen"></i>
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>
</div> 