{% extends 'base.html' %}

{% block title %}{{ customer.full_name }} - Customer Details{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <div>
            <h1 class="h3 mb-1 text-gray-800">
                <i class="bi bi-person-circle text-primary"></i> {{ customer.full_name }}
            </h1>
            <p class="text-muted mb-0">Customer ID: {{ customer.customer_id }}</p>
        </div>
        <div class="btn-group">
            <a href="{% url 'customers:customer_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to List
            </a>
            <a href="{% url 'customers:customer_edit' customer.customer_id %}" class="btn btn-warning">
                <i class="bi bi-pencil"></i> Edit
            </a>
            {% if customer.user %}
            <a href="{% url 'customers:view_as_customer' customer.customer_id %}" class="btn btn-info" target="_blank">
                <i class="bi bi-eye"></i> View as Customer
            </a>
            {% endif %}
        </div>
    </div>

    <!-- Top Row - Key Information Cards -->
    <div class="row mb-4">
        <!-- Account Balance Card -->
        <div class="col-md-4">
            <div class="card shadow border-left-{% if customer.account_balance >= 0 %}success{% else %}danger{% endif %}">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-{% if customer.account_balance >= 0 %}success{% else %}danger{% endif %} text-uppercase mb-1">
                                Account Balance
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                KES {{ customer.account_balance|floatformat:2 }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-wallet2 fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Service Status Card -->
        <div class="col-md-4">
            <div class="card shadow border-left-info">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Service Status
                            </div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800">
                                {% if service_status %}
                                    {% if service_status.status == 'active' %}
                                        <span class="badge bg-success">Active</span>
                                    {% elif service_status.status == 'grace_period' %}
                                        <span class="badge bg-warning">Grace Period</span>
                                    {% elif service_status.status == 'suspended' %}
                                        <span class="badge bg-danger">Suspended</span>
                                    {% else %}
                                        <span class="badge bg-secondary">{{ service_status.status|title }}</span>
                                    {% endif %}
                                {% else %}
                                    <span class="badge bg-secondary">No Service</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-router fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Account Status Card -->
        <div class="col-md-4">
            <div class="card shadow border-left-{% if customer.is_active %}primary{% else %}secondary{% endif %}">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-{% if customer.is_active %}primary{% else %}secondary{% endif %} text-uppercase mb-1">
                                Account Status
                            </div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800">
                                {% if customer.is_active %}
                                    <span class="badge bg-success">Active</span>
                                {% else %}
                                    <span class="badge bg-danger">Inactive</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-person-check fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Row -->
    <div class="row">
        <!-- Left Column - Customer Information -->
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="bi bi-person-lines-fill"></i> Customer Information
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="text-muted small">Customer Type</label>
                                <div class="font-weight-bold"> {{ customer.get_customer_type_display }} </div>
                            </div>
                            {% if customer.customer_type == 'individual' %}
                                <div class="mb-3">
                                    <label class="text-muted small">Customer Name</label>
                                    <div class="font-weight-bold">{{ customer.full_name }}</div>
                                </div>
                            {% else %}
                                <div class="mb-3">
                                    <label class="text-muted small">Company Name</label>
                                    <div class="font-weight-bold">{{ customer.company_name }}</div>
                                </div>
                                <div class="mb-3">
                                    <label class="text-muted small">Contact Person</label>
                                    <div class="font-weight-bold">{{ customer.contact_person_full_name }}</div>
                                </div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="text-muted small">Phone</label>
                                <div class="font-weight-bold">
                                    <i class="bi bi-telephone"></i> {{ customer.phone }}
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="text-muted small">Email</label>
                                <div class="font-weight-bold">
                                    <i class="bi bi-envelope"></i> {{ customer.email }}
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="text-muted small">ID/Passport</label>
                                <div class="font-weight-bold">{{ customer.id_passport|default:"Not provided" }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="text-muted small">KRA PIN</label>
                                <div class="font-weight-bold">{{ customer.kra_pin|default:"Not provided" }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="text-muted small">Created</label>
                                <div class="font-weight-bold">{{ customer.created_at|date:"M d, Y" }}</div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="mb-3">
                        <label class="text-muted small">Physical Address</label>
                        <div class="font-weight-bold">
                            <i class="bi bi-geo-alt"></i> {{ customer.physical_address }}
                        </div>
                    </div>
                    {% if customer.notes %}
                    <hr>
                    <div class="mb-0">
                        <label class="text-muted small">Notes</label>
                        <div class="font-weight-bold">{{ customer.notes }}</div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Recent Payments -->
            {% if recent_payments %}
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-success text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="bi bi-credit-card"></i> Recent Payments
                    </h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="border-0">Date</th>
                                    <th class="border-0">Amount</th>
                                    <th class="border-0">Method</th>
                                    <th class="border-0">Status</th>
                                    <th class="border-0">Receipt</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payment in recent_payments %}
                                <tr>
                                    <td class="small">{{ payment.created_at|date:"M d, Y H:i" }}</td>
                                    <td class="font-weight-bold text-success">KES {{ payment.amount|floatformat:2 }}</td>
                                    <td>
                                        <span class="badge bg-{% if payment.payment_method == 'mpesa' %}success{% elif payment.payment_method == 'cash' %}info{% else %}secondary{% endif %}">
                                            {{ payment.get_payment_method_display }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge bg-{% if payment.status == 'completed' %}success{% elif payment.status == 'pending' %}warning{% else %}danger{% endif %}">
                                            {{ payment.get_status_display }}
                                        </span>
                                    </td>
                                    <td class="small">
                                        {% if payment.mpesa_receipt_number %}
                                            {{ payment.mpesa_receipt_number }}
                                        {% elif payment.cash_receipt_number %}
                                            {{ payment.cash_receipt_number }}
                                        {% elif payment.reference_number %}
                                            {{ payment.reference_number }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer text-center">
                        <a href="{% url 'payments:customer_payments' customer.customer_id %}" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-eye"></i> View All Payments
                        </a>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Recent Transactions -->
            {% if recent_transactions %}
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-info text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="bi bi-clock-history"></i> Recent Balance Transactions
                    </h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="border-0">Date</th>
                                    <th class="border-0">Type</th>
                                    <th class="border-0">Description</th>
                                    <th class="border-0">Amount</th>
                                    <th class="border-0">Balance After</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for transaction in recent_transactions %}
                                <tr>
                                    <td class="small">{{ transaction.created_at|date:"M d, Y H:i" }}</td>
                                    <td>
                                        <span class="badge bg-{% if transaction.transaction_type == 'credit' %}success{% elif transaction.transaction_type == 'debit' %}danger{% else %}secondary{% endif %}">
                                            {{ transaction.get_transaction_type_display }}
                                        </span>
                                    </td>
                                    <td class="small">{{ transaction.description }}</td>
                                    <td class="text-{% if transaction.transaction_type == 'credit' %}success{% else %}danger{% endif %} font-weight-bold">
                                        {% if transaction.transaction_type == 'credit' %}+{% else %}-{% endif %}KES {{ transaction.amount|floatformat:2 }}
                                    </td>
                                    <td class="font-weight-bold">KES {{ transaction.balance_after|floatformat:2 }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Right Column - Service & Actions -->
        <div class="col-lg-4">
            <!-- Service Information -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-success text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="bi bi-speedometer2"></i> Service Information
                    </h6>
                </div>
                <div class="card-body">
                    {% if customer.service %}
                        <div class="text-center mb-3">
                            <div class="h4 text-primary mb-1">{{ customer.service.speed_mbps }} Mbps</div>
                            <p class="text-muted mb-0">{{ customer.service.name }}</p>
                        </div>
                        <hr>
                        <div class="row text-center">
                            <div class="col-6">
                                <div class="border-right">
                                    <div class="h6 text-success mb-0">KES {{ customer.service.price|floatformat:2 }}</div>
                                    <small class="text-muted">Price</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="h6 text-info mb-0">{{ customer.service.get_billing_cycle_display }}</div>
                                <small class="text-muted">Billing</small>
                            </div>
                        </div>
                        {% if customer.service.fup_gb %}
                        <hr>
                        <div class="text-center">
                            <div class="h6 text-warning mb-0">{{ customer.service.fup_gb }} GB</div>
                            <small class="text-muted">Fair Usage Policy</small>
                        </div>
                        {% endif %}
                        {% if service_status.expires_at %}
                        <hr>
                        <div class="text-center">
                            <div class="h6 text-danger mb-0">{{ service_status.expires_at|date:"M d, Y" }}</div>
                            <small class="text-muted">Service Expires</small>
                        </div>
                        {% endif %}
                    {% else %}
                        <div class="text-center py-4">
                            <i class="bi bi-exclamation-triangle text-warning fa-3x mb-3"></i>
                            <p class="text-muted mb-3">No service assigned</p>
                            <a href="{% url 'customers:customer_edit' customer.pk %}" class="btn btn-primary btn-sm">
                                <i class="bi bi-plus"></i> Assign Service
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- PPPoE Credentials -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-warning text-dark">
                    <h6 class="m-0 font-weight-bold">
                        <i class="bi bi-key"></i> PPPoE Credentials
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="text-muted small">Username</label>
                        <div class="font-weight-bold">
                            <code class="bg-light p-1 rounded">{{ customer.pppoe_username|default:"Not generated" }}</code>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="text-muted small">Password</label>
                        <div class="font-weight-bold">
                            {% if customer.pppoe_password %}
                                <code class="bg-light p-1 rounded">{{ customer.pppoe_password }}</code>
                            {% else %}
                                <span class="text-muted">Not generated</span>
                            {% endif %}
                        </div>
                    </div>
                    {% if customer.router_mac %}
                    <div class="mb-3">
                        <label class="text-muted small">Router MAC</label>
                        <div class="font-weight-bold">
                            <code class="bg-light p-1 rounded">{{ customer.router_mac }}</code>
                        </div>
                    </div>
                    {% endif %}
                    {% if customer.installation_date %}
                    <div class="mb-0">
                        <label class="text-muted small">Installation Date</label>
                        <div class="font-weight-bold">{{ customer.installation_date|date:"M d, Y" }}</div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Payment Options -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-success text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="bi bi-credit-card"></i> Payment Options
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="text-muted small">M-Pesa Paybill</label>
                        <div class="font-weight-bold">
                            <strong>Paybill:</strong> {% load settings_tags %}{% get_setting 'mpesa' 'business_short_code' as paybill %}{{ paybill|default:"Not configured" }}<br>
                            <strong>Account:</strong> <code class="bg-primary text-white p-1 rounded">{{ customer.customer_id }}</code>
                        </div>
                        <small class="text-muted">Customer can pay directly via M-Pesa using this paybill number and their Customer ID as account number</small>
                    </div>
                    <div class="alert alert-info small mb-0">
                        <i class="bi bi-info-circle"></i>
                        <strong>Payment Instructions for Customer:</strong><br>
                        1. Go to M-Pesa menu<br>
                        2. Select "Lipa na M-Pesa" → "Pay Bill"<br>
                        3. Enter Paybill Number: <strong>{{ paybill|default:"[Not configured]" }}</strong><br>
                        4. Enter Account Number: <strong>{{ customer.customer_id }}</strong><br>
                        5. Enter Amount and M-Pesa PIN
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-dark text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="bi bi-lightning"></i> Quick Actions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'payments:customer_payments' customer.customer_id %}" class="btn btn-info">
                            <i class="bi bi-credit-card"></i> View Payments
                        </a>
                        <a href="{% url 'billing:customer_invoices' customer.customer_id %}" class="btn btn-primary">
                            <i class="bi bi-receipt"></i> View Invoices
                        </a>
                        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#stkPushModal">
                            <i class="bi bi-phone"></i> Send STK Push
                        </button>
                        <a href="{% url 'customers:send_customer_invitation' customer.id %}" class="btn btn-secondary">
                            <i class="bi bi-envelope"></i> Send Invitation
                        </a>
                        <a href="{% url 'customers:manage_balance' customer.customer_id %}" class="btn btn-warning">
                            <i class="bi bi-cash-stack"></i> Manage Balance
                        </a>
                        <a href="{% url 'customers:manage_service' customer.customer_id %}" class="btn btn-primary">
                            <i class="bi bi-gear"></i> Manage Service
                        </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> Send M-Pesa STK Push to {{ customer.full_name }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="stkPushForm">
                    {% csrf_token %}
                    <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 the M-Pesa registered phone number (254XXXXXXXXX format)</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" max="70000" required>
                            <div class="form-text">Amount between KES 1 and KES 70,000</div>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <input type="text" class="form-control" id="description" value="Account Top-up" required>
                            <div class="form-text">Purpose of this payment</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>

    <!-- SMS Modal -->
    <div class="modal fade" id="smsModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Send SMS to {{ customer.display_name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="post">
                    <div class="modal-body">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label class="form-label">Phone Number</label>
                            <input type="text" class="form-control" value="{{ customer.phone }}" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="smsMessage" class="form-label">Message</label>
                            <textarea class="form-control" id="smsMessage" name="sms_message" rows="4" maxlength="160" required placeholder="Enter your message here..."></textarea>
                            <div class="form-text">
                                <span id="smsCharCount">0</span>/160 characters
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" name="send_sms" class="btn btn-success">
                            <i class="bi bi-send"></i> Send SMS
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
    // Customer type toggle function (if needed elsewhere)
    function toggleCustomerTypeFields() {
        // This function can be implemented if needed for dynamic form handling
        console.log('Customer type fields toggle function called');
    }

    // 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;
        const description = document.getElementById('description').value;

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

        // Validate amount
        if (parseFloat(amount) < 1 || parseFloat(amount) > 70000) {
            alert('Amount must be between KES 1 and KES 70,000');
            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: description
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('✅ STK Push sent successfully! Customer should receive M-Pesa prompt on their phone.');
                document.getElementById('stkPushModal').querySelector('.btn-close').click();
                // Reset form
                document.getElementById('stkPushForm').reset();
                document.getElementById('phoneNumber').value = '{{ customer.phone }}';
                document.getElementById('description').value = 'Account Top-up';
            } else {
                alert('❌ Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('❌ Network error occurred. Please try again.');
        })
        .finally(() => {
            // Reset button
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });
    </script>

{% endblock %}

{% block extra_js %}
<script>
// SMS character counter
document.getElementById('smsMessage').addEventListener('input', function() {
    const charCount = this.value.length;
    document.getElementById('smsCharCount').textContent = charCount;

    const counter = document.getElementById('smsCharCount').parentElement;
    if (charCount > 160) {
        counter.className = 'form-text text-danger';
    } else if (charCount > 140) {
        counter.className = 'form-text text-warning';
    } else {
        counter.className = 'form-text text-success';
    }
});
</script>
{% endblock %}