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

{% block title %}Organization Settings - {{ organization.name }}{% endblock %}

{% block page_title %}Organization Settings{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb" aria-label="breadcrumbs">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
    <li class="breadcrumb-item active" aria-current="page">Settings</li>
</ol>
{% endblock %}

{% block extra_css %}
<style>
    .subscription-hero {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2.5rem;
        border-radius: 12px;
        margin-bottom: 2rem;
    }
    
    .plan-badge {
        display: inline-block;
        padding: 0.5rem 1rem;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50px;
        font-weight: 600;
    }
    
    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        border: 1px solid #e5e7eb;
        height: 100%;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .stat-value {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }
    
    .invoice-mini-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .invoice-mini-card:hover {
        border-color: #667eea;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
    }
    
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    .feature-item {
        display: flex;
        align-items: center;
        padding: 0.75rem;
        background: #f8f9fa;
        border-radius: 8px;
    }
    
    .feature-enabled {
        color: #10b981;
    }
    
    .feature-disabled {
        color: #d1d5db;
    }
    
    /* Fix active tab visibility */
    .nav-tabs .nav-link {
        color: #495057;
        font-weight: 500;
    }
    
    .nav-tabs .nav-link.active {
        color: #667eea !important;
        font-weight: 600;
        background-color: #fff;
        border-color: #dee2e6 #dee2e6 #fff;
    }
    
    .nav-tabs .nav-link:hover {
        color: #667eea;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ti ti-settings me-2"></i>Organization Settings
                </h3>
                <div class="ms-auto">
                    <span class="badge bg-blue">{{ tenant_user.get_role_display }}</span>
                </div>
            </div>
            <div class="card-body">
                <!-- Tabs Navigation -->
                <ul class="nav nav-tabs mb-4" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if not request.GET.tab or request.GET.tab == 'company' %}active{% endif %}" 
                                id="company-tab" data-bs-toggle="tab" 
                                data-bs-target="#company" type="button" role="tab">
                            <i class="ti ti-building me-2"></i>Company Information
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if request.GET.tab == 'team' %}active{% endif %}" 
                                id="team-tab" data-bs-toggle="tab" 
                                data-bs-target="#team" type="button" role="tab">
                            <i class="ti ti-users me-2"></i>Team Members
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if request.GET.tab == 'invoice' %}active{% endif %}" 
                                id="invoice-tab" data-bs-toggle="tab" 
                                data-bs-target="#invoice" type="button" role="tab">
                            <i class="ti ti-file-invoice me-2"></i>Invoice & Bill Settings
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if request.GET.tab == 'snapshots' %}active{% endif %}" 
                                id="snapshots-tab" data-bs-toggle="tab" 
                                data-bs-target="#snapshots" type="button" role="tab">
                            <i class="ti ti-calendar-stats me-2"></i>Year-End Snapshots
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if request.GET.tab == 'subscription' %}active{% endif %}" 
                                id="subscription-tab" data-bs-toggle="tab" 
                                data-bs-target="#subscription" type="button" role="tab">
                            <i class="ti ti-star me-2"></i>Subscription & Plan
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if request.GET.tab == 'billing' %}active{% endif %}" 
                                id="billing-tab" data-bs-toggle="tab" 
                                data-bs-target="#billing" type="button" role="tab">
                            <i class="ti ti-file-invoice me-2"></i>Billing History
                        </button>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content">
                    <!-- Company Information Tab -->
                    <div class="tab-pane fade {% if not request.GET.tab or request.GET.tab == 'company' %}show active{% endif %}" 
                         id="company" role="tabpanel">
                        <form method="post" class="needs-validation" novalidate>
                            {% csrf_token %}
                            <input type="hidden" name="form_type" value="company">
                            
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h4 class="mb-3">
                                        <i class="ti ti-building-bank text-primary me-2"></i>Business Information
                                    </h4>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label required">{{ form.name.label }}</label>
                                    {{ form.name }}
                                    {% if form.name.errors %}
                                    <div class="invalid-feedback d-block">{{ form.name.errors }}</div>
                                    {% endif %}
                                    {% if form.name.help_text %}
                                    <small class="form-hint">{{ form.name.help_text }}</small>
                                    {% endif %}
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{{ form.business_registration_no.label }}</label>
                                    {{ form.business_registration_no }}
                                    {% if form.business_registration_no.errors %}
                                    <div class="invalid-feedback d-block">{{ form.business_registration_no.errors }}</div>
                                    {% endif %}
                                    {% if form.business_registration_no.help_text %}
                                    <small class="form-hint">{{ form.business_registration_no.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{{ form.tax_id.label }}</label>
                                    {{ form.tax_id }}
                                    {% if form.tax_id.errors %}
                                    <div class="invalid-feedback d-block">{{ form.tax_id.errors }}</div>
                                    {% endif %}
                                    {% if form.tax_id.help_text %}
                                    <small class="form-hint">{{ form.tax_id.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <hr class="my-4">
                            
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h4 class="mb-3">
                                        <i class="ti ti-map-pin text-primary me-2"></i>Contact Information
                                    </h4>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label">{{ form.address.label }}</label>
                                    {{ form.address }}
                                    {% if form.address.errors %}
                                    <div class="invalid-feedback d-block">{{ form.address.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">{{ form.city.label }}</label>
                                    {{ form.city }}
                                    {% if form.city.errors %}
                                    <div class="invalid-feedback d-block">{{ form.city.errors }}</div>
                                    {% endif %}
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">{{ form.state.label }}</label>
                                    {{ form.state }}
                                    {% if form.state.errors %}
                                    <div class="invalid-feedback d-block">{{ form.state.errors }}</div>
                                    {% endif %}
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">{{ form.postcode.label }}</label>
                                    {{ form.postcode }}
                                    {% if form.postcode.errors %}
                                    <div class="invalid-feedback d-block">{{ form.postcode.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">{{ form.country.label }}</label>
                                    {{ form.country }}
                                    {% if form.country.errors %}
                                    <div class="invalid-feedback d-block">{{ form.country.errors }}</div>
                                    {% endif %}
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">{{ form.phone.label }}</label>
                                    {{ form.phone }}
                                    {% if form.phone.errors %}
                                    <div class="invalid-feedback d-block">{{ form.phone.errors }}</div>
                                    {% endif %}
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">{{ form.email.label }}</label>
                                    {{ form.email }}
                                    {% if form.email.errors %}
                                    <div class="invalid-feedback d-block">{{ form.email.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{{ form.website.label }}</label>
                                    {{ form.website }}
                                    {% if form.website.errors %}
                                    <div class="invalid-feedback d-block">{{ form.website.errors }}</div>
                                    {% endif %}
                                    {% if form.website.help_text %}
                                    <small class="form-hint">{{ form.website.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <hr class="my-4">
                            
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h4 class="mb-3">
                                        <i class="ti ti-world text-primary me-2"></i>Regional Settings
                                    </h4>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">{{ form.currency.label }}</label>
                                    {{ form.currency }}
                                    <small class="form-hint text-muted">Currency is fixed to Malaysian Ringgit (MYR)</small>
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">{{ form.currency_symbol.label }}</label>
                                    {{ form.currency_symbol }}
                                    <small class="form-hint text-muted">Currency symbol is fixed to RM</small>
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">{{ form.timezone.label }}</label>
                                    {{ form.timezone }}
                                </div>
                            </div>
                            
                            <hr class="my-4">
                            
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h4 class="mb-3">
                                        <i class="ti ti-file-text text-primary me-2"></i>LHDN Tax Filing Information
                                    </h4>
                                    <p class="text-muted">
                                        Information required for LHDN Borang B (Form B) tax filing. 
                                        Complete these details to enable automated tax report generation.
                                    </p>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{{ form.owner_name.label }}</label>
                                    {{ form.owner_name }}
                                    {% if form.owner_name.errors %}
                                    <div class="invalid-feedback d-block">{{ form.owner_name.errors }}</div>
                                    {% endif %}
                                    {% if form.owner_name.help_text %}
                                    <small class="form-hint">{{ form.owner_name.help_text }}</small>
                                    {% endif %}
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{{ form.owner_ic_no.label }}</label>
                                    {{ form.owner_ic_no }}
                                    {% if form.owner_ic_no.errors %}
                                    <div class="invalid-feedback d-block">{{ form.owner_ic_no.errors }}</div>
                                    {% endif %}
                                    {% if form.owner_ic_no.help_text %}
                                    <small class="form-hint">{{ form.owner_ic_no.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{{ form.business_activity_code.label }}</label>
                                    {{ form.business_activity_code }}
                                    {% if form.business_activity_code.errors %}
                                    <div class="invalid-feedback d-block">{{ form.business_activity_code.errors }}</div>
                                    {% endif %}
                                    {% if form.business_activity_code.help_text %}
                                    <small class="form-hint">{{ form.business_activity_code.help_text }}</small>
                                    {% endif %}
                                    <div class="mt-2">
                                        <a href="https://msic.stats.gov.my/bi/carianKod.php" target="_blank" class="text-muted small">
                                            <i class="ti ti-external-link me-1"></i>Find your LHDN Business Activity Code
                                        </a>
                                    </div>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{{ form.tax_reference_no.label }}</label>
                                    {{ form.tax_reference_no }}
                                    {% if form.tax_reference_no.errors %}
                                    <div class="invalid-feedback d-block">{{ form.tax_reference_no.errors }}</div>
                                    {% endif %}
                                    {% if form.tax_reference_no.help_text %}
                                    <small class="form-hint">{{ form.tax_reference_no.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{{ form.accounting_period_start.label }}</label>
                                    {{ form.accounting_period_start }}
                                    {% if form.accounting_period_start.errors %}
                                    <div class="invalid-feedback d-block">{{ form.accounting_period_start.errors }}</div>
                                    {% endif %}
                                    {% if form.accounting_period_start.help_text %}
                                    <small class="form-hint">{{ form.accounting_period_start.help_text }}</small>
                                    {% endif %}
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{{ form.accounting_period_end.label }}</label>
                                    {{ form.accounting_period_end }}
                                    {% if form.accounting_period_end.errors %}
                                    <div class="invalid-feedback d-block">{{ form.accounting_period_end.errors }}</div>
                                    {% endif %}
                                    {% if form.accounting_period_end.help_text %}
                                    <small class="form-hint">{{ form.accounting_period_end.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            
                            {% if organization.owner_name and organization.owner_ic_no and organization.business_activity_code and organization.accounting_period_start and organization.accounting_period_end %}
                            <div class="alert alert-success" role="alert">
                                <div class="d-flex">
                                    <div>
                                        <i class="ti ti-circle-check icon me-2"></i>
                                    </div>
                                    <div>
                                        <h4 class="alert-title">LHDN Information Complete</h4>
                                        <div class="text-secondary">
                                            Your organization's tax filing information is complete. 
                                            You can now generate Borang B reports from the Reports menu.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% else %}
                            <div class="alert alert-info" role="alert">
                                <div class="d-flex">
                                    <div>
                                        <i class="ti ti-info-circle icon me-2"></i>
                                    </div>
                                    <div>
                                        <h4 class="alert-title">Complete LHDN Information</h4>
                                        <div class="text-secondary">
                                            Fill in the required LHDN tax filing information above to enable 
                                            automated Borang B report generation for your business.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                            
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ti ti-device-floppy me-2"></i>Save Company Information
                                </button>
                                <a href="{% url 'core:dashboard' %}" class="btn btn-link">Cancel</a>
                            </div>
                        </form>
                    </div>
                    
                    <!-- Team Members Tab -->
                    <div class="tab-pane fade {% if request.GET.tab == 'team' %}show active{% endif %}" 
                         id="team" role="tabpanel">
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h4 class="mb-2">
                                            <i class="ti ti-users text-primary me-2"></i>Team Members Management
                                        </h4>
                                        <p class="text-muted mb-0">Manage users and their access to your organization</p>
                                    </div>
                                    <a href="{% url 'tenants:team_members' %}" class="btn btn-primary">
                                        <i class="ti ti-settings me-2"></i>Manage Team
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-info">
                            <div class="d-flex">
                                <div>
                                    <i class="ti ti-info-circle icon me-2"></i>
                                </div>
                                <div>
                                    <h4 class="alert-title">User Management Features</h4>
                                    <div class="text-secondary">
                                        <ul class="mb-0">
                                            <li><strong>Role-Based Access:</strong> Assign different roles (Admin, Accountant, Staff, Viewer) with specific permissions</li>
                                            <li><strong>Subscription Limits:</strong> Team size limited based on your plan (currently allowing {{ organization.max_users }} users)</li>
                                            <li><strong>No Django Admin Needed:</strong> All user management through the application interface</li>
                                            <li><strong>User Activation:</strong> Easily activate or deactivate team members without deletion</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Quick Overview</h5>
                            </div>
                            <div class="card-body">
                                <div class="row text-center">
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <h3 class="text-primary mb-0">{{ organization.get_active_users_count }}</h3>
                                            <small class="text-muted">Active Users</small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <h3 class="text-info mb-0">{{ organization.max_users }}</h3>
                                            <small class="text-muted">Max Allowed</small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <h3 class="{% if organization.can_add_user %}text-success{% else %}text-danger{% endif %} mb-0">
                                                {% if organization.can_add_user %}
                                                    {{ organization.max_users|add:"-"|add:organization.get_active_users_count }}
                                                {% else %}
                                                    0
                                                {% endif %}
                                            </h3>
                                            <small class="text-muted">Slots Available</small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <h3 class="text-secondary mb-0">5</h3>
                                            <small class="text-muted">Role Types</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mt-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Available Roles</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Role</th>
                                                <th>Permissions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><span class="badge bg-danger">Owner</span></td>
                                                <td><small>Full system access including billing and user management</small></td>
                                            </tr>
                                            <tr>
                                                <td><span class="badge bg-primary">Admin</span></td>
                                                <td><small>User management, settings, all transactions (no billing access)</small></td>
                                            </tr>
                                            <tr>
                                                <td><span class="badge bg-success">Accountant</span></td>
                                                <td><small>Create, edit, delete transactions; view reports; manage contacts</small></td>
                                            </tr>
                                            <tr>
                                                <td><span class="badge bg-info">Staff</span></td>
                                                <td><small>Create and view transactions; view basic reports</small></td>
                                            </tr>
                                            <tr>
                                                <td><span class="badge bg-secondary">Viewer</span></td>
                                                <td><small>Read-only access to transactions and reports</small></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Invoice & Bill Settings Tab -->
                    <div class="tab-pane fade {% if request.GET.tab == 'invoice' %}show active{% endif %}" 
                         id="invoice" role="tabpanel">
                        <form method="post" class="needs-validation" novalidate>
                            {% csrf_token %}
                            <input type="hidden" name="form_type" value="invoice_settings">
                            
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h4 class="mb-3">
                                        <i class="ti ti-file-invoice text-primary me-2"></i>Document Numbering
                                    </h4>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label required">{{ settings_form.invoice_prefix.label }}</label>
                                    {{ settings_form.invoice_prefix }}
                                    {% if settings_form.invoice_prefix.errors %}
                                    <div class="invalid-feedback d-block">{{ settings_form.invoice_prefix.errors }}</div>
                                    {% endif %}
                                    {% if settings_form.invoice_prefix.help_text %}
                                    <small class="form-hint">{{ settings_form.invoice_prefix.help_text }}</small>
                                    {% endif %}
                                    <div class="mt-2">
                                        <span class="badge bg-azure-lt">Preview: {{ tenant_settings.invoice_prefix }}-00001</span>
                                    </div>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label class="form-label required">{{ settings_form.next_invoice_number.label }}</label>
                                    {{ settings_form.next_invoice_number }}
                                    {% if settings_form.next_invoice_number.errors %}
                                    <div class="invalid-feedback d-block">{{ settings_form.next_invoice_number.errors }}</div>
                                    {% endif %}
                                    {% if settings_form.next_invoice_number.help_text %}
                                    <small class="form-hint">{{ settings_form.next_invoice_number.help_text }}</small>
                                    {% endif %}
                                    <div class="alert alert-warning mt-2 mb-0">
                                        <i class="ti ti-alert-triangle me-2"></i>
                                        <small>Change this carefully. Next invoice will use this number.</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label required">{{ settings_form.bill_prefix.label }}</label>
                                    {{ settings_form.bill_prefix }}
                                    {% if settings_form.bill_prefix.errors %}
                                    <div class="invalid-feedback d-block">{{ settings_form.bill_prefix.errors }}</div>
                                    {% endif %}
                                    {% if settings_form.bill_prefix.help_text %}
                                    <small class="form-hint">{{ settings_form.bill_prefix.help_text }}</small>
                                    {% endif %}
                                    <div class="mt-2">
                                        <span class="badge bg-azure-lt">Preview: {{ tenant_settings.bill_prefix }}-00001</span>
                                    </div>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label class="form-label required">{{ settings_form.next_bill_number.label }}</label>
                                    {{ settings_form.next_bill_number }}
                                    {% if settings_form.next_bill_number.errors %}
                                    <div class="invalid-feedback d-block">{{ settings_form.next_bill_number.errors }}</div>
                                    {% endif %}
                                    {% if settings_form.next_bill_number.help_text %}
                                    <small class="form-hint">{{ settings_form.next_bill_number.help_text }}</small>
                                    {% endif %}
                                    <div class="alert alert-warning mt-2 mb-0">
                                        <i class="ti ti-alert-triangle me-2"></i>
                                        <small>Change this carefully. Next bill will use this number.</small>
                                    </div>
                                </div>
                            </div>
                            
                            <hr class="my-4">
                            
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h4 class="mb-3">
                                        <i class="ti ti-percentage text-primary me-2"></i>Tax Configuration
                                    </h4>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label required">{{ settings_form.sst_rate.label }}</label>
                                    {{ settings_form.sst_rate }}
                                    {% if settings_form.sst_rate.errors %}
                                    <div class="invalid-feedback d-block">{{ settings_form.sst_rate.errors }}</div>
                                    {% endif %}
                                    {% if settings_form.sst_rate.help_text %}
                                    <small class="form-hint">{{ settings_form.sst_rate.help_text }}</small>
                                    {% endif %}
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{{ settings_form.sst_registration_number.label }}</label>
                                    {{ settings_form.sst_registration_number }}
                                    {% if settings_form.sst_registration_number.errors %}
                                    <div class="invalid-feedback d-block">{{ settings_form.sst_registration_number.errors }}</div>
                                    {% endif %}
                                    {% if settings_form.sst_registration_number.help_text %}
                                    <small class="form-hint">{{ settings_form.sst_registration_number.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <hr class="my-4">
                            
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h4 class="mb-3">
                                        <i class="ti ti-file-text text-primary me-2"></i>Invoice Display Settings
                                    </h4>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{{ settings_form.default_payment_terms_days.label }}</label>
                                    {{ settings_form.default_payment_terms_days }}
                                    {% if settings_form.default_payment_terms_days.errors %}
                                    <div class="invalid-feedback d-block">{{ settings_form.default_payment_terms_days.errors }}</div>
                                    {% endif %}
                                    {% if settings_form.default_payment_terms_days.help_text %}
                                    <small class="form-hint">{{ settings_form.default_payment_terms_days.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label">{{ settings_form.invoice_footer_text.label }}</label>
                                    {{ settings_form.invoice_footer_text }}
                                    {% if settings_form.invoice_footer_text.errors %}
                                    <div class="invalid-feedback d-block">{{ settings_form.invoice_footer_text.errors }}</div>
                                    {% endif %}
                                    {% if settings_form.invoice_footer_text.help_text %}
                                    <small class="form-hint">{{ settings_form.invoice_footer_text.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label">{{ settings_form.invoice_notes_default.label }}</label>
                                    {{ settings_form.invoice_notes_default }}
                                    {% if settings_form.invoice_notes_default.errors %}
                                    <div class="invalid-feedback d-block">{{ settings_form.invoice_notes_default.errors }}</div>
                                    {% endif %}
                                    {% if settings_form.invoice_notes_default.help_text %}
                                    <small class="form-hint">{{ settings_form.invoice_notes_default.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <hr class="my-4">
                            
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h4 class="mb-3">
                                        <i class="ti ti-building-bank text-primary me-2"></i>Bank Details for Invoice
                                    </h4>
                                    <p class="text-muted">These bank details will appear on your invoices for customer payments.</p>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">{{ settings_form.bank_name.label }}</label>
                                    {{ settings_form.bank_name }}
                                    {% if settings_form.bank_name.errors %}
                                    <div class="invalid-feedback d-block">{{ settings_form.bank_name.errors }}</div>
                                    {% endif %}
                                    {% if settings_form.bank_name.help_text %}
                                    <small class="form-hint">{{ settings_form.bank_name.help_text }}</small>
                                    {% endif %}
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">{{ settings_form.bank_account_number.label }}</label>
                                    {{ settings_form.bank_account_number }}
                                    {% if settings_form.bank_account_number.errors %}
                                    <div class="invalid-feedback d-block">{{ settings_form.bank_account_number.errors }}</div>
                                    {% endif %}
                                    {% if settings_form.bank_account_number.help_text %}
                                    <small class="form-hint">{{ settings_form.bank_account_number.help_text }}</small>
                                    {% endif %}
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">{{ settings_form.bank_account_holder.label }}</label>
                                    {{ settings_form.bank_account_holder }}
                                    {% if settings_form.bank_account_holder.errors %}
                                    <div class="invalid-feedback d-block">{{ settings_form.bank_account_holder.errors }}</div>
                                    {% endif %}
                                    {% if settings_form.bank_account_holder.help_text %}
                                    <small class="form-hint">{{ settings_form.bank_account_holder.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ti ti-device-floppy me-2"></i>Save Invoice & Bill Settings
                                </button>
                                <a href="{% url 'core:dashboard' %}" class="btn btn-link">Cancel</a>
                            </div>
                        </form>
                    </div>
                    
                    <!-- Year-End Snapshots Tab -->
                    <div class="tab-pane fade {% if request.GET.tab == 'snapshots' %}show active{% endif %}" 
                         id="snapshots" role="tabpanel">
                        <div class="row mb-4">
                            <div class="col-12">
                                <h4 class="mb-3">
                                    <i class="ti ti-calendar-stats text-primary me-2"></i>
                                    Year-End Snapshots for Borang B LHDN
                                </h4>
                                <p class="text-muted">
                                    Record historical year-end balances to ensure 100% accurate Borang B generation across multiple years.
                                    <br><small class="text-danger"><strong>Critical:</strong> Without snapshots, historical data will show current values (incorrect for past years).</small>
                                </p>
                            </div>
                        </div>
                        
                        <div class="alert alert-info mb-4">
                            <div class="d-flex">
                                <div>
                                    <i class="ti ti-info-circle icon me-2"></i>
                                </div>
                                <div>
                                    <h4 class="alert-title">Why Year-End Snapshots?</h4>
                                    <div class="text-secondary">
                                        <ul class="mb-0">
                                            <li>POS inventory only tracks current stock (not historical values)</li>
                                            <li>Bank balances show current balance for all years</li>
                                            <li>Outstanding receivables/payables show current status</li>
                                            <li>Snapshots preserve accurate year-end data for tax filing</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-12">
                                <div class="btn-group">
                                    <a href="{% url 'tenants:snapshot_auto_generate' %}" class="btn btn-success">
                                        <i class="ti ti-wand me-2"></i>Auto-Generate All Snapshots
                                    </a>
                                    <a href="{% url 'tenants:snapshot_create' %}" class="btn btn-primary">
                                        <i class="ti ti-plus me-2"></i>Create Manual Snapshot
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        {% if yearend_snapshots %}
                        <div class="table-responsive">
                            <table class="table table-vcenter card-table table-striped">
                                <thead>
                                    <tr>
                                        <th>Year</th>
                                        <th class="text-end">Opening Inventory</th>
                                        <th class="text-end">Closing Inventory</th>
                                        <th class="text-end">Bank Balance</th>
                                        <th class="text-center">Status</th>
                                        <th>Created</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for snapshot in yearend_snapshots %}
                                    <tr>
                                        <td><strong class="text-primary">{{ snapshot.year }}</strong></td>
                                        <td class="text-end">RM {{ snapshot.opening_inventory_value|floatformat:2 }}</td>
                                        <td class="text-end">RM {{ snapshot.closing_inventory_value|floatformat:2 }}</td>
                                        <td class="text-end">RM {{ snapshot.closing_bank_balance|floatformat:2 }}</td>
                                        <td class="text-center">
                                            {% if snapshot.is_finalized %}
                                            <span class="badge bg-success">
                                                <i class="ti ti-lock me-1"></i>Finalized
                                            </span>
                                            {% else %}
                                            <span class="badge bg-info">
                                                <i class="ti ti-edit me-1"></i>Draft
                                            </span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {{ snapshot.created_at|date:"d M Y" }}
                                            {% if snapshot.updated_at %}
                                            <br><small class="text-muted">Updated: {{ snapshot.updated_at|date:"d M Y" }}</small>
                                            {% endif %}
                                        </td>
                                        <td class="text-center">
                                            <div class="btn-group">
                                                <a href="{% url 'tenants:snapshot_edit' snapshot.id %}" class="btn btn-sm btn-primary" title="Edit">
                                                    <i class="ti ti-edit"></i>
                                                </a>
                                                {% if tenant_user.role == 'OWNER' %}
                                                <form method="post" action="{% url 'tenants:snapshot_toggle_finalize' snapshot.id %}" class="d-inline">
                                                    {% csrf_token %}
                                                    <button type="submit" class="btn btn-sm btn-warning" 
                                                            title="{% if snapshot.is_finalized %}Unlock{% else %}Lock{% endif %}">
                                                        <i class="ti ti-{% if snapshot.is_finalized %}lock-open{% else %}lock{% endif %}"></i>
                                                    </button>
                                                </form>
                                                {% endif %}
                                                <a href="{% url 'tenants:snapshot_delete' snapshot.id %}" class="btn btn-sm btn-danger" title="Delete">
                                                    <i class="ti ti-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% else %}
                        <div class="empty">
                            <div class="empty-img"><img src="{% static 'img/undraw_empty_street_sfxm.svg' %}" height="128" alt="No snapshots">
                            </div>
                            <p class="empty-title">No Year-End Snapshots Yet</p>
                            <p class="empty-subtitle text-muted">
                                Auto-generate snapshots from your transaction data or create manually.
                            </p>
                            <div class="empty-action">
                                <div class="btn-group">
                                    <a href="{% url 'tenants:snapshot_auto_generate' %}" class="btn btn-success">
                                        <i class="ti ti-wand me-2"></i>Auto-Generate
                                    </a>
                                    <a href="{% url 'tenants:snapshot_create' %}" class="btn btn-primary">
                                        <i class="ti ti-plus me-2"></i>Create Manual
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        
                        <div class="alert alert-success mt-4">
                            <div class="d-flex">
                                <div>
                                    <i class="ti ti-sparkles icon me-2"></i>
                                </div>
                                <div>
                                    <h4 class="alert-title">✨ NEW: Auto-Generate Feature!</h4>
                                    <div class="text-secondary">
                                        <ul class="mb-0">
                                            <li><strong>Zero manual work!</strong> System automatically calculates year-end balances from transactions</li>
                                            <li><strong>100% accurate</strong> - Based on actual transaction data</li>
                                            <li><strong>Generate all years at once</strong> - Preview before creating</li>
                                            <li><strong>Still editable</strong> - Review and adjust if needed</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="alert alert-warning mt-4">
                            <div class="d-flex">
                                <div>
                                    <i class="ti ti-alert-triangle icon me-2"></i>
                                </div>
                                <div>
                                    <h4 class="alert-title">Important Notes</h4>
                                    <div class="text-secondary">
                                        <ul class="mb-0">
                                            <li><strong>Auto-generate recommended!</strong> Faster and more accurate than manual</li>
                                            <li><strong>Finalize snapshots</strong> to prevent accidental changes (OWNER only)</li>
                                            <li><strong>One snapshot per year</strong> - update existing if needed before finalizing</li>
                                            <li><strong>Borang B uses snapshots automatically</strong> when available</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Subscription & Plan Tab -->
                    <div class="tab-pane fade {% if request.GET.tab == 'subscription' %}show active{% endif %}" 
                         id="subscription" role="tabpanel">
                        {% include 'tenants/partials/subscription_content.html' %}
                    </div>
                    
                    <!-- Billing History Tab -->
                    <div class="tab-pane fade {% if request.GET.tab == 'billing' %}show active{% endif %}" 
                         id="billing" role="tabpanel">
                        {% include 'tenants/partials/billing_content.html' %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Form validation
(function() {
    'use strict';
    var forms = document.querySelectorAll('.needs-validation');
    Array.prototype.slice.call(forms).forEach(function(form) {
        form.addEventListener('submit', function(event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });
})();

// Handle tab switching from URL
const urlParams = new URLSearchParams(window.location.search);
const activeTab = urlParams.get('tab');
if (activeTab) {
    const tabButton = document.querySelector(`#${activeTab}-tab`);
    if (tabButton) {
        const tab = new bootstrap.Tab(tabButton);
        tab.show();
    }
}
</script>
{% endblock %}