

<?php $__env->startSection('title', 'Stock Balances'); ?>

<?php $__env->startPush('styles'); ?>

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">

<style>
    .stock-summary-card {
        transition: transform 0.2s;
    }
    .stock-summary-card:hover {
        transform: translateY(-2px);
    }
</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">Stock Balances</h4>
                        <div class="d-flex justify-content-center gap-3 mb-3">
                            <a href="<?php echo e(route('stocks.index', ['type' => 'FG'])); ?>"
                                class="btn <?php echo e($type === 'FG' ? 'btn-danger' : 'btn-outline-danger'); ?>"
                                style="width:250px;height:50px;font-size:14px;font-weight:600;">
                                <i class="fas fa-box me-2"></i> Stock - Finished Goods
                            </a>

                            <a href="<?php echo e(route('stocks.index', ['type' => 'RM'])); ?>"
                                class="btn <?php echo e($type === 'RM' ? 'btn-danger' : 'btn-outline-danger'); ?>"
                                style="width:250px;height:50px;font-size:14px;font-weight:600;">
                                <i class="fas fa-cubes me-2"></i> Stock - Raw Materials
                            </a>
                        </div>
                    
                </div>
                <div class="card-body">
                    <!-- Filters -->
                    

                    <!-- Stock Summary Cards -->
                    

                    <!-- Stock Summary Cards -->
                    <div class="row mb-4">
                        <div class="col-md-3 my-2">
                            <div class="card bg-primary text-white kpi-card" data-filter="all" style="cursor:pointer; background: linear-gradient(135deg, #4e73df 0%, #224abe 100%) !important; border: none; border-radius: 12px; box-shadow: 0 4px 15px rgba(78,115,223,0.3); transition: all 0.3s ease;">
                                <div class="card-body" style="padding: 1.5rem;">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="card-title" style="font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9; margin-bottom: 0.5rem;">Total Items</h6>
                                            <h3 id="total_items" style="font-size: 2rem; font-weight: 700; margin: 0;color:white"><?php echo e($totalItems); ?></h3>
                                        </div>
                                        <div class="align-self-center" style="background: rgba(255,255,255,0.2); width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                            <i class="fas fa-box fa-2x" style="font-size: 1.5rem;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 my-2">
                            <div class="card bg-success text-white kpi-card" data-filter="in_stock" style="cursor:pointer; background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%) !important; border: none; border-radius: 12px; box-shadow: 0 4px 15px rgba(28,200,138,0.3); transition: all 0.3s ease;">
                                <div class="card-body" style="padding: 1.5rem;">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="card-title" style="font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9; margin-bottom: 0.5rem;">In Stock</h6>
                                            <h3 id="in_stock_count" style="font-size: 2rem; font-weight: 700; margin: 0;color:white"><?php echo e($inStock); ?></h3>
                                        </div>
                                        <div class="align-self-center" style="background: rgba(255,255,255,0.2); width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                            <i class="fas fa-check-circle fa-2x" style="font-size: 1.5rem;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 my-2">
                            <div class="card bg-warning text-white kpi-card" data-filter="low_stock" style="cursor:pointer; background: linear-gradient(135deg, #f6c23e 0%, #dda20a 100%) !important; border: none; border-radius: 12px; box-shadow: 0 4px 15px rgba(246,194,62,0.3); transition: all 0.3s ease;">
                                <div class="card-body" style="padding: 1.5rem;">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="card-title" style="font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9; margin-bottom: 0.5rem;">Low Stock</h6>
                                            <h3 id="low_stock_count" style="font-size: 2rem; font-weight: 700; margin: 0;color:white"><?php echo e($lowStock); ?></h3>
                                        </div>
                                        <div class="align-self-center" style="background: rgba(255,255,255,0.2); width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                            <i class="fas fa-exclamation-triangle fa-2x" style="font-size: 1.5rem;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 my-2">
                            <div class="card bg-danger text-white kpi-card" data-filter="out_of_stock" style="cursor:pointer; background: linear-gradient(135deg, #e74a3b 0%, #be2617 100%) !important; border: none; border-radius: 12px; box-shadow: 0 4px 15px rgba(231,74,59,0.3); transition: all 0.3s ease;">
                                <div class="card-body" style="padding: 1.5rem;">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="card-title" style="font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9; margin-bottom: 0.5rem;">Out of Stock</h6>
                                            <h3 id="out_of_stock_count" style="font-size: 2rem; font-weight: 700; margin: 0;color:white"><?php echo e($outOfStock); ?></h3>
                                        </div>
                                        <div class="align-self-center" style="background: rgba(255,255,255,0.2); width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                            <i class="fas fa-times-circle fa-2x" style="font-size: 1.5rem;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Stock Table -->
                    <div class="table-responsive">
                        <table id="stockTable" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Item</th>
                                    <th>Code</th>
                                    <th>Warehouse</th>
                                    <th>Size</th>
                                    
                                    
                                    
                                    
                                    <th>Available Qty</th>
                                    
                                    
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Export Modal -->
<div class="modal fade" id="exportModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Export Stock Data</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="export_format" class="form-label">Export Format</label>
                    <select id="export_format" class="form-select">
                        <option value="excel">Excel (.xlsx)</option>
                        <option value="csv">CSV</option>
                        <option value="pdf">PDF</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="export_filters" class="form-label">Include Current Filters</label>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="export_filters" checked>
                        <label class="form-check-label" for="export_filters">
                            Apply current filters to export
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="export_data" class="btn btn-primary">Export</button>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script>

let stockTable = null;
let currentType   = '<?php echo e($type); ?>';
let currentFilter = 'all';

const urlParams = new URLSearchParams(window.location.search);

