@extends('layouts.app')
@section('title', __('Smartinventory::inventory.inventory'))
@section('css')
<style>
    .scan-btn {
    display: flex;
    align-items: center;
    gap: 6px; /* space between icon and text */
    padding: 6px 12px;
    background-color: #28a745; /* green */
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Hover effect */
.scan-btn:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* Active / click effect */
.scan-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

/* Icon styling */
.scan-btn i {
    font-size: 16px;
}
</style>
<style>
/* Modal overlay like SweetAlert */
.custom-swal {
    display: none;
    position: fixed;
    z-index: 9999;
    left:0; top:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}



.custom-swal-content {
    background:#fff;
    border-radius: 10px;
    width: 300px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Title like SweetAlert */
.custom-swal-title {
    margin:0 0 10px 0;
    font-size: 18px;
    color: #333;
}

/* Scan line */
.scan-line {
    position: absolute;
    top:50%;
    left: 10%;
    width:80%;
    height:2px;
    background: rgba(255,0,0,0.8);
    animation: scanLine 0.8s infinite;
}

/* Cancel button like SweetAlert */
.custom-swal-cancel {
    margin-top: 15px;
    background:#d33;
    color:#fff;
    border:none;
    border-radius:5px;
    padding:8px 15px;
    cursor:pointer;
    font-size:14px;
}
#purchase_entry_table td {
    white-space: nowrap;  /* keep content on one line if needed */
    min-width: 120px;     /* optional: prevent it from being too small */
}
.custom-swal {
    display: none; /* hidden by default */
}
@keyframes scanLine {
    0% { transform: translateY(-50%); }
    50% { transform: translateY(50%); }
    100% { transform: translateY(-50%); }
}
</style>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.13.1/datatables.min.css"/>
    <link rel="stylesheet" type="text/css" href="{{ url('css/inventory.css') }}"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
@endsection

@section('content')

    <section class="content-header">
        <h1>@lang('Smartinventory::inventory.stock_inventory')</h1>
    </section>

    <section class="content">
      
        <div class="box-body">
          <div class="row">
                <div class="modal fade" id="importExcelModal">
                    <div class="modal-dialog">
                        <form id="importExcelForm" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="inventory_id" value="{{ $inventories->id }}">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4>استيراد جرد من Excel</h4>
                                </div>
                                <div class="modal-body">
                                    <input type="file" name="file" accept=".xlsx,.xls" required>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" id="importSubmitBtn" class="btn btn-success">استيراد</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>


                <div class="col-sm-8 col-sm-offset-2">
                    <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-search"></i>
                        </span>
                        {!! Form::text('search_product', null, [
                            'class' => 'form-control',
                            'id' => 'search_product_inventory',
                            'placeholder' => __('stock_adjustment.search_products'),
                        ]) !!}
                        <span class="input-group-btn">
                            <button type="button" id="scan_barcode_btn" class="scan-btn">
                                <i class="fa fa-barcode"></i>
                            </button>
                        </span>
                    </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <input type="hidden" id="product_row_index" value="0">
                    <input type="hidden" id="total_amount" name="final_total" value="0">
                    <div class="table-responsive">

                    </div>
                </div>
                <div class="clearfix"></div>

            </div>
        </div>
     <div class="table-responsive">
        <table id="purchase_entry_table" class="display nowrap table table-bordered table-hover table-th-green" style="width:100%">
            <thead>
            <tr> 
                <th  style="text-align: right">@lang("Smartinventory::inventory.product_name")</th> 
                <th  style="text-align: right">@lang("Smartinventory::inventory.product_barcode")</th> 
                <th  style="text-align: right">@lang("role.unit")</th> 
                 <th  style="text-align: right">@lang("Smartinventory::inventory.amount_after_inventory")</th> 
                  <th  style="text-align: right">@lang("lang_v1.expiry_date")</th> 
                <th class=" @cannot('Smartinventory.current_qty')
                    hide
                @endcannot" style="text-align: right">@lang("Smartinventory::inventory.current_amount")</th> 
               
               
                <th class=" @cannot('Smartinventory.deference_qty')
                    hide
                @endcannot" style="text-align: right">@lang("Smartinventory::inventory.amount_difference")</th> 
               
                <th  style="text-align: right">@lang("Smartinventory::inventory.options")</th> 
 
            </tr>

            </thead>
           <tbody>

          @include("Smartinventory::partials.tableRowForListing" , [$inventories , $quantityProductsArray,$products])
           </tbody>

        </table>
    </div>
            <div class="bg-gray p-10 text-center">
                <button type="button" id="saveProducts" class="btn btn-danger">
                    @lang('Smartinventory::inventory.save')
                </button>
                <button type="button" id="exportExcelBtn" class="btn btn-primary" style="margin-right: 10px;">
                    <i class="fa fa-download"></i> تصدير إلى Excel
                </button>
                <a href="{{ asset('files/inventory_import_template.xlsx') }}" class="btn btn-info" download style="margin-right: 10px;">
                    <i class="fa fa-download"></i> تحميل قالب الاستيراد
                </a>
                <button class="btn btn-success" data-toggle="modal" data-target="#importExcelModal" style="margin-right: 10px;">
                    <i class="fa fa-file-excel"></i> استيراد من Excel
                </button>
            </div>
            <!-- Hidden scanner section (will show only when button clicked) -->
        <div id="scanner-container" class="text-center" style="display:none;">
            <div id="reader" style="width: 300px; margin: 10px auto;"></div>
            <button id="stopScannerBtn" class="btn btn-danger btn-sm">✖ {{ __('Close Scanner') }}</button>
        </div>

<div id="barcodeModal" class="custom-swal">
    <div class="custom-swal-content">
        <h3 class="custom-swal-title">ROOT</h3>
        <video id="video" autoplay muted playsinline style="width:100%; height:160px; object-fit:cover; border-radius:5px;"></video>
        <div class="scan-line"></div>
        <button class="custom-swal-cancel">إلغاء</button>
    </div>
</div>
    </section>
@endsection

@include("Smartinventory::partials.modals.editProductInventoryModal")
@section('javascript')
<script type="text/javascript">
  
        $(document).ready(function () {
             function initExpiryPickers() {
                $('.expiry-picker').each(function () {
                    if (!$(this).data('DateTimePicker')) {
                        $(this).datetimepicker({
                            format: moment_date_format,
                            useCurrent: false,
                        });
                    }
                })
                 // For eonasdan/Bootstrap-datetimepicker: event name 'dp.show'
                .on('dp.show', function () {
                    // move the widget to body so it's not clipped by ancestors
                    $('.bootstrap-datetimepicker-widget').appendTo('body');
                })
                // some implementations use 'show' without dp prefix — cover both
                .on('show', function () {
                    $('.bootstrap-datetimepicker-widget').appendTo('body');
                });
            }

            initExpiryPickers(); // Initial load
            const table = document.getElementById('purchase_entry_table');

            const observer = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.addedNodes.length) {
                        initExpiryPickers();
                    }
                });
            });

            observer.observe(table, {
                childList: true,
                subtree: true
            });
            $(document).on('click', '#saveProducts', function() {
            $(this).attr('disabled', true); // Disable button

            // Your save logic here, e.g., AJAX request
        });
            $('#example').DataTable({
                columnDefs: [
                    {
                        targets: [0],
                        orderData: [0, 1],
                    },
                    {
                        targets: [1],
                        orderData: [1, 0],
                    },
                    {
                        targets: [4],
                        orderData: [4, 0],
                    },
                ],
            });
        });
        
