{% extends "core/base.html" %}

{% block title %}Business Settings - Inventory Management System{% endblock %}

{% block page_title %}Business Settings{% endblock %}

{% block header_actions %}
<button type="submit" form="settingsForm" class="btn btn-sm btn-primary">
    <i class="fas fa-save me-1"></i>Save Changes
</button>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <form method="POST" id="settingsForm">
                {% csrf_token %}
                
                <!-- Inventory Settings -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0">
                            <i class="fas fa-boxes me-2 text-primary"></i>
                            Inventory Settings
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.enable_barcode }}
                                    <label class="form-check-label fw-semibold" for="{{ form.enable_barcode.id_for_label }}">
                                        Enable Barcode Scanning
                                    </label>
                                    <div class="form-text">
                                        Allow barcode scanning for products
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.enable_serial_numbers }}
                                    <label class="form-check-label fw-semibold" for="{{ form.enable_serial_numbers.id_for_label }}">
                                        Enable Serial Numbers
                                    </label>
                                    <div class="form-text">
                                        Track serial numbers for products
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.enable_batch_tracking }}
                                    <label class="form-check-label fw-semibold" for="{{ form.enable_batch_tracking.id_for_label }}">
                                        Enable Batch Tracking
                                    </label>
                                    <div class="form-text">
                                        Track products by batch numbers
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.enable_stock_alerts }}
                                    <label class="form-check-label fw-semibold" for="{{ form.enable_stock_alerts.id_for_label }}">
                                        Enable Stock Alerts
                                    </label>
                                    <div class="form-text">
                                        Receive alerts for low stock items
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label fw-semibold" for="{{ form.low_stock_threshold.id_for_label }}">
                                        Low Stock Threshold
                                    </label>
                                    {{ form.low_stock_threshold }}
                                    <div class="form-text">
                                        Minimum stock level before alerts are triggered
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Sales Settings -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0">
                            <i class="fas fa-shopping-cart me-2 text-success"></i>
                            Sales Settings
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold" for="{{ form.default_payment_method.id_for_label }}">
                                    Default Payment Method
                                </label>
                                {{ form.default_payment_method }}
                                <div class="form-text">
                                    Default payment method for new sales
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch mt-4">
                                    {{ form.enable_customer_credit }}
                                    <label class="form-check-label fw-semibold" for="{{ form.enable_customer_credit.id_for_label }}">
                                        Enable Customer Credit
                                    </label>
                                    <div class="form-text">
                                        Allow customers to buy on credit
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.require_customer_info }}
                                    <label class="form-check-label fw-semibold" for="{{ form.require_customer_info.id_for_label }}">
                                        Require Customer Information
                                    </label>
                                    <div class="form-text">
                                        Require customer name/phone for sales
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.enable_receipt_printing }}
                                    <label class="form-check-label fw-semibold" for="{{ form.enable_receipt_printing.id_for_label }}">
                                        Enable Receipt Printing
                                    </label>
                                    <div class="form-text">
                                        Print receipts for sales transactions
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Notification Settings -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0">
                            <i class="fas fa-bell me-2 text-warning"></i>
                            Notification Settings
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.email_notifications }}
                                    <label class="form-check-label fw-semibold" for="{{ form.email_notifications.id_for_label }}">
                                        Email Notifications
                                    </label>
                                    <div class="form-text">
                                        Receive notifications via email
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.sms_notifications }}
                                    <label class="form-check-label fw-semibold" for="{{ form.sms_notifications.id_for_label }}">
                                        SMS Notifications
                                    </label>
                                    <div class="form-text">
                                        Receive notifications via SMS
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.low_stock_notification }}
                                    <label class="form-check-label fw-semibold" for="{{ form.low_stock_notification.id_for_label }}">
                                        Low Stock Notifications
                                    </label>
                                    <div class="form-text">
                                        Get notified when stock is low
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.daily_sales_report }}
                                    <label class="form-check-label fw-semibold" for="{{ form.daily_sales_report.id_for_label }}">
                                        Daily Sales Reports
                                    </label>
                                    <div class="form-text">
                                        Receive daily sales summaries
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Security Settings -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0">
                            <i class="fas fa-shield-alt me-2 text-danger"></i>
                            Security Settings
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold" for="{{ form.session_timeout_minutes.id_for_label }}">
                                    Session Timeout (minutes)
                                </label>
                                {{ form.session_timeout_minutes }}
                                <div class="form-text">
                                    Auto-logout after inactivity
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch mt-4">
                                    {{ form.require_2fa }}
                                    <label class="form-check-label fw-semibold" for="{{ form.require_2fa.id_for_label }}">
                                        Require Two-Factor Authentication
                                    </label>
                                    <div class="form-text">
                                        Add extra security with 2FA
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.ip_restriction }}
                                    <label class="form-check-label fw-semibold" for="{{ form.ip_restriction.id_for_label }}">
                                        IP Restriction
                                    </label>
                                    <div class="form-text">
                                        Restrict access to specific IP addresses
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Data Settings -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0">
                            <i class="fas fa-database me-2 text-info"></i>
                            Data Settings
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold" for="{{ form.backup_frequency.id_for_label }}">
                                    Backup Frequency
                                </label>
                                {{ form.backup_frequency }}
                                <div class="form-text">
                                    How often to backup your data
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold" for="{{ form.data_retention_months.id_for_label }}">
                                    Data Retention (months)
                                </label>
                                {{ form.data_retention_months }}
                                <div class="form-text">
                                    How long to keep historical data
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Save Button -->
                <div class="d-flex justify-content-between">
                    <a href="{% url 'business_dashboard' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-2"></i>Cancel
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Save All Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.form-switch .form-check-input {
    width: 3em;
    height: 1.5em;
}

.form-check-input:checked {
    background-color: #4361ee;
    border-color: #4361ee;
}

.form-text {
    font-size: 0.85rem;
    color: #6c757d;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('settingsForm');
    
    // Form validation
    form.addEventListener('submit', function(e) {
        const timeoutInput = document.getElementById('{{ form.session_timeout_minutes.id_for_label }}');
        if (timeoutInput && (timeoutInput.value < 5 || timeoutInput.value > 480)) {
            e.preventDefault();
            alert('Session timeout must be between 5 and 480 minutes.');
            timeoutInput.focus();
            return;
        }
        
        const retentionInput = document.getElementById('{{ form.data_retention_months.id_for_label }}');
        if (retentionInput && (retentionInput.value < 1 || retentionInput.value > 120)) {
            e.preventDefault();
            alert('Data retention must be between 1 and 120 months.');
            retentionInput.focus();
            return;
        }
    });
    
    // Real-time validation
    const inputs = form.querySelectorAll('input[type="number"]');
    inputs.forEach(input => {
        input.addEventListener('input', function() {
            if (this.hasAttribute('min') && this.value < this.getAttribute('min')) {
                this.classList.add('is-invalid');
            } else if (this.hasAttribute('max') && this.value > this.getAttribute('max')) {
                this.classList.add('is-invalid');
            } else {
                this.classList.remove('is-invalid');
            }
        });
    });
});
</script>
{% endblock %}