@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.OrderDraftListModel
@{
    ViewBag.PageTitle = "Rendelés tervezetek";
    NopHtml.SetActiveMenuItemSystemName("OrderDraft.List");
}

<div class="content-header clearfix">
    <h1 class="float-left">
        <i class="fas fa-inbox" style="color:#f4a236"></i>
        Rendelés tervezetek
    </h1>
</div>

<section class="content">
    <div class="container-fluid">

        {{-- Státusz szűrő --}}
        <div class="card card-default mb-3">
            <div class="card-body py-2">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-warning btn-sm status-filter active" data-status="Pending">
                        <i class="fas fa-clock"></i> Függőben
                    </button>
                    <button type="button" class="btn btn-success btn-sm status-filter" data-status="Approved">
                        <i class="fas fa-check"></i> Jóváhagyva
                    </button>
                    <button type="button" class="btn btn-danger btn-sm status-filter" data-status="Rejected">
                        <i class="fas fa-times"></i> Elutasítva
                    </button>
                    <button type="button" class="btn btn-secondary btn-sm status-filter" data-status="Expired">
                        <i class="fas fa-hourglass-end"></i> Lejárt
                    </button>
                    <button type="button" class="btn btn-light btn-sm status-filter" data-status="">
                        <i class="fas fa-list"></i> Összes
                    </button>
                </div>
            </div>
        </div>

        <div class="card card-default">
            <div class="card-body p-0">
                @Html.AntiForgeryToken()
                <table id="od-grid" class="table table-bordered table-hover m-0" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Feladó</th>
                            <th>Partner</th>
                            <th>Üzenet (részlet)</th>
                            <th>Szállítás</th>
                            <th>Tételek</th>
                            <th>Státusz</th>
                            <th>Beérkezett</th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

    </div>
</section>

<style>
#od-grid tbody tr.od-urgent td { background-color: #fff3cd !important; }
#od-grid tbody tr:hover { background-color: #eaf2ff !important; }
.badge { font-size: 12px; padding: 4px 8px; }
.badge-warning  { background: #f4a236; color: #fff; }
.badge-success  { background: #2d7a3a; color: #fff; }
.badge-danger   { background: #c0392b; color: #fff; }
.badge-secondary{ background: #888;    color: #fff; }
</style>

<script>
$(function () {
    var _token      = $('input[name="__RequestVerificationToken"]').val();
    var _statusFilter = 'Pending';

    var table = $('#od-grid').DataTable({
        serverSide   : true,
        processing   : true,
        pageLength   : 25,
        lengthMenu   : [[10, 25, 50, 100], [10, 25, 50, 100]],
        order        : [[7, 'desc']],
        language     : {
            processing : 'Betöltés...',
            search     : 'Keresés:',
            lengthMenu : '_MENU_ sor/oldal',
            info       : '_START_ – _END_ / _TOTAL_ tervezet',
            infoEmpty  : '0 tervezet',
            paginate   : { first:'««', previous:'«', next:'»', last:'»»' },
            emptyTable : 'Nincs találat',
            zeroRecords: 'Nincs találat'
        },
        ajax: {
            url : '/Admin/OrderDraft/OrderDraftList',
            type: 'POST',
            data: function (d) {
                d.__RequestVerificationToken = _token;
                d.statusFilter = _statusFilter;
            }
        },
        columns: [
            /* 0 */ { data: 'Id',                  width: '50px', className: 'text-center' },
            /* 1 */ { data: 'ExternalUsername',     render: function(d) { return '<code>' + d + '</code>'; } },
            /* 2 */ { data: 'CustomerName',         render: function(d, t, row) {
                        if (!row.CustomerId) return '<span class="text-danger"><i class="fas fa-exclamation-triangle"></i> ' + d + '</span>';
                        return '<a href="/Admin/Customer/Edit/' + row.CustomerId + '" target="_blank">' + d + '</a>';
                     }},
            /* 3 */ { data: 'RawMessageTextShort',  orderable: false,
                      render: function(d) { return '<span class="text-muted" style="font-size:12px">' + d + '</span>'; } },
            /* 4 */ { data: 'ParsedDeliveryDate',   width: '100px', className: 'text-center' },
            /* 5 */ { data: 'ItemCount',             width: '70px',  className: 'text-center',
                      render: function(d) { return '<span class="badge badge-info">' + d + '</span>'; } },
            /* 6 */ { data: 'Status',               width: '110px', className: 'text-center',
                      render: function(d, t, row) {
                          return '<span class="badge ' + row.StatusBadgeClass + '">' + d + '</span>';
                      }},
            /* 7 */ { data: 'CreatedOnUtc',         width: '130px', className: 'text-center' },
            /* 8 */ { data: 'Id', orderable: false, searchable: false, width: '80px', className: 'text-center',
                      render: function(d) {
                          return '<a href="/Admin/OrderDraft/Detail/' + d + '" class="btn btn-primary btn-xs"><i class="fas fa-eye"></i> Megnyit</a>';
                      }}
        ],
        createdRow: function(row, data) {
            if (data.IsUrgent) $(row).addClass('od-urgent');
        }
    });

    // Státusz szűrő gombok
    $('.status-filter').on('click', function() {
        $('.status-filter').removeClass('active');
        $(this).addClass('active');
        _statusFilter = $(this).data('status');
        table.ajax.reload();
    });
});
</script>