{% extends "admin/change_form.html" %}

{% block extrahead %}
    {{ block.super }}
    <script>
        window.APP_CONFIG = { API_KEY: "{{ api_key }}" };
        window.MPESA_VALIDATION_ENABLED = "{{ mpesa_validation_enabled }}";
        window.SALE_ID = "{{ sale_id }}";
    </script>
    <style>
        #unclaimed-modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }
        #unclaimed-modal-overlay.active { display: flex; }
        #unclaimed-modal {
            background: #fff;
            border-radius: 6px;
            width: 620px;
            max-width: 95vw;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
        }
        #unclaimed-modal-header {
            padding: 14px 18px;
            background: #417690;
            color: #fff;
            border-radius: 6px 6px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #unclaimed-modal-header h3 { margin: 0; font-size: 15px; }
        #unclaimed-modal-controls {
            padding: 10px 14px;
            border-bottom: 1px solid #eee;
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }
        #unclaimed-search {
            flex: 1;
            padding: 5px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 13px;
            min-width: 140px;
        }
        #unclaimed-modal-body { overflow-y: auto; flex: 1; padding: 0; }
        #unclaimed-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        #unclaimed-table thead tr {
            background: #f5f5f5;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        #unclaimed-table th {
            padding: 8px 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
            font-weight: bold;
        }
        #unclaimed-table td {
            padding: 8px 10px;
            border-bottom: 1px solid #f0f0f0;
            vertical-align: middle;
        }
        #unclaimed-table tbody tr { cursor: pointer; transition: background 0.15s; }
        #unclaimed-table tbody tr:hover { background: #e8f4fd; }
        #unclaimed-table tbody tr.amount-match { background: #f0fff4; border-left: 3px solid #28a745; }
        #unclaimed-table tbody tr.amount-match:hover { background: #d4edda; }
        .badge-match {
            background: #28a745;
            color: #fff;
            font-size: 10px;
            padding: 2px 5px;
            border-radius: 3px;
            margin-left: 4px;
        }
        #unclaimed-modal-footer {
            padding: 10px 14px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #666;
        }
        #modal-close-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            line-height: 1;
        }
        #modal-refresh-btn {
            padding: 4px 10px;
            font-size: 12px;
            background: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
        }
        #modal-refresh-btn:hover { background: #e0e0e0; }
        #deferred-claim-btn {
            display: none;
            margin: 8px 0 0 0;
            padding: 6px 14px;
            background: #2e7d32;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
        }
        #deferred-claim-btn:hover { background: #1b5e20; }
    </style>
{% endblock %}

{% block field_sets %}
    <div id="stk-push-widget" style="
        display:none;
        margin: 0 0 16px 0;
        padding: 12px 16px;
        background: #f0f8f0;
        border: 1px solid #c3e6cb;
        border-radius: 4px;
    ">
        <strong style="display:block; margin-bottom:8px;">📲 STK Push</strong>
        <input type="text" id="stk-phone-number" placeholder="2547XXXXXXXX"
            style="padding:5px 8px; width:160px; margin-right:8px; border:1px solid #ccc; border-radius:3px;"/>
        <input type="number" id="stk-push-amount" placeholder="Amount"
            style="padding:5px 8px; width:100px; margin-right:8px; border:1px solid #ccc; border-radius:3px;"/>
        <button type="button" id="stk-push-btn"
            style="padding:5px 12px; background:#2e7d32; color:#fff; border:none; border-radius:3px; cursor:pointer; font-size:13px;">
            Send STK Push
        </button>
        <button type="button" id="browse-unclaimed-btn"
            style="padding:5px 12px; background:#417690; color:#fff; border:none; border-radius:3px; cursor:pointer; font-size:13px; margin-left:8px;">
            🔍 Browse Payments
        </button>
        <span id="stk-push-status" style="display:block; margin-top:6px; font-size:12px;"></span>
        <button type="button" id="deferred-claim-btn">✅ Confirm Selected Payment</button>
    </div>

    {{ block.super }}

    <!-- Unclaimed payments modal -->
    <div id="unclaimed-modal-overlay">
        <div id="unclaimed-modal">
            <div id="unclaimed-modal-header">
                <h3>🔍 Unclaimed Mpesa Payments</h3>
                <button id="modal-close-btn" type="button">×</button>
            </div>
            <div id="unclaimed-modal-controls">
                <input type="text" id="unclaimed-search"
                    placeholder="Search by receipt, amount, name..."/>
                <button type="button" id="modal-refresh-btn">🔄 Refresh</button>
                <span id="modal-order-total" style="font-size:12px; color:#417690; font-weight:bold;"></span>
            </div>
            <div id="unclaimed-modal-body">
                <table id="unclaimed-table">
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>Name</th>
                            <th>Receipt</th>
                            <th>Amount (KES)</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="unclaimed-table-body">
                        <tr>
                            <td colspan="5" style="text-align:center; padding:20px; color:#999;">
                                Loading...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="unclaimed-modal-footer">
                <span id="modal-count"></span>
                <span style="color:#999;">Last 24 hours. Highlighted rows match order total.</span>
            </div>
        </div>
    </div>
{% endblock %}