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

{% block title %}Quick Setup{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0"><i class="bi bi-lightning"></i> Quick Setup</h4>
                    <small class="text-muted">Configure your API credentials and system settings</small>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        <!-- M-Pesa Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3">
                                    <i class="bi bi-credit-card text-success"></i> M-Pesa Configuration
                                </h5>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.mpesa_consumer_key.id_for_label }}" class="form-label">Consumer Key</label>
                                {{ form.mpesa_consumer_key }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.mpesa_consumer_secret.id_for_label }}" class="form-label">Consumer Secret</label>
                                {{ form.mpesa_consumer_secret }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.mpesa_business_shortcode.id_for_label }}" class="form-label">Business Short Code</label>
                                {{ form.mpesa_business_shortcode }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.mpesa_passkey.id_for_label }}" class="form-label">Passkey</label>
                                {{ form.mpesa_passkey }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Environment</label>
                                {{ form.mpesa_environment }}
                            </div>
                        </div>

                        <!-- Email Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3">
                                    <i class="bi bi-envelope text-primary"></i> Email Configuration
                                </h5>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.email_host.id_for_label }}" class="form-label">SMTP Host</label>
                                {{ form.email_host }}
                            </div>
                             <div class="col-md-6 mb-3">
                                <label class="form-label">SMTP Port</label>
                                {{ form.email_port }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.email_host_user.id_for_label }}" class="form-label">SMTP Username/Email</label>
                                {{ form.email_host_user }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.email_host_password.id_for_label }}" class="form-label">SMTP Password</label>
                                {{ form.email_host_password }}
                            </div>
                            <div class="col-md-12 mb-3">
                                <div class="form-check">
                                    {{ form.email_use_tls }}
                                    <label class="form-check-label">Use TLS Encryption</label>
                                </div>
                            </div>
                        </div>

                        <!-- MikroTik Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3">
                                    <i class="bi bi-router text-info"></i> MikroTik Configuration
                                </h5>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.mikrotik_host.id_for_label }}" class="form-label">Router IP Address</label>
                                {{ form.mikrotik_host }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.mikrotik_port.id_for_label }}" class="form-label">API Port</label>
                                {{ form.mikrotik_port }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.mikrotik_username.id_for_label }}" class="form-label">Router Username</label>
                                {{ form.mikrotik_username }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.mikrotik_password.id_for_label }}" class="form-label">Router Password</label>
                                {{ form.mikrotik_password }}
                            </div>
                        </div>

                        <!-- API Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3">
                                    <i class="bi bi-key text-warning"></i> API Keys
                                </h5>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="{{ form.google_maps_api_key.id_for_label }}" class="form-label">Google Maps API Key</label>
                                {{ form.google_maps_api_key }}
                            </div>
                        </div>

                        <!-- SMS API Settings -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0"><i class="bi bi-phone text-warning"></i> SMS API Settings</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">API Key</label>
                                        {{ form.sms_api_key }}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Partner ID</label>
                                        {{ form.sms_partner_id }}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Short Code</label>
                                        {{ form.sms_short_code }}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Method</label>
                                        {{ form.sms_method }}
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <label class="form-label">API Base URL</label>
                                        {{ form.sms_api_url }}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Phone Parameter Name</label>
                                        {{ form.sms_phone_parameter }}
                                        <small class="form-text text-muted">Parameter name for phone number in API call</small>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Message Parameter Name</label>
                                        {{ form.sms_message_parameter }}
                                        <small class="form-text text-muted">Parameter name for message content in API call</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{% url 'settings:dashboard' %}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> Back
                            </a>
                            <div class="d-grid gap-2 d-md-flex justify-content-md-start">
                                <button type="submit" class="btn btn-success">
                                    <i class="bi bi-check-lg"></i> Save Settings
                                </button>
                                <a href="{% url 'settings:test_email' %}" class="btn btn-info">
                                    <i class="fas fa-envelope-open-text me-2"></i>Test Email
                                </a>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}