</script>
<script src="{{ asset('js/purchase.js?v=' . $asset_v) }}"></script>

    @include('Smartinventory::partials.mainscript')

  
    <script type="text/javascript">__page_leave_confirmation('#purchase_return_form');</script>
    {{-- <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> --}}

<script src="https://unpkg.com/@zxing/library@latest"></script>
<script>
let codeReader;
let stream;

const modal = document.getElementById("barcodeModal");
const video = document.getElementById("video");
const cancelBtn = modal.querySelector(".custom-swal-cancel");

// Open modal and start scanning
$('#scan_barcode_btn').on('click', async function() {
    modal.style.display = "flex";
    codeReader = new ZXing.BrowserBarcodeReader();

    try {
        stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
        video.srcObject = stream;
        await video.play();

        const result = await codeReader.decodeOnceFromVideoDevice(undefined, video);

        // Fill input and trigger autocomplete
        $('#search_product_inventory').val(result.text).autocomplete('search', result.text);

        // Stop scanner and close modal
        if(stream) stream.getTracks().forEach(track=>track.stop());
        codeReader.reset();
        modal.style.display = "none";

    } catch(err) {
        console.error(err);
      toastr.error('تعذر الوصول إلى الكاميرا أو قراءة الباركود');
        modal.style.display = "none";
        if(stream) stream.getTracks().forEach(track=>track.stop());
        if(codeReader) codeReader.reset();
    }
});

