<?php


$uid = isset($uid) && $uid !== '' ? preg_replace('/[^a-z0-9]/i', '', (string) $uid) : 'cf';
$flash = $flash ?? null;
?>
<div class="page-contact-centered">
    <?php if ($flash): ?>
    <div class="contact-flash contact-flash--<?= ($flash['type'] ?? '') === 'success' ? 'success' : 'error' ?>">
        <?= htmlspecialchars($flash['message'] ?? '') ?>
    </div>
    <?php endif; ?>

    <form method="POST" action="/contact-submit" class="contact-form">
        <?= Router::csrfField() ?>
        <div style="position:absolute;left:-9999px;top:-9999px;" aria-hidden="true">
            <input type="text" name="website_url" tabindex="-1" autocomplete="off">
        </div>

        <div class="contact-form__grid">
            <div class="contact-form__group">
                <label for="contact_name_<?= $uid ?>" class="contact-form__label"><?= __('contact_name') ?> <span class="contact-form__required">*</span></label>
                <input type="text" id="contact_name_<?= $uid ?>" name="contact_name" required maxlength="255"
                       class="contact-form__input" placeholder="<?= __('contact_name') ?>">
            </div>
            <div class="contact-form__group">
                <label for="contact_email_<?= $uid ?>" class="contact-form__label"><?= __('contact_email') ?> <span class="contact-form__required">*</span></label>
                <input type="email" id="contact_email_<?= $uid ?>" name="contact_email" required maxlength="255"
                       class="contact-form__input" placeholder="<?= __('contact_email') ?>">
            </div>
        </div>
        <div class="contact-form__group">
            <label for="contact_subject_type_<?= $uid ?>" class="contact-form__label"><?= __('contact_subject') ?> <span class="contact-form__required">*</span></label>
            <select id="contact_subject_type_<?= $uid ?>" name="contact_subject_type" required class="contact-form__input">
                <option value=""><?= __('contact_select_subject') ?></option>
                <option value="dmca_takedown"><?= __('contact_subject_dmca') ?></option>
                <option value="2257_compliance"><?= __('contact_subject_2257') ?></option>
                <option value="content_report"><?= __('contact_subject_report') ?></option>
                <option value="privacy_request"><?= __('contact_subject_privacy') ?></option>
                <option value="technical_issue"><?= __('contact_subject_technical') ?></option>
                <option value="general_inquiry"><?= __('contact_subject_general') ?></option>
                <option value="other"><?= __('contact_subject_other') ?></option>
            </select>
        </div>
        <div class="contact-form__url-group" style="display:none;">
            <label class="contact-form__label"><?= __('contact_content_urls') ?> <span class="contact-form__required">*</span></label>
            <div class="contact-form__url-list">
                <div class="contact-form__url-row">
                    <input type="url" name="content_urls[]" class="contact-form__input" placeholder="https://...">
                    <button type="button" class="contact-form__remove-url" title="<?php echo htmlspecialchars(__('simply_remove'), ENT_QUOTES); ?>">&times;</button>
                </div>
            </div>
            <button type="button" class="contact-form__add-url">+ <?= __('contact_add_url') ?></button>
        </div>
        <div class="contact-form__group">
            <label for="contact_message_<?= $uid ?>" class="contact-form__label"><?= __('contact_message') ?> <span class="contact-form__required">*</span></label>
            <textarea id="contact_message_<?= $uid ?>" name="contact_message" required rows="6" maxlength="10000"
                      class="contact-form__textarea" placeholder="<?= __('contact_message') ?>..."></textarea>
        </div>

        <?= Captcha::renderWidget('contact') ?>

        <button type="submit" class="contact-form__submit">
            <svg class="contact-form__submit-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
            <?= __('contact_send') ?>
        </button>
    </form>
</div>

<script>
(function(){
    var sel = document.getElementById('contact_subject_type_<?= $uid ?>');
    if (!sel) return;
    var form = sel.closest('form');
    var urlGroup = form.querySelector('.contact-form__url-group');
    var urlList = urlGroup.querySelector('.contact-form__url-list');
    var addBtn = urlGroup.querySelector('.contact-form__add-url');
    var urlSubjects = ['dmca_takedown', '2257_compliance', 'content_report'];

    sel.addEventListener('change', function() {
        if (urlSubjects.indexOf(this.value) !== -1) {
            urlGroup.style.display = '';
            urlList.querySelectorAll('input[type="url"]').forEach(function(inp){ inp.required = true; });
        } else {
            urlGroup.style.display = 'none';
            urlList.querySelectorAll('input[type="url"]').forEach(function(inp){ inp.required = false; inp.value = ''; });
        }
    });
    addBtn.addEventListener('click', function() {
        var row = document.createElement('div');
        row.className = 'contact-form__url-row';
        row.innerHTML = '<input type="url" name="content_urls[]" class="contact-form__input" placeholder="https://..." required>'
                      + '<button type="button" class="contact-form__remove-url" title="<?php echo htmlspecialchars(__('simply_remove'), ENT_QUOTES); ?>">&times;</button>';
        urlList.appendChild(row);
    });
    urlList.addEventListener('click', function(e) {
        if (e.target.classList.contains('contact-form__remove-url')) {
            var rows = urlList.querySelectorAll('.contact-form__url-row');
            if (rows.length > 1) { e.target.closest('.contact-form__url-row').remove(); }
        }
    });
})();
</script>
