@extends('panel.master')
@section('t')انتقال بین قفسه‌ها@stop
@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">انتقال کالا بین قفسه‌ها</h1>
                </div>
            </div>
        </div>
    </div>
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">اطلاعات انتقال</h3>
                    </div>
                    <div class="card-body">
                        <form id="transferForm">
                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="sourceShelf">قفسه مبدا</label>
                                        <input type="text" class="form-control" id="sourceShelf" name="source_shelf" required>
                                        <div class="invalid-feedback">لطفاً قفسه مبدا را وارد کنید</div>
                                    </div>
                                </div>
                                <div class="col-md-4" id="targetShelfContainer" style="display: none;">
                                    <div class="form-group">
                                        <label for="targetShelf">قفسه مقصد</label>
                                        <input type="text" class="form-control" id="targetShelf" name="target_shelf" required>
                                        <div class="invalid-feedback">لطفاً قفسه مقصد را وارد کنید</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="barcodeInput">کد کالا</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="barcodeInput" autofocus>
                                            <div class="input-group-append">
                                                <button class="btn btn-outline-secondary" type="button" id="manualEntry">
                                                    <i class="fas fa-keyboard"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="invalid-feedback" id="barcodeError"></div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">لیست کالاهای اسکن شده</h3>
                    </div>
                    <div class="card-body table-responsive p-0">
                        <div class="table-responsive">
                            <table class="table table-hover text-center">
                                <thead>
                                    <tr>
                                        <th>ردیف</th>
                                        <th>کد کالا</th>
                                        <th>نام کالا</th>
                                        <th class="d-none d-md-table-cell">تعداد در کارتن</th>
                                        <th>تعداد انتقالی</th>
                                        <th>قفسه مبدا</th>
                                        <th>قفسه مقصد</th>
                                        <th class="actions-column">عملیات</th>
                                    </tr>
                                </thead>
                                <tbody id="itemsTable">
                                    <!-- آیتم‌ها اینجا نمایش داده می‌شوند -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer text-center">
                        <button id="submitBtn" class="btn btn-success btn-lg">
                            <i class="fas fa-exchange-alt"></i> ثبت انتقال
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal ویرایش -->
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">ویرایش کالا</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="editRowId">
                        <div class="form-group">
                            <label for="editBarcode">کد کالا</label>
                            <input type="text" class="form-control" id="editBarcode" disabled>
                        </div>
                        <div class="form-group">
                            <label for="editQuantity">تعداد</label>
                            <input type="number" class="form-control" id="editQuantity" min="1">
                            <div class="invalid-feedback" id="editQuantityError"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">انصراف</button>
                        <button type="button" class="btn btn-primary" id="saveEdit">ذخیره</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@stop

@section('extrajs')
<script src="{{ asset('p/js/sweetalert2@11.js') }}"></script>

