<?php
$pageTitle = htmlspecialchars($supplier['company_name'] ?? 'Supplier Profile');
$breadcrumb = [
    ['label' => 'Suppliers', 'url' => APP_URL . '/suppliers'],
    ['label' => $pageTitle, 'url' => null]
];
ob_start();

$statusClass = 'bg-gray-100 text-gray-800';
if (($supplier['status'] ?? '') === 'approved') $statusClass = 'bg-green-100 text-green-800';
if (($supplier['status'] ?? '') === 'pending') $statusClass = 'bg-amber-100 text-amber-800';
if (($supplier['status'] ?? '') === 'suspended') $statusClass = 'bg-red-100 text-red-800';
?>
<div class="mb-6 flex flex-col md:flex-row md:items-center justify-between">
    <div class="flex items-center gap-4">
        <h1 class="text-2xl font-bold text-gray-900"><?= $pageTitle ?></h1>
        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-200 text-gray-700"><?= htmlspecialchars($supplier['code'] ?? '') ?></span>
        <span class="px-3 py-1 text-xs font-semibold rounded-full <?= $statusClass ?>"><?= ucfirst(htmlspecialchars($supplier['status'] ?? 'unknown')) ?></span>
    </div>
    <div class="mt-4 md:mt-0 flex gap-2">
        <?php if (($supplier['status'] ?? '') === 'pending'): ?>
        <form action="<?= APP_URL ?>/suppliers/<?= $supplier['id'] ?>/approve" method="POST">
            <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">
            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded shadow">Approve Supplier</button>
        </form>
        <?php endif; ?>
        <a href="<?= APP_URL ?>/suppliers/<?= $supplier['id'] ?>/edit" class="bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 font-bold py-2 px-4 rounded shadow">Edit</a>
    </div>
</div>

<!-- Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="bg-white rounded-lg shadow p-5 border-l-4 border-[#0A3A6B]">
        <div class="text-sm text-gray-500 uppercase font-semibold">Total Projects</div>
        <div class="text-3xl font-bold text-gray-800"><?= htmlspecialchars($stats['total_projects'] ?? 0) ?></div>
    </div>
    <div class="bg-white rounded-lg shadow p-5 border-l-4 border-green-500">
        <div class="text-sm text-gray-500 uppercase font-semibold">Accepted Projects</div>
        <div class="text-3xl font-bold text-green-600"><?= htmlspecialchars($stats['accepted_projects'] ?? 0) ?></div>
    </div>
    <div class="bg-white rounded-lg shadow p-5 border-l-4 border-purple-500">
        <div class="text-sm text-gray-500 uppercase font-semibold">Total Invoiced Amount</div>
        <div class="text-3xl font-bold text-purple-600"><?= htmlspecialchars($stats['total_invoiced'] ?? '$0') ?></div>
    </div>
    <div class="bg-white rounded-lg shadow p-5 border-l-4 border-amber-500">
        <div class="text-sm text-gray-500 uppercase font-semibold">Active Users</div>
        <div class="text-3xl font-bold text-amber-600"><?= htmlspecialchars($stats['active_users'] ?? 0) ?></div>
    </div>
</div>

