@extends('panel.master')
@section('content')
<div class="content-wrapper">
    <section class="content">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">اسکن ورود کالا</h3>
                    </div>
                    <div class="card-body">
                        <form id="scanForm">
                            @csrf
                              <input type="hidden" name="Idcontainerid" id="Idcontainerid" value="{{ request('Idcontainerid', '') }}">
                            <div class="form-group">
                                <label for="targetShelf">قفسه مقصد</label>
                                <input type="text" class="form-control" id="targetShelf" required autofocus>
                            </div>
                            
                            <div class="form-group">
                                <label for="barcodeInput">اسکن بارکد کالا</label>
                                <input type="text" class="form-control" id="barcodeInput" disabled>
                            </div>
                            
                            <div id="messageArea" class="alert" style="display:none;"></div>
                        </form>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">لیست کالاهای اسکن شده</h3>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ردیف</th>
                                    <th>کد کالا</th>
                                    <th>نام کالا</th>
                                    <th>تعداد کارتن</th>
                                    <th>عملیات</th>
                                </tr>
                            </thead>
                            <tbody id="itemsTable">
                                <!-- آیتم‌ها اینجا نمایش داده می‌شوند -->
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                        <button id="submitBtn" class="btn btn-success btn-block">
                            <i class="fas fa-save"></i> ثبت نهایی
                        </button>
                    </div>
                </div>
                <div class="card mt-4">
    <div class="card-header">
        <h3 class="card-title">20 اسکن آخر</h3>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="thead-light">
                    <tr>
                        <th>ردیف</th>
                        <th>تاریخ اسکن</th>
                        <th>کد کالا</th>
                        <th>نام کالا</th>
                        <th>تعداد کارتن</th>
                        <th>قفسه مقصد</th>
                        <th>اپراتور</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($recentScans as $index => $scan)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ jdate($scan->created_at)->format('Y/m/d H:i') }}</td>
                        <td>{{ $scan->product_code }}</td>
                        <td>{{ $scan->product_name }}</td>
                        <td>{{ number_format($scan->quantity) }}</td>
                        <td>{{ $scan->shelf_code }}</td>
                        <td>
                            @if($scan->operator_id)
                                {{ \App\Models\User::find($scan->operator_id)->LastNameKarbars }}
                            @else
                            سیستم
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
            </div>
        </div>
    </section>
