@extends('layouts.main')

@section('content')
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-12">
            <!-- زانیاری سەرەکی جەرد -->
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h4>{{ $inventory->name }}</h4>
                      
                         <small class="text-muted" >لۆکەیشن: {{ $inventory->location    }} |   کارمەند: {{ $inventory->user->name }} | بەروار: {{ $inventory->created_at->format('Y-m-d H:i') }}</small>
                    </div>
                    <div>
                        <a href="{{ route('inventory.index') }}"  style="float: left" class="btn btn-secondary m-1 py-1 px-2">
                            <i class="la la-arrow-right"></i> گەڕانەوە
                        </a>
                        <button type="button" class="btn btn-success m-1 py-1 px-2" style="float: left" onclick="completeInventory()">
                            <i class="la la-check"></i> تەواوکردن و ناردن
                        </button>
                    </div>
                </div>
            </div>

            <!-- گەڕان بۆ کاڵا -->
            <div class="card mb-3">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">گەڕان بە کاڵا (بە ناو یان کۆد)</label>
                            <input type="text" 
                                   id="product-search" 
                                   class="form-control" 
                                   placeholder="ناوی کاڵا یان کۆد بنووسە...">
                        </div>
                    </div>
                    
                    <!-- ئەنجامەکانی گەڕان -->
                    <div id="search-results" class="mt-3" style="display: none;">
                        <div class="list-group" id="products-list"></div>
                    </div>
                </div>
            </div>

            <!-- لیستی کاڵاکانی جەرد -->
            <div class="card">
                <div class="card-header p-2">
                    <h6>کاڵاکانی جەرد</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover" id="inventory-items-table">
                            <thead>
                                <tr>
                                    <th style="width:20px; text-align: center;" class="d-none d-md-table-cell">#</th>
                                    <th style="max-width:60px; width:70px; text-align: center;">وێنە</th>
                                    <th style="width:100px; text-align: center;background: #dfdfdf">کۆد</th>
                                    <th style="min-width: 150px;">کاڵا</th> 
                                     <th style="width: 100px;text-align: center">عددی ئێستا</th>
                                    <th style="width: 8%" class="d-none d-md-table-cell">جیاوازی</th>
                                    <th style="width: 17%">تێبینی</th> 
                                    <th style="width: 5%">کردار</th>
                                </tr>
                            </thead>
                            <tbody id="items-tbody">
                                @forelse($inventory->items as $index => $item) 
                                    <tr id="item-row-{{ $item->id }}">
                                        <td class="text-center d-none d-md-table-cell">{{ $item->product->id}}</td>
                                        <td class="text-center">
                                            <img src="{{ $item->product->image }}"  
                                                 style="max-width: 65px; max-height: 65px; object-fit: cover; border-radius: 3px;"
                                                 >
                                        </td>
                                        <td class="text-center" style="background: #dfdfdf;font-weight: bold">{{ $item->product->code }}</td>
                                        <td>{{ $item->product->name }}</td> 
                                        <td class="text-center">
                                            <input type="number" 
                                                   class="form-control current-qty qty_{{ $item->id }}" style="min-width:65px;font-size: 13pt;text-align:center; padding:1px;height:35px;" 
                                                   data-item-id="{{ $item->id }}"
                                                   value="{{ $item->current_qty }}"
                                                   min="0">
                                        </td>
                                        <td class="text-center difference-cell d-none d-md-table-cell" 
                                            data-difference="{{ $item->difference }}"
                                            style="color: {{ $item->difference > 0 ? 'green' : ($item->difference < 0 ? 'red' : 'black') }}">
                                            {{ $item->difference > 0 ? '+' : '' }}{{ $item->difference }}
                                        </td>
                                        <td class="text-center">
                                            <input type="text" 
                                                   class="form-control item-notes notes_{{ $item->id }}"
                                                   style="height:35px;padding:2px; min-width:165px;"
                                                   data-item-id="{{ $item->id }}"
                                                   value="{{ $item->item_notes }}"
                                                   placeholder="تێبینی...">
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-danger" onclick="deleteItem({{ $item->id }})">
                                                <i class="la la-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr id="empty-row">
                                        <td colspan="9" class="text-center">هیچ کاڵایەک زیاد نەکراوە</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal بۆ زیادکردنی کاڵا -->
