@{
    ViewBag.PageTitle = "Hitelkeretek";
    NopHtml.SetActiveMenuItemSystemName("CustomerCredit.List");
}

<div class="content-header clearfix">
    <h1 class="float-left">@T("Plugins.Misc.FruitBankPlugin.CustomerCredit.PageTitle")</h1>
</div>

<section class="content">
    <div class="container-fluid">
        <div class="card card-default">
            <div class="card-body p-0">
                @Html.AntiForgeryToken()
                <table id="cc-grid" class="table table-bordered table-hover m-0" style="width:100%">
                    <thead>
                        <tr>
                            <th>@T("Plugins.Misc.FruitBankPlugin.CustomerCredit.CustomerName")</th>
                            <th>@T("Plugins.Misc.FruitBankPlugin.CustomerCredit.CustomerEmail")</th>
                            <th title="Kattintásra szerkeszthető — törléshez hagyd üresen">@T("Plugins.Misc.FruitBankPlugin.CustomerCredit.CreditLimit") <small class="text-muted">✏️</small></th>
                            <th>@T("Plugins.Misc.FruitBankPlugin.CustomerCredit.OutstandingBalance")</th>
                            <th>@T("Plugins.Misc.FruitBankPlugin.CustomerCredit.RemainingCredit")</th>
                            <th>@T("Plugins.Misc.FruitBankPlugin.CustomerCredit.Comment")</th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</section>

