<?php $this->assign('title', 'Company'); ?>

<main class="min-h-screen pt-16 md:pt-20 pb-20 bg-neutral-50">
    <div class="max-w-4xl mx-auto px-6 lg:px-8">

        <!-- Heading -->
        <div class="text-center mb-12 animate-fade-in">
            <h1 class="text-4xl md:text-5xl font-serif font-semibold text-neutral-800 tracking-tight">
                Company Information
            </h1>
            <p class="mt-4 text-lg text-neutral-600 max-w-2xl mx-auto">
                Update your academy's core details, displayed on public pages and contact information.
            </p>
        </div>

        <!-- Form -->
        <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-neutral-200/60 p-8 md:p-10 transition-all duration-300 hover:shadow-2xl">
            
            <?= $this->Form->create($company, [
                'class' => 'space-y-8',
                'id' => 'company-form'
            ]) ?>

            <!-- Name -->
            <div class="space-y-2">
                <label class="block text-lg font-medium text-neutral-700">
                    Company Name <span class="text-red-500">*</span>
                </label>
                <?= $this->Form->text('name', [
                    'class' => 'w-full px-5 py-4 rounded-xl border border-neutral-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 outline-none transition-all duration-300 text-lg bg-white/60',
                    'placeholder' => 'CandleCraft Academy',
                    'required'
                ]) ?>
            </div>

            <!-- Email -->
            <div class="space-y-2">
                <label class="block text-lg font-medium text-neutral-700">
                    Contact Email <span class="text-red-500">*</span>
                </label>
                <?= $this->Form->email('email', [
                    'class' => 'w-full px-5 py-4 rounded-xl border border-neutral-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 outline-none transition-all duration-300 text-lg bg-white/60',
                    'placeholder' => 'CandleCraftAcademy@gmail.com',
                    'required'
                ]) ?>
            </div>

            <!-- Phone -->
            <div class="space-y-2">
                <label class="block text-lg font-medium text-neutral-700">
                    Phone Number
                </label>
                <?= $this->Form->text('phone', [
                    'class' => 'w-full px-5 py-4 rounded-xl border border-neutral-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 outline-none transition-all duration-300 text-lg bg-white/60',
                    'placeholder' => '+61 412 345 678',
                    'pattern' => '^(?:\+61|0)4\d{8}$',
                    'title' => 'Enter a valid Australian mobile number (e.g. 0412345678 or +61412345678)',
                    'id' => 'phone-input'
                ]) ?>
                <p id="phone-error" class="text-red-500 text-sm hidden">
                    Invalid Australian phone number
                </p>
            </div>

            <!-- Address -->
            <div class="space-y-2">
                <label class="block text-lg font-medium text-neutral-700">
                    Address
                </label>
                <?= $this->Form->text('address', [
                    'class' => 'w-full px-5 py-4 rounded-xl border border-neutral-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 outline-none transition-all duration-300 text-lg bg-white/60',
                    'placeholder' => '123 Artisan Lane, Hoan Kiem, Hanoi'
                ]) ?>
            </div>

            <!-- Description -->
            <div class="space-y-2">
                <label class="block text-lg font-medium text-neutral-700">
                    Description / About
                </label>
                <?= $this->Form->textarea('description', [
                    'class' => 'w-full px-5 py-4 rounded-xl border border-neutral-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 outline-none transition-all duration-300 text-lg bg-white/60 min-h-[140px] resize-y',
                    'placeholder' => 'CandleCraft Academy offers premium workshops...',
                    'rows' => 5
                ]) ?>
            </div>

            <!-- Submit -->
            <div class="pt-6 text-center md:text-right">
                <?= $this->Form->button('Save Changes', [
                    'type' => 'submit',
                    'class' => 'inline-flex items-center px-10 py-4 text-lg font-semibold rounded-full bg-primary-500 text-white hover:bg-primary-600 focus:ring-4 focus:ring-primary-200 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5'
                ]) ?>
            </div>

            <?= $this->Form->end() ?>

        </div>
    </div>
</main>

<!-- JS VALIDATION -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    const phoneInput = document.getElementById("phone-input");
    const form = document.getElementById("company-form");
    const errorText = document.getElementById("phone-error");

    const regex = /^(?:\+61|0)4\d{8}$/;

    function validatePhone() {
        const value = phoneInput.value.replace(/\s+/g, '');

        if (value === "") {
            errorText.classList.add("hidden");
            phoneInput.setCustomValidity("");
            return true;
        }

        if (!regex.test(value)) {
            errorText.classList.remove("hidden");
            phoneInput.setCustomValidity("Invalid Australian phone number");
            return false;
        } else {
            errorText.classList.add("hidden");
            phoneInput.setCustomValidity("");
            return true;
        }
    }

    phoneInput.addEventListener("input", validatePhone);

    form.addEventListener("submit", function (e) {
        if (!validatePhone()) {
            e.preventDefault();
            phoneInput.reportValidity();
        }
    });
});
</script>