

<?php $__env->startSection('title', 'WMS Demo'); ?>
<?php $__env->startPush('plugin-style'); ?>

<style>
    .bin-item {
        background-color: #f8f9fa;
        transition: all 0.3s ease;
    }

    .bin-item:hover {
        background-color: #e9ecef;
        transform: translateY(-2px);
    }

    .warehouse-item {
        border-left: 4px solid #007bff;
        padding-left: 15px;
    }

    .stock-balance-row {
        border-bottom: 1px solid #dee2e6;
        padding: 8px 0;
    }

    .ledger-entry-row {
        border-bottom: 1px solid #dee2e6;
        padding: 8px 0;
    }
    </style>


<?php $__env->stopPush(); ?>
<?php $__env->startSection('content'); ?>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Warehouse Management System (WMS) Demo</h4>
                    <p class="card-subtitle">Demonstrating the complete workflow: PO → GRN → Inventory Posting → Putaway</p>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <button id="runDemoBtn" class="btn btn-primary btn-lg">
                                <i class="fas fa-play"></i> Run WMS Demo Workflow
                            </button>
                        </div>
                        <div class="col-md-6 text-end">
                            <button id="refreshDataBtn" class="btn btn-secondary">
                                <i class="fas fa-sync"></i> Refresh Data
                            </button>
                        </div>
                    </div>

                    <div id="demoResults" class="d-none">
                        <div class="alert alert-success">
                            <h5><i class="fas fa-check-circle"></i> Demo Completed Successfully!</h5>
                            <p id="demoMessage"></p>
                        </div>
                    </div>

                    <div id="demoError" class="d-none">
                        <div class="alert alert-danger">
                            <h5><i class="fas fa-exclamation-triangle"></i> Demo Failed</h5>
                            <p id="errorMessage"></p>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Stock Balances</h5>
                                </div>
                                <div class="card-body">
                                    <div id="stockBalancesTable">
                                        <div class="text-center">
                                            <div class="spinner-border" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Recent Stock Ledger Entries</h5>
                                </div>
                                <div class="card-body">
                                    <div id="ledgerEntriesTable">
                                        <div class="text-center">
                                            <div class="spinner-border" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Warehouse Structure</h5>
                                </div>
                                <div class="card-body">
                                    <div id="warehouseStructure">
                                        <?php $__currentLoopData = $warehouses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $warehouse): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <div class="warehouse-item mb-3">
                                                <h6><?php echo e($warehouse->name); ?> (<?php echo e($warehouse->code); ?>)</h6>
                                                <div class="row">
                                                    <?php $__currentLoopData = $warehouse->bins; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bin): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                        <div class="col-md-2 mb-2">
                                                            <div class="bin-item p-2 border rounded text-center">
                                                                <strong><?php echo e($bin->code); ?></strong><br>
                                                                <small class="text-muted"><?php echo e(ucfirst($bin->type)); ?></small>
                                                            </div>
                                                        </div>
                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                </div>
                                            </div>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php $__env->stopSection(); ?>
