{% extends 'base.html' %}

{% block title %}M-Pesa Configuration{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">M-Pesa Configuration</h1>
                <a href="{% url 'payments:dashboard' %}" class="btn btn-outline-secondary">
                    <span>←</span> Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">Configuration Settings</h6>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="{{ form.environment.id_for_label }}">{{ form.environment.label }}</label>
                                    {{ form.environment }}
                                    {% if form.environment.help_text %}
                                        <small class="form-text text-muted">{{ form.environment.help_text }}</small>
                                    {% endif %}
                                    {% if form.environment.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.environment.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="{{ form.business_short_code.id_for_label }}">{{ form.business_short_code.label }}</label>
                                    {{ form.business_short_code }}
                                    {% if form.business_short_code.help_text %}
                                        <small class="form-text text-muted">{{ form.business_short_code.help_text }}</small>
                                    {% endif %}
                                    {% if form.business_short_code.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.business_short_code.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="{{ form.consumer_key.id_for_label }}">{{ form.consumer_key.label }}</label>
                                    {{ form.consumer_key }}
                                    {% if form.consumer_key.help_text %}
                                        <small class="form-text text-muted">{{ form.consumer_key.help_text }}</small>
                                    {% endif %}
                                    {% if form.consumer_key.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.consumer_key.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="{{ form.consumer_secret.id_for_label }}">{{ form.consumer_secret.label }}</label>
                                    {{ form.consumer_secret }}
                                    {% if form.consumer_secret.help_text %}
                                        <small class="form-text text-muted">{{ form.consumer_secret.help_text }}</small>
                                    {% endif %}
                                    {% if form.consumer_secret.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.consumer_secret.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="{{ form.passkey.id_for_label }}">{{ form.passkey.label }}</label>
                            {{ form.passkey }}
                            {% if form.passkey.help_text %}
                                <small class="form-text text-muted">{{ form.passkey.help_text }}</small>
                            {% endif %}
                            {% if form.passkey.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.passkey.errors.0 }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="form-group">
                            <label for="{{ form.validation_url.id_for_label }}">{{ form.validation_url.label }}</label>
                            {{ form.validation_url }}
                            {% if form.validation_url.help_text %}
                                <small class="form-text text-muted">{{ form.validation_url.help_text }}</small>
                            {% endif %}
                            {% if form.validation_url.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.validation_url.errors.0 }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="form-group">
                            <label for="{{ form.confirmation_url.id_for_label }}">{{ form.confirmation_url.label }}</label>
                            {{ form.confirmation_url }}
                            {% if form.confirmation_url.help_text %}
                                <small class="form-text text-muted">{{ form.confirmation_url.help_text }}</small>
                            {% endif %}
                            {% if form.confirmation_url.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.confirmation_url.errors.0 }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="form-group">
                            <label for="{{ form.response_type.id_for_label }}">{{ form.response_type.label }}</label>
                            {{ form.response_type }}
                            {% if form.response_type.help_text %}
                                <small class="form-text text-muted">{{ form.response_type.help_text }}</small>
                            {% endif %}
                            {% if form.response_type.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.response_type.errors.0 }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <span>💾</span> Save Configuration
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-info">Setup Instructions</h6>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6><span>ℹ️</span> Setup Steps</h6>
                        <ol class="mb-0">
                            <li>Get your credentials from M-Pesa Developer Portal</li>
                            <li>Configure your callback URLs</li>
                            <li>Test in sandbox environment first</li>
                            <li>Switch to production when ready</li>
                        </ol>
                    </div>

                    {% if config %}
                    <div class="alert alert-success">
                        <h6><span>✓</span> Current Status</h6>
                        <p class="mb-1"><strong>Environment:</strong> {{ config.get_environment_display }}</p>
                        <p class="mb-1"><strong>Short Code:</strong> {{ config.business_short_code }}</p>
                        <p class="mb-0"><strong>Status:</strong> 
                            {% if config.is_active %}
                                <span class="text-success">Active</span>
                            {% else %}
                                <span class="text-danger">Inactive</span>
                            {% endif %}
                        </p>
                    </div>
                    {% endif %}

                    <div class="alert alert-warning">
                        <h6><span>⚠️</span> Important</h6>
                        <p class="mb-0">
                            Make sure your callback URLs are publicly accessible and use HTTPS in production.
                            The system will automatically register these URLs with M-Pesa when you save.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}