{% extends 'base.html' %}

{% block title %}Registration - Yatra Booking System Testing{% endblock %}

{% block content %}
<div style="max-width: 460px; margin: 0 auto;">
    <h2 style="text-align:center; color:#2c3e50; margin-bottom: 5px;">📝 Create your account</h2>
    <p style="text-align:center; color:#7f8c8d; margin-bottom: 25px;">
        Register as a normal user or an operator. We'll email you a code to verify your email.
    </p>

    <form method="post" action="{% url 'register' %}">
        {% csrf_token %}

        <div style="margin-bottom: 18px;">
            <label style="display:block; font-weight:600; margin-bottom:6px; color:#2c3e50;">I am a *</label>
            <label style="margin-right:20px;">
                <input type="radio" name="role" value="PASSENGER" id="role_passenger" onchange="toggleCompany()"
                    checked>
                Normal User
            </label>
            <label>
                <input type="radio" name="role" value="OPERATOR" id="role_operator" onchange="toggleCompany()">
                Operator
            </label>
        </div>

        <div style="margin-bottom: 15px;">
            <label style="display:block; font-weight:600; margin-bottom:6px; color:#2c3e50;">Full name *</label>
            <input type="text" name="full_name" required value="{{ request.POST.full_name|default:'' }}"
                style="width:100%; padding:12px 15px; border:2px solid #dfe6e9; border-radius:10px; font-size:1rem;">
        </div>

        <div id="company_row" style="margin-bottom: 15px;">
            <label style="display:block; font-weight:600; margin-bottom:6px; color:#2c3e50;">Company name *
                (operators)</label>
            <input type="text" name="company_name" value="{{ request.POST.company_name|default:'' }}"
                style="width:100%; padding:12px 15px; border:2px solid #dfe6e9; border-radius:10px; font-size:1rem;">
        </div>

        <div style="margin-bottom: 15px;">
            <label style="display:block; font-weight:600; margin-bottom:6px; color:#2c3e50;">Email *</label>
            <input type="email" name="email" required value="{{ request.POST.email|default:'' }}"
                style="width:100%; padding:12px 15px; border:2px solid #dfe6e9; border-radius:10px; font-size:1rem;">
        </div>

        <div style="margin-bottom: 15px;">
            <label style="display:block; font-weight:600; margin-bottom:6px; color:#2c3e50;">Phone (optional)</label>
            <input type="text" name="phone" value="{{ request.POST.phone|default:'' }}"
                style="width:100%; padding:12px 15px; border:2px solid #dfe6e9; border-radius:10px; font-size:1rem;">
        </div>

        <div style="margin-bottom: 15px;">
            <label style="display:block; font-weight:600; margin-bottom:6px; color:#2c3e50;">Password * (min 6
                characters)</label>
            <input type="password" name="password" required
                style="width:100%; padding:12px 15px; border:2px solid #dfe6e9; border-radius:10px; font-size:1rem;">
        </div>

        <div style="margin-bottom: 25px;">
            <label style="display:block; font-weight:600; margin-bottom:6px; color:#2c3e50;">Confirm password *</label>
            <input type="password" name="confirm_password" required
                style="width:100%; padding:12px 15px; border:2px solid #dfe6e9; border-radius:10px; font-size:1rem;">
        </div>

        <button type="submit" class="btn btn-primary" style="width:100%; font-size:1.05rem;">Create account</button>
    </form>

    <div style="text-align:center; margin: 25px 0; color:#95a5a6; font-weight:600;">— OR —</div>

    <a href="#" id="google_signup" class="btn" style="display:block; width:100%; text-align:center; background:#ffffff; color:#444;
              border:2px solid #dfe6e9; box-shadow:0 4px 15px rgba(0,0,0,0.08); box-sizing:border-box;">
        <img src="https://www.google.com/favicon.ico" style="width:18px; vertical-align:middle; margin-right:8px;">
        Sign up with Google (no OTP needed)
    </a>

    <p style="text-align:center; margin-top: 20px;">
        Already have an account? <a href="{% url 'login' %}" style="color:#3498db; font-weight:600;">Login here</a>
    </p>
</div>

<script>
    var previousRole = "{{ request.POST.role|default:'PASSENGER' }}";
    var googleUrl = "{% url 'google_login' %}";

    function toggleCompany() {
        var isOperator = document.getElementById('role_operator').checked;
        document.getElementById('company_row').style.display = isOperator ? 'block' : 'none';
        document.getElementById('google_signup').href = googleUrl + '?role=' + (isOperator ? 'OPERATOR' : 'PASSENGER');
    }

    if (previousRole === 'OPERATOR') {
        document.getElementById('role_operator').checked = true;
    }
    toggleCompany();
</script>
{% endblock %}