{% extends "pos/base.html" %}
{% block title %}Update order‑booker{% endblock %}
{% block heading %}Update 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="update-booker" action="{% url 'products:order_booker_update' ob.id %}" method="post">
                {% csrf_token %}

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>Name</label>
                        <input class="form-control" name="name" value="{{ ob.name }}" required>
                    </div>
                    <div class="form-group col-md-6">
                        <label>Mobile</label>
                        <input class="form-control" name="mobile" value="{{ ob.mobile }}">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>Phone</label>
                        <input class="form-control" name="phone" value="{{ ob.phone }}">
                    </div>
                    <div class="form-group col-md-6">
                        <label>Address</label>
                        <input class="form-control" name="address" value="{{ ob.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"
                               {% if ob.linked_user %}checked{% endif %}
                               onchange="toggleLoginFields(this)">
                        <label class="custom-control-label font-weight-bold" for="allow_login">
                            Allow this Order‑Booker to Login
                        </label>
                    </div>
                    {% if ob.linked_user %}
                        <small class="text-success">
                            <i class="fas fa-check-circle mr-1"></i>
                            Login active — Username: <strong>{{ ob.linked_user.username }}</strong>
                        </small>
                    {% endif %}
                </div>

                <div id="login-fields" style="{% if not ob.linked_user %}display:none;{% endif %}">
                    <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"
                                   value="{% if ob.linked_user %}{{ ob.linked_user.username }}{% endif %}">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Email</label>
                            <input type="email" class="form-control" name="ob_email"
                                   value="{% if ob.linked_user %}{{ ob.linked_user.email }}{% endif %}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>
                                Password
                                {% if ob.linked_user %}
                                    <small class="text-muted">(leave blank to keep current)</small>
                                {% else %}
                                    <span class="text-danger">*</span>
                                {% endif %}
                            </label>
                            <input type="password" class="form-control" name="ob_password1" id="ob_password1">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Confirm Password</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">Update 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');

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

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('update-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('update-booker').submit();
    }
});
</script>
{% endblock javascripts %}