</div>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@section('extrajs')
<script src="{{ asset('p/js/sweetalert2@11.js') }}"></script>
<script>
$(document).ready(function() {
    const targetShelf = $('#targetShelf');
    const barcodeInput = $('#barcodeInput');
    const itemsTable = $('#itemsTable');
    const submitBtn = $('#submitBtn');
     const Idcontainerid = $('#Idcontainerid');
    const messageArea = $('#messageArea');
    
    let scannedItems = [];
    let targetShelfCode = '';
    let isShelfScanned = false;

    // مدیریت اسکن قفسه مقصد
    targetShelf.on('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            targetShelfCode = $(this).val().trim();
            
            if (targetShelfCode.length > 0) {
                verifyShelf(targetShelfCode);
            } else {
                showMessage('لطفاً کد قفسه را وارد کنید', 'error');
            }
        }
    });

    // تایید قفسه مقصد
   // اصلاح تابع verifyShelf در اسکریپت صفحه
   $('#targetShelf').on('keypress', function(e) {
    if (e.which === 13) {
        e.preventDefault();
        console.log('Enter pressed on shelf input'); // برای تست
        verifyShelf($(this).val().trim());
    }
});
 function verifyShelf(shelfCode) {
        console.log('verifyShelf called with:', shelfCode); // لاگ ورودی تابع
        
        $.ajax({
            url: '/scan/verify-shelf',
            type: 'POST',
            dataType: 'json',
            data: {
                shelf_code: shelfCode,
                _token: '{{ csrf_token() }}'
            },
            beforeSend: function() {
                console.log('AJAX request sending...');
                targetShelf.prop('disabled', true);
                $('#shelfSpinner').remove();
                targetShelf.after('<div class="spinner-border text-primary ml-2" id="shelfSpinner"></div>');
            },
            success: function(response) {
                console.log('AJAX success:', response);
                $('#shelfSpinner').remove();
                
                if (response.valid) {
                    isShelfScanned = true;
                    targetShelf.prop('disabled', true).addClass('is-valid');
                    barcodeInput.prop('disabled', false).focus();
                    showMessage('قفسه با موفقیت تایید شد', 'success');
                } else {
                    targetShelf.prop('disabled', false).focus().addClass('is-invalid');
                    showMessage(response.message || 'قفسه نامعتبر است', 'error');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX error:', status, error);
                $('#shelfSpinner').remove();
                targetShelf.prop('disabled', false).focus();
                showMessage('خطا در ارتباط با سرور', 'error');
            }
        });
    }


    // مدیریت اسکن بارکد کالا
    barcodeInput.on('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            const barcode = $(this).val().trim();
            
            if (!isShelfScanned) {
                showMessage('لطفاً ابتدا قفسه مقصد را اسکن کنید', 'error');
                return;
            }
            
            if (barcode.length > 0) {
                checkProduct(barcode, targetShelfCode);
                $(this).val('');
            }
        }
    });

    // بررسی کالا در جدول wms_importcontainers
    function checkProduct(barcode, shelfCode) {
        $.ajax({
            url: '/scan/check-product',
            method: 'POST',
            data: {
                product_code: barcode,
                shelf_code: shelfCode,
                Idcontainerid: Idcontainerid.val(),
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.exists) {
                    addProductToTable(response.product);
                    showMessage('1 کارتن از کالا اضافه شد', 'success');
                } else {
                    showMessage('این کالا در کانتینر موجود نیست: ' + barcode, 'error');
                }
            },
            error: function() {
                showMessage('خطا در بررسی کالا', 'error');
            }
        });
    }

    // اضافه کردن کالا به جدول
    function addProductToTable(product) {
        // بررسی آیا کالا قبلاً اضافه شده
        const existingIndex = scannedItems.findIndex(item => item.code === product.CodeKala);
        
        if (existingIndex >= 0) {
            scannedItems[existingIndex].quantity += 1;
        } else {
            scannedItems.push({
                id: Date.now(), // شناسه منحصر به فرد
                code: product.CodeKala,
                name: product.NameKala || 'نامشخص',
                quantity: 1
            });
        }
        
        renderTable();
    }

    // نمایش جدول با دکمه حذف
    function renderTable() {
        itemsTable.empty();
        
        scannedItems.forEach((item, index) => {
            itemsTable.append(`
                <tr data-id="${item.id}">
                    <td>${index + 1}</td>
                    <td>${item.code}</td>
                    <td>${item.name}</td>
                    <td>${item.quantity}</td>
                    <td>
                        <button class="btn btn-sm btn-danger delete-item" title="حذف">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `);
        });

        // اضافه کردن رویداد حذف
        $('.delete-item').click(function() {
            const itemId = $(this).closest('tr').data('id');
            deleteItem(itemId);
        });
    }

    // حذف آیتم
    function deleteItem(itemId) {
        Swal.fire({
            title: 'آیا مطمئن هستید؟',
            text: 'این کارتن از لیست حذف خواهد شد',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'بله, حذف کن',
            cancelButtonText: 'انصراف',
            confirmButtonColor: '#d33'
        }).then((result) => {
            if (result.isConfirmed) {
                scannedItems = scannedItems.filter(item => item.id !== itemId);
                renderTable();
                Swal.fire('حذف شد!', 'کارتن مورد نظر حذف شد.', 'success');
            }
        });
    }

    // ثبت نهایی
    submitBtn.on('click', function() {
        if (scannedItems.length === 0) {
            showMessage('هیچ کالایی برای ثبت وجود ندارد', 'error');
            return;
        }

        Swal.fire({
            title: 'تایید نهایی',
            text: `آیا از ثبت ${scannedItems.reduce((sum, item) => sum + item.quantity, 0)} کارتن اطمینان دارید؟`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'بله, ثبت کن',
            cancelButtonText: 'انصراف'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/scan/save-scan',
                    method: 'POST',
                    data: {
                        shelf_code: targetShelfCode,
                        items: scannedItems,
                         Idcontainerid: Idcontainerid.val(),
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire('موفق!', 'اطلاعات با موفقیت ذخیره شد', 'success');
                            scannedItems = [];
                            renderTable();
                            targetShelf.val('').prop('disabled', false).focus();
                            barcodeInput.val('').prop('disabled', true);
                            isShelfScanned = false;
                        } else {
                            Swal.fire('خطا!', response.message || 'خطا در ذخیره اطلاعات', 'error');
                        }
                    },
                    error: function() {
                        Swal.fire('خطا!', 'خطا در ارتباط با سرور', 'error');
                    }
                });
            }
        });
    });

    // نمایش پیام
    function showMessage(message, type) {
        messageArea.removeClass('alert-success alert-danger')
                   .addClass(`alert-${type === 'success' ? 'success' : 'danger'}`)
                   .text(message)
                   .show()
                   .delay(3000)
                   .fadeOut();
    }
});
</script>
@endsection

@section('extraCss')
<style>
    #messageArea {
        margin-top: 15px;
    }
    .alert-success {
        background-color: #d4edda;
        color: #155724;
        border-color: #c3e6cb;
    }
    .alert-danger {
        background-color: #f8d7da;
        color: #721c24;
        border-color: #f5c6cb;
    }
    table {
        font-size: 14px;
    }
    .delete-item {
        padding: 0.25rem 0.5rem;
    }
</style>
@endsection