<?php
$isEdit = isset($supplier) && !empty($supplier);
$pageTitle = $isEdit ? 'Edit Supplier' : 'Register Supplier';
$breadcrumb = [
    ['label' => 'Suppliers', 'url' => APP_URL . '/suppliers'],
    ['label' => $pageTitle, 'url' => null]
];
ob_start();
?>
<div class="max-w-4xl mx-auto">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800"><?= $pageTitle ?></h1>
        <a href="<?= APP_URL ?>/suppliers" class="text-gray-600 hover:text-gray-900">Back to List</a>
    </div>

    <form action="<?= APP_URL ?>/suppliers<?= $isEdit ? '/' . $supplier['id'] . '/edit' : '/create' ?>" method="POST" enctype="multipart/form-data" class="space-y-6">
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">

        <!-- Section 1: Company Information -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Company Information</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Company Name *</label>
                    <input type="text" name="company_name" required value="<?= htmlspecialchars($supplier['company_name'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">TIN *</label>
                    <input type="text" name="tin" required value="<?= htmlspecialchars($supplier['tin'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700">Address *</label>
                    <input type="text" name="address" required value="<?= htmlspecialchars($supplier['address'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Phone *</label>
                    <input type="text" name="phone" required value="<?= htmlspecialchars($supplier['phone'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Email *</label>
                    <input type="email" name="email" required value="<?= htmlspecialchars($supplier['email'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Website</label>
                    <input type="text" name="website" placeholder="www.example.com" value="<?= htmlspecialchars($supplier['website'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700">Categories</label>
                    <textarea name="categories" rows="3" placeholder="Comma-separated categories of goods/services (e.g. IT Equipment, Stationery, Hardware)" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2"><?= htmlspecialchars($supplier['categories'] ?? '') ?></textarea>
                </div>
            </div>
        </div>

        <!-- Section 2: Contact Person -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Contact Person</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700">Contact Name *</label>
                    <input type="text" name="contact_name" required value="<?= htmlspecialchars($supplier['contact_name'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Contact Phone *</label>
                    <input type="text" name="contact_phone" required value="<?= htmlspecialchars($supplier['contact_phone'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Contact Email *</label>
                    <input type="email" name="contact_email" required value="<?= htmlspecialchars($supplier['contact_email'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
            </div>
        </div>

        <!-- Section 3: Banking Details -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Banking Details</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Bank Name</label>
                    <input type="text" name="bank_name" value="<?= htmlspecialchars($supplier['bank_name'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Account Number</label>
                    <input type="text" name="account_number" value="<?= htmlspecialchars($supplier['account_number'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Account Name</label>
                    <input type="text" name="account_name" value="<?= htmlspecialchars($supplier['account_name'] ?? '') ?>" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
            </div>
        </div>

        <!-- Section 4: Documents -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Documents</h3>
            </div>
            <div class="p-6">
                <div id="document-rows" class="space-y-4">
                    <div class="flex items-center gap-4">
                        <select name="document_types[]" class="block w-1/3 rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                            <option value="">Select Type</option>
                            <option value="CAC_status">CAC Status Report</option>
                            <option value="CAC_form">CAC Form</option>
                            <option value="utility_bill">Utility Bill</option>
                            <option value="tax_clearance">Tax Clearance</option>
                            <option value="other">Other</option>
                        </select>
                        <input type="file" name="documents[]" class="block w-2/3 border border-gray-300 rounded-md p-1.5 shadow-sm text-sm">
                    </div>
                </div>
                <button type="button" id="add-document" class="mt-4 text-sm text-[#0A3A6B] hover:text-blue-800 font-medium">+ Add More</button>
            </div>
        </div>

        <?php if (!$isEdit): ?>
        <!-- Section 5: Primary User Account -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Primary User Account</h3>
                <p class="text-sm text-gray-500 mt-1">A login account will be created for the primary contact</p>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700">First Name *</label>
                    <input type="text" name="user_first_name" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Last Name *</label>
                    <input type="text" name="user_last_name" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700">Email *</label>
                    <input type="email" name="user_email" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                    <p class="mt-1 text-xs text-gray-500">Password will be auto-generated and sent to their email.</p>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <div class="flex justify-end pt-4">
            <button type="submit" class="bg-[#0A3A6B] hover:bg-blue-700 text-white font-bold py-3 px-8 rounded shadow">
                <?= $isEdit ? 'Update Supplier' : 'Register Supplier' ?>
            </button>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('add-document').addEventListener('click', function() {
        const row = document.createElement('div');
        row.className = 'flex items-center gap-4 mt-4';
        row.innerHTML = `
            <select name="document_types[]" class="block w-1/3 rounded-md border-gray-300 shadow-sm focus:border-[#0A3A6B] focus:ring-[#0A3A6B] sm:text-sm border p-2">
                <option value="">Select Type</option>
                <option value="CAC_status">CAC Status Report</option>
                <option value="CAC_form">CAC Form</option>
                <option value="utility_bill">Utility Bill</option>
                <option value="tax_clearance">Tax Clearance</option>
                <option value="other">Other</option>
            </select>
            <input type="file" name="documents[]" class="block w-2/3 border border-gray-300 rounded-md p-1.5 shadow-sm text-sm">
        `;
        document.getElementById('document-rows').appendChild(row);
    });
});
</script>
<?php
$content = ob_get_clean();
require ROOT_PATH . '/modules/shared/views/layouts/main.php';
?>