{% extends "pos/base.html" %}
{% block title %}Add order‑booker{% endblock %}
{% block heading %}Add order‑booker{% endblock %}

{% block content %}
<div class="row ml-0 mb-3">
    <a href="{% url 'products:order_booker_list' %}">
        <button class="btn btn-info font-weight-bold">
            <i class="fas fa-long-arrow-alt-left mr-2"></i>Go back
        </button>
    </a>
</div>

<div class="row">
    <div class="card col-md-8">
        <div class="card-body">
            <form id="add-booker" action="{% url 'products:order_booker_add' %}" method="post">
                {% csrf_token %}

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>Name</label>
                        <input class="form-control" name="name" required>
                    </div>
                    <div class="form-group col-md-6">
                        <label>Mobile</label>
                        <input class="form-control" name="mobile">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>Phone</label>
                        <input class="form-control" name="phone">
                    </div>
                    <div class="form-group col-md-6">
                        <label>Address</label>
                        <input class="form-control" name="address">
                    </div>
                </div>

                <div class="form-group mt-3">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="allow_login"
                               name="allow_login" onchange="toggleLoginFields(this)">
                        <label class="custom-control-label font-weight-bold" for="allow_login">
                            Allow this Order‑Booker to Login
                        </label>
                    </div>
                </div>

                <div id="login-fields" style="display:none;">
                    <hr>
                    <h6 class="text-primary font-weight-bold mb-3">
                        <i class="fas fa-user-lock mr-1"></i> Login Credentials
                    </h6>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Username <span class="text-danger">*</span></label>
                            <input class="form-control" name="ob_username" id="ob_username">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Email</label>
                            <input type="email" class="form-control" name="ob_email">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Password <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" name="ob_password1" id="ob_password1">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Confirm Password <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" name="ob_password2" id="ob_password2">
                            <small id="pass-msg" class="text-danger" style="display:none;">Passwords do not match.</small>
                        </div>
                    </div>
                </div>

                <button class="btn btn-success font-weight-bold mt-2">Create order‑booker</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
function toggleLoginFields(checkbox) {
    const section = document.getElementById('login-fields');
    const usernameField = document.getElementById('ob_username');
    const pass1 = document.getElementById('ob_password1');
    const pass2 = document.getElementById('ob_password2');

    if (checkbox.checked) {
        section.style.display = 'block';
        usernameField.setAttribute('required', 'required');
        pass1.setAttribute('required', 'required');
        pass2.setAttribute('required', 'required');
    } else {
        section.style.display = 'none';
        usernameField.removeAttribute('required');
        pass1.removeAttribute('required');
        pass2.removeAttribute('required');
    }
}

// Live password match check
document.getElementById('ob_password2').addEventListener('input', function() {
    const p1 = document.getElementById('ob_password1').value;
    const msg = document.getElementById('pass-msg');
    msg.style.display = (this.value && this.value !== p1) ? 'block' : 'none';
});

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('add-booker');
    const fields = Array.from(
        form.querySelectorAll('input:not([type=hidden]):not([type=checkbox]), select, textarea')
    ).filter(el => !el.disabled);

    fields.forEach((el, idx) => {
        el.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && this.tagName.toLowerCase() !== 'textarea') {
                e.preventDefault();
                const next = fields[idx + 1];
                if (next) next.focus();
            }
        });
    });
});

document.addEventListener('keydown', function(e) {
    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
        e.preventDefault();
        document.getElementById('add-booker').submit();
    }
});
</script>
{% endblock javascripts %}