{% extends "base.html" %}
{% block title %}Add Customer{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">Add New Customer</h2>

    <div class="card p-4 shadow-sm">
        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}

            <div class="row">
                <div class="col-md-6">
                    <label class="form-label">Customer Name</label>
                    {{ form.name }}
                </div>
                <div class="col-md-6">
                    <label class="form-label">Company Name</label>
                    {{ form.company_name }}
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-4">
                    <label class="form-label">Tax ID</label>
                    {{ form.tax_id }}
                </div>
                <div class="col-md-4">
                    <label class="form-label">CNIC</label>
                    {{ form.cnic }}
                </div>
                <div class="col-md-4">
                    <label class="form-label">Country</label>
                    {{ form.country }}
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-6">
                    <label class="form-label">Bank Account Details</label>
                    {{ form.bank_account_details }}
                </div>
                <div class="col-md-6">
                    <label class="form-label">Upload License or Other Docs</label>
                    {{ form.license_document }}
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-4">
                    <label class="form-label">Customer Type</label>
                    {{ form.customer_type }}
                </div>
                <div class="col-md-4">
                    <label class="form-label">Email</label>
                    {{ form.email }}
                </div>
                <div class="col-md-4">
                    <label class="form-label">Phone</label>
                    {{ form.phone }}
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-12">
                    <label class="form-label">Address</label>
                    {{ form.address }}
                </div>
            </div>

            <div class="text-center mt-4">
                <button type="submit" class="btn btn-success">Save Customer</button>
                <a href="{% url 'customer_list' %}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<style>
    /* Custom Styling */
    .form-label {
        font-weight: bold;
    }
    input, select, textarea {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
    textarea {
        resize: vertical;
        height: 80px;
    }
    .btn {
        width: 150px;
    }
</style>
{% endblock %}