{% extends "Lipa_mdogo/base_dashboard.html" %}
{% load humanize %}

{% block title %}Dashboard | Lipa Mdogo{% endblock %}

{% block content %}
<h4 class="mb-4">Dashboard</h4>

<!--message tag for successful login-->
<div id="messages-container">
{% if messages %}
  {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  {% endfor %}
{% endif %}
</div>

<!--message tag for successful login-->
<!-- Summary Cards -->
<div class="row g-3 mb-4">
    <div class="col-md-3 col-6">
        <div class="card shadow-sm">
            <div class="card-body">
                <small class="text-muted">Active Items</small>
                <h4>{{total_active_items}}</h4>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card shadow-sm">
            <div class="card-body">
                <small class="text-muted">Pending Collection</small>
                <h4>{{completed_accounts.count}}</h4>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card shadow-sm">
            <div class="card-body">
                <small class="text-muted">Total Paid</small>
                <h4 class="text-success">KES {{total_paid|intcomma}}</h4>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card shadow-sm">
            <div class="card-body">
                <small class="text-muted">Outstanding</small>
                <h4 class="text-danger">KES {{total_outstanding|intcomma}}</h4>
            </div>
        </div>
    </div>
    <!--User account balance-->
    <div class="col-md-3 col-6">
        <div class="card shadow-sm">
            <div class="card-body">
                <small class="text-muted">Account Balance</small>
                <h4>KES {{ account_balance|floatformat:2|intcomma }}</h4>
                <!--<button type="button"
                        class="btn btn-sm btn-success mt-1"
                        data-bs-toggle="modal"
                        data-bs-target="#topUpModal">
                    <i class="fas fa-plus"></i> Top Up
                </button>-->
                <button data-pay-widget
                    class="btn btn-sm btn-success mt-1"
                    data-amount="100"
                    data-phone="{{request.user.profile.phone_number}}"
                    data-reference="ACC-{{request.user.id}}"
                    data-editable-amount=true
                    data-on-success="customertopupPaySuccess"
                    >
                    Top Up
                </button>
            </div>
        </div>
    </div>
    <!--POINTS REMAINING-->
    <div class="col-md-3 col-6">
        <div class="card shadow-sm">
            <div class="card-body">
                <small class="text-muted">Points Balance</small>
                <h4>{{ request.user.profile.points|floatformat:0 }} Points</h4>
                <small class="text-muted">
                    Worth KES {{ points_value|floatformat:2 }}
                </small>
            </div>
        </div>
    </div>

    <!-- Top Up Modal -->
    <!--<div class="modal fade" id="topUpModal" tabindex="-1" aria-labelledby="topUpModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="topUpModalLabel">Top Up Account</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted small">Top up functionality coming soon.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>-->
    <!--end of user account balance-->
</div>

<!-- Collapsible Sections -->
<div class="accordion" id="dashboardAccordion">

    <!-- Active Items -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#activeItems">
                Active Items ({{active_accounts.count}})
            </button>
        </h2>
        <div id="activeItems" class="accordion-collapse collapse show">
            {% if active_accounts %}
            {% for account in active_accounts %}
            <div class="accordion-body">
                <p><strong>{{account.product.name}}</strong></p>
                <div class="progress mb-1">
                <div class="progress-bar"
                        role="progressbar"
                        style="width: {{ account.progress_percentage }}%">
                </div>
                </div>

                <small class="text-muted">
                KES {{account.total_paid}} / {{account.agreed_price}} | Balance: KES {{ account.balance|intcomma }}
                </small>
                <!--add amount to pay button-->
                <form method="post" action="{% url 'set_payment_amount' account.id %}" class="mt-2">
                    {% csrf_token %}

                    <div class="input-group input-group-sm mb-2">
                    <span class="input-group-text">KES</span>
                    <input type="number"
                    name="amount"
                    class="form-control"
                    placeholder="Enter amount you intend to pay"
                    min="5"
                    max="{{ account.balance }}"
                    step="1"
                    value="{{ account.pending_payment_amount|default_if_none:'' }}"
                    required>
                    <button class="btn btn-outline-secondary" type="submit">
                    Save
                    </button>
                    </div>
                </form>
                <!--end of add amount to pay-->
                    
                <div class="d-flex flex-wrap gap-2 mt-2">
                {% if account.pending_payment_amount %}
                    <button class="btn btn-sm btn-primary pay-btn"
                    data-amount="{{ account.pending_payment_amount }}"
                    data-phone="{{ request.user.profile.phone_number }}"
                    data-email="{{ request.user.email }}"
                    data-name="{{ request.user.first_name }}"
                    data-reference="{{ account.id }}">
                    Pay Now
                    </button>
                {% endif %}
                <!--use points to pay-->
            {% if account.status == "active" and account.balance > 0 and request.user.profile.points > 0 %}
                <button type="button" class="btn btn-sm btn-warning redeem-points-btn"
                    data-account-id="{{ account.id }}"
                    data-account-balance="{{ account.balance }}"
                    data-product-price="{{ account.agreed_price }}"
                    data-points="{{ request.user.profile.points }}"
                    data-redeem-url="{% url 'lipa_mdogo:redeem_points' account.id %}"
                    data-bs-toggle="modal"
                    data-bs-target="#redeemPointsModal">
                    <i class="fas fa-coins"></i> Pay with Points
                </button>
            {% endif %}
                <!--use points to pay-->

                    <a href="{% url 'transaction_history' account.id %}"
                    class="btn btn-sm btn-outline-secondary">
                    Payment History
                    </a>
                    <button class="btn btn-success openClaimModal" data-account-id="{{ account.id }}" disabled>
                        Confirm Payment
                    </button>
                    <!--<button class="btn btn-sm btn-primary" id="claimPaymentBtn">
                        Check payment
                    </button>-->
                </div>
            </div>
            {% endfor %}
            {% else %}
            <div class="accordion-body">
                <p>No items at the moment</p>
                
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Pending Collection -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#pendingCollection">
                Pending Collection ({{completed_accounts.count}})
            </button>
        </h2>
        {% if completed_accounts %}
        {% for account in completed_accounts %}
        <div id="pendingCollection" class="accordion-collapse collapse">
            <div class="accordion-body">
                <p><strong>{{account.product.name}}</strong> – Fully Paid</p>
                <span class="badge bg-success">Ready for Pickup</span>
            </div>
        </div>
        {% endfor %}
        {% else %}
        <div id="pendingCollection" class="accordion-collapse collapse">
            <div class="accordion-body">
                <p>No items pending collection</p>
                
            </div>
        </div>
        {% endif %}

    </div>

    <!-- History -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#history">
                Purchase History ({{released_accounts.count}})
            </button>
        </h2>
        {% if released_accounts %}
        {% for account in released_accounts %}
        <div id="history" class="accordion-collapse collapse">
            <div class="accordion-body d-flex flex-wrap justify-content-between align-items-center">
                <span>
                {{ account.product.name }} – Completed
                </span>
                <small class="text-muted ms-2">
                Completed on {{ account.released_at }}
                </small>
            </div>

        </div>
        {% endfor %}
    {% else %}
        <div id="history" class="accordion-collapse collapse">
            <div class="accordion-body">
                <p>No items at the moment.</p>
               
            </div>
        </div>
    {% endif %}
    </div>

    <!--Payment modal:: Stk push-->
        <div class="modal fade" id="paymentModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">

                    <div class="modal-header">
                    <h5 class="modal-title">Complete Payment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                    <p>You will receive a payment request on your phone. Enter PIN to complete.</p>

                    <div class="mb-3">
                        <label>Phone Number</label>
                        <input type="text" class="form-control" id="payPhone">
                    </div>

                    <div class="mb-3">
                        <label>Amount</label>
                        <input type="text" class="form-control" id="payAmount" readonly>
                    </div>

                    <div class="mb-3">
                        <label>Reference</label>
                        <input type="text" class="form-control" id="payReference" readonly>
                    </div>

                    <div class="alert alert-info small">
                        Payment Fee: KES 0
                    </div>

                    <div id="paymentStatus" class="text-center small"></div>

                    </div>

                    <div class="modal-footer">
                    <button class="btn btn-primary w-100" id="confirmPayBtn">
                        Pay <span id="payTotal"></span>
                    </button>
                    </div>

                </div>
            </div>
        </div>
    <!--Payment modal:: Stk push-->
    <!--CLAIM PAYMENT MODAL-->
        <div class="modal fade" id="claimPaymentModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">Claim Payment</h5>
                        <button class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                        <div class="mb-3">
                            <label>M-Pesa Receipt</label>
                            <input type="text" id="claimReceipt" class="form-control">
                        </div>

                        <div id="claimStatus" class="small text-center"></div>

                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-success w-100" id="claimBtn">
                            Claim Payment
                        </button>
                    </div>

                </div>
            </div>
        </div>
    <!--CLAIM PAYMENT MODAL-->
    <!--Redeem Points Modal-->
        <div class="modal fade" id="redeemPointsModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Pay with Points</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-2"><small class="text-muted">Available Points</small><h5 id="availablePoints">0</h5></div>
                        <div class="mb-2"><small class="text-muted">Account Balance</small><h5 id="pointsAccountBalance">KES 0</h5></div>
                        <div class="mb-3"><small class="text-muted">Maximum Redeemable</small><h5 id="maximumPointsValue">KES 0</h5></div>
                        <label class="form-label">Points to Redeem</label>
                        <input type="number" id="redeemPointsInput" class="form-control" min="1" step="1">
                        <div class="alert alert-info mt-3 mb-0">Payment value: <strong id="pointsPaymentValue">KES 0</strong></div>
                        <div id="pointsRedeemError" class="alert alert-danger mt-3 d-none"></div>
                        <input type="hidden" id="redeemAccountId">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <form method="post" id="redeemPointsForm">
                            {% csrf_token %}
                            <input type="hidden" name="points" id="redeemPointsFormValue">
                            <input type="hidden" name="account_id" id="redeemAccountFormId">
                            <button type="submit" class="btn btn-success" id="confirmPointsRedeem">Pay with Points</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    <!--Redeem Points Modal-->

</div>

<script>
    window.APP_CONFIG = {
        API_KEY: "{{ API_KEY }}",
        PAYMENT_API_URL: "{{ PAYMENT_API_URL }}",
        VERIFY_URL: "{{ VERIFY_URL }}",
        CLAIM_URL: "{{ CLAIM_URL }}"
    };

  window.PAY_WIDGET_CONFIG = {
    apiKey:     "{{ API_KEY }}",
    stkPushUrl: "https://payments.dtechnologys.com/api/stk-push/",
    verifyUrl:  "https://payments.dtechnologys.com/api/payments/verify/",
    claimUrl:   "https://payments.dtechnologys.com/api/payments/claim/"
  };

function customertopupPaySuccess(result) {
    // result = { amount, receipt, reference, phone, account_id }
    console.log("Payment successful:", result);

    fetch("/wallet/topup/", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            amount: result.amount,
            receipt: result.receipt,
            phone: result.phone
        })
    })
    .then(response => response.json())
    .then(data => {

        console.log("Wallet top-up response:", data);

        if (data.status === "success") {

            console.log(
                "Wallet credited:",data.amount,"New balance:",data.balance);

            // Optional: update wallet balance displayed on page
            const balanceElement = document.getElementById("wallet-balance");

            if (balanceElement && data.balance !== undefined) {
                balanceElement.textContent = data.balance;
            }

            // Optional notification
            alert(
                data.already_processed
                    ? "This payment was already processed."
                    : "Wallet topped up successfully."
            );

        } else {
            console.error(
                "Wallet top-up failed:",
                data.message
            );

            alert(
                data.message || "Unable to credit wallet."
            );
        }
    })
    .catch(error => {
        console.error(
            "Error communicating with wallet:",
            error
        );

        alert(
            "Payment was received, but we could not update your wallet. " +
            "Please contact support."
        );
    });
}