<div class="modal fade" id="addProductModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">زیادکردنی کاڵا</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">X</button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="selected-product-id">
                <div class="mb-3 text-center">
                    <img id="selected-product-image" 
                         src=" " 
                         alt="Product Image" 
                         style="max-width: 150px; max-height: 150px; object-fit: cover; border-radius: 10px;"
                        >
                </div>
                <div class="mb-3"> 
                    <p id="selected-product-name" class="fw-bold" style="font-weight: bold;text-align:center;font-size:12pt"></p>
                </div>
                <div class="mb-3">
                    <label class="form-label">عددی جەرد</label>
                    <p id="selected-product-old-qty" class="text-info"></p>
                </div>
                <div class="mb-3">
                    <label for="current_qty" class="form-label">عددی جەردکردن *</label>
                    <input type="number" class="form-control" id="current_qty" min="0" required>
                </div>
                <div class="mb-3">
                    <label for="item_notes" class="form-label">تێبینی</label>
                    <textarea class="form-control" id="item_notes" rows="2"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">داخستن</button>
                <button type="button" class="btn btn-primary" onclick="addProduct()">زیادکردن</button>
            </div>
        </div>
    </div>
</div>

<style>
    .difference-cell {
        font-weight: bold;
    }
    
    @media (max-width: 768px) {
        .table-responsive {
            font-size: 0.85rem;
        }
        
        .table th, .table td {
            padding: 0.5rem;
        }
        
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }
    }
</style>

<script>

    document.addEventListener('DOMContentLoaded', function() {
    const hash = window.location.hash;
    
    if (hash) {
        const targetRow = document.querySelector(hash);
        if (targetRow) {
            targetRow.style.transition = 'background-color 0.5s ease';
            targetRow.style.backgroundColor = '#fff3cd';
            
             
        }
    }
});


const inventoryId = {{ $inventory->id }};
let searchTimeout;

// گەڕان بە کاڵا
$('#product-search').on('input', function() {
    clearTimeout(searchTimeout);
    const searchTerm = $(this).val();
    
    if (searchTerm.length < 1) {
        $('#search-results').hide();
        return;
    }
    
    searchTimeout = setTimeout(() => {
        $.ajax({
            url: '{{ route("inventory.search-product") }}',
            method: 'GET',
            data: { search: searchTerm },
            success: function(products) {
                if (products.length > 0) {
                    let html = '';
                    products.forEach(product => {
 
                                    

                    //    var productImage =  product.Image ? 'https://www.dos-shop.com/uploads/'+(product.Image.replace('files/product_image','files/product_image/size_250/'))  : '';


                        html += `
                            <a href="#" class="list-group-item p-2 list-group-item p-2-action" 
                               onclick="selectProduct(${product.id}, '${product.name}', '${product.code}', ${product.qty}, '${product.image || ''}'); return false;">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex align-items-center">
                                            <img src="${product.image}"  
                                             style="margin-right:5px; width: 50px; height: 50px; object-fit: cover; border-radius: 5px; margin-left: 10px;"
                                              >
                                        <div>
                                            <strong>${product.name}</strong>
                                            <br><b class="" style="font-size: 10pt;">کۆد: ${product.code}</b>
                                           <small class="text-muted">حاویە: ${product.supplier}</small>
                                        </div>
                                    </div>
                                    <div class="text-end">
                                        <span class="badge bg-info">عدد: ${product.qty}</span>
                                    </div>
                                </div>
                            </a>
                        `;
                    });
                    $('#products-list').html(html);
                    $('#search-results').show();
                } else {
                    $('#products-list').html('<div class="alert alert-warning">هیچ کاڵایەک نەدۆزرایەوە</div>');
                    $('#search-results').show();
                }
            }
        });
    }, 300);
});

// هەڵبژاردنی کاڵا
function selectProduct(id, name, code, qty, image) {
    $('#selected-product-id').val(id);
    $('#selected-product-name').text(name + ' (' + code + ')');
    $('#selected-product-old-qty').text(qty);
    $('#current_qty').val('');
    $('#item_notes').val('');
    
    // پیشاندانی وێنە لە modal
     $('#selected-product-image').attr('src', image);
    
    $('#search-results').hide();
    $('#product-search').val('');
    
    $('#addProductModal').modal('show');
}

