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

{% block title %}Manage Service - {{ customer.customer_id }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Manage Service - {{ customer.display_name }} ({{ customer.customer_id }})</h4>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="badge badge-{% if customer.service_status == 'active' %}success{% elif customer.service_status == 'trial' %}info{% elif customer.service_status == 'suspended' %}warning{% else %}danger{% endif %}">
                            {{ customer.get_service_status_display }}
                        </span>
                        <a href="{% url 'customers:customer_detail' customer.customer_id %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Customer
                        </a>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- Current Status Display -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h5>Current Service Status</h5>
                            <table class="table table-sm">
                                <tr>
                                    <td><strong>Service Package:</strong></td>
                                    <td>{{ customer.service.name|default:"None" }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Status:</strong></td>
                                    <td>
                                        <span class="badge badge-{% if customer.service_status == 'active' %}success{% elif customer.service_status == 'trial' %}info{% elif customer.service_status == 'suspended' %}warning{% else %}danger{% endif %}">
                                            {{ customer.get_service_status_display }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Account Balance:</strong></td>
                                    <td>KES {{ customer.account_balance }}</td>
                                </tr>
                                {% if customer.is_trial_active %}
                                <tr>
                                    <td><strong>Trial Remaining:</strong></td>
                                    <td>{{ customer.trial_remaining_hours|floatformat:1 }} hours</td>
                                </tr>
                                {% endif %}
                                {% if customer.service_expires_at %}
                                <tr>
                                    <td><strong>Service Expires:</strong></td>
                                    <td>{{ customer.service_expires_at }}</td>
                                </tr>
                                {% endif %}
                            </table>
                        </div>
                        
                        <div class="col-md-6">
                            <h5>Account Information</h5>
                            <table class="table table-sm">
                                <tr>
                                    <td><strong>Outstanding Amount:</strong></td>
                                    <td>KES {{ customer.outstanding_amount }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Can Auto-Renew:</strong></td>
                                    <td>
                                        {% if customer.can_auto_renew %}
                                            <span class="badge badge-success">Yes</span>
                                        {% else %}
                                            <span class="badge badge-danger">No</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% if customer.last_suspension_date %}
                                <tr>
                                    <td><strong>Last Suspended:</strong></td>
                                    <td>{{ customer.last_suspension_date }}</td>
                                </tr>
                                {% endif %}
                                {% if customer.manual_suspension_override %}
                                <tr>
                                    <td><strong>Manual Override:</strong></td>
                                    <td>{{ customer.manual_suspension_override }}</td>
                                </tr>
                                {% endif %}
                            </table>
                        </div>
                    </div>
                    
                    <!-- Service Management Form -->
                    <div class="row">
                        <div class="col-md-8">
                            <h5>Service Actions</h5>
                            <form method="post" class="needs-validation" novalidate>
                                {% csrf_token %}
                                
                                <div class="form-group">
                                    <label for="{{ form.action.id_for_label }}">Action:</label>
                                    {{ form.action }}
                                    <div class="invalid-feedback">
                                        Please select an action.
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="{{ form.reason.id_for_label }}">Reason:</label>
                                    {{ form.reason }}
                                    <small class="form-text text-muted">
                                        Provide a reason for this action (will be logged for audit)
                                    </small>
                                </div>
                                
                                <div class="form-group">
                                    <label for="{{ form.override_date.id_for_label }}">Override Date/Time (Optional):</label>
                                    {{ form.override_date }}
                                    <small class="form-text text-muted">
                                        For suspensions/disconnections: specify custom date/time
                                    </small>
                                </div>
                                
                                <div class="form-check mb-3">
                                    {{ form.send_notification }}
                                    <label class="form-check-label" for="{{ form.send_notification.id_for_label }}">
                                        Send SMS notification to customer
                                    </label>
                                </div>
                                
                                <button type="submit" class="btn btn-primary" onclick="return confirm('Are you sure you want to perform this action?')">
                                    <i class="fas fa-cogs"></i> Execute Action
                                </button>
                                
                                <a href="{% url 'customers:action_log' customer.customer_id %}" class="btn btn-info">
                                    <i class="fas fa-history"></i> View Action Log
                                </a>
                            </form>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="alert alert-info">
                                <h6><i class="fas fa-info-circle"></i> Action Guidelines</h6>
                                <ul class="mb-0 small">
                                    <li><strong>Suspend:</strong> Temporarily disable service (can be reconnected)</li>
                                    <li><strong>Reconnect:</strong> Resume suspended service (requires sufficient balance)</li>
                                    <li><strong>Disconnect:</strong> Permanently disable service</li>
                                    <li><strong>Start Trial:</strong> Begin 1-hour trial period</li>
                                    <li><strong>Activate Service:</strong> Force activate paid service</li>
                                </ul>
                            </div>
                            
                            {% if customer.service %}
                            <div class="alert alert-warning">
                                <h6><i class="fas fa-exclamation-triangle"></i> Service Requirements</h6>
                                <p class="mb-1"><strong>Monthly Cost:</strong> KES {{ customer.service.price }}</p>
                                <p class="mb-0"><strong>Installation:</strong> KES {{ customer.service.installation_fee }}</p>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Form validation
(function() {
    'use strict';
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();
</script>
{% endblock %}