<?php $__env->startPush('plugin-script'); ?>
<script>
// WMS Demo JavaScript - Isolated to avoid conflicts with global error handling
(function() {
    'use strict';

    // Wait for DOM to be ready
    $(document).ready(function() {
        // Initialize the demo
        initWmsDemo();
    });

    function initWmsDemo() {
        // Load initial data
        loadStockBalances();
        loadLedgerEntries();

        // Bind event handlers
        $('#runDemoBtn').off('click').on('click', function(e) {
            e.preventDefault();
            runDemoWorkflow();
        });

        $('#refreshDataBtn').off('click').on('click', function(e) {
            e.preventDefault();
            loadStockBalances();
            loadLedgerEntries();
        });
    }

    function runDemoWorkflow() {
        const $btn = $('#runDemoBtn');
        const $results = $('#demoResults');
        const $error = $('#demoError');

        // Update UI state
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Running Demo...');
        $results.addClass('d-none');
        $error.addClass('d-none');

        // Make AJAX request
        $.ajax({
            url: '<?php echo e(route("wms.demo.workflow")); ?>',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                try {
                    if (response && response.success) {
                        $('#demoMessage').text(response.message || 'Demo completed successfully');
                        $results.removeClass('d-none');

                        // Refresh data after demo
                        setTimeout(function() {
                            loadStockBalances();
                            loadLedgerEntries();
                        }, 1000);
                    } else {
                        $('#errorMessage').text(response.message || 'Demo failed');
                        $error.removeClass('d-none');
                    }
                } catch (e) {
                    console.error('Error processing demo response:', e);
                    $('#errorMessage').text('Error processing demo response');
                    $error.removeClass('d-none');
                }
            },
            error: function(xhr, status, error) {
                console.error('Demo AJAX error:', status, error);
                $('#errorMessage').text('An error occurred while running the demo. Please try again.');
                $error.removeClass('d-none');
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="fas fa-play"></i> Run WMS Demo Workflow');
            }
        });
    }

    function loadStockBalances() {
        const $container = $('#stockBalancesTable');

        $.ajax({
            url: '<?php echo e(route("wms.demo.stock-balances")); ?>',
            method: 'GET',
            success: function(response) {
                try {
                    if (response && response.success) {
                        let html = '';
                        if (response.data && response.data.length > 0) {
                            html = '<div class="table-responsive"><table class="table table-sm">';
                            html += '<thead><tr><th>Item</th><th>Warehouse</th><th>Bin</th><th>On Hand</th><th>Reserved</th><th>Unit Cost</th></tr></thead><tbody>';

                            response.data.forEach(function(balance) {
                                html += '<tr class="stock-balance-row">';
                                html += '<td>' + (balance.item ? balance.item.name : 'N/A') + '</td>';
                                html += '<td>' + (balance.warehouse ? balance.warehouse.name : 'N/A') + '</td>';
                                html += '<td>' + (balance.bin ? balance.bin.code : 'N/A') + '</td>';
                                html += '<td>' + parseFloat(balance.on_hand_qty || 0).toFixed(2) + '</td>';
                                html += '<td>' + parseFloat(balance.reserved_qty || 0).toFixed(2) + '</td>';
                                html += '<td>' + parseFloat(balance.unit_cost_avg || 0).toFixed(2) + '</td>';
                                html += '</tr>';
                            });

                            html += '</tbody></table></div>';
                        } else {
                            html = '<p class="text-muted">No stock balances found.</p>';
                        }
                        $container.html(html);
                    } else {
                        $container.html('<p class="text-danger">Failed to load stock balances.</p>');
                    }
                } catch (e) {
                    console.error('Error processing stock balances:', e);
                    $container.html('<p class="text-danger">Error processing stock balances.</p>');
                }
            },
            error: function(xhr, status, error) {
                console.error('Stock balances AJAX error:', status, error);
                $container.html('<p class="text-danger">Failed to load stock balances.</p>');
            }
        });
    }

    function loadLedgerEntries() {
        const $container = $('#ledgerEntriesTable');

        $.ajax({
            url: '<?php echo e(route("wms.demo.ledger-entries")); ?>',
            method: 'GET',
            success: function(response) {
                try {
                    if (response && response.success) {
                        let html = '';
                        if (response.data && response.data.length > 0) {
                            html = '<div class="table-responsive"><table class="table table-sm">';
                            html += '<thead><tr><th>Date</th><th>Type</th><th>Item</th><th>Bin</th><th>Qty In</th><th>Qty Out</th><th>Unit Cost</th></tr></thead><tbody>';

                            response.data.forEach(function(entry) {
                                html += '<tr class="ledger-entry-row">';
                                html += '<td>' + new Date(entry.occurred_at).toLocaleString() + '</td>';
                                html += '<td><span class="badge bg-info">' + (entry.txn_type || 'UNKNOWN').toUpperCase() + '</span></td>';
                                html += '<td>' + (entry.item ? entry.item.name : 'N/A') + '</td>';
                                html += '<td>' + (entry.bin ? entry.bin.code : 'N/A') + '</td>';
                                html += '<td>' + parseFloat(entry.qty_in || 0).toFixed(2) + '</td>';
                                html += '<td>' + parseFloat(entry.qty_out || 0).toFixed(2) + '</td>';
                                html += '<td>' + parseFloat(entry.unit_cost || 0).toFixed(2) + '</td>';
                                html += '</tr>';
                            });

                            html += '</tbody></table></div>';
                        } else {
                            html = '<p class="text-muted">No ledger entries found.</p>';
                        }
                        $container.html(html);
                    } else {
                        $container.html('<p class="text-danger">Failed to load ledger entries.</p>');
                    }
                } catch (e) {
                    console.error('Error processing ledger entries:', e);
                    $container.html('<p class="text-danger">Error processing ledger entries.</p>');
                }
            },
            error: function(xhr, status, error) {
                console.error('Ledger entries AJAX error:', status, error);
                $container.html('<p class="text-danger">Failed to load ledger entries.</p>');
            }
        });
    }
})();
</script>
<?php $__env->stopPush(); ?>


<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\habibcables-ERP\resources\views\wms\demo.blade.php ENDPATH**/ ?>