// زیادکردنی کاڵا
function addProduct() {
    const productId = $('#selected-product-id').val();
    const currentQty = $('#current_qty').val();
    const itemNotes = $('#item_notes').val();
    
    if (!currentQty) {
        alert('تکایە عددی ئێستا بنووسە');
        return;
    }
    
    $.ajax({
        url: `./inventory/${inventoryId}/add-item`,
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            product_id: productId,
            current_qty: currentQty,
            item_notes: itemNotes
        },
        success: function(response) {
                console.log(response);
            if (response.success) {
                const item = response.item;
                const difference = item.difference;
                const differenceColor = difference > 0 ? 'green' : (difference < 0 ? 'red' : 'black');
                
                $('#empty-row').remove();
 
                const productImage = item.product.image  ;
                const newRow = `
                    <tr id="item-row-${item.id}">   
                        <td class="text-center d-none d-md-table-cell">${item.product.id}</td>
                        <td class="text-center">
                            <img src="${productImage}"  
                                 style="width: 65px; height: 65px; object-fit: cover; border-radius: 5px;"
                                 >
                        </td>
                        <td class="text-center" style="background: #dfdfdf;font-weight: bold">${item.product.code}</td>
                        <td>${item.product.name}</td> 
                        <td class="text-center">
                            <input type="number" 
                                   class="form-control current-qty qty_${item.id}" 
                                   style="font-size: 13pt;text-align:center; padding:2px;height:40px;" 
                                   data-item-id="${item.id}"
                                   value="${item.current_qty}"
                                   min="0">
                        </td>
                        <td class="text-center difference-cell d-none d-md-table-cell" 
                            data-difference="${difference}"
                            style="color: ${differenceColor}">
                            ${difference > 0 ? '+' : ''}${difference}
                        </td>
                        <td>
                            <input type="text" 
                                   class="form-control item-notes notes_${item.id}" 
                                   data-item-id="${item.id}"
                                   value="${item.item_notes || ''}"
                                   style="height:36px;padding:5px;"
                                   placeholder="تێبینی...">
                        </td>
                        <td>
                            <button class="btn btn-sm btn-danger" onclick="deleteItem(${item.id})">
                                <i class="la la-trash"></i>
                            </button>
                        </td>
                    </tr>
                `;
                
                $('#items-tbody').append(newRow); 

                $('#addProductModal').modal('hide');
            }
        },
        error: function(xhr) {
            alert(xhr.responseJSON?.error || 'هەڵەیەک ڕوویدا');
        }
    });
}

// نوێکردنەوەی عددی ئێستا
$(document).on('input', '.current-qty', function() {
    const itemId = $(this).data('item-id');
    const currentQty = $(this).val();
    const row = $(`#item-row-${itemId}`);
    const oldQty = parseInt(row.find('td:eq(4)').text());
    const difference = currentQty - oldQty;

 
    updateItem(itemId);
    
    const diffCell = row.find('.difference-cell');
    diffCell.text((difference > 0 ? '+' : '') + difference);
    diffCell.attr('data-difference', difference);
    diffCell.css('color', difference > 0 ? 'green' : (difference < 0 ? 'red' : 'black'));
});

// نوێکردنەوەی تێبینی
$(document).on('input', '.item-notes', function() {
    const itemId = $(this).data('item-id');
    const itemNotes = $(this).val();
    
    updateItem(itemId);
});

// فەنکشنی نوێکردنەوە
function updateItem(itemId) {
    
    data = {};
    data._token = '{{ csrf_token() }}';
    data._method = 'PUT';
    data.current_qty = $(`.qty_${itemId}`).val();
    data.item_notes = $(`.notes_${itemId}`).val();
    
    console.log(data);
    $.ajax({
        url: `./inventory/item/${itemId}`,
        method: 'POST',
        data: data,
        success: function(response) {
            // نوێکردنەوە سەرکەوتووبوو
        },
        error: function(xhr) {
            alert('هەڵە لە نوێکردنەوە: ' + (xhr.responseJSON?.error || 'هەڵەیەک ڕوویدا'));
        }
    });
}

// سڕینەوەی بڕگە
function deleteItem(itemId) {
    if (!confirm('دڵنیایت لە سڕینەوەی ئەم بڕگەیە?')) {
        return;
    }
    
    $.ajax({
        url: `./inventory/item/${itemId}`,
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            _method: 'DELETE'
        },
        success: function(response) {
            if (response.success) {
                $(`#item-row-${itemId}`).remove();
                
                if ($('#items-tbody tr').length === 0) {
                    $('#items-tbody').html('<tr id="empty-row"><td colspan="9" class="text-center">هیچ کاڵایەک زیاد نەکراوە</td></tr>');
                }
            }
        },
        error: function(xhr) {
            alert(xhr.responseJSON?.error || 'هەڵەیەک ڕوویدا');
        }
    });
}

// تەواوکردنی جەرد
function completeInventory() {
    if (!confirm('دڵنیایت لە تەواوکردنی ئەم جەردە؟ پاش ئەمە ناتوانیت دەستکاری بکەیت.')) {
        return;
    }
    
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = `./inventory/${inventoryId}/complete`;
    
    const csrfToken = document.createElement('input');
    csrfToken.type = 'hidden';
    csrfToken.name = '_token';
    csrfToken.value = '{{ csrf_token() }}';
    
    form.appendChild(csrfToken);
    document.body.appendChild(form);
    form.submit();
}
</script>
@endsection