{% extends team.id+'/base.html' %}

{% block title %}Member and Press Support Office{% endblock %}
{% block description %}Welcome to the communication area. Whether you are a rival manager, a future member, or a scout, you can get in touch with the club's board.{%endblock%}


{% block content %}
<section class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            
            <div class="text-center mb-5">
                <div class="badge bg-orange text-white mb-2 px-3 py-2 text-uppercase">Communication Area</div>
                <h1 class="display-4">MEMBER SERVICE AND PRESS OFFICE</h1>
                <p class="lead text-muted">Welcome to the {{team.name}} communication area. Whether you are a rival manager, a future member, or a scout, you can get in touch with the club's board.</p>
            </div>

            <div class="row g-5">
                <div class="col-md-7">
                    <div class="card shadow-sm border-0 p-4 bg-light-subtle rounded-4">
                        <h2 class="fs-4 mb-4 text-orange text-uppercase">Send us a message</h2>
                        
                        <form id="contactForm">
                            <div class="mb-3">
                                <label class="form-label fw-bold small">Name / Manager Nickname</label>
                                <input type="text" id="username" class="form-control" placeholder="Example: MutenRoshi" required>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-bold small">Email address</label>
                                <input type="email" id="email" class="form-control" placeholder="Where you want us to reply" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-bold small">Subject</label>
                                <select class="form-select" required>
                                    <option value="" selected>Select an option...</option>
                                    <option>Training question</option>
                                    <option>Greetings</option>
                                    <option>Friendly challenge</option>
                                    <option>Support team</option>
                                    <option>Other</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-bold small">Message</label>
                                <textarea class="form-control" rows="4" placeholder="Write your inquiry here..." required></textarea>
                            </div>

                            <div class="mb-4 p-3 bg-secondary-subtle border rounded">
                                <label class="form-label fw-bold small text-danger"><i class="bi bi-shield-lock me-1"></i> Anti-Spam: Mind Training</label>
                                <p class="small text-muted mb-2">How much is 2 + 2?</p>
                                <input type="number" class="form-control form-control-sm" id="antiSpam" placeholder="Enter the result" required>
                            </div>

                            <div class="form-check mb-4">
                                <input class="form-check-input" type="checkbox" id="privacyCheck" required>
                                <label class="form-check-label small text-muted" for="privacyCheck">
                                    I accept the <a href="{{ url_for('team.legal_policy', team_id=team.id) }}" class="text-orange">Legal Notice</a> and the <a href="{{ url_for('team.cookie_policy', team_id=team.id) }}" class="text-orange">Privacy Policy</a>.
                                </label>
                                <div class="mt-2" style="font-size: 0.75rem; line-height: 1.2;">
                                    *Important: Our support team is not always available for form submissions. We suggest using the Hattrick chat for urgent matters.
                                    <br><br>
                                    *<strong>Disclaimer</strong>: This form is a frontend placeholder. No personal data is collected, stored, or processed
                                </div>
                            </div>

                            <button type="submit" class="btn bg-warning btn-lg w-100 text-uppercase shadow">
                                <i class="bi bi-send-fill me-2 text-white"></i>Send message
                            </button>
                        </form>
                    </div>
                </div>

                <div class="col-md-5">
                    <h2 class="fs-4 mb-4 text-uppercase">Direct contact channels</h2>
                    
                    <div class="d-flex align-items-start mb-4">
                        <div class="bg-orange p-2 rounded me-3">
                            <i class="bi bi-envelope-paper-fill text-white fs-4"></i>
                        </div>
                        <div>
                            <p class="fw-bold mb-1">Hattrick Mail</p>
                            <p class="small text-muted">Send a private message to the owner.</p>
                        </div>
                    </div>

                    <div class="d-flex align-items-start mb-4">
                        <div class="bg-dark p-2 rounded me-3">
                            <i class="bi bi-chat-dots-fill text-white fs-4"></i>
                        </div>
                        <div>
                            <p class="fw-bold mb-1">Guestbook</p>
                            <p class="small text-muted">Leave us a message in the Hattrick guestbook.</p>
                        </div>
                    </div>

                    <div class="alert alert-warning border-0 mt-4">
                        <p class="small mb-0"><strong>Note:</strong> Press messages sent during the weekend will be answered once the league results have been analyzed.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
document.getElementById('contactForm').onsubmit = function(e) {
    const answer = document.getElementById('antiSpam').value;
    if(answer != "4") {
        alert("Incorrect answer to the anti-spam question. Please try again!");
        return false;
    }
    alert("Your message has been simulated successfully. However, please be aware that this site operates in a 'No-Data' environment; no information is recorded or delivered. For real-time inquiries, contact us via Hattrick.");
    return false;
};
</script>
{% endblock %}