{% extends 'admin/base.html' %}
{% block title %}New POS Customer{% endblock %}
{% block content %}

<div style="max-width: 600px; margin: 0 auto;">
    <div style="margin-bottom: 20px;">
        <a href="{{ url_for('admin_subscribers') }}" style="color: var(--muted); text-decoration: none; font-size: 14px;">
            ← Back to Subscribers
        </a>
    </div>

    <div class="card">
        <div style="text-align: center; margin-bottom: 25px;">
            <div style="font-size: 40px; margin-bottom: 10px;">📠</div>
            <div class="card-title" style="margin: 0; font-size: 20px;">Register & Pay via POS</div>
            <p style="color: var(--muted); font-size: 14px; margin-top: 8px;">
                Enter student details to initiate a terminal payment.
            </p>
        </div>

        <form method="POST" action="{{ url_for('admin_pos_register') }}">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
                <div>
                    <label style="display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; text-transform: uppercase;">First Name</label>
                    <input type="text" name="first_name" required placeholder="e.g. Collins" 
                           style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: white;">
                </div>
                <div>
                    <label style="display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; text-transform: uppercase;">Surname</label>
                    <input type="text" name="surname" required placeholder="e.g. Onyegbado"
                           style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: white;">
                </div>
            </div>

            <div style="margin-bottom: 15px;">
                <label style="display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; text-transform: uppercase;">Email Address (Student ID)</label>
                <input type="email" name="email" required placeholder="student@fuotuoke.edu.ng"
                       style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: white;">
            </div>

            <div style="margin-bottom: 25px;">
                <label style="display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; text-transform: uppercase;">Phone Number</label>
                <input type="text" name="phone" placeholder="080XXXXXXXX"
                       style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: white;">
            </div>

            <div style="background: rgba(59, 31, 110, 0.2); padding: 15px; border-radius: 8px; border-left: 4px solid var(--purple); margin-bottom: 25px;">
                <p style="margin: 0; font-size: 13px; color: #dcd6f7;">
                    <strong>Note:</strong> Clicking the button below will create the account and send the <strong>₦3,000</strong> charge request to the connected Moniepoint terminal.
                </p>
            </div>

            <button type="submit" class="btn btn-purple" style="width: 100%; justify-content: center; padding: 15px; font-size: 16px;">
                Confirm & Initialize POS
            </button>
        </form>
    </div>
</div>

{% endblock %}