{% extends "base.html" %}

{% block title %}Add Customer{% endblock %}

{% block content %}
    {% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    <div>
      {% for category, message in messages %}
        <div class="alert alert-{{ 'danger' if category == 'error' else category }}">
          {{ message }}
        </div>
      {% endfor %}
    </div>
  {% endif %}
{% endwith %}

<div class="form-card">
    <h1>Add New Customer</h1>
    <form method="POST" id="customerForm" onsubmit="return validatePhone()">
        <label>First Name:</label>
        <input type="text" name="first_name" required>

        <label>Last Name:</label>
        <input type="text" name="last_name" required>

        <label>Phone Number:</label>
        <input type="text" name="phone_number" id="phone_number" required pattern="^\+?\d{10,15}$">
        <div class="error" id="phoneError"></div>

        <label>Date of Birth:</label>
        <input type="date" name="dob">

        <label>Email:</label>
        <input type="email" name="email">

        <button type="submit">Add Customer</button>
    </form>
</div>

<style>
    .form-card {
        background: #fff;
        padding: 30px;
        border-radius: 12px;
        max-width: 600px;
        margin: 0 auto;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    h1 {
        font-size: 24px;
        margin-bottom: 20px;
        text-align: center;
    }
    label {
        display: block;
        margin-top: 15px;
        font-weight: bold;
    }
    input[type="text"], input[type="date"], input[type="email"] {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border-radius: 6px;
        border: 1px solid #ccc;
    }
    button {
        margin-top: 20px;
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        border: none;
        color: white;
        font-size: 16px;
        border-radius: 6px;
        cursor: pointer;
    }
    .error {
        color: red;
        font-size: 0.9em;
        margin-top: 5px;
    }
</style>

<script>
    function validatePhone() {
        const phone = document.getElementById("phone_number").value;
        const phoneError = document.getElementById("phoneError");
        const pattern = /^\+?\d{10,15}$/;

        if (!pattern.test(phone)) {
            phoneError.textContent = "Enter a valid phone number (10–15 digits, optional +)";
            return false;
        } else {
            phoneError.textContent = "";
            return true;
        }
    }
</script>
{% endblock %}