// Redeem points
let redeemPointValue = 1;
let redeemMaxPoints = 0;

document.querySelectorAll(".redeem-points-btn").forEach(button => {
    button.addEventListener("click", function () {
        const points = parseInt(this.dataset.points) || 0;
        const accountBalance = parseFloat(this.dataset.accountBalance) || 0;
        const productPrice = parseFloat(this.dataset.productPrice) || 0;
        const accountId = this.dataset.accountId;
        const redeemUrl = this.dataset.redeemUrl;
        const maxRedemptionPercent = {{ points_max_redemption_percent }};

        redeemPointValue = parseFloat("{{ reward_point_value|default:'1' }}");

        //const maxByPrice = Math.floor((maxRedemptionPercent/100) / redeemPointValue);
        const maxByPrice = Math.floor((productPrice * (maxRedemptionPercent / 100)) / redeemPointValue);
        const maxByBalance = Math.floor(accountBalance / redeemPointValue);
        

        redeemMaxPoints = Math.min(points, maxByPrice, maxByBalance);

        document.getElementById("availablePoints").textContent = `${points} Points`;
        document.getElementById("pointsAccountBalance").textContent = `KES ${accountBalance.toLocaleString()}`;
        document.getElementById("maximumPointsValue").textContent = `KES ${(redeemMaxPoints * redeemPointValue).toLocaleString()}`;

        document.getElementById("redeemAccountId").value = accountId;
        document.getElementById("redeemAccountFormId").value = accountId;

        document.getElementById("redeemPointsInput").value = "";
        document.getElementById("redeemPointsInput").max = redeemMaxPoints;

        document.getElementById("redeemPointsForm").action = redeemUrl;

        document.getElementById("pointsPaymentValue").textContent = "KES 0";
        document.getElementById("pointsRedeemError").classList.add("d-none");
    });
});

document.getElementById("redeemPointsInput").addEventListener("input", function () {
    const points = parseInt(this.value) || 0;
    const value = points * redeemPointValue;

    document.getElementById("pointsPaymentValue").textContent =
        `KES ${value.toLocaleString()}`;

    document.getElementById("redeemPointsFormValue").value = points;
});

document.getElementById("redeemPointsForm").addEventListener("submit", function (event) {
    const points = parseInt(document.getElementById("redeemPointsInput").value) || 0;

    if (points <= 0) {
        event.preventDefault();

        const error = document.getElementById("pointsRedeemError");
        error.textContent = "Enter the number of points you want to redeem.";
        error.classList.remove("d-none");
        return;
    }

    if (points > redeemMaxPoints) {
        event.preventDefault();

        const error = document.getElementById("pointsRedeemError");
        error.textContent = `You can redeem a maximum of ${redeemMaxPoints} points.`;
        error.classList.remove("d-none");
        return;
    }

    document.getElementById("redeemPointsFormValue").value = points;
});
//End of redeem points


</script>
<script src="https://cdn.jsdelivr.net/gh/danielnjama/Payment-widget@v1.0.1/pay-widget.js"></script>
{% endblock %}