@{
    ViewBag.PageTitle = "Előrendelések";
    NopHtml.SetActiveMenuItemSystemName("Preorders.List");
    Layout = "~/Plugins/Misc.FruitBankPlugin/Areas/Admin/Views/_FruitBankAdminLayout.cshtml";
}

@Html.AntiForgeryToken()

<div class="content-header clearfix">
    <h1 class="float-left">
        <i class="fas fa-calendar-plus" style="color:#2d7a3a;"></i>
        Előrendelések
    </h1>
    <div class="float-right">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#create-preorder-window">
            <i class="fas fa-plus"></i> Rendelés / Előrendelés rögzítése
        </button>
    </div>
</div>

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

        <ul class="nav nav-tabs mb-3" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="tab-list-link" data-toggle="tab" href="#tab-list" role="tab">
                    <i class="fas fa-list"></i> Előrendelések
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="tab-demand-link" data-toggle="tab" href="#tab-demand" role="tab">
                    <i class="fas fa-chart-bar"></i> Kereslet
                    <span id="demandBadge" class="badge badge-warning ml-1" style="display:none;"></span>
                </a>
            </li>
        </ul>

        <div class="tab-content">

            <div class="tab-pane fade show active" id="tab-list" role="tabpanel">
                <div class="card card-default mb-3">
                    <div class="card-body py-2">
                        <div class="d-flex align-items-center" style="gap:8px; flex-wrap:wrap;">
                            <span class="text-muted" style="font-size:13px;">Szűrő:</span>
                            <button class="btn btn-sm btn-outline-secondary po-filter active" data-status="">Összes</button>
                            <button class="btn btn-sm btn-outline-warning po-filter"  data-status="0">Függőben</button>
                            <button class="btn btn-sm btn-outline-success po-filter"  data-status="10">Megerősítve</button>
                            <button class="btn btn-sm po-filter" style="border-color:#f4a236;color:#f4a236;" data-status="20">Részben teljesítve</button>
                            <button class="btn btn-sm btn-outline-danger po-filter"   data-status="30">Törölve</button>
                        </div>
                    </div>
                </div>
                <div class="card card-default">
                    <div class="card-body p-0">
                        <table id="po-grid" class="table table-bordered table-hover table-sm m-0" style="width:100%">
                            <thead>
                                <tr>
                                    <th width="60">#</th>
                                    <th>Ügyfél</th>
                                    <th width="180" name="DateOfReceipt">Kért szállítás</th>
                                    <th width="160" name="CreatedOnUtc">Leadva</th>
                                    <th width="120" name="Status">Állapot</th>
                                    <th width="100" class="text-center">Tételek</th>
                                    <th width="70"  class="text-center"></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-demand" role="tabpanel">
                <div class="card card-default mb-3">
                    <div class="card-body py-2">
                        <div class="d-flex align-items-center" style="gap:8px;">
                            <span class="text-muted" style="font-size:13px;">Nézet:</span>
                            <button class="btn btn-sm btn-warning demand-scope active" data-open="true">
                                <i class="fas fa-clock"></i> Nyitott előrendelések
                            </button>
                            <button class="btn btn-sm btn-outline-secondary demand-scope" data-open="false">
                                <i class="fas fa-history"></i> Összes idő
                            </button>
                            <small class="text-muted ml-3" id="demandScopeLabel">Termékek amelyekre még van teljesítetlen igény</small>
                        </div>
                    </div>
                </div>
                <div class="card card-default">
                    <div class="card-body p-0">
                        <table id="demand-grid" class="table table-bordered table-hover table-sm m-0" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Termék</th>
                                    <th width="80">SKU</th>
                                    <th width="110" class="text-center">Igényelt</th>
                                    <th width="110" class="text-center">Teljesített</th>
                                    <th width="130" class="text-center">Hiány ▼</th>
                                    <th width="90"  class="text-center">Rendelések</th>
                                    <th width="120" class="text-right">Átlagár</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<style>
