<?php
require_once "../config/auth.php";
require_once "../config/db.php";
require_once "../config/helpers.php";

require_once "../includes/header.php";
require_once "../includes/sidebar.php";
require_once "../includes/topbar.php";
?>
<div class="main-content">
<div class="col-md-12">

<div class="topbar">
    <h5>Add Customer</h5>
</div>

<div class="p-4">

  

    <form method="POST" action="../actions/save_customer.php" onsubmit="return validateForm()">

        <div class="mb-3">
            <label>Name *</label>
            <input type="text" name="name" id="name" class="form-control" required>
        </div>

        <div class="mb-3">
            <label>Email *</label>
            <input type="email" name="email" id="email" class="form-control" required>
        </div>

        <div class="mb-3">
            <label>Phone *</label>
            <input type="text" name="phone" id="phone" class="form-control" maxlength="10" required>
            <small class="text-danger" id="phoneError"></small>
        </div>

        <div class="mb-3">
            <label>Address *</label>
            <textarea name="address" id="address" class="form-control" rows="3" required></textarea>
        </div>

        <button class="btn btn-primary">Save Customer</button>

    </form>

</div>

</div></div>
<?php if(isset($_GET['success'])){ ?>
<div class="position-fixed top-0 end-0 p-3" style="z-index: 9999;">
    <div id="successToast" class="toast align-items-center text-bg-success border-0">
        <div class="d-flex">
            <div class="toast-body">
                Customer added successfully!
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>
<?php } ?>


<script>
function validateForm() {

    let phone = document.getElementById("phone").value.trim();
    let phoneError = document.getElementById("phoneError");

    // Only numbers
    if (!/^[0-9]+$/.test(phone)) {
        phoneError.innerText = "Phone must contain only numbers";
        return false;
    }

    // Must be 10 digits
    if (phone.length !== 10) {
        phoneError.innerText = "Phone must be exactly 10 digits";
        return false;
    }

    phoneError.innerText = "";
    return true;
}
</script>

<?php require_once "../includes/footer.php"; ?>