// Cancel button closes modal and stops camera
cancelBtn.onclick = () => {
    if(stream) stream.getTracks().forEach(track=>track.stop());
    if(codeReader) codeReader.reset();
    modal.style.display = "none";
}

// Click outside content closes modal
window.onclick = (event) => {
    if(event.target === modal){
        if(stream) stream.getTracks().forEach(track=>track.stop());
        if(codeReader) codeReader.reset();
        modal.style.display = "none";
    }
}
</script>
<script>
    $('#importExcelForm').on('submit', function(e){
    e.preventDefault();

    let importBtn = $('#importSubmitBtn');
    importBtn.attr('disabled', true);

    let formData = new FormData(this);

    $.ajax({
        url: "{{ route('inventory.preview.excel') }}",
        method: "POST",
        data: formData,
        processData: false,
        contentType: false,

        success: function(res){
        let tbody = $('#purchase_entry_table tbody');
        
        // لا نقوم بمسح الصفوف القديمة
        // tbody.empty(); <-- إزالة هذا السطر

        // أولاً نجمع الأسطر المكررة داخل الملف نفسه حسب variation_id
        let aggregated = {};
        res.rows.forEach(function(row){
            let vid = row.variation_id;
            let qty = parseFloat(row.qty_after) || 0;
            if (!aggregated[vid]) {
                aggregated[vid] = Object.assign({}, row);
                aggregated[vid].qty_after = qty;
                // keep expiry from this row for now
                aggregated[vid].expiry_date = row.expiry_date || '';
            } else {
                // sum quantities
                aggregated[vid].qty_after = (parseFloat(aggregated[vid].qty_after) || 0) + qty;
                // take expiry from the later row (overwrite) -> last row wins
                aggregated[vid].expiry_date = row.expiry_date || aggregated[vid].expiry_date;
            }
        });

        // الآن نضيف أو نحدِّث الأسطر في الجدول بناءً على التجميع
        Object.keys(aggregated).forEach(function(vid){
            let row = aggregated[vid];
            let addQty = parseFloat(row.qty_after) || 0;

            // حاول إيجاد السطر في الجدول الحالي
            let existingTr = tbody.find('tr#' + vid);
            if (existingTr.length) {
                // تحديث قيمة الكمية بعد الجرد بجمع القيمتين
                let input = $('#productAfterInventory_' + vid);
                let currentVal = parseFloat(input.val()) || 0;
                let newVal = currentVal + addQty;
                input.val(newVal);

                // تحديث فرق الكمية (difference = newVal - current_qty)
                let currentQty = parseFloat($('#qty_' + vid).text()) || 0;
                let diff = newVal - currentQty;
                $('#differance_' + vid).text(diff);

                // إذا كان هناك تاريخ انتهاء جديد من الملف وقيمة الخلية الحالية فارغة فضعها
                if (row.expiry_date) {
                    let expiryInput = $('#expiry_date' + vid);
                    if (expiryInput.length && !expiryInput.val()) {
                        // حاول تنسيق التاريخ كما في السابق
                        let expiryValue = row.expiry_date || '';
                        if (expiryValue && moment) {
                            let parsedDate = moment(expiryValue, ['YYYY-MM-DD', 'DD/MM/YYYY', 'MM/DD/YYYY'], true);
                            if (parsedDate.isValid()) {
                                expiryValue = parsedDate.format(moment_date_format);
                            }
                        }
                        expiryInput.val(expiryValue);
                    }
                }
            } else {
                // لم يكن موجودًا، فأنشئ سطر جديد بكميات المجموع
                let expiryValue = row.expiry_date || '';
                if (expiryValue && moment) {
                    let parsedDate = moment(expiryValue, ['YYYY-MM-DD', 'DD/MM/YYYY', 'MM/DD/YYYY'], true);
                    if (parsedDate.isValid()) {
                        expiryValue = parsedDate.format(moment_date_format);
                    }
                }

                let tr = `
                    <tr id="${row.variation_id}">
                        <td id="name_${row.variation_id}">${row.name}</td>
                        <td>${row.barcode}</td>
                        <td id="productunit_${row.variation_id}">
                            <select id="productSelectUnit_${row.variation_id}" class="form-control" disabled>
                                <option value="${row.unit_id}">${row.unit}</option>
                            </select>
                        </td>
                        <td>
                            <input type="number" class="form-control" id="productAfterInventory_${row.variation_id}" value="${row.qty_after}">
                            <input type="hidden" name="product_id" value="${row.product_id}">
                            <input type="hidden" name="variation_id" value="${row.variation_id}">
                            <input type="hidden" name="unit_id" value="${row.unit_id}">
                        </td>
                        <td id="expiry_date_${row.variation_id}">
                            <input type="text" class="form-control expiry-picker" id="expiry_date${row.variation_id}" name="expiry_date" value="${expiryValue}">
                        </td>
                        <td id="qty_${row.variation_id}">${row.current_qty}</td>
                        <td id="differance_${row.variation_id}">${(parseFloat(row.qty_after) || 0) - (parseFloat(row.current_qty) || 0)}</td>
                        <td>
                            <button class="btn btn-danger btn-sm delete_row">✖</button>
                        </td>
                    </tr>
                `;

                tbody.append(tr);
            }
        });

        // إعادة تهيئة الـ DateTimePicker بعد إضافة الصفوف الجديدة
        if(typeof initExpiryPickers === 'function'){
            initExpiryPickers();
        }

        $('#importExcelModal').modal('hide');
        importBtn.attr('disabled', false);
        toastr.success('تم تحميل البيانات من ملف Excel');
    },
        error: function(xhr){
            importBtn.attr('disabled', false);
            toastr.error(xhr.responseJSON.error);
        }
    });
});