.ui-autocomplete { z-index:1060 !important; max-height:220px; overflow-y:auto; overflow-x:hidden; }
.po-status-pending   { background:#fff3cd; color:#856404; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; }
.po-status-confirmed { background:#d4edda; color:#155724; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; }
.po-status-partial   { background:#fff8ee; color:#c87500; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; }
.po-status-cancelled { background:#f8d7da; color:#721c24; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; }
.po-filter.active    { font-weight:700; }
.demand-scope.active { font-weight:700; }
.demand-unfulfilled-high { color:#dc3545; font-weight:700; }
.demand-unfulfilled-mid  { color:#c87500; font-weight:600; }
.demand-unfulfilled-ok   { color:#6b7c6e; }

/* ── Urgency flag ─────────────────────────────────────────── */
.po-urgent-row td { background:#fff8e1 !important; }
.po-urgent-badge {
    display:inline-block; background:#dc3545; color:#fff;
    border-radius:4px; padding:1px 7px; font-size:11px;
    font-weight:700; margin-left:6px; vertical-align:middle;
    animation: urgentPulse 1.5s ease-in-out infinite;
}
@@keyframes urgentPulse {
    0%,100% { opacity:1; }
    50%      { opacity:.55; }
}

/* ── Modal mode banners ───────────────────────────────────── */
.cp-mode-order {
    background:#d4edda; border:2px solid #28a745; border-radius:8px;
    padding:14px 18px; margin-bottom:16px;
    display:flex; align-items:center; gap:14px;
    font-size:14px; color:#155724;
}
.cp-mode-preorder {
    background:#fff8ee; border:2px solid #f4a236; border-radius:8px;
    padding:14px 18px; margin-bottom:16px;
    display:flex; align-items:center; gap:14px;
    font-size:14px; color:#7a4200;
}
.cp-mode-icon  { font-size:26px; flex-shrink:0; }
.cp-mode-title { font-size:16px; font-weight:800; display:block; margin-bottom:3px; }
.cp-mode-desc  { font-size:12px; line-height:1.5; opacity:.9; }
</style>

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

    function statusBadge(row) {
        switch (row.Status) {
            case 0:  return '<span class="po-status-pending">'   + row.StatusLabel + '</span>';
            case 10: return '<span class="po-status-confirmed">'  + row.StatusLabel + '</span>';
            case 20: return '<span class="po-status-partial">'    + row.StatusLabel + '</span>';
            case 30: return '<span class="po-status-cancelled">'  + row.StatusLabel + '</span>';
            default: return row.StatusLabel;
        }
    }
    function itemProgress(row) {
        var total = row.ItemCount, done = row.FulfilledCount;
        if (!total) return '—';
        var pct = Math.round(done / total * 100);
        var cls = pct === 100 ? 'bg-success' : pct > 0 ? 'bg-warning' : 'bg-danger';
        return '<div style="min-width:80px"><div class="progress" style="height:6px;margin-bottom:3px;">' +
               '<div class="progress-bar ' + cls + '" style="width:' + pct + '%"></div></div>' +
               '<small>' + done + '/' + total + ' tétel</small></div>';
    }
    function fmtQty(n)   { return n.toLocaleString('hu-HU') + ' db'; }
    function fmtPrice(n) { return n > 0 ? Math.round(n).toLocaleString('hu-HU') + ' Ft' : '—'; }
    function unfulfilledCell(n) {
        var cls = n > 100 ? 'demand-unfulfilled-high' : n > 20 ? 'demand-unfulfilled-mid' : 'demand-unfulfilled-ok';
        return '<span class="' + cls + '">' + fmtQty(n) + '</span>';
    }

    // Urgency: not fully fulfilled + DateOfReceipt within 4 days
    function isUrgentRow(row) {
        if (row.Status === 30) return false;
        if (row.ItemCount > 0 && row.FulfilledCount >= row.ItemCount) return false;
        if (!row.DateOfReceipt) return false;
        var m = row.DateOfReceipt.match(/(\d{4})\.(\d{2})\.(\d{2})/);
        if (!m) return false;
        var delivery = new Date(+m[1], +m[2]-1, +m[3]);
        var today    = new Date(); today.setHours(0,0,0,0);
        var diff     = Math.ceil((delivery - today) / 86400000);
        return diff >= 0 && diff <= 4;
    }

    // ── Preorder list grid ──────────────────────────────────────────────────
    var poTable = $('#po-grid').DataTable({
        serverSide: true, processing: true, pageLength: 25,
        lengthMenu: [[25,50,100],[25,50,100]], order: [[3,'desc']],
        language: { processing:'Betöltés...', search:'Keresés:', lengthMenu:'_MENU_ sor/oldal',
                    info:'_START_–_END_ / _TOTAL_ előrendelés', infoEmpty:'0 előrendelés',
                    infoFiltered:'(szűrve _MAX_-ból)', emptyTable:'Nincs előrendelés', zeroRecords:'Nincs találat',
                    paginate:{first:'««',previous:'«',next:'»',last:'»»'} },
        ajax: { url:'/Admin/Preorders/PreorderList', type:'POST',
                data: function(d){ d.__RequestVerificationToken=_token; d.statusFilter=activeStatus; } },
        createdRow: function(row, data) {
            if (isUrgentRow(data)) $(row).addClass('po-urgent-row');
        },
        columns: [
            { data:'PreorderId',   name:'PreorderId',   render:function(d){ return '<strong>#'+d+'</strong>'; } },
            { data:'CustomerName', name:'CustomerName', render:function(d,t,row){ return '<div>'+d+'</div><small class="text-muted">'+row.CustomerEmail+'</small>'; } },
            { data:'DateOfReceipt',name:'DateOfReceipt',render:function(d,t,row){
                var icon = '<i class="fas fa-calendar-day text-muted mr-1"></i>';
                var urgent = isUrgentRow(row) ? '<span class="po-urgent-badge">⚠ Azonnali figyelmet igényel</span>' : '';
                return icon + d + urgent;
            } },
            { data:'CreatedOnUtc', name:'CreatedOnUtc', render:function(d){ return '<small>'+d+'</small>'; } },
            { data:'Status',       name:'Status', orderable:false, render:function(d,t,row){ return statusBadge(row); } },
            { data:'ItemCount',    orderable:false, className:'text-center', render:function(d,t,row){ return itemProgress(row); } },
            { data:'PreorderId',   orderable:false, searchable:false, className:'text-center', width:'60px',
              render:function(d){ return '<a href="/Admin/Preorders/Detail/'+d+'" class="btn btn-xs btn-default" title="Részletek"><i class="fas fa-eye"></i></a>'; } }
        ]
    });
    $(document).on('click','.po-filter',function(){
        $('.po-filter').removeClass('active'); $(this).addClass('active');
        activeStatus = $(this).data('status').toString(); poTable.ajax.reload();
    });

    // ── Demand grid ─────────────────────────────────────────────────────────
    var demandTable = $('#demand-grid').DataTable({
        serverSide:true, processing:true, pageLength:50,
        lengthMenu:[[25,50,100,250],[25,50,100,250]], order:[[4,'desc']],
        language:{ processing:'Betöltés...', search:'Keresés:', lengthMenu:'_MENU_ sor/oldal',
                   info:'_START_–_END_ / _TOTAL_ termék', infoEmpty:'Nincs adat',
                   infoFiltered:'(szűrve _MAX_-ból)', emptyTable:'Nincs előrendelési igény', zeroRecords:'Nincs találat',
                   paginate:{first:'««',previous:'«',next:'»',last:'»»'} },
        ajax:{ url:'/Admin/Preorders/DemandList', type:'POST',
               data:function(d){ d.__RequestVerificationToken=_token; d.openOnly=demandOpenOnly?'true':'false'; },
               dataSrc:function(json){
                   var n=(json.data||[]).filter(function(r){return r.TotalUnfulfilled>0;}).length;
                   n>0?$('#demandBadge').text(n).show():$('#demandBadge').hide();
                   return json.data;
               } },
        columns:[
            { data:'ProductName', name:'ProductName',
              render:function(d,t,row){ var b=row.IsMeasurable?' <span class="badge badge-light" title="Súlymérést igényel">⚖️</span>':'';
                  return '<a href="/Admin/Product/Edit/'+row.ProductId+'" target="_blank">'+d+'</a>'+b; } },
            { data:'Sku',             orderable:false, render:function(d){ return d?'<code>'+d+'</code>':''; } },
            { data:'TotalRequested',  orderable:false, className:'text-center', render:function(d){ return fmtQty(d); } },
            { data:'TotalFulfilled',  orderable:false, className:'text-center',
              render:function(d,t,row){ var pct=row.TotalRequested>0?Math.round(d/row.TotalRequested*100):0;
                  var cls=pct===100?'bg-success':pct>0?'bg-warning':'bg-secondary';
                  return '<div>'+fmtQty(d)+'</div><div class="progress mt-1" style="height:4px;"><div class="progress-bar '+cls+'" style="width:'+pct+'%"></div></div>'; } },
            { data:'TotalUnfulfilled',orderable:false, className:'text-center', render:function(d){ return unfulfilledCell(d); } },
            { data:'PreorderCount',   orderable:false, className:'text-center', render:function(d){ return '<span class="badge badge-secondary">'+d+'</span>'; } },
            { data:'AvgUnitPrice',    orderable:false, className:'text-right',  render:function(d){ return fmtPrice(d); } }
        ]
    });
    var demandLoaded = false;
    $('#tab-demand-link').on('shown.bs.tab',function(){
        if (!demandLoaded){ demandTable.ajax.reload(); demandLoaded=true; } else demandTable.ajax.reload();
    });
    $(document).on('click','.demand-scope',function(){
        $('.demand-scope').removeClass('active'); $(this).addClass('active');
        demandOpenOnly = $(this).data('open')===true;
        $('#demandScopeLabel').text(demandOpenOnly
            ?'Termékek amelyekre még van teljesítetlen igény'
            :'Összesített kereslet az összes előrendelésből');
        demandTable.ajax.reload();
    });

    // ── Create Order / Preorder Modal (mode-aware) ──────────────────────────
    var cpProducts = [];
    var cpMode     = null;
    var CP_CUTOFF  = 4;     // ≤4 days → order,  >4 days → preorder

    function cpComputeMode(s) {
        if (!s) return null;
        var d=new Date(s), t=new Date(); t.setHours(0,0,0,0);
        return Math.ceil((d-t)/86400000) <= CP_CUTOFF ? 'order' : 'preorder';
    }

    function cpApplyMode(mode) {
        cpMode = mode;
        var isOrder = mode==='order';
        $('.modal-header','#create-preorder-window').css('background', isOrder ? '#155724' : '#2d7a3a');
        if (isOrder) {
            $('#cp-mode-banner').attr('class','cp-mode-order')
                .html('<div class="cp-mode-icon">🛒</div><div>' +
                      '<span class="cp-mode-title">RENDELÉS</span>' +
                      '<span class="cp-mode-desc">4 napon belül — csak raktáron lévő termékek. Rendelés azonnal létrejön.</span></div>').show();
            $('#cp-product-search-hint').text('Csak az elérhető készlettel rendelkező termékek');
            $('#cp-submit-btn').html('<i class="fas fa-shopping-cart"></i> Rendelés létrehozása')
                .removeClass('btn-primary').addClass('btn-success');
        } else {
            $('#cp-mode-banner').attr('class','cp-mode-preorder')
                .html('<div class="cp-mode-icon">📋</div><div>' +
                      '<span class="cp-mode-title">ELŐRENDELÉS</span>' +
                      '<span class="cp-mode-desc">Több mint 4 nap — előrendelési ablak termékei. A szállítmány után automatikusan rendeléssé alakul.</span></div>').show();
            $('#cp-product-search-hint').text('Előrendelési ablakban elérhető termékek');
            $('#cp-submit-btn').html('<i class="fas fa-calendar-plus"></i> Előrendelés rögzítése')
                .removeClass('btn-success').addClass('btn-primary');
        }
        if ($('#cp-customer-id').val()) $('#cp-product-search-section').slideDown();
    }

    $('#cp-delivery').on('change input', function () {
        var nm = cpComputeMode($(this).val());
        if (nm !== cpMode) {
            if (cpProducts.length) { cpProducts=[]; renderCpProducts(); $('#cp-product-search-section').hide(); }
            if (nm) cpApplyMode(nm); else { $('#cp-mode-banner').hide(); cpMode=null; }
        }
    });

    $('#cp-customer-search').autocomplete({
        delay:400, minLength:2,
        source:'/Admin/CustomOrder/CustomerSearchAutoComplete',
        select:function(e,ui){
            $('#cp-customer-id').val(ui.item.value);
            $('#cp-customer-name').html('<strong>'+ui.item.label+'</strong>');
            $('#cp-customer-search').val('');
            $('#cp-customer-error').hide();
            if (cpMode) $('#cp-product-search-section').slideDown();
            return false;
        }
    });

    $('#cp-product-search').autocomplete({
        delay:400, minLength:2,
        source:function(req,resp){
            if (!cpMode){ resp([]); return; }
            $.get(cpMode==='order'
                ?'/Admin/CustomOrder/ProductSearchAutoComplete'
                :'/Admin/CustomOrder/PreorderProductSearchAutoComplete',
                {term:req.term}, resp);
        },
        select:function(e,ui){ addCpProduct(ui.item); $('#cp-product-search').val(''); return false; }
    });

    function addCpProduct(item) {
        if (cpProducts.find(function(p){ return p.id===item.value; })) return;
        cpProducts.push({
            id:          item.value,
            name:        item.label,
            sku:         item.sku         || '',
            quantity:    1,
            price:       item.price       || 0,
            maxQuantity: item.availableQuantity || 9999
        });
        renderCpProducts();
    }

    function renderCpProducts() {
        var $b=$('#cp-products-body').empty();
        if (!cpProducts.length){
            $('#cp-products-section').hide();
            $('#cp-submit-btn').prop('disabled', true);
            return;
        }
        $('#cp-products-section').show();
        $('#cp-submit-btn').prop('disabled', false);
        cpProducts.forEach(function(p,i){
            var maxAttr = p.maxQuantity < 9999 ? ' max="'+p.maxQuantity+'"' : '';
            var maxHint = p.maxQuantity < 9999 ? '<br><small class="text-muted">max: '+p.maxQuantity+' db</small>' : '';
            $b.append('<tr>' +
                '<td><strong>'+p.name+'</strong>'+(p.sku?'<br><small class="text-muted">'+p.sku+'</small>':'')+'</td>'+
                '<td><input type="number" class="form-control form-control-sm" min="1"'+maxAttr+' value="'+p.quantity+'" data-idx="'+i+'" onchange="window._cpUpdateQty(this)">'+maxHint+'</td>'+
                '<td><input type="text" class="form-control form-control-sm" value="'+p.price+'" data-idx="'+i+'" onchange="window._cpUpdatePrice(this)"></td>'+
                '<td class="text-center"><button type="button" class="btn btn-danger btn-xs" onclick="window._cpRemove('+i+')"><i class="fas fa-trash"></i></button></td>'+
                '</tr>');
        });
        $('#cp-products-json').val(JSON.stringify(cpProducts));
    }
    window._cpUpdateQty = function(el) {
        var idx=+el.dataset.idx, val=+el.value, max=cpProducts[idx].maxQuantity||9999;
        if (val>max){val=max;el.value=max;} if (val<1){val=1;el.value=1;}
        cpProducts[idx].quantity=val; $('#cp-products-json').val(JSON.stringify(cpProducts));
    };
    window._cpUpdatePrice = function(el){ cpProducts[+el.dataset.idx].price=+el.value; $('#cp-products-json').val(JSON.stringify(cpProducts)); };
    window._cpRemove      = function(i) { cpProducts.splice(i,1); renderCpProducts(); };

    $('#cp-form').on('submit', function(e){
        e.preventDefault();
        if (!cpMode)                     { alert('Válassz szállítási időpontot!'); return; }
        if (!$('#cp-customer-id').val()) { $('#cp-customer-error').show(); return; }
        if (!cpProducts.length)          { alert('Legalább egy terméket adj hozzá!'); return; }
        var $btn=$('#cp-submit-btn').prop('disabled',true).html('<i class="fas fa-spinner fa-spin"></i> Mentés...');
        if (cpMode==='order') {
            $.post('/Admin/CustomOrder/AdminQuickCreateOrder',{
                customerId:       $('#cp-customer-id').val(),
                orderProductsJson:$('#cp-products-json').val(),
                deliveryDateTime: $('#cp-delivery').val(),
                __RequestVerificationToken:_token
            },function(r){
                if (r&&(r.success||r.orderId)){
                    $('#create-preorder-window').modal('hide');
                    alert('Rendelés létrehozva: #'+(r.orderId||r.id||''));
                } else {
                    alert('Hiba: '+((r&&(r.error||r.message))||'Ismeretlen hiba'));
                    $btn.prop('disabled',false).html('<i class="fas fa-shopping-cart"></i> Rendelés létrehozása');
                }
            });
        } else {
            $.ajax({url:'/Admin/Preorders/CreatePreorder', type:'POST',
                data:{ customerId:$('#cp-customer-id').val(), deliveryDateTime:$('#cp-delivery').val(),
                       customerNote:$('#cp-note').val().trim(), productsJson:$('#cp-products-json').val(),
                       __RequestVerificationToken:_token },
                success:function(r){
                    if (r.success){
                        $('#create-preorder-window').modal('hide');
                        poTable.ajax.reload(); demandTable.ajax.reload();
                        alert('Előrendelés rögzítve (#'+r.preorderId+').'+
                              (r.orderId?' Rendelés is készült: #'+r.orderId:''));
                    } else {
                        alert('Hiba: '+(r.error||'Ismeretlen hiba'));
                        $btn.prop('disabled',false).html('<i class="fas fa-calendar-plus"></i> Előrendelés rögzítése');
                    }
                },
                error:function(){ $btn.prop('disabled',false).html('<i class="fas fa-calendar-plus"></i> Előrendelés rögzítése'); }
            });
        }
    });

    $('#create-preorder-window').on('hidden.bs.modal', function(){
        $('#cp-customer-search').val(''); $('#cp-customer-id').val(''); $('#cp-customer-name').html('');
        $('#cp-customer-error').hide(); $('#cp-mode-banner').hide();
        $('#cp-product-search-section,#cp-products-section').hide();
        $('#cp-delivery,#cp-note').val('');
        cpProducts=[]; cpMode=null; renderCpProducts();
        $('.modal-header','#create-preorder-window').css('background','#2d7a3a');
        $('#cp-submit-btn').html('<i class="fas fa-save"></i> Mentés')
            .removeClass('btn-success btn-primary').addClass('btn-secondary').prop('disabled',false);
    });
});
</script>

@* ── Modal ─────────────────────────────────────────────────────────────── *@
<div id="create-preorder-window" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background:#2d7a3a;color:#fff;">
                <h4 class="modal-title"><i class="fas fa-receipt"></i> Rendelés / Előrendelés rögzítése</h4>
                <button type="button" class="close" data-dismiss="modal" style="color:#fff;"><span>&times;</span></button>
            </div>
            <form id="cp-form">
                <div class="modal-body">

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label">Ügyfél</label>
                        <div class="col-md-9">
                            <input type="text" id="cp-customer-search" autocomplete="off" class="form-control"
                                   placeholder="Ügyfél neve, e-mail vagy cég neve..." />
                            <span id="cp-customer-name" class="mt-1 d-block text-success"></span>
                            <input type="hidden" id="cp-customer-id" />
                            <span class="field-validation-error" id="cp-customer-error" style="display:none;">Kérjük válasszon ügyfelet</span>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label">Szállítási időpont</label>
                        <div class="col-md-9">
                            <input type="datetime-local" id="cp-delivery" class="form-control" />
                            <small class="text-muted">
                                ≤4 nap → <strong>Rendelés</strong> &nbsp;|&nbsp; &gt;4 nap → <strong>Előrendelés</strong>
                            </small>
                        </div>
                    </div>

                    <div id="cp-mode-banner" style="display:none;"></div>

                    <div class="form-group row" id="cp-product-search-section" style="display:none;">
                        <label class="col-md-3 col-form-label">Termék hozzáadása</label>
                        <div class="col-md-9">
                            <input type="text" id="cp-product-search" autocomplete="off" class="form-control"
                                   placeholder="Termék neve vagy SKU..." />
                            <small class="text-muted" id="cp-product-search-hint"></small>
                        </div>
                    </div>

                    <div id="cp-products-section" style="display:none;">
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                    <th>Termék</th>
                                    <th style="width:120px">Mennyiség</th>
                                    <th style="width:120px">Egységár</th>
                                    <th style="width:40px"></th>
                                </tr>
                            </thead>
                            <tbody id="cp-products-body"></tbody>
                        </table>
                        <input type="hidden" id="cp-products-json" />
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label">Megjegyzés <small class="text-muted">(nem köt.)</small></label>
                        <div class="col-md-9">
                            <textarea id="cp-note" class="form-control" rows="2" maxlength="1000"
                                      placeholder="Esetleges megjegyzés..."></textarea>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Mégse</button>
                    <button type="submit" id="cp-submit-btn" class="btn btn-secondary" disabled>
                        <i class="fas fa-save"></i> Mentés
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>