{% extends 'layout.twig' %}
{% import 'components/form.twig' as form %}

{% block title %}⚙️🔧 System Settings 🛠️🔩 - {{ parent() }}{% endblock %}

{% block content %}
    <div class="row mb-4">
        <div class="col">
            <h2>⚙️✨ SUPER AWESOME SYSTEM SETTINGS 🔧🌟</h2>
        </div>
        <div class="col-auto">
            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#resetSettingsModal">
                <i class="fas fa-undo"></i> 💣 RESET TO DEFAULTS 💥
            </button>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            {{ form.errors(error) }}

            <form action="/settings" method="post">
                <div class="row">
                    <div class="col-md-6">
                        <h5 class="mb-3">📊 Stock Adjustment Settings 📈🔄</h5>

                        <div class="form-group mb-3">
                            <label for="stock_adjustment_lookback_orders">🔍 Orders to Analyze 🧐🔎</label>
                            <input type="number" id="stock_adjustment_lookback_orders" name="configs[stock_adjustment_lookback_orders]" 
                                   class="form-control" min="1" max="20" 
                                   value="{{ configs['stock_adjustment_lookback_orders']|default(5) }}">
                            <small class="form-text text-muted">🧮 Number of recent orders to analyze for consumption patterns (default: 5) 📝</small>
                        </div>

                        <div class="form-group mb-3">
                            <label for="stock_adjustment_magnitude">📏 Adjustment Magnitude (%) 📐💯</label>
                            <input type="number" id="stock_adjustment_magnitude" name="configs[stock_adjustment_magnitude]" 
                                   class="form-control" min="1" max="100" 
                                   value="{{ configs['stock_adjustment_magnitude']|default(20) }}">
                            <small class="form-text text-muted">🔼 Maximum percentage to adjust stock levels by (default: 20%) 🔽</small>
                        </div>

                        <div class="form-group mb-3">
                            <label for="stock_adjustment_threshold">🚧 Adjustment Threshold (%) 🚨🔔</label>
                            <input type="number" id="stock_adjustment_threshold" name="configs[stock_adjustment_threshold]" 
                                   class="form-control" min="1" max="100" 
                                   value="{{ configs['stock_adjustment_threshold']|default(10) }}">
                            <small class="form-text text-muted">⚠️ Minimum difference required to trigger an adjustment (default: 10%) 🚦</small>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <h5 class="mb-3">🏪 Inventory Settings 📦🗃️</h5>

                        <div class="form-group mb-3">
                            <label for="low_stock_threshold">📉 Low Stock Threshold (%) 😰🆘</label>
                            <input type="number" id="low_stock_threshold" name="configs[low_stock_threshold]" 
                                   class="form-control" min="1" max="100" 
                                   value="{{ configs['low_stock_threshold']|default(50) }}">
                            <small class="form-text text-muted">⚠️ Percentage of desired stock below which items are considered low stock (default: 50%) 😱</small>
                        </div>

                        <div class="form-group mb-3">
                            <label for="critical_stock_threshold">🔥 Critical Stock Threshold (%) 🚨💀</label>
                            <input type="number" id="critical_stock_threshold" name="configs[critical_stock_threshold]" 
                                   class="form-control" min="1" max="100" 
                                   value="{{ configs['critical_stock_threshold']|default(25) }}">
                            <small class="form-text text-muted">🆘 Percentage of desired stock below which items are considered critical (default: 25%) 😭</small>
                        </div>

                        <div class="form-group mb-3">
                            <label for="default_desired_stock">🎯 Default Desired Stock 🥅🏆</label>
                            <input type="number" id="default_desired_stock" name="configs[default_desired_stock]" 
                                   class="form-control" min="0" 
                                   value="{{ configs['default_desired_stock']|default(10) }}">
                            <small class="form-text text-muted">🌟 Default desired stock level for new drink types (default: 10) 🍹</small>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-6">
                        <h5 class="mb-3">🖥️ System Settings 💻🌐</h5>

                        <div class="form-group mb-3">
                            <label for="system_name">✨ System Name 🏷️🔤</label>
                            <input type="text" id="system_name" name="configs[system_name]" 
                                   class="form-control" 
                                   value="{{ configs['system_name']|default('Drinks Inventory System') }}">
                            <small class="form-text text-muted">👑 Name of the system displayed in the header 📛</small>
                        </div>

                        <div class="form-group mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="enable_auto_adjustment" 
                                       name="configs[enable_auto_adjustment]" value="1"
                                       {% if configs['enable_auto_adjustment']|default(1) == 1 %}checked{% endif %}>
                                <label class="form-check-label" for="enable_auto_adjustment">
                                    🤖 Enable Automatic Stock Adjustment 🔄✨
                                </label>
                            </div>
                            <small class="form-text text-muted">🧠 Automatically adjust desired stock levels based on consumption patterns 📊</small>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <h5 class="mb-3">🎨 Display Settings 📱💅</h5>

                        <div class="form-group mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="show_low_stock_alerts" 
                                       name="configs[show_low_stock_alerts]" value="1"
                                       {% if configs['show_low_stock_alerts']|default(1) == 1 %}checked{% endif %}>
                                <label class="form-check-label" for="show_low_stock_alerts">
                                    🚨 Show Low Stock Alerts on Dashboard 📉😱
                                </label>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="show_quick_update_form" 
                                       name="configs[show_quick_update_form]" value="1"
                                       {% if configs['show_quick_update_form']|default(1) == 1 %}checked{% endif %}>
                                <label class="form-check-label" for="show_quick_update_form">
                                    ⚡ Show Quick Update Form on Dashboard 🔄💨
                                </label>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label for="items_per_page">📋 Items Per Page 📑📄</label>
                            <input type="number" id="items_per_page" name="configs[items_per_page]" 
                                   class="form-control" min="5" max="100" 
                                   value="{{ configs['items_per_page']|default(20) }}">
                            <small class="form-text text-muted">🔢 Number of items to display per page in lists 📊</small>
                        </div>
                    </div>
                </div>

                <div class="form-group mt-4">
                    {{ form.submit('💾 SAVE AWESOME SETTINGS 🚀') }}
                </div>
            </form>
        </div>
    </div>

    <!-- Reset Settings Modal -->
    <div class="modal fade" id="resetSettingsModal" tabindex="-1" aria-labelledby="resetSettingsModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="resetSettingsModalLabel">⚠️ RESET SETTINGS ⚠️</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>🤔 Are you SUPER DUPER sure you want to reset ALL settings to their default values? 🧐</p>
                    <p class="text-danger">💣 This action CANNOT be undone! 💥 Say bye-bye to your settings! 👋</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">❌ Cancel ❌</button>
                    <form action="/settings/reset" method="post">
                        <button type="submit" class="btn btn-danger">💥 RESET TO DEFAULTS 💣</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}