{% extends "pos/base.html" %}

{% block content %}
<style>
  .bp-page-wrap{padding:18px;}
  .bp-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 4px 16px rgba(15,23,42,.06);max-width:900px;margin:auto;}
  .bp-card-head{padding:16px 18px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .bp-title{font-size:20px;font-weight:800;color:#0f172a;margin:0;}
  .bp-muted{color:#64748b;font-size:13px;}
  .bp-body{padding:18px;}
  .bp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .bp-field label{display:block;font-size:13px;font-weight:700;color:#334155;margin-bottom:6px;}
  .bp-input{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;outline:none;}
  .bp-full{grid-column:1 / -1;}
  .bp-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
  .bp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;padding:10px 15px;text-decoration:none;font-weight:800;cursor:pointer;}
  .bp-btn-primary{background:#2563eb;color:#fff;}
  .bp-btn-success{background:#16a34a;color:#fff;}
  .bp-btn-light{background:#f1f5f9;color:#0f172a;}
  .bp-check-row{display:flex;align-items:center;gap:10px;margin-top:4px;padding:10px 0;}
  .bp-check-row input{width:18px;height:18px;}
  .bp-login-box{grid-column:1 / -1;border-top:1px solid #e5e7eb;margin-top:4px;padding-top:16px;}
  .bp-login-title{font-size:15px;font-weight:900;color:#2563eb;margin-bottom:12px;}
  .bp-login-title i{margin-right:6px;}
  .bp-alert{margin-bottom:10px;padding:10px 12px;border-radius:10px;background:#fee2e2;color:#991b1b;font-weight:700;}
  @media(max-width:700px){.bp-grid{grid-template-columns:1fr;}}
</style>

<div class="bp-page-wrap">
  <div class="bp-card">
    <div class="bp-card-head">
      <div>
        <h2 class="bp-title">
          {% if person %}Edit Delivery Person{% else %}Add Delivery Person{% endif %}
        </h2>
        <div class="bp-muted">Delivery person will be saved in order_booker table.</div>
      </div>

      <a class="bp-btn bp-btn-light" href="{% url 'hotel:restaurant:delivery_person_list' %}">
        Back
      </a>
    </div>

    <div class="bp-body">
      {% if messages %}
        {% for message in messages %}
          <div class="bp-alert">
            {{ message }}
          </div>
        {% endfor %}
      {% endif %}

      <form method="post" id="deliveryPersonForm">
        {% csrf_token %}

        <div class="bp-grid">
          <div class="bp-field">
            <label>Name *</label>
            <input class="bp-input" type="text" name="name" value="{{ name_value }}" required>
          </div>

          <div class="bp-field">
            <label>Mobile *</label>
            <input class="bp-input" type="text" name="mobile" value="{{ mobile_value }}" required>
          </div>

          <div class="bp-field">
            <label>Phone</label>
            <input class="bp-input" type="text" name="phone" value="{{ phone_value }}">
          </div>

          <div class="bp-field">
            <label>Address</label>
            <input class="bp-input" type="text" name="address" value="{{ address_value }}">
          </div>

          <div class="bp-field bp-full">
            <label class="bp-check-row">
              <input
                type="checkbox"
                name="allow_login"
                id="allowLoginCheck"
                {% if allow_login %}checked{% endif %}
              >
              <span>Allow this Delivery Person to Login</span>
            </label>
          </div>

          <div class="bp-login-box" id="loginBox" style="{% if not allow_login %}display:none;{% endif %}">
            <div class="bp-login-title">
              <i class="fas fa-user-lock"></i> Login Credentials
            </div>

            <div class="bp-grid">
              <div class="bp-field">
                <label>Username *</label>
                <input class="bp-input login-field" type="text" name="username" value="{{ username_value }}">
              </div>

              <div class="bp-field">
                <label>Email</label>
                <input class="bp-input login-field" type="email" name="email" value="{{ email_value }}">
              </div>

              <div class="bp-field">
                <label>
                  Password {% if not person or not person.linked_user_id %}*{% endif %}
                </label>
                <input class="bp-input login-field" type="password" name="password" autocomplete="new-password">
                {% if person and person.linked_user_id %}
                  <small class="bp-muted">Leave blank if you do not want to change password.</small>
                {% endif %}
              </div>

              <div class="bp-field">
                <label>
                  Confirm Password {% if not person or not person.linked_user_id %}*{% endif %}
                </label>
                <input class="bp-input login-field" type="password" name="confirm_password" autocomplete="new-password">
              </div>
            </div>
          </div>
        </div>

        <div class="bp-actions">
          <a class="bp-btn bp-btn-light" href="{% url 'hotel:restaurant:delivery_person_list' %}">
            Cancel
          </a>

          <button class="bp-btn bp-btn-success" type="submit">
            {% if person %}Update Delivery Person{% else %}Create Delivery Person{% endif %}
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  (function () {
    var check = document.getElementById("allowLoginCheck");
    var box = document.getElementById("loginBox");

    function syncLoginBox() {
      if (!check || !box) return;

      if (check.checked) {
        box.style.display = "block";
      } else {
        box.style.display = "none";
      }
    }

    if (check) {
      check.addEventListener("change", syncLoginBox);
      syncLoginBox();
    }
  })();
</script>
{% endblock %}