<?php
use Cake\Core\Configure;

$turnstileSiteKey = (string)(Configure::read('Captcha.turnstile.siteKey') ?? '');

$this->Form->setTemplates([
    'inputContainer' => '<div class="cc-field">{{content}}</div>',
    'inputContainerError' => '<div class="cc-field">{{content}}{{error}}</div>',
    'label' => '<label{{attrs}}>{{text}}</label>',
    'input' => '<input type="{{type}}" name="{{name}}"{{attrs}}>',
    'textarea' => '<textarea name="{{name}}"{{attrs}}>{{value}}</textarea>',
]);
?>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<!-- Contact Modal -->
<div
    id="contact-modal"
    class="fixed inset-0 z-[110] hidden items-center justify-center bg-neutral-950/70 px-4 py-8 backdrop-blur-md transition-opacity duration-300 opacity-0 pointer-events-none sm:px-6"
    role="dialog"
    aria-modal="true"
    aria-labelledby="contact-modal-title"
    aria-describedby="contact-modal-desc"
>
    <div class="relative w-full max-w-lg max-h-[min(92vh,720px)] overflow-y-auto rounded-2xl border border-neutral-200/90 bg-white p-8 shadow-2xl shadow-neutral-900/20 sm:p-10 transform scale-[0.97] opacity-0 transition-all duration-300 ease-out">

        <button
            type="button"
            onclick="closeContactModal()"
            class="absolute right-4 top-4 flex h-10 w-10 items-center justify-center rounded-full text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
            aria-label="Close contact form"
        >
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>

        <div class="pr-8">
            <p class="text-xs font-semibold uppercase tracking-wider text-primary-600">Get in touch</p>
            <h2 id="contact-modal-title" class="mt-1 text-2xl font-bold tracking-tight text-neutral-900 sm:text-3xl">
                Contact us
            </h2>
            <p id="contact-modal-desc" class="mt-2 text-base leading-relaxed text-neutral-600">
                Have a question? We would love to hear from you.
            </p>
        </div>

        <?= $this->Form->create(null, [
            'url' => ['controller' => 'Enquiries', 'action' => 'add'],
            'id' => 'contact-enquiry-form',
            'class' => 'mt-8 space-y-5',
        ]) ?>

        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-x-5 sm:gap-y-0">
            <?= $this->Form->control('first_name', [
                'label' => 'First name',
                'class' => 'cc-contact-input',
                'required' => true,
                'placeholder' => 'Your first name',
            ]) ?>

            <?= $this->Form->control('last_name', [
                'label' => 'Last name',
                'class' => 'cc-contact-input',
                'required' => true,
                'placeholder' => 'Your last name',
            ]) ?>
        </div>

        <?= $this->Form->control('email', [
            'label' => 'Email address',
            'type' => 'email',
            'class' => 'cc-contact-input',
            'required' => true,
            'placeholder' => 'Email',
        ]) ?>

        <?= $this->Form->control('phone', [
            'label' => 'Phone number',
            'class' => 'cc-contact-input',
            'placeholder' => 'Phone number',
        ]) ?>

        <?= $this->Form->control('subject', [
            'label' => 'Subject',
            'class' => 'cc-contact-input',
            'required' => true,
            'placeholder' => 'Workshop enquiry, private class, etc.',
        ]) ?>

        <?= $this->Form->control('message', [
            'label' => 'Your message',
            'type' => 'textarea',
            'rows' => 5,
            'class' => 'cc-contact-input',
            'placeholder' => 'Tell us more about what you are looking for...',
        ]) ?>

        <section
            class="mt-2 space-y-4 border-t border-neutral-100 pt-6"
            aria-labelledby="cc-verify-heading"
        >
            <div class="rounded-2xl border border-neutral-200/90 bg-gradient-to-b from-neutral-50/90 to-white p-5 shadow-sm ring-1 ring-neutral-900/[0.04] sm:p-6">
                <div class="flex gap-4">
                    <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary-500/10 text-primary-700" aria-hidden="true">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
                        </svg>
                    </div>
                    <div class="min-w-0 flex-1 space-y-1">
                        <h3 id="cc-verify-heading" class="text-sm font-semibold leading-snug text-neutral-900">
                            Quick security check
                        </h3>
                        <p class="text-sm leading-relaxed text-neutral-600">
                            One quick step keeps our inbox safe from bots so we can reply to real messages like yours.
                        </p>
                    </div>
                </div>

                <div class="mt-5 rounded-xl border border-dashed border-neutral-200 bg-white/80 px-3 py-4 sm:px-4">
                    <div id="cf-turnstile" class="flex min-h-[65px] items-center justify-center sm:justify-start"></div>
                    <p id="cf-turnstile-unconfigured" class="hidden text-center text-sm text-amber-900 sm:text-left">
                        <span class="font-medium">Verification isn’t set up on this server.</span>
                        <span class="mt-1 block text-amber-800/90">Add <code class="rounded bg-amber-100/80 px-1 py-0.5 text-xs font-mono text-amber-950">Captcha.turnstile.siteKey</code> in app config.</span>
                    </p>
                </div>
            </div>

            <blockquote id="turnstile-message" class="hidden rounded-xl border border-amber-200/90 bg-amber-50/90 px-4 py-3 text-sm leading-relaxed text-amber-950"></blockquote>

            <p id="turnstile-error" class="hidden text-sm font-medium text-red-600" role="alert"></p>

            <div class="space-y-3">
                <p id="submit-hint-pending" class="flex items-start gap-2.5 text-sm text-neutral-600">
                    <span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-neutral-200/80 text-neutral-600" aria-hidden="true">
                        <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 12 12"><path d="M6 1a5 5 0 100 10A5 5 0 006 1zm0 1.5a.75.75 0 110 1.5.75.75 0 010-1.5zM5.25 5.25h1.5v3h-1.5v-3z"/></svg>
                    </span>
                    <span id="submit-hint-text">Complete the check above, then tap <span class="font-medium text-neutral-800">Send message</span>.</span>
                </p>
                <p id="submit-hint-ready" class="hidden items-start gap-2.5 text-sm text-emerald-800">
                    <span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-700" aria-hidden="true">
                        <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    </span>
                    <span>You’re verified. Send your message whenever you’re ready.</span>
                </p>

                <?= $this->Form->button(
                    '<span class="inline-flex items-center justify-center gap-2"><svg class="h-5 w-5 opacity-95" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg><span>Send message</span></span>',
                    [
                        'class' => 'group relative w-full overflow-hidden rounded-xl bg-primary-600 py-3.5 text-base font-semibold text-white shadow-md shadow-primary-900/10 transition hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-[0.45] disabled:shadow-none',
                        'id' => 'submit-btn',
                        'disabled' => true,
                        'escapeTitle' => false,
                    ]
                ) ?>
            </div>
        </section>

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