// تصدير البيانات الحالية إلى Excel أو CSV
$('#exportExcelBtn').on('click', function(){
    // محاولة استخدام XLSX إذا كانت محملة
    if (typeof XLSX !== 'undefined') {
        executeExcelExportXLSX();
    } else {
        // الطريقة البديلة بدون إنترنت - CSV
        executeExcelExportCSV();
    }
});

// طريقة الإصدار باستخدام XLSX (إذا كانت محملة)
function executeExcelExportXLSX() {
    let tableData = [];
    // جميع أعمدة الجدول ما عدا الخيارات
    let headers = ['اسم المنتج', 'الباركود', 'الوحدة', 'الكمية بعد الجرد', 'تاريخ انتهاء الصلاحية'];
    
    // التحقق من وجود أعمدة الصلاحيات
    let hasCurrentQty = !$('#purchase_entry_table th').eq(5).hasClass('hide');
    let hasDifference = !$('#purchase_entry_table th').eq(6).hasClass('hide');
    
    if (hasCurrentQty) headers.push('الكمية الحالية');
    if (hasDifference) headers.push('فرق الكمية');
    
    tableData.push(headers);
    
    $('#purchase_entry_table tbody tr').each(function(){
        let row = [];
        let variation_id = $(this).attr('id');
        
        if (!variation_id) return;
        
        // اسم المنتج
        row.push($(this).find('td').eq(0).text().trim());
        // الباركود - حفظه كنص لتجنب حذف الأصفار
        let barcode = $(this).find('td').eq(1).text().trim();
        row.push(barcode);
        // الوحدة
        row.push($(this).find('td').eq(2).text().trim());
        // الكمية بعد الجرد
        row.push($('#productAfterInventory_' + variation_id).val());
        // تاريخ انتهاء الصلاحية
        row.push($('#expiry_date' + variation_id).val());
        
        // الكمية الحالية (إن وجدت الصلاحية)
        if (hasCurrentQty) {
            row.push($(this).find('td').eq(5).text().trim());
        }
        // فرق الكمية (إن وجدت الصلاحية)
        if (hasDifference) {
            row.push($(this).find('td').eq(6).text().trim());
        }
        
        tableData.push(row);
    });
    
    if (tableData.length <= 1) {
        toastr.error('لا توجد بيانات لتصديرها');
        return;
    }
    
    try {
        let worksheet = XLSX.utils.aoa_to_sheet(tableData);
        let workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "Inventory");
        
        // تنسيق الأعمدة
        let colWidths = [25, 15, 10, 15, 20];  // الأعمدة الأساسية
        if (hasCurrentQty) colWidths.push(15);
        if (hasDifference) colWidths.push(15);
        
        worksheet['!cols'] = colWidths.map(width => ({wch: width}));
        
        // تنسيق الباركود ليظهر كنص
        for (let i = 2; i < tableData.length; i++) {
            let cellRef = 'B' + (i + 1);
            if (worksheet[cellRef]) {
                worksheet[cellRef].t = 's'; // نص
                worksheet[cellRef].z = '@'; // صيغة نص
            }
        }
        
        XLSX.writeFile(workbook, 'inventory_' + new Date().getTime() + '.xlsx');
        toastr.success('تم تصدير البيانات بنجاح');
    } catch (error) {
        console.error('خطأ في التصدير:', error);
        toastr.error('حدث خطأ أثناء التصدير');
    }
}

