{% extends "base.html" %}

{% block content %}

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

    <div>

        <h2 class="mb-1">

            New Customer

        </h2>

        <small class="text-muted">

            Dashboard / Customers / New Customer

        </small>

    </div>

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

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

        Back

    </a>

</div>

<form>

<div class="card shadow-sm mb-4">

    <div class="card-header">

        <i class="bi bi-building"></i>

        Company Information

    </div>

    <div class="card-body">

        <div class="row">

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

                <label class="form-label">

                    Customer Code

                </label>

                <input
                    type="text"
                    class="form-control"
                    placeholder="Auto Generated"
                    readonly>

            </div>

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

                <label class="form-label">

                    Company Name

                </label>

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

            </div>

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

                <label class="form-label">

                    Trading Name

                </label>

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

            </div>

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

                <label class="form-label">

                    Registration Number

                </label>

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

            </div>

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

                <label class="form-label">

                    VAT Number

                </label>

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

            </div>

        </div>

    </div>

</div>

<div class="card shadow-sm mb-4">

    <div class="card-header">

        <i class="bi bi-geo-alt"></i>

        Address

    </div>

    <div class="card-body">

        <div class="row">

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

                <label class="form-label">

                    Street Address

                </label>

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

            </div>

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

                <label class="form-label">

                    City

                </label>

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

            </div>

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

                <label class="form-label">

                    Province / State

                </label>

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

            </div>

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

                <label class="form-label">

                    Postal Code

                </label>

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

            </div>

        </div>

    </div>

</div>

<div class="card shadow-sm mb-4">

    <div class="card-header">

        <i class="bi bi-person-vcard"></i>

        Primary Contact

    </div>

    <div class="card-body">

        <div class="row">

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

                <label class="form-label">

                    Contact Name

                </label>

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

            </div>

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

                <label class="form-label">

                    Email

                </label>

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

            </div>

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

                <label class="form-label">

                    Telephone

                </label>

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

            </div>

        </div>

    </div>

</div>

<div class="card shadow-sm">

    <div class="card-body text-end">

        <button type="reset" class="btn btn-outline-secondary">

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

            Cancel

        </button>

        <button type="submit" class="btn btn-success">

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

            Save Customer

        </button>

    </div>

</div>

</form>

{% endblock %}