<script>
(function () {
    window.CC_TURNSTILE_SITEKEY = <?= json_encode($turnstileSiteKey) ?>;

    var turnstileMessageBlock = document.querySelector('#turnstile-message');
    var submitButton = document.getElementById('submit-btn');
    var submitHintPending = document.getElementById('submit-hint-pending');
    var submitHintReady = document.getElementById('submit-hint-ready');
    var ccTurnstileWidgetId = null;

    function setSubmitHints(on) {
        if (!submitHintPending || !submitHintReady) return;
        if (!window.CC_TURNSTILE_SITEKEY) {
            submitHintPending.classList.add('hidden');
            submitHintReady.classList.add('hidden');
            return;
        }
        if (on) {
            submitHintPending.classList.add('hidden');
            submitHintReady.classList.remove('hidden');
            submitHintReady.classList.add('flex');
        } else {
            submitHintReady.classList.add('hidden');
            submitHintReady.classList.remove('flex');
            submitHintPending.classList.remove('hidden');
        }
    }

    function setSubmitEnabled(on) {
        if (!submitButton) return;
        if (on) {
            submitButton.removeAttribute('disabled');
        } else {
            submitButton.setAttribute('disabled', 'disabled');
        }
        setSubmitHints(on);
    }

    function hideTurnstileError() {
        var err = document.getElementById('turnstile-error');
        if (err) {
            err.textContent = '';
            err.classList.add('hidden');
        }
    }

    function showTurnstileError(msg) {
        var err = document.getElementById('turnstile-error');
        if (err) {
            err.textContent = msg;
            err.classList.remove('hidden');
        }
    }

    window.turnstileOnSuccess = function () {
        if (turnstileMessageBlock) turnstileMessageBlock.classList.add('hidden');
        hideTurnstileError();
        setSubmitEnabled(true);
    };

    window.turnstileOnError = function () {
        if (turnstileMessageBlock) {
            turnstileMessageBlock.classList.remove('hidden');
            turnstileMessageBlock.textContent = 'Verification could not load. Please refresh the page and try again.';
        }
        setSubmitEnabled(false);
    };

    window.turnstileOnExpired = function () {
        if (turnstileMessageBlock) {
            turnstileMessageBlock.classList.remove('hidden');
            turnstileMessageBlock.textContent = 'Verification expired. Please verify again.';
        }
        setSubmitEnabled(false);
    };

    window.turnstileOnTimeout = function () {
        if (turnstileMessageBlock) {
            turnstileMessageBlock.classList.remove('hidden');
            turnstileMessageBlock.textContent = 'Verification timed out. Please verify again.';
        }
        setSubmitEnabled(false);
    };

    function renderTurnstile() {
        if (!window.CC_TURNSTILE_SITEKEY) {
            var miss = document.getElementById('cf-turnstile-unconfigured');
            if (miss) miss.classList.remove('hidden');
            setSubmitEnabled(false);
            return;
        }

        if (typeof window.turnstile === 'undefined') {
            setTimeout(renderTurnstile, 50);
            return;
        }

        var host = document.getElementById('cf-turnstile');
        if (!host) return;

        if (ccTurnstileWidgetId !== null) {
            window.turnstile.reset(ccTurnstileWidgetId);
            setSubmitEnabled(false);
            return;
        }

        ccTurnstileWidgetId = window.turnstile.render('#cf-turnstile', {
            sitekey: window.CC_TURNSTILE_SITEKEY,
            theme: 'light',
            callback: window.turnstileOnSuccess,
            'error-callback': window.turnstileOnError,
            'expired-callback': window.turnstileOnExpired,
            'timeout-callback': window.turnstileOnTimeout,
        });
        setSubmitEnabled(false);
    }

    window.openContactModal = function () {
        var modal = document.getElementById('contact-modal');
        if (!modal) return;

        modal.classList.remove('hidden', 'opacity-0', 'pointer-events-none');
        modal.classList.add('flex', 'opacity-100', 'pointer-events-auto');

        var inner = modal.querySelector('div.relative');
        if (inner) {
            inner.style.transform = 'scale(1)';
            inner.style.opacity = '1';
        }

        document.body.style.overflow = 'hidden';

        requestAnimationFrame(function () {
            setTimeout(renderTurnstile, 80);
        });
    };

    window.closeContactModal = function () {
        var modal = document.getElementById('contact-modal');
        if (!modal) return;

        if (ccTurnstileWidgetId !== null && window.turnstile) {
            try {
                window.turnstile.reset(ccTurnstileWidgetId);
            } catch (e) {}
        }
        setSubmitEnabled(false);
        hideTurnstileError();
        if (turnstileMessageBlock) turnstileMessageBlock.classList.add('hidden');

        var inner = modal.querySelector('div.relative');
        if (inner) {
            inner.style.transform = 'scale(0.97)';
            inner.style.opacity = '0';
        }

        modal.classList.remove('flex', 'opacity-100', 'pointer-events-auto');
        modal.classList.add('opacity-0', 'pointer-events-none');

        setTimeout(function () {
            modal.classList.add('hidden');
            if (typeof window.__ccSyncBodyOverflow === 'function') {
                window.__ccSyncBodyOverflow();
            } else {
                document.body.style.overflow = 'auto';
            }
        }, 300);
    };

    document.addEventListener('DOMContentLoaded', function () {
        var form = document.getElementById('contact-enquiry-form');
        if (form) {
            form.addEventListener('submit', function (e) {
                var input = form.querySelector('input[name="cf-turnstile-response"]');
                var token = input && input.value ? input.value.trim() : '';
                if (!token) {
                    e.preventDefault();
                    showTurnstileError('Please complete the verification before sending your message.');
                    return false;
                }
                hideTurnstileError();
            });
        }

        document.addEventListener('click', function (e) {
            var modal = document.getElementById('contact-modal');
            if (modal && e.target === modal) {
                window.closeContactModal();
            }
        });

        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') {
                var modal = document.getElementById('contact-modal');
                if (modal && modal.classList.contains('flex')) {
                    window.closeContactModal();
                }
            }
        });
    });
})();
</script>

<style>
    #contact-modal .cc-field {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    #contact-modal .cc-field > label {
        font-size: 0.875rem;
        font-weight: 600;
        color: #171717;
        letter-spacing: 0.01em;
    }

    #contact-modal .cc-contact-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #d4d4d4;
        border-radius: 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        background: #ffffff;
        color: #171717;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    #contact-modal .cc-contact-input::placeholder {
        color: #737373;
    }

    #contact-modal .cc-field textarea {
        min-height: 7.5rem;
        resize: vertical;
    }

    #contact-modal .cc-contact-input:hover {
        border-color: #a3a3a3;
    }

    #contact-modal .cc-contact-input:focus {
        outline: none;
        border-color: #752f3f;
        box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25);
    }

    #contact-modal .error-message,
    #contact-modal .invalid-feedback {
        font-size: 0.8125rem;
        font-weight: 500;
        color: #dc2626;
        margin-top: 0.25rem;
    }
</style>
