<?php require_once __DIR__ . '/_sidebar.php'; ?>
<main class="flex-1 py-16 md:py-0 md:pl-64">
    <div class="max-w-3xl mx-auto px-4 py-8 md:py-16">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h1 class="text-3xl font-bold text-slate-950"><?php echo htmlspecialchars($pageTitle); ?></h1>
                <p class="mt-2 text-slate-600">Add a new customer for invoices and records.</p>
            </div>
            <a href="<?= htmlspecialchars($baseUrl) ?>/admin/customers" class="rounded-full border border-slate-300 px-5 py-3 text-sm text-slate-950 hover:bg-slate-100">Back to Customers</a>
        </div>

        <form method="post" action="<?= htmlspecialchars($baseUrl . $formAction) ?>" class="rounded-3xl bg-white p-8 shadow-lg border border-slate-200 space-y-6">
            <?= CSRF::input() ?>
            <?php if (!empty($customer['id'] ?? '')): ?>
                <input type="hidden" name="id" value="<?= htmlspecialchars($customer['id']) ?>">
            <?php endif; ?>
            <div>
                <label class="block text-sm font-medium text-slate-700">Name</label>
                <input id="name" name="name" type="text" value="<?= htmlspecialchars($customer['name'] ?? '') ?>" class="mt-2 w-full rounded-2xl border border-slate-300 p-4 text-sm" required aria-required="true" />
                <div id="name-error" class="form-error text-sm text-red-600 mt-2 hidden" role="alert" aria-live="polite"></div>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Company</label>
                <input name="company" type="text" value="<?= htmlspecialchars($customer['company'] ?? '') ?>" class="mt-2 w-full rounded-2xl border border-slate-300 p-4 text-sm" />
            </div>
            <div class="grid gap-6 md:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-slate-700">Email</label>
                    <input id="email" name="email" type="email" value="<?= htmlspecialchars($customer['email'] ?? '') ?>" class="mt-2 w-full rounded-2xl border border-slate-300 p-4 text-sm" aria-describedby="email-error" />
                    <div id="email-error" class="form-error text-sm text-red-600 mt-2 hidden" role="alert" aria-live="polite"></div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Phone</label>
                    <input name="phone" type="text" value="<?= htmlspecialchars($customer['phone'] ?? '') ?>" class="mt-2 w-full rounded-2xl border border-slate-300 p-4 text-sm" />
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Address</label>
                <input name="address" type="text" value="<?= htmlspecialchars($customer['address'] ?? '') ?>" class="mt-2 w-full rounded-2xl border border-slate-300 p-4 text-sm" />
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Notes</label>
                <textarea name="notes" class="mt-2 w-full rounded-2xl border border-slate-300 p-4 text-sm" rows="4"><?= htmlspecialchars($customer['notes'] ?? '') ?></textarea>
            </div>
            <div class="flex justify-end gap-4">
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/customers" class="inline-flex items-center justify-center rounded-full border border-slate-300 bg-white px-6 py-3 text-sm font-semibold text-slate-950 hover:bg-slate-100 transition">Cancel</a>
                <button type="submit" class="inline-flex items-center justify-center rounded-full bg-charcoal px-6 py-3 text-sm font-semibold text-white hover:bg-slate-900 transition">Save Customer</button>
            </div>
        </form>
    </div>

<script>
    (function(){
        const form = document.querySelector('form');
        if (!form) return;

        // Inline validation
        const nameField = form.querySelector('input[name="name"]');
        const emailField = form.querySelector('input[name="email"]');
        // Use persistent error elements present in the markup (fallback if not present)
        let nameError = form.querySelector('#name-error');
        if (!nameError) {
            nameError = document.createElement('div');
            nameError.id = 'name-error';
            nameError.className = 'form-error text-sm text-red-600 mt-2 hidden';
            nameField.parentNode.appendChild(nameError);
        }
        let emailError = form.querySelector('#email-error');
        if (!emailError) {
            emailError = document.createElement('div');
            emailError.id = 'email-error';
            emailError.className = 'form-error text-sm text-red-600 mt-2 hidden';
            emailField.parentNode.appendChild(emailError);
        }
        // ARIA hookup
        nameField.setAttribute('aria-describedby', 'name-error');
        emailField.setAttribute('aria-describedby', 'email-error');

        form.addEventListener('submit', function(e){
            let hasError = false;
            nameError.textContent = '';
            emailError.textContent = '';
            nameError.classList.add('hidden');
            emailError.classList.add('hidden');
            nameField.removeAttribute('aria-invalid');
            emailField.removeAttribute('aria-invalid');

            const name = nameField.value.trim();
            const email = emailField.value.trim();
            if (!name) {
                e.preventDefault();
                nameError.textContent = 'Please enter the customer name.';
                nameError.classList.remove('hidden');
                nameField.setAttribute('aria-invalid', 'true');
                nameField.focus();
                hasError = true;
            }
            if (email) {
                const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(".+"))@(([^<>()[\]\\.,;:\s@\"]+\.)+[^<>()[\]\\.,;:\s@\"]{2,})$/i;
                if (!re.test(email)) {
                    e.preventDefault();
                    emailError.textContent = 'Please enter a valid email address.';
                    emailError.classList.remove('hidden');
                    emailField.setAttribute('aria-invalid', 'true');
                    if (!hasError) emailField.focus();
                    hasError = true;
                }
            }

            return !hasError;
        });
    })();
</script>
</main>
</div>
