{% extends "base.html" %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">

    <div>

        <h2><i class="bi bi-building"></i> New Customer</h2>

        <p class="text-muted">
            Register a new customer in MAGNUM ERP
        </p>

    </div>

    <a href="/customers" class="btn btn-secondary">

        <i class="bi bi-arrow-left"></i>

        Back

    </a>

</div>

<form method="POST" action="/customers/new">

<div class="card shadow-sm">

<div class="card-header">

<h5>Company Information</h5>

</div>

<div class="card-body">

<div class="row">

<div class="col-md-6 mb-3">

<label>Company Name</label>

<input
type="text"
class="form-control"
name="company_name"
required>

</div>

<div class="col-md-6 mb-3">

<label>Trading Name</label>

<input
type="text"
class="form-control"
name="trading_name">

</div>

<div class="col-md-6 mb-3">

<label>Registration Number</label>

<input
type="text"
class="form-control"
name="registration_number">

</div>

<div class="col-md-6 mb-3">

<label>VAT Number</label>

<input
type="text"
class="form-control"
name="vat_number">

</div>

</div>

</div>

</div>

<br>

<div class="card shadow-sm">

<div class="card-header">

<h5>Address</h5>

</div>

<div class="card-body">

<div class="row">

<div class="col-md-6 mb-3">

<label>Street</label>

<input
type="text"
class="form-control"
name="street">

</div>

<div class="col-md-3 mb-3">

<label>City</label>

<input
type="text"
class="form-control"
name="city">

</div>

<div class="col-md-3 mb-3">

<label>Province</label>

<input
type="text"
class="form-control"
name="province">

</div>

<div class="col-md-3 mb-3">

<label>Postal Code</label>

<input
type="text"
class="form-control"
name="postal_code">

</div>

</div>

</div>

</div>

<br>

<div class="card shadow-sm">

<div class="card-header">

<h5>Primary Contact</h5>

</div>

<div class="card-body">

<div class="row">

<div class="col-md-4 mb-3">

<label>Contact Name</label>

<input
type="text"
class="form-control"
name="contact_name">

</div>

<div class="col-md-4 mb-3">

<label>Email</label>

<input
type="email"
class="form-control"
name="email">

</div>

<div class="col-md-4 mb-3">

<label>Telephone</label>

<input
type="text"
class="form-control"
name="telephone">

</div>

</div>

</div>

</div>

<br>

<button class="btn btn-success btn-lg">

<i class="bi bi-check-circle"></i>

Save Customer

</button>

</form>

{% endblock %}