// طريقة بديلة - تصدير CSV (بدون الحاجة للإنترنت)
function executeExcelExportCSV() {
    let csv = [];
    let headers = ['اسم المنتج', 'الباركود', 'الوحدة', 'الكمية بعد الجرد', 'تاريخ انتهاء الصلاحية'];
    
    // التحقق من وجود أعمدة الصلاحيات
    let hasCurrentQty = !$('#purchase_entry_table th').eq(5).hasClass('hide');
    let hasDifference = !$('#purchase_entry_table th').eq(6).hasClass('hide');
    
    if (hasCurrentQty) headers.push('الكمية الحالية');
    if (hasDifference) headers.push('فرق الكمية');
    
    // إضافة الرأس
    csv.push(headers.map(h => '"' + h + '"').join(','));
    
    // إضافة البيانات
    $('#purchase_entry_table tbody tr').each(function(){
        let row = [];
        let variation_id = $(this).attr('id');
        
        if (!variation_id) return;
        
        // اسم المنتج
        row.push($(this).find('td').eq(0).text().trim());
        // الباركود - اجعله صيغة Excel نصية مثل ="0123" حتى يحفظ الأصفار البادئة
        let barcode = '="' + $(this).find('td').eq(1).text().trim() + '"';
        row.push(barcode);
        // الوحدة
        row.push($(this).find('td').eq(2).text().trim());
        // الكمية بعد الجرد
        row.push($('#productAfterInventory_' + variation_id).val());
        // تاريخ انتهاء الصلاحية
        row.push($('#expiry_date' + variation_id).val());
        
        // الكمية الحالية (إن وجدت الصلاحية)
        if (hasCurrentQty) {
            row.push($(this).find('td').eq(5).text().trim());
        }
        // فرق الكمية (إن وجدت الصلاحية)
        if (hasDifference) {
            row.push($(this).find('td').eq(6).text().trim());
        }
        
        // إضافة الصف مع معالجة الفواصل والنصوص
        csv.push(row.map(cell => '"' + (cell || '').toString().replace(/"/g, '""') + '"').join(','));
    });
    
    if (csv.length <= 1) {
        toastr.error('لا توجد بيانات لتصديرها');
        return;
    }
    
    // إنشاء ملف CSV
    let csvContent = 'data:text/csv;charset=utf-8,\uFEFF' + csv.join('\n');
    let encodedUri = encodeURI(csvContent);
    let link = document.createElement('a');
    link.setAttribute('href', encodedUri);
    link.setAttribute('download', 'inventory_' + new Date().getTime() + '.csv');
    document.body.appendChild(link);
    
    link.click();
    document.body.removeChild(link);
    
    toastr.success('تم تصدير البيانات بنجاح');
}
</script>
@endsection