@extends('layouts.app')
@section('title', __('lang_v1.list_shelf_number'))
@section('content')
<section class="content">
    <div class="row">
        <div class="col-lg-12">
            @component('components.widget', ['class' => 'box-primary', 'title' => 'All Shelf Number'])
            <table class="table table-bordered table-striped hide-footer ajax_view" id="shelfnumbertable" style="width: 100%;">
                <thead>
                    <tr>
                        <th style="width: 20px" ;>@lang('messages.action')</th>
                        <th>@lang('product.asin')</th>
                        <th>@lang('product.isbn13')</th>
                        <th>@lang('product.item_condition')</th>
                        <th>@lang('sale.product')</th>                
                        <th>@lang('lang_v1.shelf_number')</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            @endcomponent
        </div>
    </div>
</section>
@endsection
@section('javascript')
<script>
const baseUrl = window.location.origin;
var table;
$(document).ready(function() {

    const textWrap = d => `<section style="font-size:1.4vh;">${d ?? 'N/A'}</section>`;

    table = $('#shelfnumbertable').DataTable({
        processing: true,
        serverSide: true,
        paging: true,
        pageLength: 15,
        lengthMenu: [15, 30, 50, 100],
        searchDelay: 800,   // <--- ADD THIS (500–800ms recommended)
        autoWidth: false,
        language: { info: "Showing _START_ to _END_ of _TOTAL_ entries" },

        ajax: {
            url: "/amazon/shelf-number-list",
            data: d => {
                d.search_type = $('#datatable_search_type').val();
            }
        },

        columns: [
            {
                data: null,
                orderable: false,
                searchable: false,
                width: '20px',
                render: data => {
                    const title = data.Title.replace(/'/g, "\\'");
                    return `
                        <div class="btn-group">
                            <button type="button" class="btn btn-info dropdown-toggle btn-xs" data-toggle="dropdown">
                                <i class="fa fa-cog"></i>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-left">
                                <li>
                                    <a href="javascript:void(0)"
                                       onclick="addToShelf(event, ${data.id}, '${data.store}', '${title}')">
                                       <i class="fa fa-archive"></i> Edit Shelf
                                    </a>
                                </li>
                            </ul>
                        </div>`;
                }
            },
            { data: 'ASIN',           name: 'ASIN',           render: textWrap },
            { data: 'isbn13',         name: 'isbn13',         render: textWrap },
            { data: 'ItemCondition',  name: 'ItemCondition',  render: textWrap },
            { data: 'Title',          name: 'Title',          render: textWrap },
            { data: 'shelf_number',   name: 'shelf_number',   render: textWrap, 
                render: data => {
                    const result = data
                        .replace(/^\[/, '')      // remove starting [
                        .replace(/\]$/, '')      // remove ending ]
                        .replace(/&quot;/g, ''); // remove "&quot;"

                    return result;
                }
             },
        ],

        order: [[1, 'asc']],

        initComplete: function() {
            const $filter = $('#shelfnumbertable_filter');
            const $input = $filter.find('input');

            const $wrapper = $('<div class="custom-search-wrapper" style="display:flex;align-items:center;gap:5px;width:100%;"></div>');
            const $dropdown = $(`
                <select id="datatable_search_type" class="filtervh" style="height:28px;">
                    <option value="isbn13">ISBN13</option>
                    <option value="asin">ASIN</option>
                    <option value="title">Product Name</option>
                    <option value="shelf_number">Shelf Number</option>
                </select>
            `);

            $input.before($wrapper);
            $wrapper.append($dropdown).append($input);

            $input.css({ flex: '1 1 75%', 'box-sizing': 'border-box' });
            $dropdown.css({ flex: '0 0 auto' });
        },
    });


    $('#shelfnumbertable_filter input')
        .unbind()
        .bind('keypress', function(e) {
            if (e.which === 13) {
                table.search(this.value).draw();
            }
        });
});

function addToShelf(event, id, store, title) {
    event.preventDefault();
    
    title = decodeURIComponent(title);
    $.ajax({
        url: baseUrl + '/amazon/shelf/modal/' + id + '/' + store,
        data: {title: title},
        dataType: 'html',
        success: function(result) {
            // console.log(result);
            $('.view_modal')
                .html(result)
                .modal('show');
            $('#refresh-competitive-price').attr('disabled', true);
        },
    });
}

function saveShelf(e) {
    e.preventDefault();
    var sellerId = $('#sellerId').val()
    var id = $('#id').val()
    var shelf_numbers = $("input[name='shelf_number[]']")
    .map(function () { return $(this).val(); })
    .get();
    $.ajax({
        method: 'GET',
        url: baseUrl + '/amazon/updateShelf/' + sellerId + '/' + id,
        data: { shelf_number: shelf_numbers }, //
        dataType: 'json',
        beforeSend: function() {
            $('#pos-loader').css('display', 'inline-flex')
        },
        success: function(result) {
            $('#pos-loader').css('display', 'none')
            $('.view_modal').modal('hide');
            if (result.error) {
                swal({
                    title: 'Information',
                    text: result.error,
                    icon: 'info',
                    // buttons: false,
                })
            } else {
                swal({
                    title: 'Information',
                    text: result.msg,
                    icon: 'success',
                    // buttons: false,
                })
                
                table.ajax.reload();            
            }
        },
    }).fail(function(xhr, status, q) {
        $('.view_modal').modal('hide');
        $('#pos-loader').css('display', 'none')
        // alert(xhr.responseText)            
        swal({
            title: 'Information',
            text: xhr.responseText,
            icon: 'info',
            // buttons: false,
        })
    });
}

function addShelfRow(e) {
    e.preventDefault()
    $('#form-update-listing-qty').append(`
        <div class="col-lg-12">
            <div class="form-group">
                <label for="">Shelf Number</label>
                <input type="text" class="form-control" name="shelf_number[]" value="" style="width: 90% !important">
                <button type="button" class="btn btn-default bg-white btn-flat btn-modal" title="Remove Shelf" onclick="removeShelfRow(event, this)"><i class="fa fa-times-circle text-danger fa-lg"></i></button>
            </div>
        </div>
    `);
}

function removeShelfRow(e, el) {
    $(el).closest('.col-lg-12').remove();
}
</script>

@endsection