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

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">Add New Company</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">Company Name</label>
                    {{ form.company_name }}
                </div>
                <div class="col-md-6">
                    <label class="form-label">Country</label>
                    {{ form.country }}
                </div>
            </div>

    

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

            <div class="row mt-3">               
                <div class="col-md-6">
                    <label class="form-label">Supplier</label>
                    {{ form.supplier }}
                </div>
                <div class="col-md-6">
                    <label class="form-label">Customer</label>
                    {{ form.customer }}
                </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</button>
                <a href="{% url 'company_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 %}