<!-- Tabs -->
<div class="bg-white rounded-lg shadow mb-6">
    <div class="border-b border-gray-200">
        <nav class="flex -mb-px px-6" aria-label="Tabs">
            <button class="tab-button active w-1/5 py-4 px-1 text-center border-b-2 font-medium text-sm text-[#0A3A6B] border-[#0A3A6B]" data-target="tab-overview">Overview</button>
            <button class="tab-button w-1/5 py-4 px-1 text-center border-b-2 font-medium text-sm text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300" data-target="tab-documents">Documents</button>
            <button class="tab-button w-1/5 py-4 px-1 text-center border-b-2 font-medium text-sm text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300" data-target="tab-projects">Projects</button>
            <button class="tab-button w-1/5 py-4 px-1 text-center border-b-2 font-medium text-sm text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300" data-target="tab-users">Users</button>
            <button class="tab-button w-1/5 py-4 px-1 text-center border-b-2 font-medium text-sm text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300" data-target="tab-invoices">Invoices</button>
        </nav>
    </div>

    <!-- Tab Contents -->
    <div class="p-6">
        <!-- Overview Tab -->
        <div id="tab-overview" class="tab-content block">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Company Info -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Company Information</h3>
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-4">
                        <div class="sm:col-span-1">
                            <dt class="text-sm font-medium text-gray-500">TIN</dt>
                            <dd class="mt-1 text-sm text-gray-900"><?= htmlspecialchars($supplier['tin'] ?? '-') ?></dd>
                        </div>
                        <div class="sm:col-span-1">
                            <dt class="text-sm font-medium text-gray-500">Phone</dt>
                            <dd class="mt-1 text-sm text-gray-900"><?= htmlspecialchars($supplier['phone'] ?? '-') ?></dd>
                        </div>
                        <div class="sm:col-span-1">
                            <dt class="text-sm font-medium text-gray-500">Email</dt>
                            <dd class="mt-1 text-sm text-gray-900"><?= htmlspecialchars($supplier['email'] ?? '-') ?></dd>
                        </div>
                        <div class="sm:col-span-1">
                            <dt class="text-sm font-medium text-gray-500">Website</dt>
                            <dd class="mt-1 text-sm text-blue-600 hover:underline"><a href="<?= htmlspecialchars($supplier['website'] ?? '#') ?>" target="_blank"><?= htmlspecialchars($supplier['website'] ?? '-') ?></a></dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-sm font-medium text-gray-500">Address</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                <?= htmlspecialchars($supplier['address'] ?? '') ?>
                            </dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-sm font-medium text-gray-500">Categories</dt>
                            <dd class="mt-1 text-sm text-gray-900"><?= htmlspecialchars($supplier['categories'] ?? '-') ?></dd>
                        </div>
                    </dl>
                </div>
                
                <div class="space-y-8">
                    <!-- Contact Person -->
                    <div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Contact Person</h3>
                        <dl class="grid grid-cols-1 gap-y-4">
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Name</dt>
                                <dd class="mt-1 text-sm text-gray-900"><?= htmlspecialchars($supplier['contact_name'] ?? '-') ?></dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Phone</dt>
                                <dd class="mt-1 text-sm text-gray-900"><?= htmlspecialchars($supplier['contact_phone'] ?? '-') ?></dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Email</dt>
                                <dd class="mt-1 text-sm text-gray-900"><?= htmlspecialchars($supplier['contact_email'] ?? '-') ?></dd>
                            </div>
                        </dl>
                    </div>

                    <!-- Banking Details -->
                    <div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Banking Details</h3>
                        <dl class="grid grid-cols-1 gap-y-4">
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Bank Name</dt>
                                <dd class="mt-1 text-sm text-gray-900"><?= htmlspecialchars($supplier['bank_name'] ?? '-') ?></dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Account Number</dt>
                                <dd class="mt-1 text-sm text-gray-900"><?= htmlspecialchars($supplier['account_number'] ?? '-') ?></dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Account Name</dt>
                                <dd class="mt-1 text-sm text-gray-900"><?= htmlspecialchars($supplier['account_name'] ?? '-') ?></dd>
                            </div>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Documents Tab -->
        <div id="tab-documents" class="tab-content hidden">
            <?php if (empty($documents)): ?>
                <p class="text-gray-500 italic text-center py-8">No documents uploaded.</p>
            <?php else: ?>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <?php foreach ($documents as $doc): ?>
                    <div class="border border-gray-200 rounded-lg p-4 flex flex-col hover:shadow-md transition">
                        <div class="flex items-start justify-between mb-2">
                            <div class="flex items-center gap-3">
                                <svg class="h-8 w-8 text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path></svg>
                                <div>
                                    <p class="text-sm font-medium text-gray-900 truncate" title="<?= htmlspecialchars($doc['name'] ?? '') ?>"><?= htmlspecialchars($doc['name'] ?? '') ?></p>
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 mt-1"><?= htmlspecialchars($doc['type'] ?? 'Other') ?></span>
                                </div>
                            </div>
                        </div>
                        <div class="mt-auto pt-4 flex justify-between items-center text-xs">
                            <span class="text-gray-500"><?= htmlspecialchars($doc['size'] ?? '0 KB') ?></span>
                            <div class="flex gap-2">
                                <a href="<?= APP_URL ?>/uploads/<?= htmlspecialchars($doc['file_path'] ?? '') ?>" target="_blank" class="text-[#0A3A6B] hover:underline font-medium">Download</a>
                                <form action="<?= APP_URL ?>/suppliers/docs/<?= $doc['id'] ?>/delete" method="POST" class="inline" onsubmit="return confirm('Are you sure?');">
                                    <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">
                                    <button type="submit" class="text-red-600 hover:underline font-medium">Delete</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>

        <!-- Projects Tab -->
        <div id="tab-projects" class="tab-content hidden">
            <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">Code</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Project Name</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Assignment Status</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Start Date</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <?php if (empty($projects)): ?>
                    <tr><td colspan="5" class="px-6 py-4 text-center text-gray-500">No projects assigned yet.</td></tr>
                    <?php else: ?>
                        <?php foreach ($projects as $project): ?>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><?= htmlspecialchars($project['code'] ?? '') ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-[#0A3A6B]"><a href="<?= APP_URL ?>/projects/<?= $project['id'] ?>"><?= htmlspecialchars($project['name'] ?? '') ?></a></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"><?= htmlspecialchars($project['assignment_status'] ?? '') ?></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?= htmlspecialchars($project['start_date'] ?? '') ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><?= htmlspecialchars($project['value'] ?? '') ?></td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>

        <!-- Users Tab -->
        <div id="tab-users" class="tab-content hidden">
            <form action="<?= APP_URL ?>/suppliers/<?= $supplier['id'] ?>/add-user" method="POST" class="mb-6 bg-gray-50 border border-gray-200 rounded-lg p-4 flex flex-wrap items-end gap-3">
                <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">
                <div>
                    <label class="block text-xs font-medium text-gray-700">First Name</label>
                    <input type="text" name="first_name" required class="mt-1 rounded-md border-gray-300 border p-2 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-700">Last Name</label>
                    <input type="text" name="last_name" required class="mt-1 rounded-md border-gray-300 border p-2 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-700">Email</label>
                    <input type="email" name="email" required class="mt-1 rounded-md border-gray-300 border p-2 text-sm">
                </div>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="is_admin" value="1"> Admin
                </label>
                <button type="submit" class="bg-[#0A3A6B] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm shadow">Add User</button>
            </form>
            <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">Name</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Role</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <?php if (empty($users)): ?>
                    <tr><td colspan="5" class="px-6 py-4 text-center text-gray-500">No users found.</td></tr>
                    <?php else: ?>
                        <?php foreach ($users as $user): ?>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium"><?= htmlspecialchars($user['name'] ?? '') ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?= htmlspecialchars($user['email'] ?? '') ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <?php if (!empty($user['is_admin'])): ?>
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Admin</span>
                                <?php else: ?>
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">User</span>
                                <?php endif; ?>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full <?= !empty($user['status']) && $user['status'] == 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' ?>">
                                    <?= htmlspecialchars(ucfirst($user['status'] ?? 'inactive')) ?>
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <form action="<?= APP_URL ?>/suppliers/<?= $supplier['id'] ?>/remove-user/<?= $user['id'] ?>" method="POST" class="inline" onsubmit="return confirm('Remove user?');">
                                    <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">
                                    <button type="submit" class="text-red-600 hover:text-red-900">Remove</button>
                                </form>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>

        <!-- Invoices Tab -->
        <div id="tab-invoices" class="tab-content hidden">
            <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">Invoice #</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Project</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Total</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <?php if (empty($invoices)): ?>
                    <tr><td colspan="6" class="px-6 py-4 text-center text-gray-500">No invoices found.</td></tr>
                    <?php else: ?>
                        <?php foreach ($invoices as $invoice): ?>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"><?= htmlspecialchars($invoice['number'] ?? '') ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?= htmlspecialchars($invoice['project_name'] ?? '') ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?= htmlspecialchars($invoice['date'] ?? '') ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium"><?= htmlspecialchars($invoice['total'] ?? '') ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"><?= htmlspecialchars(ucfirst($invoice['status'] ?? '')) ?></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="<?= APP_URL ?>/invoices/<?= $invoice['id'] ?>" class="text-[#0A3A6B] hover:text-blue-900">View</a>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('.tab-button');
    const contents = document.querySelectorAll('.tab-content');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => {
                t.classList.remove('active', 'text-[#0A3A6B]', 'border-[#0A3A6B]');
                t.classList.add('text-gray-500', 'border-transparent');
            });
            tab.classList.add('active', 'text-[#0A3A6B]', 'border-[#0A3A6B]');
            tab.classList.remove('text-gray-500', 'border-transparent');
            
            contents.forEach(c => c.classList.add('hidden'));
            document.getElementById(tab.dataset.target).classList.remove('hidden');
        });
    });
});
</script>
<?php
$content = ob_get_clean();
require ROOT_PATH . '/modules/shared/views/layouts/main.php';
?>