<style>
/* ── Editable credit limit cell ─────────────────────────────── */
#cc-grid tbody td.cc-editable {
    cursor: pointer;
}
#cc-grid tbody td.cc-editable:hover {
    background-color: #fff8e1;
}
#cc-grid tbody td.cc-editable input[type="number"] {
    width: 130px;
    font-size: 13px;
    padding: 2px 6px;
    border: 1px solid #80bdff;
    border-radius: 3px;
}
/* ── Status colours ─────────────────────────────────────────── */
.cc-remaining-ok      { color: #2d7a3a; font-weight: 600; }
.cc-remaining-warning { color: #e67e22; font-weight: 600; }
.cc-remaining-blocked { color: #c0392b; font-weight: 600; }
.cc-remaining-none    { color: #888; }
/* ── Stripe + hover ─────────────────────────────────────────── */
#cc-grid tbody tr:nth-child(even) { background-color: #f9f9f9; }
#cc-grid tbody tr:hover            { background-color: #eaf2ff; }
</style>

<script>
$(function () {

    var _token = $('input[name="__RequestVerificationToken"]').val();

    function fmt(val) {
        if (val == null) return '—';
        return Number(val).toLocaleString('hu-HU') + ' Ft';
    }

    function renderRemaining(row) {
        if (!row.HasCreditLimit) return '<span class="cc-remaining-none">@T("Plugins.Misc.FruitBankPlugin.CustomerCredit.Unlimited").Text</span>';
        var r = row.RemainingCredit;
        var cls = r <= 0 ? 'cc-remaining-blocked'
                : r < row.CreditLimit * 0.2 ? 'cc-remaining-warning'
                : 'cc-remaining-ok';
        return '<span class="' + cls + '">' + fmt(r) + '</span>';
    }

    function renderCreditLimit(row) {
        if (!row.HasCreditLimit) return '<span class="text-muted">@T("Plugins.Misc.FruitBankPlugin.CustomerCredit.Unlimited").Text</span>';
        return fmt(row.CreditLimit);
    }

    var table = $('#cc-grid').DataTable({
        serverSide   : true,
        processing   : true,
        orderCellsTop: true,
        pageLength   : 25,
        lengthMenu   : [[10, 25, 50, 100], [10, 25, 50, 100]],
        order        : [[3, 'desc']],
        language     : {
            processing   : 'Betöltés...',
            search       : 'Keresés:',
            lengthMenu   : '_MENU_ sor/oldal',
            info         : '_START_ – _END_ / _TOTAL_ ügyfél',
            infoEmpty    : '0 ügyfél',
            infoFiltered : '(szűrve _MAX_-ból)',
            paginate     : { first: '««', previous: '«', next: '»', last: '»»' },
            emptyTable   : 'Nincs találat',
            zeroRecords  : 'Nincs találat'
        },
        ajax: {
            url : '/Admin/CustomerCredit/CustomerCreditList',
            type: 'POST',
            data: function (d) {
                d.__RequestVerificationToken = _token;
            },
            error: function (xhr) {
                console.error('CustomerCreditList error:', xhr.status, xhr.responseText);
            }
        },
        columns: [
            /* 0 */ { data: 'CustomerName',       name: 'CustomerName' },
            /* 1 */ { data: 'CustomerEmail',      name: 'CustomerEmail' },
            /* 2 */ { data: 'CreditLimit',        name: 'CreditLimit',        className: 'cc-editable text-right',
                      render: function (d, t, row) { return renderCreditLimit(row); } },
            /* 3 */ { data: 'OutstandingBalance', name: 'OutstandingBalance', className: 'text-right',
                      render: function (d) {
                          var color = d > 0 ? 'color:#c0392b;font-weight:600' : '';
                          return '<span style="' + color + '">' + fmt(d) + '</span>';
                      }},
            /* 4 */ { data: 'RemainingCredit',   name: 'RemainingCredit',
                      render: function (d, t, row) { return renderRemaining(row); } },
            /* 5 */ { data: 'Comment',            name: 'Comment', orderable: false,
                      render: function (d) { return d ? '<span class="text-muted">' + d + '</span>' : ''; } },
            /* 6 */ { data: 'CustomerId',         name: null, orderable: false, searchable: false, width: '80px', className: 'text-center',
                      render: function (d) {
                          return '<a href="/Admin/CustomerCredit/Details/' + d + '" class="btn btn-default btn-xs" title="Részletek"><i class="fas fa-edit"></i></a>' +
                                 ' <a href="/Admin/Customer/Edit/' + d + '" class="btn btn-default btn-xs" title="Ügyfél szerkesztése"><i class="fas fa-user"></i></a>';
                      }}
        ]
    });

    /* ── Inline editing: CreditLimit ─────────────────────────────── */
    $(document).on('click', '#cc-grid tbody td.cc-editable', function () {
        var $td = $(this);
        if ($td.find('input').length) return;

        var $row    = $td.closest('tr');
        var rowData = table.row($row).data();
        if (!rowData) return;

        var savedHtml = $td.html();
        var current   = rowData.HasCreditLimit ? rowData.CreditLimit : '';

        var $inp = $('<input type="number" min="0" step="1000" placeholder="Korlátlan (törléshez hagyd üresen)">')
            .val(current)
            .css({ width: '180px', fontSize: '13px' });

        $td.html('').append($inp);
        $inp.focus().select();

        function restore() { $td.html(savedHtml); }

        function persist() {
            var raw       = $inp.val().trim();
            var removeLimit = raw === '';           // empty = remove limit → unlimited
            var newVal    = removeLimit ? null : parseFloat(raw);

            // If a number was typed but is invalid or negative, cancel
            if (!removeLimit && (isNaN(newVal) || newVal < 0)) { restore(); return; }

            // No change: still has limit and same value
            if (!removeLimit && rowData.HasCreditLimit && newVal === rowData.CreditLimit) { restore(); return; }

            // No change: was already unlimited and still wants unlimited
            if (removeLimit && !rowData.HasCreditLimit) { restore(); return; }

            $.ajax({
                url  : '/Admin/CustomerCredit/UpdateCreditLimit',
                type : 'POST',
                data : {
                    __RequestVerificationToken : _token,
                    customerId  : rowData.CustomerId,
                    creditLimit : removeLimit ? '' : newVal,   // empty string signals "remove"
                    removeLimit : removeLimit,
                    comment     : rowData.Comment || ''
                },
                success: function (res) {
                    if (res.success) {
                        rowData.CreditLimit        = res.creditLimit;
                        rowData.OutstandingBalance = res.outstanding;
                        rowData.RemainingCredit    = res.remaining;
                        rowData.HasCreditLimit     = res.hasLimit;
                        table.row($row).data(rowData).invalidate().draw(false);
                    } else {
                        restore();
                        alert('Mentési hiba: ' + (res.error || 'Ismeretlen hiba'));
                    }
                },
                error: function () { restore(); }
            });
        }

        $inp.on('blur',    function () { persist(); });
        $inp.on('keydown', function (e) {
            if (e.key === 'Enter')  { $inp.off('blur'); persist(); }
            if (e.key === 'Escape') { $inp.off('blur'); restore(); }
        });
    });
});
</script>