{% extends "base.html" %}
{% block title %}Submit Work Order — Thor's Hammer Electrical LLC{% endblock %}

{% if recaptcha_site_key %}
{% block extra_head %}
<script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}"></script>
{% endblock %}
{% endif %}

{% block content %}

<!-- ── PAGE HEADER ─────────────────────────────────────────── -->
<section class="relative py-20 px-4 text-center overflow-hidden grid-bg">
    <div class="absolute inset-0 pointer-events-none"
         style="background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(250,204,21,0.06) 0%, transparent 70%);"></div>
    <div class="relative z-10">
        <p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">Get Service</p>
        <h1 class="font-oswald text-5xl md:text-6xl font-bold text-white tracking-wide mb-4">WORK ORDER</h1>
        <p class="text-gray-400 max-w-lg mx-auto">
            Fill out the form below and we'll be notified immediately. We'll follow up with you shortly.
        </p>
    </div>
</section>

<!-- ── FORM ────────────────────────────────────────────────── -->
<section class="py-16 px-4">
    <div class="max-w-2xl mx-auto">

        <div class="rounded-2xl border border-white/8 overflow-hidden" style="background-color: #111111;">
            <!-- Form header -->
            <div class="px-8 py-6 border-b border-white/8"
                 style="background: linear-gradient(135deg, #161616, #131313);">
                <div class="flex items-center gap-3">
                    <i class="fa-solid fa-bolt text-yellow-400 text-xl"></i>
                    <div>
                        <h2 class="font-oswald text-xl font-bold text-white">New Work Order</h2>
                        <p class="text-gray-500 text-xs mt-0.5">All fields are required</p>
                    </div>
                </div>
            </div>

            <!-- Form body -->
            <form id="work-order-form" action="{{ url_for('submit') }}" method="POST" class="px-8 py-8 space-y-6">

                <!-- Honeypot: hidden from real users, bots fill it and get silently rejected -->
                <div class="honeypot" aria-hidden="true">
                    <input type="text" name="website" id="website" tabindex="-1" autocomplete="off">
                </div>

                <!-- reCAPTCHA v3 token (populated by JS before submit) -->
                <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

                <!-- Name -->
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-300 mb-2">
                        Full Name
                    </label>
                    <input type="text" id="name" name="name" required
                           placeholder="John Smith"
                           class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
                                  focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
                                  transition-all"
                           style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);">
                </div>

                <!-- Job Description -->
                <div>
                    <label for="job" class="block text-sm font-medium text-gray-300 mb-2">
                        Job Description
                    </label>
                    <textarea id="job" name="job" required rows="3"
                              placeholder="Describe the electrical work needed..."
                              class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
                                     focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
                                     transition-all resize-none"
                              style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);"></textarea>
                </div>

                <!-- Address -->
                <div>
                    <label for="address" class="block text-sm font-medium text-gray-300 mb-2">
                        Street Address
                    </label>
                    <input type="text" id="address" name="address" required
                           placeholder="123 Main St"
                           class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
                                  focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
                                  transition-all"
                           style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);">
                </div>

                <!-- City / State / Zip -->
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                    <div class="col-span-2 sm:col-span-1">
                        <label for="city" class="block text-sm font-medium text-gray-300 mb-2">City</label>
                        <input type="text" id="city" name="city" required
                               placeholder="Levelland"
                               class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
                                      focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
                                      transition-all"
                               style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);">
                    </div>
                    <div>
                        <label for="state" class="block text-sm font-medium text-gray-300 mb-2">State</label>
                        <input type="text" id="state" name="state" required
                               placeholder="TX" maxlength="2"
                               class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
                                      focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
                                      transition-all uppercase"
                               style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);">
                    </div>
                    <div>
                        <label for="zipcode" class="block text-sm font-medium text-gray-300 mb-2">ZIP</label>
                        <input type="text" id="zipcode" name="zipcode" required
                               placeholder="79336" maxlength="5" pattern="\d{5}"
                               class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
                                      focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
                                      transition-all"
                               style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);">
                    </div>
                </div>

                <!-- Phone -->
                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-300 mb-2">
                        Phone Number
                    </label>
                    <input type="tel" id="phone" name="phone" required
                           placeholder="(806) 555-0123"
                           class="w-full px-4 py-3 rounded-lg border text-white text-sm placeholder-gray-600
                                  focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50
                                  transition-all"
                           style="background-color: #1a1a1a; border-color: rgba(255,255,255,0.1);">
                </div>

                <!-- Submit -->
                <div class="pt-2">
                    <button type="submit"
                            class="w-full py-4 bg-yellow-400 text-black font-oswald font-bold tracking-widest
                                   text-base rounded-lg hover:bg-yellow-300 active:scale-[0.99]
                                   transition-all glow-yellow">
                        <i class="fa-solid fa-bolt mr-2"></i> SUBMIT WORK ORDER
                    </button>
                    <p class="text-center text-gray-600 text-xs mt-3">
                        We'll receive a notification immediately and follow up with you.
                    </p>
                </div>
            </form>
        </div>

    </div>
</section>

{% endblock %}

{% if recaptcha_site_key %}
{% block extra_scripts %}
<script>
    document.getElementById('work-order-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const form = this;
        grecaptcha.ready(function() {
            grecaptcha.execute('{{ recaptcha_site_key }}', { action: 'submit' }).then(function(token) {
                document.getElementById('g-recaptcha-response').value = token;
                form.submit();
            });
        });
    });
</script>
{% endblock %}
{% endif %}