<script>
$(document).ready(function() {
    const barcodeInput = $('#barcodeInput');
    const itemsTable = $('#itemsTable');
    const submitBtn = $('#submitBtn');
    const sourceShelf = $('#sourceShelf');
    const targetShelf = $('#targetShelf');
    const targetShelfContainer = $('#targetShelfContainer');
    
    let scannedItems = [];
    let sourceShelfVerified = false;
    let targetShelfVerified = false;

    // مدیریت اسکن بارکد
    barcodeInput.on('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            processBarcode($(this).val().trim());
        }
    });

    // بررسی قفسه مبدا
    sourceShelf.on('change', function() {
        const shelfCode = $(this).val().trim();
        if (shelfCode) {
            verifyShelf(shelfCode, 'source');
        } else {
            verifyShelf('', 'source');
        }
    });

    // بررسی قفسه مقصد
    targetShelf.on('change', function() {
        const shelfCode = $(this).val().trim();
        if (shelfCode) {
            verifyShelf(shelfCode, 'target');
        }
    });

    // تایید قفسه
    function verifyShelf(shelfCode, type) {
        if (shelfCode.length > 0) {
            if (type === 'source') {
                sourceShelfVerified = true;
                sourceShelf.removeClass('is-invalid').addClass('is-valid');
                targetShelfContainer.show();
                targetShelf.focus();
            } else {
                targetShelfVerified = true;
                targetShelf.removeClass('is-invalid').addClass('is-valid');
            }
        } else {
            if (type === 'source') {
                sourceShelfVerified = false;
                sourceShelf.removeClass('is-valid').addClass('is-invalid');
                targetShelfContainer.hide();
                targetShelf.val('');
                targetShelfVerified = false;
            } else {
                targetShelfVerified = false;
                targetShelf.removeClass('is-valid').addClass('is-invalid');
            }
        }
    }

    // پردازش بارکد
    function processBarcode(barcode) {
        if (!barcode) {
            showError(barcodeInput, 'لطفاً کد کالا را وارد کنید');
            return;
        }

        if (!sourceShelfVerified) {
            showAlert('خطا', 'لطفاً ابتدا قفسه مبدا را وارد کنید', 'error');
            sourceShelf.focus();
            return;
        }

        // پاک کردن خطاهای قبلی
        clearError(barcodeInput);

        // نمایش لودینگ
        barcodeInput.prop('disabled', true);
        $('#manualEntry').prop('disabled', true);

        // دریافت اطلاعات کالا
        $.ajax({
            url: '/get-product-info',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                barcode: barcode,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                barcodeInput.prop('disabled', false);
                $('#manualEntry').prop('disabled', false);

                if (response.success) {
                    checkStockAndAddItem(barcode, response.product);
                } else {
                    showError(barcodeInput, response.message || 'کالا یافت نشد');
                    barcodeInput.focus();
                }
            },
            error: function(xhr) {
                barcodeInput.prop('disabled', false);
                $('#manualEntry').prop('disabled', false);
                
                let errorMessage = 'خطا در ارتباط با سرور';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                
                showError(barcodeInput, errorMessage);
                barcodeInput.focus();
            }
        });
    }

    // بررسی موجودی و اضافه کردن کالا
    function checkStockAndAddItem(barcode, product) {
        $.ajax({
            url: '/check-shelf-stock',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                product_code: barcode,
                shelf_code: sourceShelf.val(),
                quantity: product.carton_quantity || 1,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.available) {
                    addScannedItem({
                        id: Date.now(),
                        barcode: barcode,
                        name: product.name,
                        quantity: product.carton_quantity || 1,
                        carton_quantity: product.carton_quantity || 1,
                        source_shelf: sourceShelf.val(),
                        target_shelf: targetShelf.val()
                    });
                    barcodeInput.val('').focus();
                } else {
                    showError(barcodeInput, response.message || 'موجودی کافی نیست');
                    barcodeInput.focus();
                }
            },
            error: function(xhr) {
                let errorMessage = 'خطا در بررسی موجودی';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                
                showError(barcodeInput, errorMessage);
                barcodeInput.focus();
            }
        });
    }

    // اضافه کردن به لیست اسکن شده
    function addScannedItem(item) {
        scannedItems.push(item);
        renderTable();
    }

    // رندر جدول
    function renderTable() {
        itemsTable.empty();
        const isMobile = window.innerWidth < 768;

        scannedItems.forEach((item, index) => {
            const row = $(`
                <tr data-id="${item.id}">
                    <td>${index + 1}</td>
                    <td>${item.barcode}</td>
                    <td>${item.name}</td>
                    ${!isMobile ? `<td>${item.carton_quantity}</td>` : ''}
                    <td>${item.quantity}</td>
                    <td>${item.source_shelf}</td>
                    <td>${item.target_shelf}</td>
                    <td class="actions-cell sticky-col">
                        <div class="btn-group action-buttons">
                            <button class="btn btn-sm btn-warning edit-btn" title="ویرایش">
                                <i class="fas fa-edit"></i>
                                ${!isMobile ? '<span class="action-text">ویرایش</span>' : ''}
                            </button>
                            <button class="btn btn-sm btn-danger delete-btn" title="حذف">
                                <i class="fas fa-trash"></i>
                                ${!isMobile ? '<span class="action-text">حذف</span>' : ''}
                            </button>
                        </div>
                    </td>
                </tr>
            `);

            // اتصال رویدادها
            row.find('.edit-btn').click(() => openEditModal(item.id));
            row.find('.delete-btn').click(() => deleteItem(item.id));

            itemsTable.append(row);
        });

        // تنظیم عرض ستون‌ها برای موبایل
        if (isMobile) {
            $('.actions-cell').css('min-width', '90px');
        }
    }

    // باز کردن مودال ویرایش
    function openEditModal(itemId) {
        const item = scannedItems.find(i => i.id === itemId);
        if (item) {
            $('#editRowId').val(item.id);
            $('#editBarcode').val(item.barcode);
            $('#editQuantity').val(item.quantity);
            $('#editQuantityError').text('').parent().removeClass('has-error');
            $('#editModal').modal('show');
        }
    }

    // ذخیره ویرایش
    $('#saveEdit').on('click', function() {
        const itemId = parseInt($('#editRowId').val());
        const newQuantity = parseInt($('#editQuantity').val());
        
        if (isNaN(newQuantity) || newQuantity <= 0) {
            $('#editQuantityError').text('لطفاً تعداد معتبر وارد کنید').parent().addClass('has-error');
            return;
        }

        const itemIndex = scannedItems.findIndex(item => item.id === itemId);
        if (itemIndex !== -1) {
            // بررسی موجودی قبل از ویرایش
            $.ajax({
                url: '/check-shelf-stock',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    product_code: scannedItems[itemIndex].barcode,
                    shelf_code: scannedItems[itemIndex].source_shelf,
                    quantity: newQuantity,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.available) {
                        scannedItems[itemIndex].quantity = newQuantity;
                        renderTable();
                        $('#editModal').modal('hide');
                    } else {
                        $('#editQuantityError').text(response.message || 'موجودی کافی نیست').parent().addClass('has-error');
                    }
                },
                error: function(xhr) {
                    let errorMessage = 'خطا در بررسی موجودی';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    $('#editQuantityError').text(errorMessage).parent().addClass('has-error');
                }
            });
        }
    });

    // حذف آیتم
    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 (!sourceShelfVerified || !targetShelfVerified) {
            showAlert('خطا', 'لطفاً قفسه مبدا و مقصد را تأیید کنید', 'error');
            return;
        }

        if (scannedItems.length === 0) {
            showAlert('خطا', 'هیچ کالایی برای انتقال وجود ندارد', 'error');
            return;
        }

        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> در حال ثبت...');

        $.ajax({
            url: '/transfer-items',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                source_shelf: sourceShelf.val(),
                target_shelf: targetShelf.val(),
                items: scannedItems.map(item => ({
                    product_code: item.barcode,
                    quantity: item.quantity
                })),
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                submitBtn.prop('disabled', false).html('<i class="fas fa-exchange-alt"></i> ثبت انتقال');
                
                if (response.success) {
                    showAlert('موفق', response.message || 'انتقال کالاها با موفقیت ثبت شد', 'success');
                    scannedItems = [];
                    renderTable();
                    sourceShelf.val('').removeClass('is-valid');
                    targetShelf.val('').removeClass('is-valid');
                    targetShelfContainer.hide();
                    sourceShelfVerified = false;
                    targetShelfVerified = false;
                    sourceShelf.focus();
                } else {
                    showAlert('خطا', response.message || 'خطا در ثبت انتقال', 'error');
                }
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false).html('<i class="fas fa-exchange-alt"></i> ثبت انتقال');
                
                let errorMessage = 'خطا در ثبت انتقال';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                
                showAlert('خطا', errorMessage, 'error');
            }
        });
    });

    // نمایش اعلان
    function showAlert(title, text, icon) {
        Swal.fire({
            title: title,
            text: text,
            icon: icon,
            confirmButtonText: 'متوجه شدم'
        });     
    }

    // نمایش خطا
    function showError(element, message) {
        element.addClass('is-invalid');
        element.next('.invalid-feedback').text(message);
    }

    // پاک کردن خطا
    function clearError(element) {
        element.removeClass('is-invalid');
        element.next('.invalid-feedback').text('');
    }

    // ورود دستی
    $('#manualEntry').on('click', function() {
        const barcode = barcodeInput.val().trim();
        if (barcode) {
            processBarcode(barcode);
        }
    });

    // تغییر سایز پنجره
    $(window).on('resize', function() {
        renderTable();
    });
});
</script>
@stop

@section('extraCss')
<style>
/* استایل‌های پایه جدول */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ستون چسبان برای عملیات */
.sticky-col {
    position: sticky;
    right: 0;
    background: inherit;
    z-index: 1;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}

/* استایل‌های موبایل */
@media (max-width: 767px) {
    .action-text {
        display: none;
    }
    
    .action-buttons .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.8rem;
    }
    
    .d-none {
        display: none !important;
    }
    
    .table td, .table th {
        padding: 8px 5px;
        font-size: 0.85rem;
    }
}

/* استایل‌های دسکتاپ */
@media (min-width: 768px) {
    .actions-cell {
        min-width: 150px;
    }
}

.has-error .form-control {
    border-color: #dc3545;
}

.has-error .invalid-feedback {
    display: block;
}

@font-face {
    font-family: 'Shabnam';
    src: url('/font/Shabnam-FD.woff2') format('woff2'),
         url('/font/Shabnam-FD.woff') format('woff');
    font-display: swap;
}
</style>
@stop