{% extends 'base.html' %}
{% load static %}

{% block title %}Create Sub-Account - {{ parent_customer.customer_id }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Create Sub-Account for {{ parent_customer.display_name }} ({{ parent_customer.customer_id }})</h4>
                    <a href="{% url 'customers:customer_detail' parent_customer.customer_id %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back to Parent Account
                    </a>
                </div>
                
                <div class="card-body">
                    <form method="post" class="needs-validation" novalidate>
                        {% csrf_token %}
                        
                        <div class="alert alert-info">
                            <h6><i class="fas fa-info-circle"></i> Sub-Account Information</h6>
                            <p class="mb-1">Creating a sub-account under: <strong>{{ parent_customer.display_name }}</strong></p>
                            <p class="mb-0">Customer ID will be: <strong>{{ parent_customer.customer_id }}-X</strong> (X = next available number)</p>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <h5>Contact Information</h5>
                                
                                {% if parent_customer.customer_type == 'individual' %}
                                <div class="form-group">
                                    <label for="{{ form.full_name.id_for_label }}">Full Name *</label>
                                    {{ form.full_name }}
                                    {% if form.full_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.full_name.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                                {% else %}
                                <div class="form-group">
                                    <label for="{{ form.company_name.id_for_label }}">Company/Institution Name *</label>
                                    {{ form.company_name }}
                                    {% if form.company_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.company_name.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                                {% endif %}
                                
                                <div class="form-group">
                                    <label for="{{ form.phone.id_for_label }}">Phone Number *</label>
                                    {{ form.phone }}
                                    {% if form.phone.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.phone.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-group">
                                    <label for="{{ form.email.id_for_label }}">Email Address *</label>
                                    {{ form.email }}
                                    {% if form.email.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.email.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-group">
                                    <label for="{{ form.physical_address.id_for_label }}">Physical Address</label>
                                    {{ form.physical_address }}
                                    <small class="form-text text-muted">
                                        Pre-filled from parent account. Modify if different.
                                    </small>
                                    {% if form.physical_address.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.physical_address.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <h5>Service Configuration</h5>
                                
                                <div class="form-group">
                                    <label for="{{ form.service.id_for_label }}">Service Package</label>
                                    {{ form.service }}
                                    <small class="form-text text-muted">
                                        Select the service package for this sub-account.
                                    </small>
                                    {% if form.service.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.service.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-group">
                                    <label for="{{ form.notes.id_for_label }}">Notes</label>
                                    {{ form.notes }}
                                    <small class="form-text text-muted">
                                        Internal notes about this sub-account.
                                    </small>
                                    {% if form.notes.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.notes.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <div class="alert alert-warning">
                                    <h6><i class="fas fa-exclamation-triangle"></i> Important</h6>
                                    <ul class="mb-0 small">
                                        <li>Sub-accounts operate independently from the parent account</li>
                                        <li>Each sub-account has its own balance and service period</li>
                                        <li>Sub-accounts cannot create their own sub-accounts</li>
                                        <li>All billing and service management is separate</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Create Sub-Account
                            </button>
                            <a href="{% url 'customers:customer_detail' parent_customer.customer_id %}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Form validation
(function() {
    'use strict';
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();
</script>
{% endblock %}