{% extends 'base_customer.html' %}

{% block title %}My Account - Optinet Global Links{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">
        <i class="bi bi-person-circle"></i> My Account
    </h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-calendar"></i> Today: {{ "now"|date:"M d, Y" }}
            </button>
        </div>
    </div>
</div>

{% if customer %}
    <!-- Customer Dashboard Content -->
    <div class="row">
        <!-- Left Column -->
        <div class="col-md-8">
            <!-- Service Status Card -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="bi bi-wifi"></i> Service Status</h5>
                    <span class="badge bg-{% if service_status.status == 'active' %}success{% elif service_status.status == 'expired' %}danger{% else %}warning{% endif %}">
                        {{ service_status.status|title }}
                    </span>
                </div>
                <div class="card-body">
                    {% if service_status.status == 'active' %}
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <h6 class="mb-0">{{ customer.service.name }}</h6>
                                <small class="text-muted">{{ customer.service.speed_mbps }}Mbps - KES {{ customer.service.price }}</small>
                            </div>
                            <div class="text-end">
                                <div class="text-success fw-bold">Active</div>
                                <small class="text-muted">Expires: {{ service_status.expires_at|date:"M d, Y H:i" }}</small>
                            </div>
                        </div>

                        {% if service_status.days_remaining <= 7 %}
                            <div class="alert alert-warning">
                                <i class="bi bi-exclamation-triangle"></i>
                                Your service expires in {{ service_status.days_remaining }} day{{ service_status.days_remaining|pluralize }}.
                                {% if customer.can_auto_renew %}
                                    Auto-renewal is enabled.
                                {% else %}
                                    Please top up your account for auto-renewal.
                                {% endif %}
                            </div>
                        {% endif %}
                    {% else %}
                        <div class="alert alert-{% if service_status.status == 'expired' %}danger{% else %}warning{% endif %}">
                            <h6><i class="bi bi-exclamation-triangle"></i> Service {{ service_status.status|title }}</h6>
                            <p class="mb-0">{{ service_status.message }}</p>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Recent Invoices -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6><i class="bi bi-receipt"></i> Recent Invoices</h6>
                    <a href="{% url 'billing:my_invoices' %}" class="btn btn-sm btn-primary">View All</a>
                </div>
                <div class="card-body">
                    {% if recent_invoices %}
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Invoice #</th>
                                        <th>Amount</th>
                                        <th>Status</th>
                                        <th>Due Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for invoice in recent_invoices %}
                                    <tr>
                                        <td>{{ invoice.invoice_number }}</td>
                                        <td>KES {{ invoice.total_amount }}</td>
                                        <td>
                                            <span class="badge bg-{% if invoice.status == 'paid' %}success{% elif invoice.status == 'unpaid' %}warning{% else %}danger{% endif %}">
                                                {{ invoice.get_status_display }}
                                            </span>
                                        </td>
                                        <td>{{ invoice.due_date }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted">No invoices found.</p>
                    {% endif %}
                </div>
            </div>

            <!-- Recent Support Tickets -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6><i class="bi bi-headset"></i> My Support Tickets</h6>
                    <a href="{% url 'tickets:ticket_create' %}" class="btn btn-sm btn-success">New Ticket</a>
                </div>
                <div class="card-body">
                    {% if my_tickets %}
                        {% for ticket in my_tickets %}
                            <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                <div>
                                    <strong>{{ ticket.title|truncatechars:30 }}</strong><br>
                                    <small class="text-muted">{{ ticket.created_at|timesince }} ago</small>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-{{ ticket.priority }}">{{ ticket.get_priority_display }}</span><br>
                                    <span class="badge bg-{{ ticket.status }}">{{ ticket.get_status_display }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <p class="text-muted">No support tickets.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Right Column -->
        <div class="col-md-4">
            <!-- Account Balance Card -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6><i class="bi bi-wallet2"></i> Account Balance</h6>
                </div>
                <div class="card-body text-center">
                    <h3 class="text-{% if customer.account_balance >= 0 %}success{% else %}danger{% endif %}">
                        KES {{ customer.account_balance }}
                    </h3>
                    <small class="text-muted">
                        {% if customer.outstanding_amount > 0 %}
                            Outstanding: KES {{ customer.outstanding_amount }}
                        {% else %}
                            No outstanding invoices
                        {% endif %}
                    </small>

                    <!-- STK Push Payment Button -->
                    <div class="mt-3 d-grid">
                        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#stkPushModal">
                            <i class="bi bi-phone"></i> Pay via M-Pesa
                        </button>
                    </div>
                </div>
            </div>

            <!-- Account Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6><i class="bi bi-person-lines-fill"></i> Account Information</h6>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <strong>Customer ID:</strong><br>
                        <span class="text-muted">{{ customer.customer_id }}</span>
                    </div>
                    <div class="mb-2">
                        <strong>Phone:</strong><br>
                        <span class="text-muted">{{ customer.phone }}</span>
                    </div>
                    <div class="mb-2">
                        <strong>Email:</strong><br>
                        <span class="text-muted">{{ customer.email }}</span>
                    </div>
                    <div class="mb-2">
                        <strong>Service:</strong><br>
                        {% if customer.service %}
                            <span class="text-muted">{{ customer.service.name }} - {{ customer.service.speed_mbps }}Mbps</span>
                        {% else %}
                            <span class="text-muted">No active service</span>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Quick Actions Card -->
            <div class="card">
                <div class="card-header">
                    <h6><i class="bi bi-lightning"></i> Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'billing:my_invoices' %}" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-receipt"></i> View All Invoices
                        </a>
                        {% if customer.customer_id %}
                            <a href="{% url 'payments:customer_payments' customer.customer_id %}" class="btn btn-outline-info btn-sm">
                                <i class="bi bi-credit-card"></i> Payment History
                            </a>
                        {% endif %}
                        <a href="{% url 'tickets:my_tickets' %}" class="btn btn-outline-warning btn-sm">
                            <i class="bi bi-headset"></i> My Support Tickets
                        </a>
                        <a href="{% url 'accounts:profile' %}" class="btn btn-outline-secondary btn-sm">
                            <i class="bi bi-gear"></i> Update Profile
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- STK Push Modal -->
    <div class="modal fade" id="stkPushModal" tabindex="-1" aria-labelledby="stkPushModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="stkPushModalLabel">
                        <i class="bi bi-phone"></i> M-Pesa Payment
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="stkPushForm">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="phoneNumber" class="form-label">Phone Number</label>
                            <input type="tel" class="form-control" id="phoneNumber" value="{{ customer.phone }}" required>
                            <div class="form-text">Enter your M-Pesa registered phone number</div>
                        </div>
                        <div class="mb-3">
                            <label for="amount" class="form-label">Amount (KES)</label>
                            <input type="number" class="form-control" id="amount" min="1" required>
                            <div class="form-text">Minimum amount: KES 1</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">
                            <i class="bi bi-phone"></i> Send STK Push
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

{% else %}
    <div class="alert alert-warning">
        <h4><i class="bi bi-exclamation-triangle"></i> Account Setup Required</h4>
        <p>Your customer profile is not set up yet. Please contact support to complete your account setup.</p>
        <a href="{% url 'tickets:ticket_create' %}" class="btn btn-warning">Contact Support</a>
    </div>
{% endif %}

<script>
// STK Push Form Handler
document.getElementById('stkPushForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const phoneNumber = document.getElementById('phoneNumber').value;
    const amount = document.getElementById('amount').value;

    if (!phoneNumber || !amount) {
        alert('Please fill in all required fields');
        return;
    }

    // Show loading state
    const submitBtn = e.target.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="spinner-border spinner-border-sm me-2"></i>Processing...';
    submitBtn.disabled = true;

    // Make STK Push request
    fetch('/payments/customer-stk-push/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: JSON.stringify({
            customer_id: {{ customer.id }},
            phone_number: phoneNumber,
            amount: amount,
            description: 'Account Top-up'
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('STK Push sent successfully! Please check your phone and enter your M-Pesa PIN.');
            document.getElementById('stkPushModal').querySelector('.btn-close').click();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred. Please try again.');
    })
    .finally(() => {
        // Reset button state
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
});
</script>
{% endblock %}