function loadTable(type, filter) {
    currentType   = type;
    currentFilter = filter;

    if (stockTable) {
        stockTable.destroy();
        stockTable = null;
    }

    stockTable = $('#stockTable').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: '<?php echo e(route("stocks.get-data")); ?>',
            data: { type: type, stock_filter: filter }
        },
        dom: '<"d-flex justify-content-between align-items-center mb-3"lf>rt<"d-flex justify-content-between align-items-center mt-3"ip>',
        columns: [
            { data: 'item_name',     name: 'item_name' },
            { data: 'item_code',      name: 'item_code' },
            { data: 'warehouse_name',name: 'warehouse_name' },
            { data: 'size',name: 'size',orderable: false },
            // { data: 'bin_name',      name: 'bin_name',      orderable: false },
            // { data: 'lot_no',        name: 'lot_no',        orderable: false },
            // { data: 'on_hand_qty',   name: 'on_hand_qty' },
            // { data: 'reserved_qty',  name: 'reserved_qty',  orderable: false },
            { data: 'available_qty', name: 'available_qty', orderable: false },
            // { data: 'unit_cost_avg', name: 'unit_cost_avg', orderable: false },
            // { data: 'total_value',   name: 'total_value',   orderable: false },
            { data: 'stock_status',  name: 'stock_status',  orderable: false },
            { data: 'actions',       name: 'actions',       orderable: false, searchable: false }
        ],
        order: [[0, 'asc']],
        pageLength: 25,
        responsive: true,
        language: {
            emptyTable: 'No items found for selected filter.'
        }
    });
}

// KPI card click — filter table
$('.kpi-card').on('click', function() {
    $('.kpi-card').removeClass('active-filter');
    $(this).addClass('active-filter');

    loadTable(currentType, $(this).data('filter'));
});

// Load table on page ready
$(document).ready(function() {

    let initialFilter = urlParams.get('stock_filter') || 'all';

    loadTable(currentType, initialFilter);
});




// $(document).ready(function() {
//     // Initialize DataTable
//     var table = $('#stockTable').DataTable({
//         processing: true,
//         serverSide: false,
//         ajax: {
//             url: '<?php echo e(route("stocks.get-data")); ?>',
//             data: function(d) {
//                 d.item_id = $('#item_filter').val();
//                 d.warehouse_id = $('#warehouse_filter').val();
//                 d.bin_id = $('#bin_filter').val();
//                 d.stock_status = $('#stock_status_filter').val();
//             }
//         },
//         columns: [
//             { data: 'item_name', name: 'item_name' },
//             { data: 'item_sku', name: 'item_sku' },
//             { data: 'warehouse_name', name: 'warehouse_name' },
//             { data: 'bin_name', name: 'bin_name' },
//             { data: 'lot_no', name: 'lot_no' },
//             { data: 'on_hand_qty', name: 'on_hand_qty' },
//             { data: 'reserved_qty', name: 'reserved_qty' },
//             { data: 'available_qty', name: 'available_qty' },
//             { data: 'unit_cost_avg', name: 'unit_cost_avg' },
//             { data: 'total_value', name: 'total_value' },
//             { data: 'stock_status', name: 'stock_status' },
//             { data: 'actions', name: 'actions', orderable: false, searchable: false }
//         ],
//         order: [[0, 'asc']],
//         pageLength: 25,
//         responsive: true
//     });

//     // Apply filters
//     $('#apply_filters').click(function() {
//         table.ajax.reload();
//         updateSummaryCounts();
//     });

//     // Clear filters
//     $('#clear_filters').click(function() {
//         $('#item_filter').val('');
//         $('#warehouse_filter').val('');
//         $('#bin_filter').val('');
//         $('#stock_status_filter').val('');
//         table.ajax.reload();
//         updateSummaryCounts();
//     });

//     // Update summary counts
//     function updateSummaryCounts() {
//         $.ajax({
//             url: '<?php echo e(route("stocks.get-data")); ?>',
//             data: {
//                 item_id: $('#item_filter').val(),
//                 warehouse_id: $('#warehouse_filter').val(),
//                 bin_id: $('#bin_filter').val(),
//                 stock_status: $('#stock_status_filter').val()
//             },
//             success: function(data) {
//                 var totalItems = data.data.length;
//                 var inStock = data.data.filter(item => parseFloat(item.on_hand_qty) > 10).length;
//                 var lowStock = data.data.filter(item => parseFloat(item.on_hand_qty) > 0 && parseFloat(item.on_hand_qty) <= 10).length;
//                 var outOfStock = data.data.filter(item => parseFloat(item.on_hand_qty) <= 0).length;

//                 $('#total_items').text(totalItems);
//                 $('#in_stock_count').text(inStock);
//                 $('#low_stock_count').text(lowStock);
//                 $('#out_of_stock_count').text(outOfStock);
//             }
//         });
//     }

//     // Export functionality
//     $('#export_data').click(function() {
//         var format = $('#export_format').val();
//         var includeFilters = $('#export_filters').is(':checked');

//         var params = new URLSearchParams();
//         params.append('format', format);
//         params.append('include_filters', includeFilters);

//         if (includeFilters) {
//             params.append('item_id', $('#item_filter').val());
//             params.append('warehouse_id', $('#warehouse_filter').val());
//             params.append('bin_id', $('#bin_filter').val());
//             params.append('stock_status', $('#stock_status_filter').val());
//         }

//         window.open('<?php echo e(route("stocks.export")); ?>?' + params.toString(), '_blank');
//         $('#exportModal').modal('hide');
//     });

//     // Initial load
//     updateSummaryCounts();
// });
</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\stocks\index.blade.php ENDPATH**/ ?>