@{
    ViewBag.PageTitle = "Előrendelés — termékelérhetőség";
    NopHtml.SetActiveMenuItemSystemName("PreorderAvailability");
    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-check" style="color:#2d7a3a;"></i>
        Előrendelés — termékelérhetőség
    </h1>
</div>

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

        <!-- ── Tabs ─────────────────────────────────────────────────────── -->
        <ul class="nav nav-tabs mb-3" id="paTabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="tab-all-link" data-toggle="tab" href="#tab-all" role="tab">
                    <i class="fas fa-list"></i> Összes termék
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="tab-today-link" data-toggle="tab" href="#tab-today" role="tab">
                    <i class="fas fa-calendar-day"></i> Elérhető ma
                    <span id="todayBadge" class="badge badge-success ml-1" style="display:none;"></span>
                </a>
            </li>
        </ul>

        <div class="tab-content">

            <!-- ── TAB 1: All products ──────────────────────────────────── -->
            <div class="tab-pane fade show active" id="tab-all" role="tabpanel">
                <div class="card card-default">
                    <div class="card-header">
                        <div class="d-flex align-items-center gap-2" style="gap:10px;">
                            <span class="text-muted" style="font-size:13px;">
                                Kattints a dátum cellákra a szerkesztéshez.
                                Törléshez hagyd üresen és nyomj Entert.
                            </span>
                            <button id="btnSaveAll" class="btn btn-sm btn-success ml-auto" style="display:none;">
                                <i class="fas fa-save"></i> Összes módosítás mentése
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <table id="pa-grid" class="table table-bordered table-hover table-sm m-0" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Termék neve</th>
                                    <th width="100">SKU</th>
                                    <th width="160" title="Kattints a szerkesztéshez">Elérhetőség kezdete ✏️</th>
                                    <th width="160" title="Kattints a szerkesztéshez">Elérhetőség vége ✏️</th>
                                    <th width="110" class="text-center">Ma elérhető?</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>

            <!-- ── TAB 2: Available today ───────────────────────────────── -->
            <div class="tab-pane fade" id="tab-today" role="tabpanel">
                <div class="card card-default">
                    <div class="card-header">
                        <span class="text-muted" style="font-size:13px;">
                            Termékek, amelyek ma meg tudják rendelni az ügyfelek előrendelésként.
                        </span>
                    </div>
                    <div class="card-body p-0">
                        <table id="today-grid" class="table table-bordered table-hover table-sm m-0" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Termék neve</th>
                                    <th width="100">SKU</th>
                                    <th width="160">Elérhetőség kezdete</th>
                                    <th width="160">Elérhetőség vége</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>

        </div><!-- /.tab-content -->
    </div>
</section>

<style>
/* ── Editable date cells ──────────────────────────────────────── */
#pa-grid tbody td.pa-date {
    cursor: pointer;
    min-width: 130px;
}
#pa-grid tbody td.pa-date:hover {
    background-color: #fff8e1;
}
#pa-grid tbody td.pa-date input[type="date"] {
    width: 135px;
    font-size: 13px;
    padding: 2px 4px;
    border: 1px solid #80bdff;
    border-radius: 3px;
    color: #333;
}
.pa-available-yes { color: #2d7a3a; font-weight: 600; }
.pa-available-no  { color: #999; }
.pa-date-set      { color: #1a3c22; }
.pa-date-empty    { color: #bbb; font-style: italic; }
</style>

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

    function fmtDate(val) {
        if (!val) return '<span class="pa-date-empty">—</span>';
        // "2026-04-21" → "2026. 04. 21."
        var p = val.split('-');
        return '<span class="pa-date-set">' + p[0] + '. ' + p[1] + '. ' + p[2] + '.</span>';
    }

    function fmtAvailable(row) {
        return row.IsAvailableToday
            ? '<span class="pa-available-yes"><i class="fas fa-check-circle"></i> Igen</span>'
            : '<span class="pa-available-no">—</span>';
    }

    // ── ALL PRODUCTS TABLE ───────────────────────────────────────────────────
    var paTable = $('#pa-grid').DataTable({
        serverSide   : true,
        processing   : true,
        pageLength   : 50,
        lengthMenu   : [[25, 50, 100, 250], [25, 50, 100, 250]],
        order        : [[0, 'asc']],
        language     : {
            processing   : 'Betöltés...',
            search       : 'Keresés:',
            lengthMenu   : '_MENU_ sor/oldal',
            info         : '_START_–_END_ / _TOTAL_ termék',
            infoEmpty    : '0 termék',
            infoFiltered : '(szűrve _MAX_-ból)',
            paginate     : { first: '««', previous: '«', next: '»', last: '»»' },
            emptyTable   : 'Nincs termék',
            zeroRecords  : 'Nincs találat'
        },
        ajax: {
            url : '/Admin/PreorderAvailability/ProductList',
            type: 'POST',
            data: function (d) { d.__RequestVerificationToken = _token; }
        },
        columns: [
            /* 0 */ { data: 'ProductName', name: 'ProductName' },
            /* 1 */ { data: 'Sku',         name: 'Sku', orderable: false,
                      render: function (d) { return d ? '<code>' + d + '</code>' : ''; } },
            /* 2 */ { data: 'WindowStart', name: 'WindowStart', className: 'pa-date', orderable: false,
                      render: function (d) { return fmtDate(d); } },
            /* 3 */ { data: 'WindowEnd',   name: 'WindowEnd',   className: 'pa-date', orderable: false,
                      render: function (d) { return fmtDate(d); } },
            /* 4 */ { data: 'IsAvailableToday', orderable: false, className: 'text-center',
                      render: function (d, t, row) { return fmtAvailable(row); } }
        ]
    });

    // ── INLINE DATE EDITING ──────────────────────────────────────────────────
    $(document).on('click', '#pa-grid tbody td.pa-date', function () {
        var $td  = $(this);
        if ($td.find('input').length) return;          // already open

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

        var colIdx   = paTable.cell($td).index().column;
        var isStart  = colIdx === 2;
        var current  = isStart ? (rowData.WindowStart || '') : (rowData.WindowEnd || '');
        var savedHtml = $td.html();

        var $inp = $('<input type="date">').val(current);
        $td.html('').append($inp);
        $inp.focus();

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

        function persist() {
            var newVal   = $inp.val().trim();   // "yyyy-MM-dd" or ""
            var oldVal   = current;

            if (newVal === oldVal) { restore(); return; }

            // Optimistically update local row data
            if (isStart) rowData.WindowStart = newVal || null;
            else         rowData.WindowEnd   = newVal || null;

            $.ajax({
                url  : '/Admin/PreorderAvailability/SaveWindow',
                type : 'POST',
                data : {
                    __RequestVerificationToken : _token,
                    productId   : rowData.ProductId,
                    windowStart : rowData.WindowStart || '',
                    windowEnd   : rowData.WindowEnd   || ''
                },
                success: function (res) {
                    if (res.success) {
                        rowData.IsAvailableToday = res.isAvailableToday;
                        paTable.row($row).data(rowData).invalidate().draw(false);
                    } else {
                        alert('Mentési hiba: ' + (res.error || 'Ismeretlen hiba'));
                        restore();
                    }
                },
                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(); }
        });
    });

    // ── AVAILABLE TODAY TABLE ────────────────────────────────────────────────
    var todayTable = $('#today-grid').DataTable({
        serverSide   : true,
        processing   : true,
        pageLength   : 50,
        order        : [[0, 'asc']],
        language     : {
            processing   : 'Betöltés...',
            search       : 'Keresés:',
            lengthMenu   : '_MENU_ sor/oldal',
            info         : '_START_–_END_ / _TOTAL_ termék',
            infoEmpty    : 'Egy termék sincs ma elérhető előrendelésre.',
            infoFiltered : '(szűrve _MAX_-ból)',
            paginate     : { first: '««', previous: '«', next: '»', last: '»»' },
            emptyTable   : 'Egy termék sincs ma elérhető előrendelésre.',
            zeroRecords  : 'Nincs találat'
        },
        ajax: {
            url : '/Admin/PreorderAvailability/AvailableTodayList',
            type: 'POST',
            data: function (d) { d.__RequestVerificationToken = _token; },
            dataSrc: function (json) {
                // Update the badge on the tab
                var count = json.recordsTotal;
                if (count > 0) {
                    $('#todayBadge').text(count).show();
                } else {
                    $('#todayBadge').hide();
                }
                return json.data;
            }
        },
        columns: [
            /* 0 */ { data: 'ProductName', name: 'ProductName' },
            /* 1 */ { data: 'Sku', orderable: false,
                      render: function (d) { return d ? '<code>' + d + '</code>' : ''; } },
            /* 2 */ { data: 'WindowStart', orderable: false,
                      render: function (d) { return fmtDate(d); } },
            /* 3 */ { data: 'WindowEnd',   orderable: false,
                      render: function (d) { return fmtDate(d); } }
        ]
    });

    // Load today table when that tab is first clicked
    var todayLoaded = false;
    $('#tab-today-link').on('shown.bs.tab', function () {
        if (!todayLoaded) { todayTable.ajax.reload(); todayLoaded = true; }
    });

    // Always reload today table when switching to it (data may have changed)
    $('#tab-today-link').on('show.bs.tab', function () {
        if (todayLoaded) todayTable.ajax.reload();
    });
});
</script>