{% extends 'companies/superadmin/base.html' %}

{% block content %}
<div class="content-header px-4 pt-4">
    <a href="{% url 'superadmin_company_list' %}" class="text-decoration-none mb-3 d-inline-block text-primary">
        <i class="fas fa-arrow-left me-1"></i> Back to Companies
    </a>
    <h2 class="fw-bold" style="color: var(--sp-primary);">Create New Company</h2>
    <p class="text-muted">Register a new tenant company and their initial administrator account.</p>
</div>

<div class="container-fluid px-4 pb-5">
    <form method="POST">
        {% csrf_token %}
        
        <div class="row g-4">
            <!-- Left Column: Company Info -->
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm" style="border-radius: 20px;">
                    <div class="card-header bg-white py-3 border-bottom-0">
                        <h5 class="mb-0 fw-bold"><i class="fas fa-building me-2 text-primary"></i>Company Details</h5>
                    </div>
                    <div class="card-body p-4 pt-0">
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-uppercase text-muted">Company Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control form-control-lg" required placeholder="e.g. Acme POS Nigeria" style="border-radius: 12px; background: #f8f9fa; border: 1px solid #eee;">
                            <div class="form-text small">Slug will be auto-generated from this name.</div>
                        </div>
                        
                        <div class="row mb-3 g-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-uppercase text-muted">Business Email</label>
                                <input type="email" name="email" class="form-control" placeholder="contact@company.com" style="border-radius: 10px;">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-uppercase text-muted">Phone Number</label>
                                <input type="text" name="phone" class="form-control" placeholder="+234..." style="border-radius: 10px;">
                            </div>
                        </div>

                        <hr class="my-4 opacity-25">

                        <h5 class="mb-3 fw-bold"><i class="fas fa-user-shield me-2 text-success"></i>Initial Admin Account</h5>
                        <p class="small text-muted mb-4">This user will be the first 'Admin' for this company.</p>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-uppercase text-muted">Admin Username <span class="text-danger">*</span></label>
                            <input type="text" name="admin_username" class="form-control" required placeholder="e.g. acme_admin" style="border-radius: 10px;">
                        </div>

                        <div class="row mb-3 g-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-uppercase text-muted">Admin Email</label>
                                <input type="email" name="admin_email" class="form-control" placeholder="admin@company.com" style="border-radius: 10px;">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-uppercase text-muted">Admin Password <span class="text-danger">*</span></label>
                                <input type="password" name="admin_password" class="form-control" required placeholder="••••••••" style="border-radius: 10px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Subscription -->
            <div class="col-lg-5">
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;">
                    <div class="card-header bg-white py-3 border-bottom-0">
                        <h5 class="mb-0 fw-bold"><i class="fas fa-crown me-2 text-warning"></i>Plan & Subscription</h5>
                    </div>
                    <div class="card-body p-4 pt-0">
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-uppercase text-muted">Assigned Plan</label>
                            <select name="plan" class="form-select" style="border-radius: 10px;">
                                <option value="">No Plan (Free/Custom)</option>
                                {% for plan in plans %}
                                <option value="{{ plan.id }}">{{ plan.name }} (₦{{ plan.price_monthly }}/mo)</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-uppercase text-muted">Expiry Date</label>
                            <input type="date" name="expiry_date" class="form-control" style="border-radius: 10px;">
                            <div class="form-text small">Leave blank for lifetime/no expiry.</div>
                        </div>

                        <div class="p-3 rounded-4 mb-2" style="background: linear-gradient(135deg, rgba(79,70,229,0.05) 0%, rgba(124,58,237,0.05) 100%); border: 1px dashed rgba(79,70,229,0.2);">
                            <div class="d-flex align-items-center gap-3">
                                <div class="bg-white rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 40px; height: 40px;">
                                    <i class="fas fa-info text-primary"></i>
                                </div>
                                <div class="small text-muted">
                                    A default <strong>Main Branch</strong> will be automatically created for this company.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-grid">
                    <button type="submit" class="btn btn-primary btn-lg rounded-pill py-3 shadow" style="background: linear-gradient(135deg, var(--sp-primary) 0%, #4338ca 100%); border: none;">
                        <i class="fas fa-check-circle me-1"></i> Finalize & Create Company
                    </button>
                    <p class="text-center small text-muted mt-3">All initial business and admin data will be isolated to this tenant.</p>
                </div>
            </div>
        </div>
    </form>
</div>
{% endblock %}