{% extends 'base.html.twig' %}
{% block title %}Find Invoice{% endblock %}

{% block stylesheets %}
<style>
    body { background: #f3f4f6; }
</style>
{% endblock %}

{% block body %}
<div class="min-h-screen flex items-center justify-center py-12 px-4">
    <div class="max-w-md w-full">
        <div class="text-center mb-8">
            <a href="{{ path('website_home') }}">
                <img src="{{ asset('images/logo-color.jpg') }}" alt="Logo" class="h-16 mx-auto mb-4 hover:opacity-80 transition-opacity">
            </a>
            <h1 class="text-2xl font-bold text-gray-800">Find Your Invoice</h1>
            <p class="text-gray-500 mt-2">Enter your invoice number and creation timestamp to view your invoice.</p>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            {% if error %}
            <div class="mb-4 px-4 py-3 rounded-lg bg-red-50 text-red-800 border border-red-200 text-sm">
                <i class="bi bi-exclamation-circle mr-1"></i> {{ error }}
            </div>
            {% endif %}

            <form method="post" action="{{ path('public_invoice_search') }}">
                <div class="space-y-4">
                    <!-- Honeypot field - hidden from real users -->
                    <div style="position: absolute; left: -9999px;" aria-hidden="true">
                        <label for="website">Leave this empty</label>
                        <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
                    </div>

                    <div>
                        <label for="number" class="block text-sm font-medium text-gray-700 mb-1">Invoice Number</label>
                        <input type="text"
                               id="number"
                               name="number"
                               value="{{ invoice_number }}"
                               placeholder="e.g. 2168"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-kitsco-accent focus:border-kitsco-accent"
                               required>
                        <p class="text-xs text-gray-400 mt-1">Found at the top of your invoice</p>
                    </div>

                    <div>
                        <label for="created_at" class="block text-sm font-medium text-gray-700 mb-1">Creation Timestamp</label>
                        <input type="text"
                               id="created_at"
                               name="created_at"
                               value="{{ created_at }}"
                               placeholder="e.g. 13/04/2026 14:30:45"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-kitsco-accent focus:border-kitsco-accent"
                               required>
                        <p class="text-xs text-gray-400 mt-1">Found at the bottom of your invoice: "Invoice created at: ..."</p>
                    </div>

                    <button type="submit" class="w-full px-4 py-2.5 bg-kitsco-accent text-white rounded-lg font-medium hover:bg-kitsco-dark transition-colors">
                        <i class="bi bi-search mr-1"></i> Find Invoice
                    </button>
                </div>
            </form>
        </div>

        <div class="text-center mt-6 space-y-2">
            <p class="text-gray-500 text-sm">
                Having trouble? <a href="{{ path('website_home') }}#contact" class="text-kitsco-accent hover:underline">Contact us</a>
            </p>
            <p>
                <a href="{{ path('website_home') }}" class="text-gray-400 text-xs hover:text-gray-600">
                    <i class="bi bi-arrow-left"></i> Back to Homepage
                </a>
            </p>
        </div>
    </div>
</div>
{% endblock %}